@@ -30,16 +50,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.css b/style/index.css
index ae29d6ceee..7d9d06728a 100644
--- a/style/index.css
+++ b/style/index.css
@@ -21,7 +21,8 @@ time, mark, audio, video {
border: 0;
font-size: 100%;
font: inherit;
- vertical-align: baseline;
+ vertical-align: baseline;
+
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
@@ -29,7 +30,8 @@ footer, header, hgroup, menu, nav, section {
display: block;
}
body {
- line-height: 1;
+ line-height: 1;
+ background-color: #FFFFFF;
}
ol, ul {
list-style: none;
@@ -48,7 +50,10 @@ table {
}
* {
- box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0;
+ margin: 0;
+ max-width: 100%;
}
html, body {
@@ -67,7 +72,7 @@ p {
}
.container {
- width: 800px;
+ width: 80%;
margin: 0 auto;
}
@@ -75,19 +80,21 @@ p {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
- margin-bottom: 20px;
+ margin-bottom: 0px;
border-bottom: 1px dashed black;
+ padding: 5%;
}
.top-content .text-container {
width: 48%;
padding: 0 1%;
- padding-bottom: 20px;
+ padding-bottom: 2rem;
}
.middle-content {
- margin-bottom: 20px;
- border-bottom: 1px dashed black;
+ margin-bottom: 1.25rem;
+ border-bottom: .0625rem dashed black;
+ padding: 0 5%;
}
.middle-content h2 {
@@ -95,26 +102,30 @@ p {
margin-bottom: 0;
}
-.middle-content .boxes {
+ .middle-content .boxes{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
+
}
-.middle-content .boxes .box {
+.middle-content .boxes div{
width: 12.5%;
- height: 100px;
+ height: 6.25rem;
background: black;
margin: 20px 2.5%;
color: white;
display: flex;
align-items: center;
justify-content: center;
+ padding: 1%;
+
}
.bottom-content {
display: flex;
- margin: 0 2% 20px;
+ margin: 0 2% 1.25rem;
+ padding: 3%;
justify-content: space-around;
}
@@ -132,7 +143,7 @@ footer {
}
footer nav {
- width: 60%;
+ width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
@@ -143,4 +154,123 @@ footer nav {
footer nav a {
color: white;
text-decoration: none;
+}
+
+/* My Lines */
+
+
+
+
+
+a {
+ text-decoration: none;
+ color: #2E2E2E;
+}
+
+header nav{
+ width: 80%;
+ padding:0 5% 0 20%;
+ display:flex;
+ justify-content:space-between;
+ align-items:center;
+
+}
+.logo{
+ width:20%;
+
+}
+.logo img{
+ max-width: 100%;
+
+}
+.links{
+ width: 80%;
+ padding:5%;
+ display:flex;
+ justify-content: space-around;
+ align-items: center;
+ flex-direction: row;
+}
+.wide-image img{
+ padding:0 20% 0 20%;
+ width:100%;
+ display: flex;
+ align-items: center;
+
+
+}
+.container{
+ padding: 5%;
+
+}
+.middle-content .boxes .box1{
+ background-color:#008080;
+}
+.middle-content .boxes .box2{
+ background-color:#FFD700;
+}
+.middle-content .boxes .box3{
+ background-color:#5F9EA0;
+}
+.middle-content .boxes .box4{
+ background-color:#FF7F50;
+}
+.middle-content .boxes .box5{
+ background-color: #DC143C;
+}
+.middle-content .boxes .box6{
+ background-color:#228B22;
+}
+.middle-content .boxes .box7{
+ background-color:#9932CC;
+}
+.middle-content .boxes .box8{
+ background-color:#FF69B4;
+}
+.middle-content .boxes .box9{
+ background-color:#4B0082;
+}
+.middle-content .boxes .box10{
+ background-color:#1E90FF;
+}
+.middle-content h2{
+ padding: 2%;
+}
+
+
+/* media */
+
+@media(max-width: 450px){
+ header nav{
+ display:flex;
+ flex-direction:column;
+ align-items:center;
+
+
+ }
+}
+.links{
+ width:100%
+
+
+
+}
+.top-content{
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.container .top-content div{
+ width:90%;
+}
+
+.bottom-content{
+ width:100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.bottom-content .text-container div{
+ width:90%;
}
\ No newline at end of file
+