From 413da9b0e943b373c1fb8f714b8725f910912bf4 Mon Sep 17 00:00:00 2001
From: Lukas <m@hler.eu>
Date: Sat, 4 Sep 2021 14:44:54 +0200
Subject: [PATCH] make sticky footer / background for every page
---
djlearn/pages/static/css/landing.css | 70 ++++++++++++++++++------
djlearn/pages/templates/pages/index.html | 53 ++++++++++--------
2 files changed, 85 insertions(+), 38 deletions(-)
diff --git a/djlearn/pages/static/css/landing.css b/djlearn/pages/static/css/landing.css
index 8fb6f2c..40bf86f 100644
--- a/djlearn/pages/static/css/landing.css
+++ b/djlearn/pages/static/css/landing.css
@@ -3,17 +3,24 @@ body {
margin: 0;
overflow-x: hidden;
color: white;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
::-webkit-scrollbar {
display: none;
}
-.landing-main {
+.landing-bg {
background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed;
background-size: cover;
}
+.landing-main-text {
+ text-align: center;
+}
+
.landing-section {
min-height: 100vh;
width: 100vw;
@@ -24,8 +31,6 @@ body {
}
.landing-section-content {
- padding: 2rem 0 2rem 0;
- background: rgba(0,0,0,0.5);
width: 100vw;
display: flex;
align-items: center;
@@ -34,6 +39,49 @@ body {
color: #ccc;
}
+.landing-section-content-inner {
+ width: 100vw;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ color: #ccc;
+}
+
+/*
+.landing-features {
+ background: ;
+}
+
+.landing-feature {
+
+}
+*/
+
+.shade {
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0,0,0,0.5);
+}
+
+footer {
+ width: 100vw;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.75rem;
+ position: absolute;
+ bottom: 0;
+}
+
+footer p {
+ margin: 0.5em;
+}
+
.brand {
margin: 0;
color: #c55e00;
@@ -47,17 +95,14 @@ body {
.header {
width: 100vw;
display: flex;
- top: 0;
- left: 0;
+ flex-direction: row;
position: absolute;
-
- background: rgba(0,0,0,0.5);
}
.header-link {
margin: 1rem;
border-bottom: 3px solid #c55e00;
- font-size: 1.2rem;
+ font-size: 1rem;
color: #222;
text-decoration: none;
color: #ccc;
@@ -65,18 +110,11 @@ body {
.header-text {
margin: 1rem 1rem 1rem auto;
- font-size: 1.2rem;
- color: #ccc;
-}
-
-.header-text-small {
- margin: 1rem;
- font-size: 0.75rem;
+ font-size: 1rem;
color: #ccc;
}
#logo {
- padding: 3px 0 0 0;
width: 50px;
height: 50px;
}
\ No newline at end of file
diff --git a/djlearn/pages/templates/pages/index.html b/djlearn/pages/templates/pages/index.html
index 75ec9c0..53e289c 100644
--- a/djlearn/pages/templates/pages/index.html
+++ b/djlearn/pages/templates/pages/index.html
@@ -12,41 +12,50 @@
<body>
- <header class="header">
+ <header class="header shade">
<div>
- <a href="/"><img id="logo" src="{% static 'img/logo.png' %}" alt="Logo"></a>
-
+ <a href="/"><img id="logo" src="{% static 'img/logo.png' %}" alt="Logo"></a>
</div>
- <div class="header-text-small">made using Django❤️</div>
<div class="header-text">Sign in:</div>
<a href="#" class="header-link">Github</a>
<a href="#" class="header-link">Twitter</a>
</header>
- <section class="landing-section landing-main">
+ <section class="landing-section landing-bg">
<div class="landing-section-content">
- <h1 class="brand">Lyux</h1>
- <h2>
- <span class="brand-text">Land</span>ing
- <span class="brand-text">Pa</span>ge
- </h2>
- <p class="landing-main-text">
- This is my first landing Page
- <br>
- I can do everything i want here.
- </p>
+ <div class="landing-section-content-inner shade">
+ <h1 class="brand">PyHub</h1>
+ <h2>
+ <span class="brand-text">Land</span>ing
+ <span class="brand-text">Pa</span>ge
+ </h2>
+ <p class="landing-main-text">
+ This is the PyHub landing Page
+ <br>
+ I can and will do everything i want here.
+ </p>
+ </div>
</div>
</section>
- <section class="landing-section landing-features">
+ <footer>
+ <div>
+ <p>made using Django ❤️</p>
+ </div>
+ </footer>
- <section class="landing-feature feature-github">
- <h2>Connect with <span class="brand-text">Github</span></h2>
- </section>
- <section class="landing-feature feature-twitter">
- <h2>Connect with <span class="brand-text">Twitter</span></h2>
- </section>
+ <section class="landing-section landing-bg">
+
+ <div class="shade">
+ <section class="landing-feature">
+ <h2>Connect with <span class="brand-text">Github</span></h2>
+ </section>
+
+ <section class="landing-feature">
+ <h2>Connect with <span class="brand-text">Twitter</span></h2>
+ </section>
+ </div>
</section>