It's time to translate the design to code using HTML and CSS.
Construct a <div>
-based layout, using what we learned from last week. Note that the HTML page particularly pays attention to the whitespace bug discussed in last week's exercise, and that the CSS document presents the "inline-block" technique used to build layout columns:
The result is a layout that clearly illustrates the various sections within the website:
https://drive.google.com/file/d/1QXG9OPODNV8G4i9amYpZwWpXu2icMOhu/view?usp=drive_link
(Updated October 29, 2023)
<!doctype html>
<html>
<head>
<title>Week 3</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="container">
<!-- TITLE -->
<div id="title"></div>
<!-- CONTENT -->
<div id="content">
<div id="content_left"></div>
<div id="content_right">
<div id="video"></div>
</div>
</div>
<!-- MENU -->
<div id="menu"></div>
</div>
</body>
</html>
/* SKIPPING CSS RESET */
#container
{
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:30px;
margin-bottom:30px;
}
#title
{
height:100px;
background-color:#333;
margin-bottom:20px;
}
#content
{
display:flex;
align-items: start;
}
#content_left
{
width:280px;
height:500px;
background-color:#333;
margin-right:20px;
}
#content_right
{
width:500px;
height:500px;
background-color:#333;
}
#video
{
height:300px;
background-color:pink;
}
#menu
{
height:100px;
background-color:#333;
margin-top:20px;
}