Question
In: Computer Science
1. Go to the Footer Styles section and create a style rule that displays the footer...
1. Go to the Footer Styles section and create a style rule that displays the footer only when both margins are clear of floating objects.
2. Go to the Topics Styles section. This section sets the styles for a list of four topics describing what the company is offering. Karen wants this list to also be displayed horizontally on the page. For list items within the ul element with the id topics, create a style rule to: a) display the items as blocks with a width of 20%, b) float the items on the left margin, c) set the size of the left margin space to 0% and the right margin space to 1.5%.
3. Karen wants the topics list to be well away from the left and right edges of the page body. In the same section, create a rule that sets the size of the left margin of the first item in the topics list to 7.75% and sets the right margin of the last item to 7.75%.
4. In the same section, create a rule that displays the image
within each list item in the topics list as a block with a width of
50% and centered within the list item block.
(Hint: Set the left and right margins to auto.)
5. Go to the Customer Comment Styles section. In this section, you will create style rules for the customer comments displayed near the bottom of the page. For the ul element with the id comments, create a style rule that sets the width to 75% and centers the element by setting the top/bottom margin to 40 pixels and the left/right margin to auto.
6. Karen wants the list items to appear in two columns on the page. In the same section, create a style rule for every list item in the comments list that: a) displays the item as a block with a width of 50% floated on the left and sets the size of the bottom margin to 30 pixels.
7. Every customer comment is accompanied by an image of the student. Karen wants these images displayed to the left of the comment. Create a style rule to display the image within each comment list item as a block with a width of 20%, floated on the left, and with a left/right margin of 5%.
8. Create a style rule for every paragraph nested within a customer list item that floats the paragraph on the left margin with a width of 70%.
CURRENT CODE:
*CSS*
@charset "utf-8";
/*
New Perspectives on HTML5 and CSS3, 7th Edition
Tutorial 3
Case Problem 1
Layout styles for Slate and Pencil Tutoring
Author: Joe Chiparo
Date: 9/2/19
Filename: sp_layout.css
*/
/* Window and Body Styles */
html {
height: 100%;
}
body {
width: 95%;
min-width: 640px;
max-width: 960px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
header, ul, nav, li, a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Row Styles */
header.row::after {
clear: both;
content: "";
display: table;
}
/* Page Header Styles */
body > header > img {
display: block;
width: 70%;
float: left;
}
body > header > nav {
float: left;
padding-left: 2%;
padding-right: 2%;
width: 30%;
}
header > nav > a {
display: block;
width: 100%;
}
/* Horizontal Navigation List Styles */
nav.horizontal li {
display: block;
float: left;
width: 12.5%;
}
/* Topics Styles */
#topics li {
display: block;
width: 20%;
float: left;
margin-left: 0%;
margin-right: 1.5%;
}
#topics li:first-child {
margin-left:7.75%;
}
#topics li:last-child {
margin-right:7.75%;
}
#topics img {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/* HR Styles */
hr {
width: 50%;
}
/* Customer Comment Styles */
#comments {
width: 75%;
margin-top: 40px;
margin-bottom: 40px;
margin-right: auto;
margin-left: auto;
}
#comments li {
display: block;
width: 50%;
float: left;
margin-bottom: 30px;
}
#comments li img {
display: block;
width: 20%;
float: left;
margin-left: 5%;
margin-right: 5%;
}
li p {
float: left;
width: 70%;
}
/* Footer Styles */
footer {
clear: both;
}
Solutions
Expert Solution
Below is the solution:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Slate & Pencil Tutring</title>
<link href="sp_base.css" rel="stylesheet">
<link href="sp_styles.css" rel="stylesheet">
<link href="sp_layout.css" rel="stylesheet">
</head>
<body>
<header class="row">
<img src="sp_logo.png" >
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Our Tutrs</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Testimonials</a></li>
<li><a href="#">Your Account</a></li>
<li><a href="#">Chat Online</a></li>
</ul>
</nav>
</header>
<nav class="horizontal">
<ul class="row">
<li><a href="#">Math</a></li>
<li><a href="#">Science</a></li>
<li><a href="#">English</a></li>
<li><a href="#">Languages</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Sociology</a></li>
<li><a href="#">Art</a></li>
<li><a href="#">Other</a></li>
</ul>
</nav>
<ul id="topics" class="row">
<li><img src="sp_topic1.png" >
<p>Our tutrs have advanced degrees, supplemented with real-world
experience to help you meet your education goals.</p>
</li>
<li><img src=" sp_topic2.png" >
<p>Every session is just you and your instructor and
there is always someone online to help you. 24/7.</p>
</li>
<li><img src=" sp_topic3.png" >
<p>We cover it all: From from Biochemistry to
Beethoven. We can also help you prep for the ACT, SAT, and AP
exams.</p>
</li>
<li><img src=" sp_topic4.png" >
<p>We keep our prices low. Sign up for one-time assistance or enroll
for a full semester at greatly reduced rates.</p>
</li>
</ul>
<hr>
<ul id="comments">
<li><img src=" sp_student1.png" >
<p>“Thanks to <em>Slate & Pencil</em> I passed AP Calculus
with a 5.”<br>
<br>
— Kevin, 12th Grade, Utah</p>
</li>
<li><img src=" sp_student2.png" >
<p>“I use <em>Slate & Pencil</em> all of the time to
supplement my lectures and course notes.”<br>
<br>
— Paul, 12th Grade, Texas</p>
</li>
<li><img src=" sp_student3.png" >
<p>“I'm making the honor roll for the first time thanks to
your wonderful service and help!”<br>
<br>
— Lisa, 11th Grade, Florida</p>
</li>
<li><img src=" sp_student4.png" >
<p>“Geometry is a breeze after working online with your great
tutrs and review materials.”<br>
<br>
— Karen, 9th Grade, Nebraska</p>
</li>
<li><img src=" sp_student5.png" >
<p>“I've seen a great improvement in my use of study time and
I retain more than ever before.”<br>
<br>
— Gianna, 10th Grade, Vermont</p>
</li>
<li><img src=" sp_student6.png" >
<p>“After using <em>Slate & Pencil</em>, my SAT and ACT
scores went through the roof!!!”<br>
<br>
— Todd, 11th Grade, Illinois</p>
</li>
</ul>
<footer>
Slate & Pencil Tutring; © 2017 All Rights Reserved
</footer>
</body>
</html>
sp_layout.css:
@charset "utf-8";
/* Window and Body Styles */
html {
height: 100%;
}
body {
max-width: 960px;
min-width: 640px;
width: 95%;
margin-left: auto;
margin-right: auto;
}
header, ul, nav, li, a {
box-sizing: border-box;
}
/* Row Styles */
.row::after {
clear: both;
content: "";
display: table;
}
/* Page Header Styles */
body>header>img {
display: block;
width: 70%;
float: left;
}
body>header>nav {
display: block;
float: left;
padding-left: 2%;
padding-right: 2%;
width: 30%;
}
body header a {
display: block;
width: 100%;
}
/* Horizontal Navigation List Styles */
.horizontal li {
display: block;
width: 12.5%;
float: left;
}
/* Topics Styles */
#topics ul, #topics li {
display: block;
width: 20%;
float:left;
margin-left: 0%;
margin-right: 1.5%;
}
#topics :first-child {
margin-left: 7.5%;
}
#topics :last-child {
margin-right: 7.5%;
}
#topics img {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
/* HR Styles */
hr {
width: 50%;
}
/* Customer Comment Styles */
#comments {
width: 75%;
margin-top: 40px;
margin-bottom: 40px;
margin-left: auto;
margin-right: auto;
}
#comments li {
display: block;
width: 50%;
float: left;
margin-bottom: 30px;
}
/* Footer Styles */
footer {
display: block;
clear: both;
}
sp_base.css:
@charset "utf-8";
article, aside, figcaption, figure,
footer, header, main, nav, section {
display: block;
}
address, article, aside, blockquote, body, cite,
div, dl, dt, dd, em, figcaption, figure, footer,
h1, h2, h3, h4, h5, h6, header, html, img,
li, main, nav, ol, p, section, span, ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
nav ul {
list-style: none;
list-style-image: none;
}
nav a {
text-decoration: none;
}
body {
line-height: 1;
}
sp_styles.css:
@charset "utf-8";
/* Window and Body Styles */
html {
background-color: rgb(230, 182, 144);
}
body {
background-color: rgb(250, 238, 218);
font-family: Verdana, Geneva, Arial, sans-serif;
}
/* Page Header */
body > header {
background-color: rgb(61, 138, 216);
}
body > header > nav a {
font-size: 1em;
margin: 0.4em 0;
padding: 5px;
}
body > header > nav a:link, body > header > nav:visited {
color: rgb(250, 238, 218);
}
body > header > nav a:hover, body > header > nav:active {
background-color: rgba(0, 0, 0, 0.2);
}
/* Horizontal Navigation List */
nav.horizontal ul li {
background-color: rgb(18, 31, 102);
font-size: 0.9em;
padding: 10px 0;
text-align: center;
}
nav.horizontal a:link, nav.horizontal a:visited {
color: rgb(250, 238, 218);
}
nav.horizontal a:hover, nav.horizontal a:active {
color: rgb(255, 255, 64);
}
/* Topics Styles */
ul#topics {
margin-top: 20px;
margin-bottom: 20px;
}
ul#topics li p {
color: rgb(95, 114, 232);
font-size: 0.8em;
}
/* Customer Comment Styles */
ul#comments li p {
font-size: 0.9em;
color: rgb(121, 121, 121);
line-height: 1.2em;
}
/* Footer Styles */
footer {
color: rgb(186, 186, 156);
background-color: rgb(44, 91, 169);
font-size: 0.9em;
padding: 10px 0px;
text-align: center;
}
sample output:
venereology answered 1 year agoRelated Solutions
For all img elements create a style rule that applies a sepia filter with a value...
this is done in HTML In footer, use HTML tags/style of your choice to explain steps...
Leadership Styles Describe each style of leadership and give an example of where each style would...
What are inline styles, embedded styles, and external style sheets? Which would you use to define...
part 1) if a footer is on a sandy soil with no cohesion the factors to...
Students are to research leadership styles to determine a specific leadership style that they would prefer...
What are the major leadership styles? Which style is optimal to use in which situation?
Write the code in Java: 1. Create a method that displays your name in the console....
Name (2) Parenting Styles. Tell what are the Pro's and Con's in each style in raising...
compare and contrast autocratic leadership and democratic leadership styles and the effect each style of leadership...
- Product life cycle (PLC) consists of 5 stages, including product development. Based on the product/service in...
- Write a program that takes two integer arrays a and b of size n from the...
- Discuss the meanings of absolute. Discuss cultural relativism and cultural absolutism. Discuss types of propositions. Discuss...
- What are the pros and cons of inpatient treatment centers? Provide at least two pros and...
- 1. What would be the yield to maturity for a bond with a $70 coupon, interest...
- PYTHON Exercise 5. Guess the number 1. Develop a “Guess the number” game. Write a program...
- explain ricardos theory of comparative advantage and use an example