natafaye · August 11, 2021 00:18
diff --git a/week2.css b/week2.css

 body {
    background-color: #fafafa;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
 }

 p {
    font-family: Arial, Helvetica, sans-serif;
 }

 .text-center {
    text-align: center;
 }

 /**** Navbar ****/

 nav.navbar {
    background-color: #4F5D61;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    color: white;
 }

 nav.navbar ul {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
 }

 nav.navbar li {
    margin: 0 15px;
 }

 nav.navbar a {
    color: white;
    text-decoration: none;
 }

 /**** Main ****/

 .section {
    max-width: 900px;
    margin: 0 auto;
    margin-bottom: 15px;
 }

 .split {
    display: flex;
 }

 .split div {
    flex-grow: 1;
    padding: 30px 10px;
 }

 /**** Buttons ****/

 button {
    border: 0;
    padding: 15px;
    border-radius: 10px;
    margin-left: 15px;
 }

 button:hover {
    background-color: #a1a1a1;
 }

 button.green {
    background-color: #557213;
    color: white;
 }

 button.green:hover {
    background-color: #43580f;
 }

 /**** Jumbo ****/

 .jumbo {
    background-image: url(images/chair.jpg);
    background-size: cover;
    height: 500px;
    overflow: hidden;
 }

 .jumbo h2 {
    color: #4F5D61;
    opacity: 0.9;
    font-size: 4rem;
    margin: 20px;
    background-color: #fafafabb;
    width: 270px;
    padding: 15px;
    border-radius: 10px;
 }

 /**** Footer ****/

 footer {
    background-color: #C2B8AD;
    padding: 15px;
 }

 footer .section {
    margin-bottom: 0;
 }
diff --git a/week2.html b/week2.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chairs</title>
    <link rel="stylesheet" href="week2.css">
 </head>
 <body>
    <nav class="navbar">
        <div class="logo">Chairs</div>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <div class="main">
        <div class="section jumbo">
            <h2>This is a catchy sentence about chairs</h2>
            <button class="green">See More</button>
        </div>
        <div class="section split">
            <div class="text-center">
                <p>And here is some more</p>
                <button>See More</button>
            </div>
            <div class="text-center">
                <p>Text about nothing</p>
                <button>See More</button>
            </div>
            <div class="text-center">
                <p>To take up space</p>
                <button>See More</button>
            </div>
        </div>
        <div class="section">
            <p>Mauris id hendrerit libero. Nunc pulvinar lorem at ligula sodales 
            suscipit ut vitae nisi. Proin nec eleifend nisi. Mauris augue quam, 
            semper et orci sed, rutrum luctus tortor. Donec tincidunt ex a nibh 
            euismod luctus. Sed facilisis metus at tortor sollicitudin, ac 
            suscipit risus hendrerit. Proin justo justo, consequat in maximus a, 
            rhoncus eget turpis. Morbi ac tellus nisi. Duis nisi odio, blandit 
            vitae risus ut, aliquet fermentum massa. In id velit vestibulum, 
            consequat mauris a, tincidunt felis. Cras dui sapien, faucibus id 
            semper vel, malesuada sit amet dui. Suspendisse finibus, dolor sed 
            fringilla condimentum, diam eros sagittis lectus, non aliquam nisl 
            nisi vitae nisl. Aliquam dictum, arcu eu scelerisque mollis, libero 
            nisi tempor magna, sit amet dictum leo nunc eget mauris.</p>
        </div>
    </div>
    <footer>
        <div class="section">
            Copyright 2021
        </div>
    </footer>
 </body>
 </html>

	body {
	background-color: #fafafa;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	margin: 0;
	padding: 0;
	}

	p {
	font-family: Arial, Helvetica, sans-serif;
	}

	.text-center {
	text-align: center;
	}

	/** Navbar **/

	nav.navbar {
	background-color: #4F5D61;
	padding: 15px;
	display: flex;
	justify-content: space-between;
	color: white;
	}

	nav.navbar ul {
	display: flex;
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	nav.navbar li {
	margin: 0 15px;
	}

	nav.navbar a {
	color: white;
	text-decoration: none;
	}

	/** Main **/

	.section {
	max-width: 900px;
	margin: 0 auto;
	margin-bottom: 15px;
	}

	.split {
	display: flex;
	}

	.split div {
	flex-grow: 1;
	padding: 30px 10px;
	}

	/** Buttons **/

	button {
	border: 0;
	padding: 15px;
	border-radius: 10px;
	margin-left: 15px;
	}

	button:hover {
	background-color: #a1a1a1;
	}

	button.green {
	background-color: #557213;
	color: white;
	}

	button.green:hover {
	background-color: #43580f;
	}

	/** Jumbo **/

	.jumbo {
	background-image: url(images/chair.jpg);
	background-size: cover;
	height: 500px;
	overflow: hidden;
	}

	.jumbo h2 {
	color: #4F5D61;
	opacity: 0.9;
	font-size: 4rem;
	margin: 20px;
	background-color: #fafafabb;
	width: 270px;
	padding: 15px;
	border-radius: 10px;
	}

	/** Footer **/

	footer {
	background-color: #C2B8AD;
	padding: 15px;
	}

	footer .section {
	margin-bottom: 0;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Chairs</title>
	<link rel="stylesheet" href="week2.css">
	</head>
	<body>
	<nav class="navbar">
	<div class="logo">Chairs</div>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	<div class="main">
	<div class="section jumbo">
	<h2>This is a catchy sentence about chairs</h2>
	<button class="green">See More</button>
	</div>
	<div class="section split">
	<div class="text-center">
	<p>And here is some more</p>
	<button>See More</button>
	</div>
	<div class="text-center">
	<p>Text about nothing</p>
	<button>See More</button>
	</div>
	<div class="text-center">
	<p>To take up space</p>
	<button>See More</button>
	</div>
	</div>
	<div class="section">
	<p>Mauris id hendrerit libero. Nunc pulvinar lorem at ligula sodales
	suscipit ut vitae nisi. Proin nec eleifend nisi. Mauris augue quam,
	semper et orci sed, rutrum luctus tortor. Donec tincidunt ex a nibh
	euismod luctus. Sed facilisis metus at tortor sollicitudin, ac
	suscipit risus hendrerit. Proin justo justo, consequat in maximus a,
	rhoncus eget turpis. Morbi ac tellus nisi. Duis nisi odio, blandit
	vitae risus ut, aliquet fermentum massa. In id velit vestibulum,
	consequat mauris a, tincidunt felis. Cras dui sapien, faucibus id
	semper vel, malesuada sit amet dui. Suspendisse finibus, dolor sed
	fringilla condimentum, diam eros sagittis lectus, non aliquam nisl
	nisi vitae nisl. Aliquam dictum, arcu eu scelerisque mollis, libero
	nisi tempor magna, sit amet dictum leo nunc eget mauris.</p>
	</div>
	</div>
	<footer>
	<div class="section">
	Copyright 2021
	</div>
	</footer>
	</body>
	</html>