(Solved): CSS Instructions: Edit the given CSS file to match these requirements - Change the order of the ...
CSS
Instructions:
Edit the given CSS file to match these requirements
- Change the order of the section and the aside elements so that aside is before section but still inside the main element.
- Add the attribute id=asideA to the aside attribute.
- Add a second aside element inside main, just after the section element closes.
- Add the attribute id=asideB to this new aside element.
- Add the text from text.txt (given at the bottom) in the text folder to the new aside.
- Apply floats so that the page looks as shown above. The first aside should have a width of 230px, the section element should have a width of 530px, and the second aside should have a width of 300px.
- Clear the footer so it’s displayed at the bottom of the page without the text from each column flowing into another.
- Remove the aside padding declaration and add the following padding to the specific aside elements: a. asideA should have top padding 20px, left padding 25px and 0 right and bottom. b. asideB should have top padding 20px right padding 25px and 0 for bottom and left.
- Change the color of the h2 headings in the sidebars so they're maroon.
TAKE THIS HOME SCREEN AND FORMAT IT TO THE ONE BELOW
___________________________________________
HTML FILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shape Up!</title>
<link rel="stylesheet" href="styles/main.css">
</head>
<body>
<header>
<img src="images/shape_up_logo.png" alt="Shape Up logo">
<h2>Shape Up!</h2>
<h3>Find the best fit for you</h3>
</header>
<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>
<aside id="asideA">
<h2>Additional resources</h2>
<ul>
<li><a href="https://www.cdc.gov/physicalactivity/basics/pa-health/index.htm">Physical activity and health</a></li>
<li><a href="http://www.heart.org/HEARTORG/HealthyLiving/PhysicalActivity/FitnessBasics/Flexibility-Exercise-Stretching_UCM_464002_Article.jsp#.WpB8zIPwaUl">Stretching exercises</a></li>
<li><a href="../strength/index.html">Strength training</a></li>
<li><a href="https://www.health.harvard.edu/exercise-and-fitness/interval-training-for-a-stronger-heart">Cardiovascular training</a></li>
<li><a href="https://www.self.com/gallery/power-yoga-workout">Yoga workout</a></li>
</ul>
</aside>
<footer>
<p>© 2023 Shape Up! </p>
</footer>
</body>
</html>
___________________________________________
CSS FILE (NEEDS TO BE EDITED, CREATES THE FIRST HOME SCREEN):
body {
font-family: "Helvetica", "Public Sans", sans-serif;
width: 1200px;
border: 3px solid steelblue;
box-shadow: 5px 10px 10px 5px black;
padding: 0;
margin: 0 auto;
}
h1, h2, h3, p {
margin: 0;
padding: 0;
}
header {
border-bottom: 2px solid steelblue;
padding: 15px 30px 15px 30px;
background: linear-gradient(white, lightsteelblue);
}
header h2 {
color: steelblue;
font-style: italic;
font-size: 2.5em;
text-indent: 45px;
text-shadow: 3px 3px 3px steelblue;
margin-bottom: 5px;
}
header h3 {
font-size: 1.5em;
padding-bottom: 12px;
text-indent: 45px;
}
header img {
float: left;
}
section {
padding: 25px 30px 0px 30px;
}
section h1, section h2, section h3 {
font-size: 160%, 130%, 110%;
margin-bottom: 5px 8px 6px
}
section p {
margin-bottom: 11px;
}
section a {
color: maroon;
text-decoration: none;
}
section a:hover, section a:active, section a:focus {
color: steelblue;
}
aside {
padding: 5px 30px 25px 30px;
}
aside h2 {
margin-bottom: 8px;
}
aside h2, aside h3 {
font-size: 130%, 110%;
}
aside li {
line-height: 1.5;
}
aside a {
font-weight: bold;
color: steelblue;
text-decoration: none;
}
aside a:hover, aside a:active, aside a:focus {
color: maroon;
}
footer {
padding: 15px 30px 15px 30px;
color: white;
font-size: 85%;
text-align: center;
background-color: steelblue;
}
___________________________________________
text.txt:
<h2>How to prepare to Shape Up!</h2>
<h3>Get a check up</h3>
<p>If you have any health issues or take any medications, be sure to consult with your healthcare provider before beginning a new exercise or diet regimen.</p>
<h3>Dress for Success</h3>
<p>Workout clothes should be comfy. While exercising, you should be thinking about what you're doing, not what you're wearing. That includes good shoes, which are essential for running, jogging, or walking, and socks that absorb shock and sweat.</p>
<h3>Equipment?</h3>
<p>You don't need to buy a lot of fancy equipment to get in shape. But you might want to invest in a yoga mat, a large exercise ball, or some weights, depending on your Shape Up! plan.</p>
<h3>Resist Temptation</h3>
<p>It's hard to eat right when everyone else is buying lunch at a fast food restaurant. Invest in some good food containers and bring your healthy lunch and snacks. Your body and your wallet will thank you.</p>
THANK YOU! I WILL GIVE AN UPVOTE IF YOUR SOLUTION HELPS! :)
Expert Answer
The aside> element defines some content in addition to the content in which it is put.The aside content should be related to the surrounding content i