I hava HTML and CSS code and that is what i have until now! I need it to be exac
ID: 3879688 • Letter: I
Question
I hava HTML and CSS code and that is what i have until now!
I need it to be exactly like that this picture
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lab 3</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<style type="text/css">
.san.text-center .container .overlay .row .plan pre {
color: #FFF;
}
</style>
</head>
<body>
<!-- start background -->
<div class="san text-center">
<div class="overlay">
<div class="container">
<div class="row">
<div class="shadow">
<div class="clearfix"></div>
<h1>Come see the fantastic Coit Tower!<br><br>
Did you know that Coit Tower is a monument to the firefighters of San Francisco?<br>
It rises 210 feet over telegraph hill and provides stunning views of the city.</h1>
<div id="plan">
<div class="left">Money for the tower was<br>
provided by Lillie Coit, an<br>
eccentric socialite who had<br>
deep connections to the<br>
city's firefighters</div>
<div class="right">If you want to visit, consider<br>
walking! Parking is limited<br>
at the tower, and it's often<br>
faster (and more scenic) to<br>
just walk.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End background -->
<!-- Start box -->
<!-- End box -->
</body>
</html>
/* Start background */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.san {
background : url('../img/san.jpg') no-repeat top center;
background-color: #e1d8b9;
margin: auto;
padding: 280px;
width: 100%;
height: 100%;
position: relative;
display: inline-flex;
}
.san h1 {
position: relative;
bottom: 200px;
left: 70px;
border: 4px solid #a2cfdb;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 15px;
padding: 40px;
color: #FFF;
min-width: 10px;
margin-top: 0px;
margin-right: 510px;
margin-left: 50px;
}
#plan {
}
.san .left {
border: 4px solid #a2cfdb;
position: relative;
bottom: 230px;
left: 200px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 15px;
padding: 20px;
color: #FFFFFF;
margin-top: 1%;
margin-right: 1010px;
height: 48%;
width: 20%;
}
.san .right {
border: 4px solid #a2cfdb;
position: relative;
bottom: 230px;
left: 200px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 15px;
padding: 20px;
color: #FFFFFF;
margin-top: 1%;
margin-right: 1010px;
height: 48%;
width: 20%;
}
.clearfix {
clear: both;
}
/* end background */
/*
*/
Make use of Embedded Style Sheet and use id wherever needed) me see the fantastie Coit Toweet Font used: 100% Georgia, Times New Roman, Times, serif; Background color: #e1d8b9 Width of the background image: 960px Height of the background image: 640px Content: Come see the fantastic Coit Tower! Did you know that Coit Tower is a monument to the firefighters of San Francisco? It rises 210 feet over telegraph hill and provides stunning views of the city. Description: The first line has the font size of 130 and the weight is normal. * The box is out in the left side of the background image (Coit Tower) by 50 px. . The box is below the background image (Coit Tower) by 50 px Box width: 600px . Padding is 25pxExplanation / Answer
main.css: -
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.san {
background : url('../img/san.jpg') no-repeat top center;
background-color: #e1d8b9;
margin: auto;
padding: 280px;
width: 960px;
height: 640px;
position: relative;
display: inline-flex;
margin-left:240px;
}
.san h1 {
position: relative;
bottom: 200px;
border: 4px solid #a2cfdb;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 15px;
padding: 20px;
color: #FFF;
min-width: 10px;
margin-top: 0px;
margin-right: 570px;
margin-left: 20px;
}
#plan {
}
.san .left {
border: 4px solid #a2cfdb;
position: relative;
bottom: 230px;
left: 70px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 15px;
padding: 20px;
color: #FFFFFF;
margin-top: 1%;
margin-right: 1010px;
height: 50%;
width: 20%;
}
.san .right {
border: 4px solid #a2cfdb;
position: relative;
bottom: 230px;
left: 330px;
top:-376px;
font-family: Georgia, Times New Roman, Times, serif;
font-size: 15px;
padding: 20px;
color: #FFFFFF;
margin-top: 1%;
margin-right: 1010px;
height: 48%;
width: 20%;
}
.clearfix {
clear: both;
}
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.