Hello all!
I’ve just started the Full stack career path and I’m having a lot of fun!
I have a question concerning one of the CSS projects. As an extra exercices, we were asked to fix the footer to the bottom of the page the same way we were instructed to do with the header. I managed, but I would love to know if the way I did it is legit or if it’s working by pure coincidence. : )
If anyone has the time/motivation to give it a look, that’ll be much appreciated!
I’m putting here the whole code, but if you don’t wanna waste your time the section in question is specifically for the footer:
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
position: fixed;
width: 100%;
z-index: 1;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
display: inline-block;
width: 80px;
}
main {
text-align: center;
position: relative;
top: 80px;
}
main h1 {
color: #333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0px;
padding-top: 80px;
margin-bottom: 80px;
text-transform: uppercase;
}
footer {
background-color: #333;
color: #fff;
padding: 30px 0;
position: fixed;
width: 100%;
z-index: 2;
bottom: 0;
}
footer p {
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
font-size: 11px;
}
.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
text-align: center;
}
.jumbotron {
height: 800px;
background-image: url("https://content.codecademy.com/projects/broadway/bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}
.btn-default {
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 10px;
letter-spacing: 1.3px;
padding: 10px 20px;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 20px;
}
.supporting {
padding-top: 80px;
padding-bottom: 100px;
}
.supporting .col {
font-family: 'Raleway', sans-serif;
text-align: center;
display: inline-block;
height: 200px;
width: 200px;
}
.supporting img {
height: 32px;
}
.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}
.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 20px;
margin-bottom: 20px;
}
.supporting a {
background-color: white;
color: #333333;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
letter-spacing: 1.3px;
text-decoration: none;
text-transform: uppercase;
padding: 10px;
margin-bottom: 10px;
border: 2px solid #333333;
}
@media (max-width: 500px) {
main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}