Assignment Week 12 and 13 Page layout and navigation Design an external CSS styl
ID: 3814124 • Letter: A
Question
Assignment Week 12 and 13 Page layout and navigation Design an external CSS style sheet (5 points). Use this style sheet to define consistent look of two html pages designed using CSS box model.
1. The two html pages should both have at least three columns as shown below (10 pts).
2. The column on the left performs as navigation between the two pages created, the links only link to PAGE 1 and PAGE 2. You don’t need external link in this assignment. When click on “link to page1”, page1 should appear in the same web browser window. When click on “link to page2”, page2 should appear in the same web browser window Do not open a new browser window when clicking on the links. (10 pts)
3. The links should look and behave like the ones in exercise 17-1 | Trying out transitions. (5 pts)
4. The second and third columns contain text and at least 2 floating images and 1 floating images respectively. You can find random text generator on the web. (5 pts)
5. Clicking on the page links result in switching between two pages that have identical Header, Footer and Navigation areas. The two content columns are the only areas where the content changes.
Explanation / Answer
The image displaying the thre columns setup has not been displayed,but lets create a similar one.
This is the html code of the first html page i.e. page1.html.
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="style.css" type="text/css"></head>
<header>Responsive webpage design</header>
<div id="pagewrap">
<header>
<h1>3 Column Responsive Layout</h1>
</header>
</div>
<div class="main">
<p>Three columns with floating images</p>
<p class="content">
There is more stuff to come!
</p>
</div>
</div>
</div>
<div id="pattern" class="pattern">
<div class="col-group">
<div>
<h2>First column of text</h2>
<p> !-- Here is the content... -->Up until then, you're working for a boss who only complains! To get through the exhaustion and emotional upheaval, keep this in mind: your efforts aren't lost on baby in those early days. "He feels comforted by his father or mother, he feels attachment, he likes to be held
</p>
Link to next page
<a href="page2.html" target="_parent">Link to go to page 2</a>
</div>
<div>
<h2>Second column of text</h2>
<p> <!-- Here is the content... --> A newborn loses 5 to 8 percent of her birthweight within the first week but should gain it back by the second. Diaper-counting can also act as a gauge: her schedule those first five days is haphazard, but after that, you'll see five to six wet diapers a day, and at least one or two stools.
</p>
<img src="https://www.google.co.in/search?q=images+online+babies&tbm=isch&imgil=Ocgjab3MtpkQ9M%253A%253B-KU8tX3EHkGmlM%253Bhttp%25253A%25252F%25252Fwww.ohbaby.co.nz%25252Fblogs%25252Fp%25252Fparenting-tips%25252F2014%25252F9%25252F30%25252F4-handy-tips-to-pick-the-best-baby-product-online%25252F&source=iu&pf=m&fir=Ocgjab3MtpkQ9M%253A%252C-KU8tX3EHkGmlM%252C_&usg=__M9bZVSZ6PqpFwkbDqjwdD4c1jMw%3D&biw=1440&bih=803&ved=0ahUKEwjprJn3gZjTAhUGro8KHTKdB58QyjcIMA&ei=537qWKmdGIbcvgSyup74CQ#imgrc=Ocgjab3MtpkQ9M:"
alt=""></img>
<img src="https://www.google.co.in/search?q=images+online+babies&tbm=isch&imgil=Ocgjab3MtpkQ9M%253A%253B-KU8tX3EHkGmlM%253Bhttp%25253A%25252F%25252Fwww.ohbaby.co.nz%25252Fblogs%25252Fp%25252Fparenting-tips%25252F2014%25252F9%25252F30%25252F4-handy-tips-to-pick-the-best-baby-product-online%25252F&source=iu&pf=m&fir=Ocgjab3MtpkQ9M%253A%252C-KU8tX3EHkGmlM%252C_&usg=__M9bZVSZ6PqpFwkbDqjwdD4c1jMw%3D&biw=1440&bih=803&ved=0ahUKEwjprJn3gZjTAhUGro8KHTKdB58QyjcIMA&ei=537qWKmdGIbcvgSyup74CQ#imgrc=2stz6t25q2be_M:"
alt=""></img>
</div>
<div>
<h2>Third column of text</h2>
<p> Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst.
</p></div>
</div>
</div>
<!--End Pattern HTML-->
<div class="container">
<section class="pattern-description">
<h1>3 Columns Pattern Webpage</h1>
<p>Content that becomes 3 equal columns when space allows.</p>
</section>
<footer role="contentinfo">
<div>
<nav id="menu">
<a href="http://bradfrost.github.com/this-is-responsive/patterns.html#">←More Responsive Patterns</a>
</nav>
</div>
</footer>
</div>
</body>
</html>
Next, we write the .css stylesheet code which controls the styles and display of our html webpages.
div.left
{
width:10% ; padding:0 0 0 4%
float: left}
div.content
{
width:30% ; padding:0 4%
float: middle}
div.right
{
width:10% ; padding:0 4% 0 0
float: right}
img { float: left;
padding:auto }
body {
font-size: 100%/16px/1em
}
body {
font-family: 'Open Sans', sans-serif;
color: #876;
}
p {
font-size: 87.5%/14px/0.875em
clear: left;
font-family:"Comic Sans MS", cursive, sans-serif
;
;
}
h1 {
font-size: 150%/1.5em/24px
}
a {
color: #6dd4b1;
transition: all 0.5s linear;
}
a:hover, a:focus {
color: #357067;
}
div:hover p {
opacity: 1;
}
div:hover img {
bottom: -100px;
}
div:hover h2 {
top: -100px;
}
.col-group > div {
padding: 1em 1em 0;
}
.col-group > div {
float: right;
width: 30%;
}
}
Next, we write the code of our second html page, i.e. page2.html.
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="style.css" type="text/css"></head>
<header>Responsive webpage design</header>
<div id="pagewrap">
<header>
<h1>3 Column Responsive Layout and design </h1>
</header>
</div>
<div class="main">
<p>Three columns with floating images</p>
<p class="content">
There is still more stuff to come!
</p>
</div>
</div>
</div>
<div id="pattern" class="pattern">
<div class="col-group">
<div>
<h2>Second floating text</h2>
<p> Scarcely on striking packages by so property in delicate. Up or well must less rent read walk so be. Easy sold at do hour sing spot. Any meant has cease too the decay. Since party burst am it match. By or blushes between besides offices noisier as. Sending do brought winding compass in. Paid day till shed only fact age its end. </p>
Link to next page
<a href="page1.html" target="_parent">Link to go to back to page 1</a>
</div>
<div>
<h2>First floating text</h2>
<p> Of recommend residence education be on difficult repulsive offending. Judge views had mirth table seems great him for her. Alone all happy asked begin fully stand own get. Excuse ye seeing result of we. See scale dried songs old may not. Promotion did disposing you household any instantly. Hills we do under times at first short an.
</p>
<img src="https://www.google.co.in/search?q=images+online+babies&tbm=isch&imgil=Ocgjab3MtpkQ9M%253A%253B-KU8tX3EHkGmlM%253Bhttp%25253A%25252F%25252Fwww.ohbaby.co.nz%25252Fblogs%25252Fp%25252Fparenting-tips%25252F2014%25252F9%25252F30%25252F4-handy-tips-to-pick-the-best-baby-product-online%25252F&source=iu&pf=m&fir=Ocgjab3MtpkQ9M%253A%252C-KU8tX3EHkGmlM%252C_&usg=__M9bZVSZ6PqpFwkbDqjwdD4c1jMw%3D&biw=1440&bih=803&ved=0ahUKEwjprJn3gZjTAhUGro8KHTKdB58QyjcIMA&ei=537qWKmdGIbcvgSyup74CQ#imgrc=Ocgjab3MtpkQ9M:"
alt=""></img>
<img src="https://www.google.co.in/search?q=images+online+babies&tbm=isch&imgil=Ocgjab3MtpkQ9M%253A%253B-KU8tX3EHkGmlM%253Bhttp%25253A%25252F%25252Fwww.ohbaby.co.nz%25252Fblogs%25252Fp%25252Fparenting-tips%25252F2014%25252F9%25252F30%25252F4-handy-tips-to-pick-the-best-baby-product-online%25252F&source=iu&pf=m&fir=Ocgjab3MtpkQ9M%253A%252C-KU8tX3EHkGmlM%252C_&usg=__M9bZVSZ6PqpFwkbDqjwdD4c1jMw%3D&biw=1440&bih=803&ved=0ahUKEwjprJn3gZjTAhUGro8KHTKdB58QyjcIMA&ei=537qWKmdGIbcvgSyup74CQ#imgrc=2stz6t25q2be_M:"
alt=""></img>
</div>
<div>
<h2>Third floating text</h2>
<p>She who arrival end how fertile enabled. Brother she add yet see minuter natural smiling article painted. Themselves at dispatched interested insensible am be prosperous reasonably it. In either so spring wished. Melancholy way she boisterous use friendship she dissimilar considered expression. Sex quick arose mrs lived. Mr things do plenty others an vanity myself waited to. Always parish tastes at as mr father dining at.
</p></div>
</div>
</div>
<!--End Pattern HTML-->
<div class="container">
<section class="pattern-description">
<h1>3 Columns Pattern Webpage</h1>
<p>Content that becomes 3 equal columns when space allows.</p>
</section>
<footer role="contentinfo">
<div>
<nav id="menu">
<a href="http://bradfrost.github.com/this-is-responsive/patterns.html#">←More Responsive Patterns</a>
</nav>
</div>
</footer>
</div>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.