I am having some issues completing this assignment. Any help would be greatly appreciated. Thank You! HTML: Shape Up! Shape Up! Find the best fit for you
I am having some issues completing this assignment. Any help would be greatly appreciated. Thank You!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shape Up!</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<header>
<div class="headerImg">
<img src="images/shape_up_logo.png" height="105" width="140"/> </div>
<div class="headerTxt">
<h2>Shape Up!</h2>
<h3>Find the best fit for you</h3>
</div>
</header>
<main>
<div class="sidebar">
<aside>
<h2>Additional Resources</h2>
<ul>
<li><a href="diet/index.html">Physical activity and health</a></li>
<li><a href="diet/index.html">Stretching exercises</a></li>
<li><a href="diet/index.html">Strength training</a></li>
<li><a href="diet/index.html"> Cardiovascular training</a></li>
<li><a href="diet/index.html">Yoga workout</a></li>
</ul>
</aside>
</div>
<div class="contentArea">
<section>
<h1>Get ready to Shape Up!</h1>
<p>How many times have you started a new workout routine or diet? And how many times has it failed to give you the results you want? Now, with the help of this site, you can learn about the exercises and diet that work best for you. We offer personalized programs as well as access to several health and dieting tools. So don't wait! Get started looking and feeling better today.</p> <p>As fitness expert Amanda Russell said:
</p>
<blockquote>Fitness is about so much more than exercise. It’s a catalyst for positive change, and it affects every aspect of your life.</blockquote>
<h2>What we offer</h2>
<h3><a href="strength/index.html">Build strong muscles</a></h3>
<p>Tired of being tired? Strength training can help you manage or lose weight and increase your metabolism to help you burn more calories. It can also increase bone density and reduce the risk of osteoporosis. </p>
<h3><a href="cardio/index.html">Get your heart rate up</a></h3>
<p>Want to lose weight? Cardiovascular exercise burns calories and improves overall health. It can reduce belly fat, promote brain growth, prevent stress, and help you focus.</p>
<h3><a href="stress/index.html">Relax</a></h3>
<p>Stressed out? Stress can weaken the immune system and cause high blood pressure, fatigue, depression, anxiety, and even heart disease. Learn ways to manage and reduce stress.</p> <h3><a href="diet/index.html">Eat what's right for you</a></h3>
<p>Are you really what you eat? Lose weight, gain weight, or just feel great! Maintaining a healthy diet is probably the most important thing you can do to promote overall health.</p>
</section>
</div>
<div class="sidebar">
<aside>
<h2>How to prepare Shape Up</h2>
<h3>Get a check up</h3>
<p>Stressed out? Stress can weaken the immune system and cause high blood pressure, fatigue, depression, anxiety, and even heart disease. Learn ways to manage and reduce stress.</p>
<h3>Dress for success</h3>
<p></p>
</aside>
</div>
</main>
</div>
<footer>
<p>© 2019 Shape Up!</p>
</footer>
</body>
</html>
Main.css:
body {
font-family: Arial, Helvetica, SansSerif;
font-size: 100%;
margin-left: 10px;
width: 900px;
margin: 0 auto;
border: 3px solid steelblue;
border-radius: 2px;
box-shadow: 2px 2px 5px 10px black;
}
.container{
display: inline-block;
border-color: steelblue ;
border-style: solid;
box-shadow: 0px 8px 5px 10px black;
}
header{
padding-bottom: 1em;
border-bottom: 3px solid steelblue;
background-image: -moz-linear-gradient(
180deg, white 0%, lightsteelblue 100%);
background-image: -webkit-linear-gradient(
180deg, white 0%, lightsteelblue 100%);
background-image: -o-linear-gradient(
180deg, white 0%, lightsteelblue 100%);
background-image: linear-gradient(
180deg, white 0%, lightsteelblue 100%)
}
blockquote
{
text-indent: 50px;
padding: .5em .5em .5em .5em;
}
h3 > a{
color: maroon;
font-weight: bold;
}
h3 >a:hover{
color: steelblue;
}
img{
margin-left: 15px;
height: auto;
float: left;
}
header h2{
color: steelblue;
font-style: italic;
font-size: 35px;
text-shadow: 2px 2px steelblue;
margin: 0px;
text-indent: 20px;
}
.headerImg{
float: left;
width:150px;
height: 100px;
margin-right: 5em;
}
.headerTxt{
width: 50%;
display: inline-block;
}
ul>li{
margin-bottom: 10px;
}
main{
padding-top: 20px;
}
.sidebar{
margin-left: 10px;
padding: 10px;
width: 20%;
float: left;
}
.sidebar h2{
color: maroon;
font-size: 16px;
}
li{
margin-bottom: 10px;
padding: 5px;
}
.contentArea{
padding: 5px;
width: 50%;
float: left;
}
footer{
position: relative;
bottom: 0;
text-align: center;
font-size: small;
background-color: steelblue;
color: white;
height: 40px;
padding-top: 5px;
}
Trending now
This is a popular solution!
Step by step
Solved in 4 steps with 1 images
