Build on your web site with the Cascading Style Sheet - Follow the instructions
ID: 3664464 • Letter: B
Question
Build on your web site with the Cascading Style Sheet - Follow the instructions carefully: Working from the document you created in week 3 redo the coding to include an internal style sheet. Save your work and rename your document as “lastname_week5.html” Upload your file to the student web space. Type your URL address to the drop box. Make sure you upload all images and other files that are necessary to make this page complete. If you have saved your images in an “images folder”, you need to upload this folder to the student web page or create a folder inside of this space, and place your images there. Just for fun try to create an external style sheet for these pages. You will need to up load your external “CSS” style sheet to your student web space, so it will work along side of your web page.
Explanation / Answer
Answer:
lastname_week5.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900|Quicksand:400,700" rel="stylesheet" />
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div id="header-wrapper">
<div id="header" class="container">
<div id="logo">
<h1><a href="#">Our Website</a></h1>
<div id="menu">
<ul>
<li class="current_page_item"><a href="#" accesskey="1" title="">Homepage</a></li>
<li><a href="#" accesskey="2" title="">Our Clients</a></li>
<li><a href="#" accesskey="3" title="">About Us</a></li>
<li><a href="#" accesskey="4" title="">Careers</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="page-wrapper">
<div id="page" class="container">
<div class="title">
<h2>Welcome to our website</h2>
</div>
<p>This is <strong>Our Website</strong>, a free, fully standards-compliant CSS template. You're pretty much free to do whatever you want with it (even use it commercially) provided you give us credit for it. Have fun :) </p>
</div>
</div>
<div id="wrapper">
<div id="three-column" class="container">
<div><span class="arrow-down"></span></div>
<div id="tbox1">
<div class="title">
<h2>Maecenas luctus</h2>
</div>
<p>Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac suscipit mauris. Proin eu wisi suscipit nulla suscipit interdum.</p>
<a href="#" class="button">Learn More</a> </div>
<div id="tbox2">
<div class="title">
<h2>Integer gravida</h2>
</div>
<p>Proin eu wisi suscipit nulla suscipit interdum. Nullam non wisi a sem semper suscipit eleifend. Donec mattis libero eget urna. Duis velit ac mauris.</p>
<a href="#" class="button">Learn More</a> </div>
<div id="tbox3">
<div class="title">
<h2>Praesent mauris</h2>
</div>
<p>Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Nullam non wisi a sem suscipit eleifend.</p>
<a href="#" class="button">Learn More</a> </div>
</div>
<div id="portfolio" class="container">
<div class="column1">
<div class="box"> <a href="#"><img src="images/scr01.jpg" alt="" class="image image-full" /></a>
<h3>Vestibulum venenatis</h3>
<p>Fermentum nibh augue praesent a lacus at urna congue rutrum.</p>
<a href="#" class="button button-small">Etiam posuere</a> </div>
</div>
<div class="column2">
<div class="box"> <a href="#"><img src="images/scr02.jpg" alt="" class="image image-full" /></a>
<h3>Praesent scelerisque</h3>
<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
<a href="#" class="button button-small">Etiam posuere</a> </div>
</div>
<div class="column3">
<div class="box"> <a href="#"><img src="images/scr03.jpg" alt="" class="image image-full" /></a>
<h3>Donec dictum metus</h3>
<p>Vivamus fermentum nibh in augue praesent urna congue rutrum.</p>
<a href="#" class="button button-small">Etiam posuere</a> </div>
</div>
<div class="column4">
<div class="box"> <a href="#"><img src="images/scr04.jpg" alt="" class="image image-full" /></a>
<h3>Mauris vulputate dolor</h3>
<p>Rutrum fermentum nibh in augue praesent urna congue rutrum.</p>
<a href="#" class="button button-small">Etiam posuere</a> </div>
</div>
</div>
</div>
<div id="copyright" class="container">
<p>© Untitled. All rights reserved.</p>
<ul class="contact">
<li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li>
<li><a href="#" class="icon icon-facebook"><span></span></a></li>
<li><a href="#" class="icon icon-dribbble"><span>Pinterest</span></a></li>
<li><a href="#" class="icon icon-tumblr"><span>Google+</span></a></li>
<li><a href="#" class="icon icon-rss"><span>Pinterest</span></a></li>
</ul>
</div>
</body>
</html>
External css:
html, body
{
height: 100%;
}
body
{
margin: 0px;
padding: 0px;
background: #404040;
font-family: 'Quicksand', sans-serif;
font-size: 12pt;
font-weight: 400;
color: #000000;
}
h1, h2, h3
{
margin: 0;
padding: 0;
color: #404040;
}
p, ol, ul
{
margin-top: 0;
}
ol, ul
{
padding: 0;
list-style: none;
}
p
{
line-height: 180%;
}
strong
{
}
a
{
color: #ff8a0e;
}
a:hover
{
text-decoration: none;
}
.container
{
margin: 0px auto;
width: 1200px;
}
/*********************************************************************************/
/* Form Style */
/*********************************************************************************/
form
{
}
form label
{
display: block;
text-align: left;
margin-bottom: 0.5em;
}
form .submit
{
margin-top: 2em;
line-height: 1.5em;
font-size: 1.3em;
}
form input.text,
form select,
form textarea
{
position: relative;
-webkit-appearance: none;
display: block;
border: 0;
background: #fff;
background: rgba(255,255,255,0.75);
width: 100%;
border-radius: 0.50em;
margin: 1em 0em;
padding: 1.50em 1em;
box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
border: solid 1px rgba(0,0,0,0.15);
-moz-transition: all 0.35s ease-in-out;
-webkit-transition: all 0.35s ease-in-out;
-o-transition: all 0.35s ease-in-out;
-ms-transition: all 0.35s ease-in-out;
transition: all 0.35s ease-in-out;
font-size: 1em;
outline: none;
}
form input.text:hover,
form select:hover,
form textarea:hover
{
}
form input.text:focus,
form select:focus,
form textarea:focus
{
box-shadow: 0 0 2px 1px #E0E0E0;
background: #fff;
}
form textarea
{
min-height: 12em;
}
form .formerize-placeholder
{
color: #555 !important;
}
form ::-webkit-input-placeholder
{
color: #555 !important;
}
form :-moz-placeholder
{
color: #555 !important;
}
form ::-moz-placeholder
{
color: #555 !important;
}
form :-ms-input-placeholder
{
color: #555 !important;
}
form ::-moz-focus-inner
{
border: 0;
}
/*********************************************************************************/
/* Image Style */
/*********************************************************************************/
.image
{
display: inline-block;
border: 1px solid rgba(0,0,0,.1);
}
.image img
{
display: block;
width: 100%;
}
.image-full
{
display: block;
width: 100%;
margin: 0 0 3em 0;
}
.image-left
{
float: left;
margin: 0 2em 2em 0;
}
.image-centered
{
display: block;
margin: 0 0 2em 0;
}
.image-centered img
{
margin: 0 auto;
width: auto;
}
/*********************************************************************************/
/* List Styles */
/*********************************************************************************/
ul.style1
{
}
/*********************************************************************************/
/* Social Icon Styles */
/*********************************************************************************/
ul.contact
{
margin: 0;
padding: 2em 0em 0em 0em;
list-style: none;
}
ul.contact li
{
display: inline-block;
padding: 0em 0.10em;
font-size: 1em;
}
ul.contact li span
{
display: none;
margin: 0;
padding: 0;
}
ul.contact li a
{
color: #FFF;
}
ul.contact li a:before
{
display: inline-block;
background: #ff8a0e;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
color: #FFFFFF;
}
/*********************************************************************************/
/* Button Style */
/*********************************************************************************/
.button
{
display: inline-block;
margin-top: 2em;
padding: 1em 2em 1em 2em;
background: #ff8a0e;
line-height: 1.8em;
text-decoration: none;
text-transform: uppercase;
font-weight: 700;
font-size: 1em;
color: #FFF;
}
.button:before
{
display: inline-block;
background: #8DCB89;
margin-right: 1em;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 20px;
text-align: center;
color: #272925;
}
.button-small
{
}
/*********************************************************************************/
/* Heading Titles */
/*********************************************************************************/
.title
{
margin-bottom: 3em;
}
.title h2
{
font-size: 2.8em;
}
.title .byline
{
text-transform: uppercase;
font-weight: 400;
font-size: 1.1em;
color: #6F6F6F;
}
/*********************************************************************************/
/* Header */
/*********************************************************************************/
#header-wrapper
{
overflow: hidden;
padding: 10em 0em 10em 0em;
background: url(images/bg01.jpg) repeat-x center top;
border-bottom: 20px solid rgba(0,0,0,.5);
}
#header
{
}
/*********************************************************************************/
/* Logo */
/*********************************************************************************/
#logo
{
}
#logo h1
{
display: inline-block;
margin-bottom: 0.20em;
padding: 0.20em 0.9em;
background: #000;
font-size: 3.5em;
}
#logo a
{
text-decoration: none;
color: #FFF;
}
#logo span
{
display: block;
text-transform: uppercase;
font-size: 0.90em;
color: rgba(255,255,255,0.5);
}
#logo span a
{
color: rgba(255,255,255,0.8);
}
/*********************************************************************************/
/* Menu */
/*********************************************************************************/
#menu
{
}
#menu ul
{
display: inline-block;
padding: 0em 2em;
background: #ff8a0e;
text-align: center;
}
#menu li
{
display: inline-block;
}
#menu li a, #menu li span
{
display: inline-block;
padding: 1.3em 1.5em;
text-decoration: none;
font-size: 0.90em;
font-weight: 600;
text-transform: uppercase;
outline: 0;
color: #FFF;
}
#menu li:hover a, #menu li.active a, #menu li.active span
{
}
#menu .current_page_item a
{
color: #FFF;
}
/*********************************************************************************/
/* Banner */
/*********************************************************************************/
#banner
{
}
/*********************************************************************************/
/* Wrapper */
/*********************************************************************************/
#wrapper
{
overflow: hidden;
padding: 0em 0em 5em 0em;
background: #FFF;
}
#wrapper1
{
background: #FFF;
}
#wrapper2
{
}
#wrapper3
{
}
#wrapper4
{
}
/*********************************************************************************/
/* Welcome */
/*********************************************************************************/
#welcome
{
overflow: hidden;
width: 1000px;
padding: 8em 100px 0em 100px;
text-align: center;
color: rgba(0,0,0,0.6);
}
#welcome .content
{
padding: 0em 8em;
}
#welcome .title h2
{
color: rgba(0,0,0,0.8);
}
#welcome a,
#welcome strong
{
color: rgba(0,0,0,0.8);
}
/*********************************************************************************/
/* Page */
/*********************************************************************************/
#page-wrapper
{
overflow: hidden;
background: #F3F3F3;
padding: 3em 0em;
text-align: center;
}
#page
{
}
/*********************************************************************************/
/* Content */
/*********************************************************************************/
#content
{
float: left;
width: 700px;
padding-right: 100px;
border-right: 1px solid rgba(0,0,0,.1);
}
/*********************************************************************************/
/* Sidebar */
/*********************************************************************************/
#sidebar
{
float: right;
width: 350px;
}
/*********************************************************************************/
/* Footer */
/*********************************************************************************/
#footer
{
text-align: center;
}
#footer .title span
{
color: rgba(255,255,255,0.4);
}
/*********************************************************************************/
/* Copyright */
/*********************************************************************************/
#copyright
{
overflow: hidden;
padding: 5em 0em;
border-top: 1px solid rgba(255,255,255,0.08);
text-align: center;
}
#copyright p
{
text-transform: uppercase;
font-size: 0.80em;
color: rgba(255,255,255,0.3);
}
#copyright a
{
text-decoration: none;
color: rgba(255,255,255,0.6);
}
/*********************************************************************************/
/* Newsletter */
/*********************************************************************************/
#newsletter
{
overflow: hidden;
padding: 8em 0em;
background: #EDEDED;
text-align: center;
}
#newsletter .title h2
{
color: rgba(0,0,0,0.8);
}
#newsletter .content
{
width: 600px;
margin: 0px auto;
}
/*********************************************************************************/
/* Portfolio */
/*********************************************************************************/
#portfolio
{
}
#portfolio .box
{
text-align: center;
color: rgba(0,0,0,0.5);
}
#portfolio h3
{
display: block;
padding-bottom: 1em;
text-transform: uppercase;
font-size: 1em;
color: rgba(0,0,0,0.6);
}
#portfolio .title
{
text-align: center;
}
#portfolio .title h2
{
color: rgba(0,0,0,0.8);
}
.column1,
.column2,
.column3,
.column4
{
width: 282px;
}
.column1,
.column2,
.column3
{
float: left;
margin-right: 24px;
}
.column4
{
float: right;
}
/*********************************************************************************/
/* Three Columns */
/*********************************************************************************/
#three-column
{
overflow: hidden;
text-align: center;
}
#three-column h2
{
margin: 1em 0em;
text-transform: uppercase;
font-size: 1.5em;
font-weight: 700;
}
#three-column .icon
{
position: relative;
display: block;
margin: 0px auto 0.80em auto;
background: none;
line-height: 150px;
font-size: 4em;
width: 150px;
height: 150px;
border-radius: 100px;
border: 6px solid #67128F;
text-align: center;
color: #FFF;
}
#three-column #tbox1,
#three-column #tbox2,
#three-column #tbox3
{
float: left;
width: 320px;
padding: 80px 40px 80px 40px;
}
#three-column .title
{
text-align: center;
text-transform: uppercase;
}
#three-column .title h2
{
font-size: 1.60em;
}
#three-column .title .byline
{
padding-top: 0.50em;
font-size: 0.90em;
color: #858585;
}
#three-column .arrow-down
{
border-top-color: #292929;
}
Dropbox link:
https://www.dropbox.com/sh/zitn0vdu67s453h/AADcr3lYYFTOImaBkmjG1pXka?dl=0
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.