I am allowed to use any elements in HTML and CSS to replicate this image. The HT
ID: 3736211 • Letter: I
Question
I am allowed to use any elements in HTML and CSS to replicate this image. The HTML I was given to start with is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 2 Solution</title>
<link rel="stylesheet" type="text/css" media="screen" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</head>
<body>
<div class="page-wrapper">
<header class="main-header">
</header>
<div class="content-wrapper">
<aside class="sidebar-1">Sidebar 1</aside>
<main class="main-content">Main Content</main>
<div class="tertiary-content">Sidebar 2</div>
</div>
<footer class="main-footer">Copyright 2018</footer>
</div>
</body>
</html>
And the CSS:
body {
font-family: 'Open Sans', sans-serif;
}
.page-wrapper {
border: 1px solid red;
padding: 10px;
margin: 0 auto;
width: 1440px;
font-family: 'Open Sans', sans-serif;
}
I have all of the content on the page, but I'm having a lot of trouble getting the spacing down. It doesn't have to be exact; it just needs to look right. But essentially, each content area is pushing the other content areas down despite them being separate divs in the body. Here's what I've put into my HTML doc so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Assignment 2 Solution</title>
<link rel="stylesheet" type="text/css" media="screen" href="https://necolas.github.io/normalize.css/8.0.0/normalize.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css">
</head>
<body>
<div class="page-wrapper">
<header class="main-header">
<div class = "logo">
<img src="logo.png" alt = "logo" align = "right">
</div>
</header>
<div class="content-wrapper">
<aside class="sidebar-1">
<nav role="navigation">
Search
<ul>
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</aside>
<main class="main-content">
<h6>Posted by James Abbaticchio on 22 March 2018</h6>
<h1>This is a headline</h1>
<h2>Now we've got a secondary headline'</h2>
</main>
<div class="sidebar-2">
<div container>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dui tellus, porta quis nisi in, accumsan fermentum ex. Suspendisse eget dui id diam sollicitudin viverra. Integer euismod nisl a sagittis lobortis. Etiam in nunc id arcu dapibus pretium sed sed velit. Morbi tristique, urna vel finibus posuere, est tortor dictum libero, lobortis sollicitudin turpis tellus eget nisl. In ligula odio, fringilla ut mollis eu, scelerisque at erat. Pellentesque id magna ut turpis fringilla fermentum vel vitae ante. Mauris at velit et sem pellentesque aliquam. Mauris sit amet lacus nisl.</div>
</div>
<footer class="main-footer">Copyright 2018</footer>
</div>
</body>
</html>
And my CSS sheet:
body {
background-image: url("background-header.png");
background-repeat: no-repeat;
font-family: 'Open Sans', sans-serif;
}
.page-wrapper {
border: 1px solid #ff0000;
padding: 10px;
margin: 0 auto;
width: 1440px;
font-family: 'Open Sans', sans-serif;
}
.sidebar-1 {
width: 405px;
height: 1626px;
position: relative;
background-color: #dfdfdf;
float: left;
font-family: 'Open Sans', sans-serif;
}
.sidebar-2 {
width: 289px;
height: 1628px;
background-color: #dfdfdf;
float: right;
font-family: 'Open Sans', sans-serif;
}
.main-content {
margin: 0 415px 0 336px;
padding: 10px 10px 20px 10px;
background-color: #ffffffa2 ;
clear: both;
font-family: 'Open Sans', sans-serif;
}
.logo {
padding-right: 150px;
padding-top: 90px;
}
.content-wrapper {
padding: 100px 100px 100px 100px;
}
How am I to format this page?
FirstDesign SUPER LOGO DESIGN This is a headline Now weve got a secondary headline Loren ipaum dolor sit anne cosectatur adplong i Quisque dui telus, pota qus niai in acoumsan fermentun ex Suspendisse eget du id Home About Blog Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tempus nulla ante, quis venenatis ante efficitur eget. Sed eleifend nisl ex, ut luctus purus tempus id. obortis Etiam in nunc id arcu daplous procum sed sed vel Morti rsque na wa fribus posuere, est sort dictum bera, lobortis mperdiet felis. Phasellus et nisi vitae eros scelerisque egestas sit amet eu sapien. Morbi pulvinar felis id suscipit blandit Pellentesque nec erat ac ex tempus luctus. Proin malesuada mi sugue, at iaculis magna sagittis in. Pellentesque habitant morbi dturpis telus eget nst in gua odio, fringiau tristique senectus et netus et malesuada fames ac turpis egestas Suspendisse consequat ut nulla vel faucibus Pellentesque id magna ut turpis fringila fermentum vel sem pelercesque aiquam Maurs st cts Pron msda m a.guat uls nagna sagts n Potiesq habnant malis.eu.scel st cu mperdiet Lorem i rum door 3.rret cororetreur oxicom i, Suapen haeterpus mada onte,Explanation / Answer
Here I am adding the HTML file .
body {
background-image: url("background-header.png");
background-repeat: no-repeat;
font-family: 'Open Sans', sans-serif;
}
.page-wrapper {
border: 1px solid #ff0000;
padding: 10px;
margin: 0 auto;
width: 1440px;
font-family: 'Open Sans', sans-serif;
}
.sidebar-1 {
width: 405px;
height: 1626px;
position: relative;
background-color: #dfdfdf;
float: left;
font-family: 'Open Sans', sans-serif;
}
.sidebar-2 {
width: 289px;
height: 1628px;
background-color: #dfdfdf;
float: right;
font-family: 'Open Sans', sans-serif;
}
.main-content {
margin: 0 415px 0 336px;
padding: 10px 10px 20px 10px;
background-color: #ffffffa2 ;
clear: both;
font-family: 'Open Sans', sans-serif;
}
.logo {
padding-right: 150px;
padding-top: 90px;
}
.content-wrapper {
padding: 100px 100px 100px 100px;
}
Here iS The CSS file
body {
background-image: url("background-header.png");
background-repeat: no-repeat;
font-family: 'Open Sans', sans-serif;
}
.page-wrapper {
border: 1px solid #ff0000;
padding: 10px;
margin: 0 auto;
width: 1440px;
font-family: 'Open Sans', sans-serif;
}
.sidebar-1 {
width: 250px;
height: 1626px;
position: relative;
background-color: lightskyblue;
float: left;
font-family: 'Open Sans', sans-serif;
}
.sidebar-2 {
width: 250px;
height: 1000px;
padding: top;
background-color: lightskyblue;
float: right;
font-family: 'Open Sans', sans-serif;
}
.main-content {
margin: 0 415px 0 336px;
padding: 10px 10px 20px 10px;
background-color: #ffffffa2 ;
font-family: 'Open Sans', sans-serif;
}
.logo {
padding-right: 10px;
padding-top: 90px;
}
.content-wrapper {
padding: 100px 100px 100px 100px;
}
.container{
width: 980px;
margin: 0 ;
}
.sidebar{
float: right;
width: 200px;
}
.content{
overflow: hidden;
}
.main-footer{
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
}
Add your images which are needed.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.