-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3c8a1f9
commit f3439b0
Showing
2 changed files
with
481 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en-us"> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Site Plan</title> | ||
| <link type="text/css" rel="stylesheet" href="styles/site-plan.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <h1>[Site name] Site Plan</h1> | ||
| <h2>FirstName LastName</h2> | ||
| <h2>WDD 130-[section]</h2> | ||
| <!-- In the header above, add the name or your site, your name and class number. For example if you are in section 3 you would put WDD 130.03 --> | ||
| </header> | ||
| <main> | ||
|
|
||
| <!-- ------------------------Steps 2-3------------------------------ --> | ||
| <hr> | ||
| <h2>Overview</h2> | ||
| <h3>Purpose</h3> | ||
| <p>[Your purpose here]</p> <!-- change this --> | ||
|
|
||
|
|
||
| <h3>Audience</h3> | ||
| <p>[Your audience here]</p> <!-- change this --> | ||
|
|
||
| <hr> | ||
| <h2>Branding</h2> | ||
| <h3>Website Logo</h3> | ||
| <!-- Replace this with some sort of logo for your site. A logo can be as simple as the name of your site in a nice font :) --> | ||
| <img src="#" alt="Logo image"> | ||
| <hr> | ||
| <h2> | ||
| Style Guide | ||
| </h2> | ||
|
|
||
| <!-- ------------------------Steps 4-8------------------------------ --> | ||
|
|
||
| <h3> | ||
| Color Palette | ||
| </h3> | ||
| <!-- The colors you choose for a website are one of the most important decisions you will make. Follow the instructions on the activity in iLearn. You should have at least 2 colors but do not have to fill in all 4 if you do not need them. --> | ||
|
|
||
| <table class="colors"> | ||
| <tr><th>Primary</th><th>Secondary</th><th>Accent 1</th><th>Accent 2</th></tr> | ||
| <!-- Switch to the site-plan.css file and change your colors there. --> | ||
| <tr><td class="primary"></td><td class="secondary"></td><td class="accent1"></td><td class="accent2"></td></tr> | ||
| </table> | ||
|
|
||
| <!-- ------------------------Step 9------------------------------ --> | ||
|
|
||
| <h3> | ||
| Typography | ||
| </h3> | ||
| <!-- Choose a font for your paragraphs (body copy) and headlines. What font(s) have you chosen? Why did you choose what you did? Make sure to review the list of web safe fonts at W3Schools.org as a starting point. Think also about which of your colors above you might use for background and font colors. --> | ||
|
|
||
| <h4> | ||
| Heading Font: [Font Name here] <!-- change this --> | ||
| </h4> | ||
| <h4> | ||
| Paragraph Font: [Font Name here] <!-- change this --> | ||
| </h4> | ||
| <h3> | ||
| Normal paragraph example | ||
| </h3> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. | ||
| </p> | ||
| <h3> | ||
| Colored paragraph example | ||
| </h3> | ||
| <p class="colored"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. | ||
| </p> | ||
|
|
||
| <!-- ------------------------Step 10------------------------------ --> | ||
|
|
||
| <h3> | ||
| Navigation | ||
| </h3> | ||
| <!-- Think about how you want your navigation bar to look. In the site-plan.css file change the colors to your colors to get the look you desire. --> | ||
| <nav> | ||
| <a href="#">Home</a> | ||
| <a href="#">Page2</a> | ||
| <a href="#">Page3</a> | ||
| </nav> | ||
| <hr> | ||
| <h2> | ||
| Site Map | ||
| </h2> | ||
| <div class="sitemap"> | ||
| <div class="sm-home"> | ||
| Home | ||
| </div> | ||
| <div class="sm-page2"> | ||
| [Page2] <!-- change this --> | ||
| </div> | ||
| <div class="sm-page3"> | ||
| [Page3] <!-- change this --> | ||
| </div> | ||
|
|
||
| <div class="top"> | ||
| | ||
| </div> | ||
| <div class="left"> | ||
| | ||
| </div> | ||
| <div class="right"> | ||
| | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| <!-- --------Content Section -------------- --> | ||
| <hr> | ||
| <h2> | ||
| Content | ||
| </h2> | ||
| <h3>Home page</h3> | ||
| <p> | ||
| [Written copy for the home page here] | ||
| </p> | ||
| <p>Images for the Home page</p> | ||
| <img src="#" alt="image for homepage"> | ||
| <img src="#" alt="image for homepage"> | ||
|
|
||
| </ul> | ||
| <h3>[Page 2]</h3> | ||
| <p> | ||
| [Written copy for the Page 2 here] | ||
| </p> | ||
| <p>Images for the Page 2</p> | ||
| <img src="#" alt="image for page"> | ||
| <img src="#" alt="image for page"> | ||
|
|
||
| </ul> | ||
| <h3>[Page 3]</h3> | ||
| <p> | ||
| [Written copy for the Page 3 here] | ||
| </p> | ||
| <p>Images for the Page 3</p> | ||
| <img src="#" alt="image for page3"> | ||
| <img src="#" alt="image for page3"> | ||
|
|
||
| </ul> | ||
| <hr> | ||
| <h2> | ||
| Wireframes | ||
| </h2> | ||
| <p> | ||
| Create three wireframes for your site. One for each page and list them here</p> | ||
|
|
||
| <h3>Home</h3> | ||
| <p> | ||
| [Any additional details about home that the wireframe does not make clear] | ||
| </p> | ||
| <img src="#" alt="home page wireframe"> | ||
|
|
||
| <h3>[Page 2]</h3> | ||
| <p> | ||
| [Any additional details about page 2 that the wireframe does not make clear] | ||
| </p> | ||
| <img src="#" alt="page 2 wireframe"> | ||
|
|
||
| <h3>[Page 3]</h3> | ||
| <p> | ||
| [Any additional details about page 3 that the wireframe does not make clear] | ||
| </p> | ||
| <img src="#" alt="page 3 wireframe"> | ||
| </main> | ||
| </body> | ||
|
|
||
| </html> |
Oops, something went wrong.