////////////////////////////////HTML5/CSS homework help/////////////////////////
ID: 3729840 • Letter: #
Question
////////////////////////////////HTML5/CSS homework help///////////////////////////////////////////////
Please modify my CSS and HTML document so that the webpage utilizes "fluid layout". My HTML and CSS files seem like they are not working properly, the page does not look how I planned it to look. Please use your own images when you test the code. Thank you
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>LandScapingCrew</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li class="active"><a href=""> HOME </a> </li>
<li><a href=""> SERVICES </a> </li>
<li><a href=""> ABOUT US </a> </li>
<li><a href=""> Contact </a> </li>
<li><a href=""> Projects </a> </li>
<li><a href=""> FAQ </a> </li>
</ul>
</div>
<div class="hero">
<h1>Let us create an inviting landscape for your home</h1>
<div class="button">
<a href="" class="btn btn-one"> Video Presentation</a>
<a href="" class="btn btn-two"> Explore Picture Gallery</a>
</div>
</div>
</header>
</body>
</html>
CSS code:
*
{
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(background.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a
{
color:whitesmoke;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a
{
border: 1px solid white;
}
.main-nav li a:hover
{
border: 1px solid white;
}
.logo img{
width: 150px;
height: auto;
float: left;
}
body
{
font-family: monospace;
}
.row
{
max-width: 1200px;
margin: auto;
}
.hero{
position: absolute;
width: 1200px;
margin-left: 0px;
margin-top: 0px;
}
h1{
color: white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button
{
margin-top: 30px;
margin-left: 440px;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
}
.btn-one
{
background-color: darkorange;
font-family: "Roboto", sans-serif;
}
.btn-two
{
font-family: "Roboto", sans-serif;
}
.btn-two:hover{
background-color: darkorange;
transition: all 0.5s ease-in;
}
Explanation / Answer
/* Css Code*/
{
margin: 0; padding: 0;
}
header {
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url(background.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
.main-nav{
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li
{
display: inline-block;
}
.main-nav li a {
color:whitesmoke;
text-decoration: none;
padding: 5px 20px;
font-family: "Roboto", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover { border: 1px solid white; }
.logo img{
width: 150px;
height: auto;
float: left;
}
body {
font-family:monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.hero{
position:absolute;
width: 100%;
margin-left: 0px;
margin-top: 0px;
}
h1{
color:white;
text-transform: uppercase;
font-size: 70px;
text-align: center;
margin-top: 275px;
}
.button {
margin-top: 30px;
margin-left: 30%;
position: relative;
display: inline-block;
}
.btn{
border: 1px solid white;
padding: 10px 30px;
color: white;
text-decoration: none;
margin-right: 5px;
font-size: 13px;
text-transform: uppercase;
position: relative;
display: inline-block;
}
.btn-one {
background-color: darkorange;
font-family: "Roboto", sans-serif;
position: relative;
}
.btn-two {
font-family: "Roboto",sans-serif;
border: 1px solid orange;
}
.btn-two:hover{
background-color: darkorange;
transition:all 0.5s ease-in;
position: relative;
}
.fluid-container{
max-width: 1200px;
margin: auto;
}
/*html code*/
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>LandScapingCrew</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="fluid-container">
<div class="row">
<div class="logo">
<img src="logo.jpg">
</div>
<ul class="main-nav">
<li class="active"><a href=""> HOME </a></li>
<li><a href=""> SERVICES </a></li>
<li><a href=""> ABOUT US </a></li>
<li><a href=""> Contact </a></li>
<li><a href=""> Projects </a></li>
<li><a href=""> FAQ </a></li>
</ul>
</div>
<div class="hero">
<h1>Let us create an inviting landscape for your home</h1>
<div class="button">
<a href="" class="btn btn-one"> Video Presentation</a>
<a href="" class="btn btn-two"> Explore Picture Gallery</a>
</div>
</div>
</div>
</header>
</body>
</html>
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.