-
Notifications
You must be signed in to change notification settings - Fork 1
Stephanie #2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Stephanie #2
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,12 +4,12 @@ | |
| One partner should fork this project to their account and both partners should clone the project to their devices. | ||
|
|
||
| ## Description | ||
| You will pair program with a partner to complete this assignemnt. One partner, the driver, should share their screen and be the one typing. The other partner, the observer, should review each line of code. Both partners should be cooperating when solving problems. When an objective has been met, the driver should push the code to the GitHub account, the observer should pull the changes, and the two partners switch roles. | ||
| You will pair program with a partner to complete this assignment. One partner, the driver, should share their screen and be the one typing. The other partner, the observer, should review each line of code. Both partners should be cooperating when solving problems. When an objective has been met, the driver should push the code to the GitHub account, the observer should pull the changes, and the two partners switch roles. | ||
|
|
||
| ## Steps | ||
| 1. Create the header and footer for the webpage. | ||
| 2. Display the main content (left side of mock up) on the webpage | ||
| 3. Display the Sidebar conent on the webpage | ||
| 3. Display the Sidebar content on the webpage | ||
|
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. corrected spelling error - conent ->content |
||
| 4. The page should have the correct coloring | ||
| 5. Convert main content to a 2 column layout | ||
| 6. The page should have the correct spacing | ||
|
|
@@ -19,4 +19,4 @@ You will pair program with a partner to complete this assignemnt. One partner, t | |
|  | ||
|
|
||
| ## Submission | ||
| Create a pull request from your team's repor to the class repo | ||
| Create a pull request from your team's report to the class repo | ||
|
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. corrected spelling error - repor ->report |
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -4,44 +4,65 @@ | |
| <link rel="stylesheet" href="style.css"> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Document</title> | ||
| <title>MyWebsite</title> | ||
|
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. changed document->MyWebsite for SEO optimization |
||
| </head> | ||
| <body> | ||
|
|
||
| <h1>MyWebsite</h1> | ||
| <main> | ||
| <div class="thumbnail"> | ||
| <img src="https://www.ge.com/news/sites/default/files/styles/full_header/public/Reports/2020-03/GettyImages-530755444-e1496426370542.jpg?itok=67DfrtvX" alt="Golden Gate Bridge at Sunset"> | ||
| </div> | ||
| <div> | ||
| <h2>This is a Lorem Ipsum Heading</h2> | ||
| <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reiciendis, asperiores. Tempore ipsam, libero eveniet amet odit ex a dicta pariatur exercitationem alias, similique molestiae non sed repellendus sit aliquid nemo!</p> | ||
|
|
||
| <a href="">Read More</a> | ||
| </div> | ||
| <content> | ||
| <section class="sidebar"> | ||
| <h3>SideBar Links</h3> | ||
| <hr> | ||
| <ul> | ||
| <li><a href="">Link 1</a></li> | ||
| <li><a href="">Link 2</a></li> | ||
| <li><a href="">Link 3</a></li> | ||
| <li><a href="">Link 4</a></li> | ||
| </ul> | ||
| <body> | ||
| <div class="container-main"> <!--flex container--> | ||
| <div class="main-header"> | ||
| <header> | ||
| <h1>MyWebsite</h1> | ||
| </header> | ||
| </div> | ||
|
|
||
| </section> | ||
| </content> | ||
| <section> | ||
| <h3>Other Widgets</h3> | ||
| <hr> | ||
| <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime aliquid excepturi sequi facilis nobis, saepe quis voluptas quisquam. Cum molestiae itaque amet dolorem. Temporibus voluptate est placeat laudantium nisi quas?</p> | ||
| <br> | ||
| <div class="main-content"> | ||
|
|
||
| <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> | ||
| </section> | ||
| <div class="col-left"> | ||
| <figure class="thumbnail"> | ||
| <img src="https://www.ge.com/news/sites/default/files/styles/full_header/public/Reports/2020-03/GettyImages-530755444-e1496426370542.jpg?itok=67DfrtvX" alt="Golden Gate Bridge at Sunset"> | ||
| </figure> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="col-middle"> | ||
| <h2 class="text">This is a Lorem Ipsum Heading</h2> | ||
| <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime aliquid excepturi sequi facilis nobis, saepe quis voluptas quisquam. Cum molestiae itaque amet dolorem.</p> | ||
| <br> | ||
| <a class="read-more" href="">Read More</a> | ||
|
|
||
| </div> | ||
|
|
||
| <div class="col-right"> | ||
| <aside class="sidebar"> | ||
| <section class="sidebar-links"> | ||
| <h3 class="sidebar-header">SideBar Links</h3> | ||
| <hr> | ||
| <ul class="links"> | ||
| <li><a href="">Link 1</a></li> | ||
| <li><a href="">Link 2</a></li> | ||
| <li><a href="">Link 3</a></li> | ||
| <li><a href="">Link 4</a></li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section class="sidebar-widgets"> | ||
| <h3 class="header-widgets">Other Widgets</h3> | ||
| <hr> | ||
| <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maxime aliquid excepturi sequi facilis nobis, saepe quis voluptas quisquam. Cum molestiae itaque amet dolorem.</p> | ||
| <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p> | ||
| </section> | ||
| </aside> | ||
|
|
||
| </div> | ||
| </div> | ||
|
|
||
| <div class="main-footer"> | ||
| <footer> | ||
| <h5 class="footer-text">Copyright <span style="color:#e68a00">YourSite</span>. All Rights Reserved.</h5> | ||
| </footer> | ||
| </div> | ||
|
|
||
|
|
||
| </div> | ||
| </body> | ||
| </html> | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,129 @@ | ||
| @import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap"); | ||
| h1{ | ||
| color: orange; | ||
| background-color: black; | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
| /***flexbox styles ***/ | ||
| .container-main { /*main flex container*/ | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: stretch; | ||
| } | ||
|
|
||
| /***header styles***/ | ||
| .main-header { /*flex item*/ | ||
| background-color: #3c3c3c; | ||
| font-family: "Roboto"; | ||
| font-size: 1.25em; | ||
| color: #e68a00; | ||
| padding: 0 1em; | ||
| } | ||
|
|
||
| .main-content { /*creates a flex parent container*/ | ||
| /* background-color: lightblue; */ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| .col-left { /*flex child item*/ | ||
| background-color:white; | ||
| flex-grow: 1; | ||
| flex-basis: 0; | ||
| padding-top: 1em; | ||
| } | ||
|
|
||
| .col-middle { /*flex child item - main content*/ | ||
| background-color: white; | ||
| flex-grow: 2; | ||
| flex-basis: 0; | ||
| padding-top: 1em; | ||
| padding-right: 2em; | ||
| } | ||
|
|
||
| .col-right { /*flex child item - aside content*/ | ||
| background-color: #e6e6e6; | ||
| flex-grow: 1; | ||
| flex-basis: 0; | ||
| padding-top: 1em; | ||
| padding-left: 1em; | ||
| padding-right: 1em; | ||
| } | ||
|
|
||
| .links { /*sidebar links - */ | ||
| display: flex; | ||
| flex-direction: column; /*stack links vertically*/ | ||
| margin-left: 0; | ||
| padding-left: 1em; | ||
| } | ||
|
|
||
| /***footer styles***/ | ||
| .main-footer { /*flex item - main footer style*/ | ||
| background-color:#3c3c3c; | ||
| font-family: "Roboto"; | ||
| padding: .75em .75em .75em .75em; | ||
| color: white; | ||
| text-align: center; | ||
| padding: 0 1em; | ||
| } | ||
|
|
||
| body{ | ||
| font-family: "Roboto"; | ||
| /***body styles***/ | ||
| body { | ||
| font-family: "Roboto"; | ||
| } | ||
|
|
||
| img{ | ||
| img { | ||
| width: auto%; | ||
| height: 100%; | ||
| width: 100%; | ||
| object-fit: cover; | ||
| } | ||
| .thumbnail{ | ||
|
|
||
| .thumbnail { | ||
| height: 200px; | ||
| width: 200px; | ||
| float: left; | ||
| margin-right: 15px; | ||
| padding-top: .50em; | ||
| margin-left: 1em; | ||
| margin-right: 1em; | ||
| } | ||
| .sidebar{ | ||
| display: inline-block; | ||
|
|
||
| h2 { | ||
| font-size: 1.5em; | ||
| } | ||
|
|
||
| h2, h3 { | ||
| color: #3c3c3c; | ||
| font-weight: 700; | ||
| } | ||
|
|
||
| .text { | ||
| line-height: 1.75em; | ||
| } | ||
|
|
||
| p { | ||
| color: #3c3c3c; | ||
| line-height: 1.5em; /*create space between lines of text in paragraphs*/ | ||
| } | ||
|
|
||
| .read-more { | ||
| font-size: .90em; | ||
| font-weight: 600; /*increased font weight bc it appears heavier than the links*/ | ||
| } | ||
| content{ | ||
|
|
||
| } | ||
|
|
||
| a { /*style links & remove underline*/ | ||
| text-decoration: none; | ||
| color: #e68a00; | ||
| } | ||
|
|
||
| li { /* create spacing between links */ | ||
| padding-bottom: 1.5em; | ||
| list-style-type: none; | ||
| margin: 0; | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| .header-widgets { /*add margin above other widgets */ | ||
| margin-top: 1em; | ||
| } | ||
|
|
||
| .sidebar { /*create space at bottom of other widgets*/ | ||
| margin-bottom: 7em; | ||
| } | ||
|
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
corrected spelling error