homework p2 continuing

index.css

@@ -1,8 +1,9 @@
 /* menu part */
 .menu {
-    border-top: double 5px silver;
-    border-bottom: double 5px silver;
+    border-top: double 4px silver;
+    border-bottom: double 4px silver;
     text-align: right;
+    font-size:  0;
 }
 
 .menu-item {
@@ -15,13 +16,15 @@
     margin: 0 1%;
     overflow: hidden;
     text-overflow: ellipsis ;
+    font-size:  medium;
+
 }
 
 .menu .selected {
     color: green;
     font-weight: bold;
-    border-left: double 5px silver;
-    border-right: double 5px silver;
+    border-left: double 4px silver;
+    border-right: double 4px silver;
 }
 
 .menu .menu-header {
@@ -38,39 +41,38 @@
 /* 4 images part */
 .images-container {
     width: 90%;
-    height: 140pt;
+    height: 200pt;
     margin: auto;
     overflow: hidden;
 }
 
 .half-size {
     width: 49%;
-    margin: 0.5%;
+    margin: 0.2%;
     float: left;
-    text-align: center;
 }
 
 .quarter-size {
     width: 24%;
-    margin: 0.5%;
+    margin: 0.2%;
     float: left;
-    text-align: center;
 }
 
 .image-column-container {
     width: 24%;
     height:100%;
-    margin:0.5%;
+    margin: 0.15%;
     float: left;
-    text-align: center;
 
 }
 
 .image-column-container > div {
     width: 100%;
-    height: 49%;
-    margin: 0.5%;
-    text-align: center;
+    height: 50%;
+    margin-bottom: 1.4%;
+    overflow: hidden;
+
+    /* text-align: center; */
 }
 
 .images-container img{
@@ -81,49 +83,123 @@
 
 .main-block{
     width:80%;
-    margin: auto;
-}
+    margin:1.2% auto;
 
+}
+.main-column{
+    display: inline-block;
+    width:25%;
+}
+.main-center{
+    vertical-align: top;
+    width: 48%;
+    height:100%;
+    display: inline-block;
+    
+}
 .info-block{
-    width:30%;
-    height:40%;
+    height:10%;
+    padding: 5%;
 }
 
 .bg-aqua{
-    background: aqua;
+    background: #80DEEA;
 }
+.bg-grey{
+    background: #B0BFC6;
+}
+.bg-blue{
+    background: #BBDEFA;
+}
+.bg-yellow{
+    background: #FFE0B2;
+}
+
 
 .info-block-header{
     display: block;
     margin:auto;
-    width:min-content;
+    text-align: center;
     font-size: 1.5em;
     font-weight: bold;
 }
-
 .info-block-text{
+    display: block;
     text-align: justify;
-    /* font-size: 0.7em; not sure */
 }
 .info-block-image{
-    margin: auto;
-    width:25%;
+    margin: 0% 5% 5%;
+    width:90%;
+    height:100px;
     height:10%;
     overflow: hidden;
 }
 .info-block-image >img{
     width: 100%;
 }
-
 .rounded{
-    border-radius: 5%;
+    border-radius: 20px;
     overflow: hidden;
 }
-
 .info-block-button{
     float: right;
-    margin-right: 10%;
     color:white;
-    background-color: blue;
-     border-radius: 5px;
+    background-color: #2294F4;
+    border-radius: 5px;
+}
+.button-left{
+    float: left;
+}
+.pad-down{
+    margin-top: 40%;
+    bottom: 0;
+}
+/* main block center part */
+.center-upper, .center-lower, .center-center{
+    background-color: lightblue;
+    margin:5%;
+}
+.info-block-image-small{
+    display: inline-block;
+    width: 20%;
+    height: 100px;
+    background-color:black ;
+    overflow: hidden;
+    vertical-align: top;
+}
+.info-block-image-small >img{
+    width: 100%;
+}
+.align-left{
+    text-align: left;
+}
+.align-right{
+    text-align: right;
+}
+.inline {
+    display: inline-block;
+
+}
+.info-block-wide-text-container{
+    width: 77%;
+}
+
+.link{
+    display: block;
+    color:gray;
+    margin-bottom: 0px;
+}
+.info-block-image-center{
+    display: inline-block;
+    width: 50%;
+    /* height: 100px; */
+    background-color:black ;
+    overflow: hidden;
+    vertical-align: top;
+}
+.info-block-image-center >img{
+    width: 100%;
+}
+.small-w{
+    width: 23%;
 }