HTML5 and CSS3-Illustra × Kodak Black-I Need × + courses/CST-231 001 .201 910/HT
ID: 3754300 • Letter: H
Question
HTML5 and CSS3-Illustra × Kodak Black-I Need × + courses/CST-231 001 .201 910/HTML5%20and%20CSS3%2C%2011 r of floated elements lass value container to auto. URE D-28 Spotted Wien Garden Ce C D file/l/C/Users/sasha,000/Documents/394049 HTML UD Data, Files/C1/indexhtmi E Spotted Wren Garden Center For your year-round gardea aud yad needs Summer Hours Mon amSp Specials Annuals 50% Off All Pasts and Mums Tropicals Tho 8am-8pm Fri Saca-Spm Sat 9am-6pm Sun 11am-6pm Buy Two Succulents (quart size) 25% Off All Palms 20% Off Orchids Get Oue Free Perennials 50% Off Roses 4S N. 58th St. Ounala NE 68132 (402) 555-9736 Laying Out Elements With CSS 105Explanation / Answer
Contruction of a box model in HTML requires CSS styling.
Note:
Pre-requisite:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #FFFF00;
padding: 30px;
text-align: center;
font-size: 35px;
color: black;
}
/* Create two columns/boxes that floats next to each other */
nav {
float: left;
width: 50%;
height: 300px; /* only for demonstration, should be removed */
background: #008000;
padding: 20px;
}
/* Style the list inside the menu */
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
width: 50%;
background-color: #FF4500;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section:after {
content: "";
width: 50%;
display: table;
clear: both;
}
/* Style the footer */
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: black;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<header>
<h1>Spotted Wren Garden Center</h1>
<h3> For your year-round garden and yard needs</h3>
</header>
<section>
<nav>
<ul>
<li><h2>Summer Hours</h2></li>
<li>Mon</li>
<li>Tues</li>
<li>Wed</li>
</ul>
</nav>
<article>
<ul>
<li><h2>Specials</h2></li>
<li><h3>Annuals</h3></li>
<li>50% off</li>
</ul>
</article>
</section>
<footer>
<p>548 N 58th St</p>
</footer>
</body>
</html>
Code Explanation:
HTML code is written within <HTML> tags
All the codes to be displayed is written within <BODY> tags
I have created multiple divisions and named them according to my need, such as Header, Footer, Article and navigation
For each tags I have written CSS codes. The CSS codes have borders, text colour, width of the division.
That's it. Just Save this code in a text file. Rename this file as Index.html, change the type of file as "All Types". Run that file in your browser.
Happy Coding!
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.