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

Introduce very basic template extension

This commit is contained in:
Jan Philipp Timme 2020-11-01 17:39:10 +01:00
parent abf8c36796
commit c94cbe3722
Signed by: JPT
GPG Key ID: 5F2C85EC6F3754B7
3 changed files with 69 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
shorturl/templates/base-layout.html Normal file
View File

@ -0,0 +1,38 @@
{% 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>
<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">Shorturl service</h5>
<nav class="my-2 my-md-0 mr-md-3">
<a class="p-2 text-dark" href="#">Liste</a>
</nav>
<a class="btn btn-outline-primary" href="#">Sign up</a>
</div>
</header>
<div class="container">
{% block container %}
{% endblock %}
</div> <!-- .container -->
<footer class="footer">
<div class="container">
<span class="text-muted">Diese Seite wurde mit Django gebaut.</span>
</div>
</footer>
</body>
</html>

24
shorturl/templates/card.html Normal file
View File

@ -0,0 +1,24 @@
{% extends "base-layout.html" %}
{% block 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 -->
{% endblock %}

64
shorturl/templates/index.html
View File

@ -1,63 +1,9 @@
{% 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>
{% extends "base-layout.html" %}
{% block container %}
<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">
<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>
<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>
{% endblock %}