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.
@@ -30,16 +42,16 @@
The Past
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
diff --git a/style/index.bak.css b/style/index.bak.css
new file mode 100644
index 0000000000..edb7f865f0
--- /dev/null
+++ b/style/index.bak.css
@@ -0,0 +1,160 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+ v2.0 | 20110126
+ 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;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html, body {
+ height: 100%;
+ font-family: 'Roboto', sans-serif;
+}
+
+h1, h2, h3, h4, h5 {
+ font-size: 18px;
+ margin-bottom: 15px;
+ font-family: 'Rubik', sans-serif;
+}
+
+p {
+ line-height: 1.4;
+}
+
+.container {
+ width: 800px;
+ margin: 0 auto;
+}
+
+.top-content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ margin-bottom: 20px;
+ border-bottom: 1px dashed black;
+}
+
+.top-content .text-container {
+ width: 48%;
+ padding: 0 1%;
+ padding-bottom: 20px;
+}
+
+.middle-content {
+ margin-bottom: 20px;
+ border-bottom: 1px dashed black;
+}
+
+.middle-content h2 {
+ padding: 0 2%;
+ margin-bottom: 0;
+}
+
+.middle-content .boxes {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+}
+
+.middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 {
+ width: 12.5%;
+ height: 100px;
+ margin: 20px 2.5%;
+ color: white;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.box1
+{
+ background: red;
+}
+
+.box2
+{
+ background: green;
+}
+
+.box3
+{
+ background: yellow;
+}
+
+.bottom-content {
+ display: flex;
+ margin: 0 2% 20px;
+ justify-content: space-around;
+}
+
+.bottom-content .text-container {
+ padding-right: 4%;
+}
+
+.bottom-content .text-container:last-child {
+ padding-right: 0;
+}
+
+footer {
+ width: 100%;
+ background: black;
+}
+
+footer nav {
+ width: 60%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 2%;
+ font-size: 14px;
+}
+
+footer nav a {
+ color: white;
+ text-decoration: none;
+}
\ No newline at end of file
diff --git a/style/index.css b/style/index.css
index ae29d6ceee..4f0d34b413 100644
--- a/style/index.css
+++ b/style/index.css
@@ -19,15 +19,20 @@ time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
- font-size: 100%;
+ font-size: 62.5%;
font: inherit;
- vertical-align: baseline;
+ vertical-align: baseline;
+ box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
+
+*{
+ font-weight: bold;
+}
body {
line-height: 1;
}
@@ -71,6 +76,16 @@ p {
margin: 0 auto;
}
+.logo_buttons{
+ display: flex;
+ flex: center;
+ align-items: center;
+}
+
+.navs{
+ text-decoration: none;
+}
+
.top-content {
display: flex;
flex-wrap: wrap;
@@ -85,6 +100,25 @@ p {
padding-bottom: 20px;
}
+.logo_links{
+ max-width: 95%;
+ margin-top: 20px;
+ display: flex;
+ justify-content: center;
+ justify-content: space-between;
+ align-items: flex-end;
+}
+
+.nav_links{
+ text-decoration: none;
+ color: black;
+ font-family: 'Rubik', sans-serif;
+}
+
+.large_image{
+ margin: 40px 0px 20px 0px;
+}
+
.middle-content {
margin-bottom: 20px;
border-bottom: 1px dashed black;
@@ -101,10 +135,9 @@ p {
justify-content: space-evenly;
}
-.middle-content .boxes .box {
+.middle-content .boxes .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10 {
width: 12.5%;
height: 100px;
- background: black;
margin: 20px 2.5%;
color: white;
display: flex;
@@ -112,6 +145,56 @@ p {
justify-content: center;
}
+.box1
+{
+ background: teal;
+}
+
+.box2
+{
+ background: gold;
+}
+
+.box3
+{
+ background: cadetblue;
+}
+
+.box4
+{
+ background: coral;
+}
+
+.box5
+{
+ background: crimson;
+}
+.box6
+{
+ background: forestgreen;
+}
+.box7
+{
+ background: darkorchid;
+}
+
+.box8
+{
+ background: hotpink
+}
+
+.box9
+{
+ background: indigo;
+}
+
+.box10
+{
+ background: dodgerblue;
+}
+
+
+
.bottom-content {
display: flex;
margin: 0 2% 20px;
@@ -126,6 +209,8 @@ p {
padding-right: 0;
}
+
+
footer {
width: 100%;
background: black;
@@ -143,4 +228,14 @@ footer nav {
footer nav a {
color: white;
text-decoration: none;
-}
\ No newline at end of file
+}
+
+@media(max-width: 800px){
+
+}
+
+@media(max-width:500px){
+
+}
+
+