natafaye · February 3, 2022 02:53
diff --git a/week2.css b/week2.css

 body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
 }

 /***** Navbar *****/

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

 .navbar h2 {
    margin: 0;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

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

 .navbar li {
    margin: 10px;
 }

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

 /***** Main *****/

 .container {
    padding: 15px;
    max-width: 900px;
    margin: 0 auto;
 }

 .row {
    margin-bottom: 40px;
 }

 .button {
    padding: 15px;
    border: 0;
 }

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

 /***** Footer *****/

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



 /* .popup {
    position: absolute;
    top: 40%;
    left: 30%;
    background-color: white;
    border: 1px solid black;
 } */
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">
        <h2>Chairs</h2>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <div class="container">
        <div class="row">
            <h2>This is a catchy sentence about chairs</h2>
            <button class="button green-button">See More</button>
        </div>
        <div class="row">
            <div>
                <p>And here is some more</p>
                <button class="button">See More</button>
            </div>
            <div>
                <p>Text about nothing</p>
                <button class="button">See More</button>
            </div>
            <div>
                <p>To take up space</p>
                <button class="button">See More</button>
            </div>
        </div>
        <div class="row">
            <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>
    <!-- <div class="popup">
        <h2>Sign up for our newsletter!</h2>
    </div> -->
    <footer>
        <div>
            Copyright 2021
        </div>
    </footer>
 </body>
 </html>

	body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	}

	/*** Navbar ***/

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

	.navbar h2 {
	margin: 0;
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	}

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

	.navbar li {
	margin: 10px;
	}

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

	/*** Main ***/

	.container {
	padding: 15px;
	max-width: 900px;
	margin: 0 auto;
	}

	.row {
	margin-bottom: 40px;
	}

	.button {
	padding: 15px;
	border: 0;
	}

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

	/*** Footer ***/

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



	/* .popup {
	position: absolute;
	top: 40%;
	left: 30%;
	background-color: white;
	border: 1px solid black;
	} */
	<!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">
	<h2>Chairs</h2>
	<ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Contact</a></li>
	</ul>
	</nav>
	<div class="container">
	<div class="row">
	<h2>This is a catchy sentence about chairs</h2>
	<button class="button green-button">See More</button>
	</div>
	<div class="row">
	<div>
	<p>And here is some more</p>
	<button class="button">See More</button>
	</div>
	<div>
	<p>Text about nothing</p>
	<button class="button">See More</button>
	</div>
	<div>
	<p>To take up space</p>
	<button class="button">See More</button>
	</div>
	</div>
	<div class="row">
	<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>
	<!-- <div class="popup">
	<h2>Sign up for our newsletter!</h2>
	</div> -->
	<footer>
	<div>
	Copyright 2021
	</div>
	</footer>
	</body>
	</html>