hw3 done

index.css

@@ -1,34 +1,26 @@
 /* menu part */
 .menu {
-    border-top: double 4px silver;
-    border-bottom: double 4px silver;
+    border-top: double thick silver;
+    border-bottom: double thick silver;
     font-size: 0;
     display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    grid-template-columns: repeat(7, min-content);
     grid-template-rows: 1fr;
+    justify-items: start;
 }
 
-@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: 100%;
+    width: max-content;
     height: 3em;
     line-height: 3em;
     /* to align to center */
     text-align: center;
     vertical-align: middle;
-    margin: 0 1%;
+    padding: 0 10px;
+    margin: 0 10px;
     overflow: hidden;
     text-overflow: ellipsis;
     font-size: medium;
@@ -45,7 +37,6 @@
 .menu .menu-header {
     color: green;
     font-weight: bold;
-    float: left;
 }
 
 .menu a {
@@ -53,78 +44,154 @@
 }
 
 
+@media screen and (max-width: 800px) {
+    .menu {
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+        justify-items: center;
+    }
+
+    .menu .selected {
+        border-bottom: double thick silver;
+
+    }
+}
+
 /* 3 images part */
 .images-container {
-    display: inline-flex;
+    display: flex;
     flex-direction: row;
     width: 90%;
     margin: auto;
 }
 
-.images-container > img {
+.images-container>img {
     margin: auto;
-    width: 100%;
-    height: 30vw;
+    width:100%;
+    border: thin solid black;
+}
+
+.images-container>img:nth-child(2n+1) {
+    margin-top: 10px;
 }
 
 @media screen and (max-width: 800px) {
     .images-container {
+        display: inline-flex;
         flex-direction: column;
+        width: 100%;
     }
 
     .images-container>img {
-        width: 90%;
-        height: 90%;
-        /* object-fit: fill; */
+        width: 100%;
+        height: 100%;
+
+    }
+
+    .images-container>img:nth-child(2n+1) {
+        margin-top: 0px;
     }
 }
 
 
 /* text block part */
-.info-block-header{
+.info-block-header {
     display: block;
     font-weight: bold;
     text-align: center;
 }
 
-.block-border{
-    border: solid black 2px;
-    padding:2vw;
+.block-border {
+    border: solid thin black;
+    padding: 2vw;
+    margin: 1vw 0;
 }
-.block-a-container{
+
+.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-a-container {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
-.block-b-container{
+.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;
-}
+    .block-b-container {
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 
-.h-block *{
+.h-block>* {
     margin: 2vw;
 }
-.h-block >span{
+
+.h-block>span,
+.h-block>div {
     text-align: justify;
 }
 
-.h-block >img{
+.h-block>img {
     margin: auto;
     width: 100%;
-    /* height: 30vw; */
+}
+/*small articles part*/
+.main-right{
+    border-left: thin solid black;
+    margin: 30px 0 0 50px;
+
+}
+.small-info-block{
+    margin: 20px 10px 0 ;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+}
+@media screen and (max-width: 1000px) {
+    .small-info-block {
+        display: flex;
+        flex-direction: column;
+    }
+}
+
+.small-info-block-header{
+    display: block;
+    font-weight: bold;
+    text-align: right;
+}
+
+.small-info-block-image >img{
+    width: 100%;
+}
+.small-info-block-text {
+    text-align: justify;
+}
+.small-info-block-text >a{
+    display: block;
+    text-align: right;
+}
+/*main part*/
+.main{
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+@media screen and (max-width: 800px) {
+    .main {
+        display: flex;
+        flex-direction: column;
+    }
 }