JPT
/
shorturl
0
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Begin crafting bootstrap templates

This commit is contained in:
Jan Philipp Timme 2020-11-01 15:00:40 +01:00
parent a0ff6fe601
commit abf8c36796
Signed by: JPT
GPG Key ID: 5F2C85EC6F3754B7
3 changed files with 95 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
shorturl/settings.py
View File

@ -117,3 +117,7 @@ USE_TZ = True
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
BASE_DIR / "shorturl" / "static",
]

37
shorturl/static/sticky-footer.css Normal file
View File

@ -0,0 +1,37 @@
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
line-height: 60px; /* Vertically center the text there */
background-color: #f5f5f5;
}
/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */
body > .container {
padding: 60px 15px 0;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
code {
font-size: 80%;
}

55
shorturl/templates/index.html
View File

@ -1,10 +1,63 @@
{% load static %}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello World!</title>
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{% static "favicon.ico" %}">
<link rel="stylesheet" href="{% static "sticky-footer.css" %}">
<link rel="stylesheet" href="{% static "bootstrap.min.css" %}">
</head>
<body>
Hello World!
<header>
<div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<h5 class="my-0 mr-md-auto font-weight-normal">Company name</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Features</a>
<a class="p-2 text-dark" href="#">Enterprise</a>
<a class="p-2 text-dark" href="#">Support</a>
<a class="p-2 text-dark" href="#">Pricing</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
</header>
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<h1 class="display-4">Shorturl Service</h1>
<p class="lead">Get your own shorturl here!</p>
</div>
<div class="container">
<div class="card-deck mb-1 text-center">
<div class="card mb-1 shadow-sm">
<div class="card-header">
<h4 class="my-0 font-weight-normal">Huhu</h4>
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
<li>Help center access</li>
</ul>
<button type="button" class="btn btn-lg btn-block btn-primary">Contact us</button>
</div>
</div>
</div> <!-- .card-deck -->
</div> <!-- .container -->
<footer class="footer">
<div class="container">
<span class="text-muted">Place sticky footer content here.</span>
</div>
</footer>
</body>
</html>