Essential Question: How can I use properties such as display and position to improve the layout of my web page?
Mastery Objectives:
SWBAT use position and display to change the layout of a website.
SWBAT configure z-index in their CSS sheets.
SWBAT improve layout using CSS styling.
Directions:
The <header> currently scrolls with the rest of the document.
Set its position property so that it stays stuck to the top of the window when the document is scrolled.
The <header> has shrunk!
Change the width of the same element so that it stretches across its entire parent element.
List items (<li>) inside of the navigation section (<nav>) are currently displayed as a list.
Set their display property so that they can appear next to each other horizontally (but so that you still set their width in the next task).
Set the width of the same elements to 80 pixels.
After changing the position of the <header> element to fixed, the contents of the entire site after it shifted upwards.
Set the position of <main> so that we can position it relatively.
The <header> has disappeared behind the <main>.
Use z-index to make the <header> visible.
Now the navigation bar looks good, but it is blocking the title at the top of the page.
Offset <main> by 80 pixels from the top.
Now, fix up the supporting element style below the image.
Add a declaration to the .supporting .col rule set so that these elements can appear horizontally next to each other but have defined height and width.
Inspect the .supporting .col elements—they don’t seem to be flowing horizontally yet because they have no set width. Set the width and height of .supporting .col elements to 200 pixels.
Make the <footer> element also fixed to the bottom of the page regardless of scrolling.
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
<link href='style.css' rel='stylesheet' type='text/css'/>
</head>
<body>
<header>
<nav>
<ul>
<li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
</ul>
</nav>
</header>
<main>
<div class="jumbotron">
<div class="container">
<h1>We are Poison Apple Design</h1>
<a href="#" class="btn-main"> Get Started </a>
</div>
</div>
</main>
<section class="supporting">
<div class="container">
<div class="col">
<img src="https://static.vecteezy.com/system/resources/previews/000/378/446/original/drafting-tool-vector-icon.jpg">
<h2>Design</h2>
<p>We help build your business by using professional designs.</p>
<a href="#"> Learn More</a><br>
</div>
<div class="col">
<img src="https://thumbs.dreamstime.com/z/develop-outline-vector-icon-thin-line-black-flat-simple-element-illustration-editable-time-management-concept-isolated-stroke-179240111.jpg">
<h2>Develop</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
<div class="col">
<img src="https://www.shutterstock.com/image-vector/deploy-icon-260nw-714632062.jpg">
<h2>Deploy</h2>
<p>Use modern tools to turn your design into a web site</p>
<a href="#"> Learn More</a><br>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© Broadway 2017</p>
</div>
</footer>
</body>
</html>
html, body {
margin: 0;
padding: 0;
}
header {
background-color: #333333;
}
nav {
margin: 0;
padding: 20px 0;
}
nav li {
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 12px;
}
main {
text-align: center;
}
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;
}
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://static2.bigstockphoto.com/2/2/2/large1500/222399787.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;
}
.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%;
}