Embedded Files
Essential Question: How can I use CSS and a Design Spec to create a website?
Mastery Objectives:
SWBAT create a website from scratch using a design spec.
SWBAT format the web page using CSS.
Directions: Create a website for a tea shop using a Design Spec.
When looking over the design spec we notice the content needed, the layout of the page, and other styles. There are numerous ways to create this page and make it match the spec as closely as possible. One of the styles noted on the design spec, opacity: 0.9;, is optional and will be up to you to decide whether to use the style or not.
Opacity, can make high contrast colors - like white on black - look softer and more subtle. When adding opacity, we suggest adding it to your main container (not the navigation section), but remember to ask yourself - do I like the look of this?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Tea Cozy</title>
<link rel="stylesheet" href="style.css">
<meta>
</head>
<body>
<header>
<img class="logo" src="img-tea-cozy-logo.png" alt=" Tea Cozy Logo">
<nav>
<ul class="navigation">
<li><a href="#mission-target">Mission</a></li>
<li><a href="#featured-tea-target">Featured Tea</a></li>
<li><a href="#locations-target">Locations</a></li>
</ul>
</nav>
</header>
<a href="" id="mission-target"></a>
<section class="mission-container">
<div class="mission-statement-container">
<img src="img-mission-background.jpg">
<h2>Our Mission</h2>
<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
</div>
</section>
<a href="" id="featured-tea-target"></a>
<section class="featured-container">
<div class="featured-statement">
<h2>Tea of the Month</h2>
<h4>What's Steeping at The Tea Cozy?</h4>
</div>
<div class="flexbox-center">
<div class="img-container">
<figure>
<img src="img-berryblitz.jpg" alt="Fall Berry Blitz Tea">
<figcaption>Fall Berry Blitz Tea</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="img-spiced-rum.jpg" alt="Spiced Rum Tea">
<figcaption>Spiced Rum Tea</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="img-donut.jpg" alt="Seasonal Donuts">
<figcaption>Seasonal Donuts</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="img-myrtle-ave.jpg" alt="Myrtle Ave Tea">
<figcaption>Myrtle Ave Tea</figcaption>
</figure>
</div>
<div class="img-container">
<figure>
<img src="img-bedford-bizarre.jpg" alt="Bedford Bizarre Tea">
<figcaption>Bedford Bizarre Tea</figcaption>
</figure>
</div>
</div>
</section>
<a href="" id="locations-target"></a>
<section class="locations-container">
<div class="locations-statement">
<img src="img-locations-background.jpg">
<h2>Locations</h2>
</div>
<div class="address-container">
<h3>Downtown</h3>
<h4>384 West 4th St</h4>
<h4>Suite 108</h4>
<h4>Portland, Maine</h4>
</div>
<div class="address-container">
<h3>East Bayside</h3>
<h4>3433 Phisherman's Avenue</h4>
<h4>(Northwest Corner)</h4>
<h4>Portland, Maine</h4>
</div>
<div class="address-container">
<h3>Oakdale</h3>
<h4>515 Crescent Avenue</h4>
<h4>Second Floor</h4>
<h4>Portland, Maine</h4>
</div>
</section>
<section class="contact-container">
<h2>The Tea Cozy</h2>
<h5>contact@theteacozy.com</h5>
<h4>917-55-8904</h4>
</section>
<footer>
<h5>copyright The Tea Cozy 2017</h5>
</footer>
</body>
</html>
/*RESET STYLES*/
* {
}
/*GLOBAL STYLES*/
html {
}
body {
}
/*NAVIGATION BAR STYLES*/
header {
}
.logo {
}
.navigation {
}
.navigation a {
}
.navigation a:hover {
}
@media screen and (max-width: 700px) {
.navigation {
}
.navigation a {
}
header {
}
}
/*MISSION SECTION STYLES*/
.mission-container {
}
@media screen and (max-width: 1200px){
.mission-container {
}
.mission-container h2, h4{
}
}
@media screen and (max-width: 700px) {
.mission-container {
}
}
.mission-container h2{
}
.mission-container h4{
}
.mission-statement-container {
}
/*FEATURED TEAS SECTION STYLES*/
.featured-container {
}
.featured-statement {
}
.featured-statement h4 {
}
.flexbox-center {
}
.img-container {
}
.img-container img{
}
figcaption {
}
/*LOCATIONS SECTION STYLES*/
.locations-container {
}
.locations-statement {
}
.address-container {
}
.address-container h3 {
}
.address-container h4 {
}
/*CONTACT SECTION STYLES*/
.contact-container {
}
.contact-container h2 {
}
.contact-container h5, .contact-container h4 {
}
/*FOOTER STYLES*/
footer h5{
}
Page updated
Google Sites
Report abuse