lm
/
Django-Learn
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make sticky footer / background for every page

This commit is contained in:
Lukas 2021-09-04 14:44:54 +02:00
parent 9208149749
commit 413da9b0e9
2 changed files with 85 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
djlearn/pages/static/css/landing.css
View File

@ -3,17 +3,24 @@ body {
margin: 0; margin: 0;
overflow-x: hidden; overflow-x: hidden;
color: white; color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
.landing-main { .landing-bg {
background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed; background: url("/static/img/nasa_splash.jpg") no-repeat center center fixed;
background-size: cover; background-size: cover;
} }
.landing-main-text {
text-align: center;
}
.landing-section { .landing-section {
min-height: 100vh; min-height: 100vh;
width: 100vw; width: 100vw;
@ -24,8 +31,6 @@ body {
} }
.landing-section-content { .landing-section-content {
padding: 2rem 0 2rem 0;
background: rgba(0,0,0,0.5);
width: 100vw; width: 100vw;
display: flex; display: flex;
align-items: center; align-items: center;
@ -34,6 +39,49 @@ body {
color: #ccc; 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 { .brand {
margin: 0; margin: 0;
color: #c55e00; color: #c55e00;
@ -47,17 +95,14 @@ body {
.header { .header {
width: 100vw; width: 100vw;
display: flex; display: flex;
top: 0; flex-direction: row;
left: 0;
position: absolute; position: absolute;
background: rgba(0,0,0,0.5);
} }
.header-link { .header-link {
margin: 1rem; margin: 1rem;
border-bottom: 3px solid #c55e00; border-bottom: 3px solid #c55e00;
font-size: 1.2rem; font-size: 1rem;
color: #222; color: #222;
text-decoration: none; text-decoration: none;
color: #ccc; color: #ccc;
@ -65,18 +110,11 @@ body {
.header-text { .header-text {
margin: 1rem 1rem 1rem auto; margin: 1rem 1rem 1rem auto;
font-size: 1.2rem; font-size: 1rem;
color: #ccc;
}
.header-text-small {
margin: 1rem;
font-size: 0.75rem;
color: #ccc; color: #ccc;
} }
#logo { #logo {
padding: 3px 0 0 0;
width: 50px; width: 50px;
height: 50px; height: 50px;
} }

29
djlearn/pages/templates/pages/index.html
View File

@ -12,41 +12,50 @@
<body> <body>
<header class="header"> <header class="header shade">
<div> <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>
<div class="header-text-small">made using Django❤️</div>
<div class="header-text">Sign in:</div> <div class="header-text">Sign in:</div>
<a href="#" class="header-link">Github</a> <a href="#" class="header-link">Github</a>
<a href="#" class="header-link">Twitter</a> <a href="#" class="header-link">Twitter</a>
</header> </header>
<section class="landing-section landing-main"> <section class="landing-section landing-bg">
<div class="landing-section-content"> <div class="landing-section-content">
<h1 class="brand">Lyux</h1> <div class="landing-section-content-inner shade">
<h1 class="brand">PyHub</h1>
<h2> <h2>
<span class="brand-text">Land</span>ing <span class="brand-text">Land</span>ing
<span class="brand-text">Pa</span>ge <span class="brand-text">Pa</span>ge
</h2> </h2>
<p class="landing-main-text"> <p class="landing-main-text">
This is my first landing Page This is the PyHub landing Page
<br> <br>
I can do everything i want here. I can and will do everything i want here.
</p> </p>
</div> </div>
</div>
</section> </section>
<section class="landing-section landing-features"> <footer>
<div>
<p>made using Django ❤️</p>
</div>
</footer>
<section class="landing-feature feature-github">
<section class="landing-section landing-bg">
<div class="shade">
<section class="landing-feature">
<h2>Connect with <span class="brand-text">Github</span></h2> <h2>Connect with <span class="brand-text">Github</span></h2>
</section> </section>
<section class="landing-feature feature-twitter"> <section class="landing-feature">
<h2>Connect with <span class="brand-text">Twitter</span></h2> <h2>Connect with <span class="brand-text">Twitter</span></h2>
</section> </section>
</div>
</section> </section>