Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions HTML-CSS-Pair-Programming-Lab-1
Submodule HTML-CSS-Pair-Programming-Lab-1 added at 3997ab
6 changes: 3 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

corrected spelling error


## 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
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The 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
Expand All @@ -19,4 +19,4 @@ You will pair program with a partner to complete this assignemnt. One partner, t
![](mockup.png)

## 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
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

corrected spelling error - repor ->report

87 changes: 54 additions & 33 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The 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>

132 changes: 116 additions & 16 deletions style.css
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;
}