diff --git a/README.md b/README.md index 8033625685..9865185e17 100644 --- a/README.md +++ b/README.md @@ -36,14 +36,25 @@ Edit this document to include your answers after each question. Make sure to lea 1. If you were to describe semantic HTML to the next cohort of students, what would you say? +Semantic HTML is the process of providing meaning to your content. Using Semantic HTML makes your website readable and easily interpreted by machines. It also helps other developers be able to read your code, and keept it organized. There are certain semantic elements that hold meaning such as header, footer, and h1. + 2. What are the 4 areas of the box model? +The 4 areas of box model are the content, the padding, the border, and the margin. Content is the space within the model in which our text and images are rendered. The padding is around the content, its the space between the content and the border. The border is next, we can add this to style around the content and padding. Then, we have the margin which is the space between the border and everything else on the page (the "edge" of the webpage for example"). + + 3. While using flexbox, what axis does the following property work on: ```align-items: center```? +Align-items will work on the cross axis, what I would call the vertical axis. The command center will center the items. + 4. Explain why git is valuable to a team of developers. +Git is valuable to a team of developers because it allows a group of people to each work on their own code separately without affecting the master copy of the project, and then the team members can share, monitor, and control any changes made during development before they merge it onto the final project. Git allows you to track changes in an organized way, so you'll have a history of the coding in the file. + 5. Define mobile-first design in your own words. +In mobile first design, you would design the smallest size screen first, and then work your way up to bigger screens by using the media query tools in coding. For example, you could set a rule that AFTER 800 px, certain elements change in style to give the viewer a better experience. Perhaps you will change the layout of the divs so that they are in rows instead of columns as the screens get bigger. + You are expected to be able to answer all these questions. Your responses contribute to your Sprint Challenge grade. Skipping this section *will* prevent you from passing this challenge. ## Instructions diff --git a/about.html b/about.html new file mode 100644 index 0000000000..093b749705 --- /dev/null +++ b/about.html @@ -0,0 +1,11 @@ + + + + + + Document + + + About Lambda! + + \ No newline at end of file diff --git a/hailey-hansard-sprint-1.txt b/hailey-hansard-sprint-1.txt new file mode 100644 index 0000000000..bf204efde5 --- /dev/null +++ b/hailey-hansard-sprint-1.txt @@ -0,0 +1,13 @@ +Notes to keep myself organized: +I added the answers to the questions inside the ReadMe.md as requested. +Worked on my code in CodePen, then transferred my current code over to Visual Code. +Still trying to make the header look correct. +Added hero-image. + +Re-worked header and am happy with the header > logo > nav > nav links a. +Re-worked hero-image and am happy with the placement of it. +Added about.html page +Connected the about.html page to my index.html and it opens in a new tab +Added colors to all Boxes. +Added responsive breakpoints with media queries at 800px and 500px. +Still need to to: make the boxes look like the design templates for 800px and 500px sizes. \ No newline at end of file diff --git a/index.html b/index.html index d32d8ad25c..7c3e290fa7 100644 --- a/index.html +++ b/index.html @@ -11,65 +11,80 @@ - -
- -
-
-

The Future

-

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

-
-
-

The Past

-

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

-
-
- -
- -

Why Did It Have To Be Boxes...

- -
-
Box 1
-
Box 2
-
Box 3
-
Box 4
-
Box 5
-
Box 6
-
Box 7
-
Box 8
-
Box 9
-
Box 10
-
- -
+ +
+
+ + +
-
+
+ Space Highway +
-
-

That's

-

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

-
-
-

No

-

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

-
-
-

Moon

-

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

-
+
+ +
+
+

The Future

+

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

+
+
+

The Past

+

Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin faucibus imperdiet erat, non varius lacus. Maecenas non nisl id turpis egestas tincidunt. Nam condimentum venenatis magna eget finibus.

+
+
+ +
+

Why Did It Have To Be Boxes...

+
+
Box 1
+
Box 2
+
Box 3
+
Box 4
+
Box 5
+
Box 6
+
Box 7
+
Box 8
+
Box 9
+
Box 10
+
+
+ +
+
+

That's

+

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

+
+
+

No

+

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

+
+
+

Moon

+

Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc. Phasellus id dui id tortor tincidunt efficitur. Proin sed quam sed tellus vestibulum ultrices quis in nunc.

+
+
+ -
- - -
- + +
+ + diff --git a/style/index.css b/style/index.css index ae29d6ceee..fc52636e46 100644 --- a/style/index.css +++ b/style/index.css @@ -1,4 +1,4 @@ -/* http://meyerweb.com/eric/tools/css/reset/ +/* /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ @@ -19,7 +19,7 @@ time, mark, audio, video { margin: 0; padding: 0; border: 0; - font-size: 100%; + font-size: 62.5%; font: inherit; vertical-align: baseline; } @@ -28,6 +28,42 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } + +/* General Styling */ + +.big-container{ + width:100% +} + +header{ + display: flex; + flex-direction: row; + justify-content: space-between; + width: 800px; + margin: 2% auto 3.5%; + } + + header nav{ + width: 70%; + display: flex; + justify-content: space-around; + align-items: center; + margin-top: 1.1rem; + } + +.links a{ + color:black; + font-size: .85rem; + text-decoration: none; + display: flex; + justify-content: space-evenly; +} + +.hero-image { + width: 800px; + margin: 0 auto 2%; +} + body { line-height: 1; } @@ -101,10 +137,108 @@ p { justify-content: space-evenly; } -.middle-content .boxes .box { +.middle-content .boxes .box1 { width: 12.5%; height: 100px; - background: black; + background:teal; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box2 { + width: 12.5%; + height: 100px; + background:gold; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box3 { + width: 12.5%; + height: 100px; + background:cadetblue; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box4 { + width: 12.5%; + height: 100px; + background:coral; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box5 { + width: 12.5%; + height: 100px; + background:crimson; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} +.middle-content .boxes .box6 { + width: 12.5%; + height: 100px; + background:forestgreen; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; + } + +.middle-content .boxes .box7 { + width: 12.5%; + height: 100px; + background:darkorchid; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box8 { + width: 12.5%; + height: 100px; + background:hotpink; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box9 { + width: 12.5%; + height: 100px; + background:indigo; + margin: 20px 2.5%; + color: white; + display: flex; + align-items: center; + justify-content: center; +} + +.middle-content .boxes .box10 { + width: 12.5%; + height: 100px; + background:dodgerblue; margin: 20px 2.5%; color: white; display: flex; @@ -114,7 +248,8 @@ p { .bottom-content { display: flex; - margin: 0 2% 20px; + margin-top: 0; + margin-bottom: 20px; justify-content: space-around; } @@ -127,14 +262,17 @@ p { } footer { - width: 100%; + width:100%; background: black; + display:flex; + justify-content: flex-start; } footer nav { width: 60%; display: flex; justify-content: space-between; + justify-items: center; align-items: center; padding: 20px 2%; font-size: 14px; @@ -143,4 +281,246 @@ footer nav { footer nav a { color: white; text-decoration: none; -} \ No newline at end of file +} + +/* Media Queries */ + +/* Tablet Design 800 px */ + +@media(max-width: 800px){ +.big-container{ + margin:0; + padding:0; + width:100%; +} + +.container{ + width:100%; +} + +header{ + margin: 0; + padding: 2%; + display:flex; + justify-content: space-evenly; + justify-content: flex-start; + align-items: center; + width:100%; +} + +header > nav{ + width:100%; +} + +.hero-image{ + width:100%; + display:flex; + justify-content: center; +} + +header div{ + display:flex; + justify-content: center; + width: 100%; + flex-basis: 15%; + width: 40%; +} +.top-content{ + display:flex; + flex-direction: column; + width: 100%; + padding-left:2%; + } + +.top-content > .text-container{ + flex-basis: 90%; + width: 90%; + } + +.middle-content h2{ + text-align:left; + } + + +.middle-content .boxes { + display:flex; + flex-direction:row; + flex-wrap:wrap; + flex-basis: 12%; + justify-content: space-around; + justify-content: center; + align-content: center; + width: 35%; + margin-left:35%; + } + + +.middle-content > .boxes > .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10{ + flex-basis: 35%; + justify-content: center; + } + + +.bottom-content{ + display:flex; + flex-wrap: wrap; + justify-content: space-evenly; + } + +.bottom-content > .text-container{ + flex-basis: 35%; + padding: 1% 0; + width:100%; + } + + +footer{ + display:flex; + justify-content: space-evenly; +} +} + +/* Mobile Design 500px */ + +@media(max-width: 500px){ + .big-container{ + display:flex; + flex-direction: column; + width: 100%; + } + + header{ + display:flex; + flex-direction: column; + align-items: center; + width:100%; + padding-top:3%; + justify-content: space-between; + } + + nav.links{ + display:flex; + flex-direction:column; + justify-content: space-evenly; + height: 18vh; + } + + + .big-container > div > .hero-image{ + width:50%; + width: 50vw; + display:flex; + justify-content:center; + } + + .container{ + width:100%; + } + + .top-content{ + display:flex; + flex-wrap:wrap; + justify-content: space-evenly; + width: 100%; + padding: 2%; + } + + .top-content > .text-container{ + flex-basis: 80%; + } + + .middle-content h2{ + display:flex; + justify-content:center; + width:100%; + } + + .middle-content .boxes{ + width:100%; + margin: 0; + display:flex; + flex-direction:column; + justify-content: space-evenly; + align-items:center; + } +.middle-content > .boxes > div{ + flex-basis: 100%; + min-height: 100px; +} + .middle-content > .boxes > .box1{ + justify-content:center; + width:100px; + height:100px; + } + + .middle-content > .boxes > .box2{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box3{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box4{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box5{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box6{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box7{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box8{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box9{ + justify-content: center; + width:100px; + height:100px; + } + .middle-content > .boxes > .box10{ + justify-content: center; + width:100px; + height:100px; + } + + .bottom-content{ + display:flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-evenly; + width:100%; + padding:2%; + } + + .bottom-content > .text-container{ + padding: 4%; + width:100%; + } + + footer{ + height:20vh; + } + + footer > nav{ + display:flex; + flex-direction:column; + justify-content: space-between; + } +} +