f. Configure the nav a selector. Set padding to 0.2em, left margin to 0.3em, float to left, and width to 23%. g. Configure the main element selector. Set top and bottom padding to 2.5em, left and right padding to lem, margin to 0, 90% font size, and clear all floats. h. Configure the #hero img selector. Code a style declarations to set the width to 100% and the height to auto. i. Configure the h2, h3, p, and dl element selectors. Set the left and right padding to 2em. j. Configure the main ul selector. Set left margin to 2em.
How do I get my code to match the requirements in the picture?
* {box-sizing: border-box;}
body {background-color: #3F2860;
font-family: Verdana,Arial, sans-serif;
color:#3F2860;
margin: 0px;
padding: 0px;
}
#wrapper {background-color:#F5F5F5;
width:100%;
min-width:0px;
max-width : 1540px;
margin-left : auto;
margin-right : auto;
margin: 0px;
color:#3F2860;
padding: 0px;
}
#main {margin-left:170px;
padding-top:1em;
padding-right:2em;
Padding-left:1em;
background-color:#F5F5F5;
height: 500px;}
h2
{
margin-top:0px;
text-align: center;
}
p,h3{
text-align: center;
}
#nav{ float:left;
height:500px;
width:25%;
position:relative;
width:160px;
padding:1em;}
#hero {
text-align: left;
margin-left: 10%;
}
#ylp {
float: center;
background-repeat: no-repeat;
background-position: right;
height: 300px;
width: 90%;
margin-left: 1%;
}
#image {float:left;
width:30%;
position:relative;}
span{
margin-left: 40px;
font-size: small;
}
#des{
float: right;
width: 70%;
position: relative;
}
#mathero { height: 300px;
background-image: url("yogamat.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}
#loungehero { height: 300px;
background-image: url("yogalounge.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}
header {background-color: #9BC1C2;
background-image: url("lilyheader.jpeg");
background-repeat: no-repeat;
background-position: right;
height: 150px;
padding-top: 1px;
}
h1 {line-height:200%;
padding-top: 1em;
padding-left: 2em;
color; white;
}
nav {font-weight: bold;
text-align:center;
Padding: 1em;
float: none;
width: auto;
padding-left: 2em;
}
nav ul {list-style-type:none;
padding-left:0;
font-size:1.2em;}
nav a {text-decoration: none ;
display: block;
text-align:center;
font-weight:bold;
border: inset 3px #CCCCCC;
padding:1em;
margin-bottom:1em;}
#yogamat { float: center;
margin: 0 0 5px 5px;
border: 1px solid #000000;
}
nav a:link {color:#3F2860;}
nav a:visited {color:#497777;}
nav a:hover {color:#A26100;
border:3px inset #333333;}
clear { clear:both;}
footer {background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;}
#mobile { display: none; }
#desktop { display: inline; }
@media only screen and (max-width: 1024px) {
}
li {line-height: 90%;
padding-left: 0;
font size: 1.2em}
header, nav, main, footer { display: block; }
Floatleft {float:left;
margin-right:4em;}
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
