hw3 start

index.css

@@ -2,21 +2,36 @@
 .menu {
     border-top: double 4px silver;
     border-bottom: double 4px silver;
-    text-align: right;
-    font-size:  0;
+    font-size: 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+@media screen and (max-width: 800px) {
+    .menu {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr 1fr;
+    }
+
+    .menu .selected {
+        border-bottom: double 4px silver;
+
+    }
 }
 
 .menu-item {
     display: inline-block;
-    width: 8%;
+    width: 100%;
     height: 3em;
-    line-height: 3em; /* to align to center */
+    line-height: 3em;
+    /* to align to center */
     text-align: center;
     vertical-align: middle;
     margin: 0 1%;
     overflow: hidden;
-    text-overflow: ellipsis ;
-    font-size:  medium;
+    text-overflow: ellipsis;
+    font-size: medium;
 
 }
 
@@ -38,168 +53,78 @@
 }
 
 
-/* 4 images part */
+/* 3 images part */
 .images-container {
+    display: inline-flex;
+    flex-direction: row;
     width: 90%;
-    height: 200pt;
     margin: auto;
-    overflow: hidden;
 }
 
-.half-size {
-    width: 49%;
-    margin: 0.2%;
-    float: left;
-}
-
-.quarter-size {
-    width: 24%;
-    margin: 0.2%;
-    float: left;
-}
-
-.image-column-container {
-    width: 24%;
-    height:100%;
-    margin: 0.15%;
-    float: left;
-
-}
-
-.image-column-container > div {
+.images-container > img {
+    margin: auto;
     width: 100%;
-    height: 50%;
-    margin-bottom: 1.4%;
-    overflow: hidden;
-
-    /* text-align: center; */
+    height: 30vw;
 }
 
-.images-container img{
-    width:100% 
-}
+@media screen and (max-width: 800px) {
+    .images-container {
+        flex-direction: column;
+    }
 
-/* main block part */
-
-.main-block{
-    width:80%;
-    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{
-    height:10%;
-    padding: 5%;
-}
-
-.bg-aqua{
-    background: #80DEEA;
-}
-.bg-grey{
-    background: #B0BFC6;
-}
-.bg-blue{
-    background: #BBDEFA;
-}
-.bg-yellow{
-    background: #FFE0B2;
+    .images-container>img {
+        width: 90%;
+        height: 90%;
+        /* object-fit: fill; */
+    }
 }
 
 
+/* text block part */
 .info-block-header{
     display: block;
-    margin:auto;
-    text-align: center;
-    font-size: 1.5em;
     font-weight: bold;
+    text-align: center;
 }
-.info-block-text{
-    display: block;
+
+.block-border{
+    border: solid black 2px;
+    padding:2vw;
+}
+.block-a-container{
+    display: grid;
+    grid-template-columns: 3fr 3fr 2fr;
+    grid-template-rows: 1fr;
+}
+@media screen and (max-width: 800px) {
+  .block-a-container{
+    display: flex;
+    flex-direction: column;
+}
+}
+
+.block-b-container{
+    display: grid;
+    grid-template-columns: 4fr 7fr 4fr;
+    grid-template-rows: 1fr;
+}
+@media screen and (max-width: 800px) {
+  .block-b-container{
+    display: flex;
+    flex-direction: column;
+}
+}
+
+
+.h-block *{
+    margin: 2vw;
+}
+.h-block >span{
     text-align: justify;
 }
-.info-block-image{
-    margin: 0% 5% 5%;
-    width:90%;
-    overflow: hidden;
-}
-.info-block-image >img{
-    width: 100%;
-}
-.rounded{
-    border-radius: 20px;
-    overflow: hidden;
-}
-.info-block-button{
-    float: right;
-    color:white;
-    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; DEBUG*/
-    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;
-    white-space: nowrap;
-}
-.info-block-image-center{
-    display: inline-block;
-    width: 50%;
-    /* height: 100px; */
-    background-color:black ;
-    overflow: hidden;
-    vertical-align: top;
-}
-.info-block-image-center >img{
+.h-block >img{
+    margin: auto;
     width: 100%;
+    /* height: 30vw; */
 }
-.small-w{
-    vertical-align: top;
-    width: 23%;
-}