+
+
+
+
+
+
+ 
+
-
+ 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.
+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.
+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
+
+
+
-
+
- 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.
+
-
+
-
+
+
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index ae29d6ceee..993f634d75 100644
--- a/style/index.css
+++ b/style/index.css
@@ -3,60 +3,154 @@
License: none (public domain)
*/
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
}
+
+
/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ display: block;
}
+
body {
- line-height: 1;
+ line-height: 1;
}
-ol, ul {
- list-style: none;
+
+ol,
+ul {
+ list-style: none;
}
-blockquote, q {
- quotes: none;
+
+blockquote,
+q {
+ quotes: none;
}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+ content: '';
+ content: none;
}
+
table {
- border-collapse: collapse;
- border-spacing: 0;
+ border-collapse: collapse;
+ border-spacing: 0;
}
* {
box-sizing: border-box;
}
-html, body {
+html,
+body {
height: 100%;
font-family: 'Roboto', sans-serif;
}
-h1, h2, h3, h4, h5 {
+h1,
+h2,
+h3,
+h4,
+h5 {
font-size: 18px;
margin-bottom: 15px;
font-family: 'Rubik', sans-serif;
@@ -74,15 +168,28 @@ p {
.top-content {
display: flex;
flex-wrap: wrap;
- justify-content: space-evenly;
+ justify-content: space-between;
+ margin: 0;
margin-bottom: 20px;
border-bottom: 1px dashed black;
+ padding: 0;
+ width: 800px;
+}
+
+.top-content nav {
+ text-decoration: none;
+ width: 800px;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: space-between;
+ text-align: center;
}
.top-content .text-container {
width: 48%;
padding: 0 1%;
- padding-bottom: 20px;
+ padding-bottom: 20px;
}
.middle-content {
@@ -134,13 +241,218 @@ footer {
footer nav {
width: 60%;
display: flex;
+ justify-content: space-evenly;
+}
+
+footer nav a {
+ color: white;
justify-content: space-between;
align-items: center;
padding: 20px 2%;
font-size: 14px;
+ text-decoration: none;
}
-footer nav a {
- color: white;
+
+/* my code */
+
+html {
+ font-size: 62.5%;
+}
+
+.Image1 {
+ height: auto;
+}
+
+.top-content {
+ color: black;
+ display: flex;
+}
+
+.Nav-Top a {
+ color: gray;
text-decoration: none;
+}
+
+.Nav-Top {
+ display: flex;
+ justify-content: space-evenly;
+ font-size: medium;
+}
+
+.Image2 {
+ height: auto;
+}
+
+.middle-content .boxes .box1 {
+ width: 12.5%;
+ height: 100px;
+ 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;
+ align-items: center;
+ justify-content: center
+}
+
+footer {
+ background-color: black;
+ color: white;
+}
+
+@media(max-width: 500px) {
+ .top-content nav {
+ text-decoration: none;
+ width: 800px;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ justify-content: space-between;
+ text-align: center;
+ flex-direction: column;
+ }
+ .text-container {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ .text-container1 {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ .middle-content {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ .middle-content .boxes {
+ display: flex;
+ flex-direction: column;
+ align-content: center;
+ }
+ .bottom-content {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ .text-container2 {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ .text-container3 {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ .text-container4 {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
+ .Nav-Bottom {
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+ }
}
\ No newline at end of file
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.