fixing menu

index.css

@@ -9,7 +9,7 @@
     display: inline-block;
     width: 8%;
     height: 3em;
-    line-height: 3em;
+    line-height: 3em; /* to align to center */
     text-align: center;
     vertical-align: middle;
     margin: 0 1%;
@@ -34,32 +34,35 @@
     color: black;
 }
 
+
+/* 4 images part */
 .images-container {
     width: 90%;
+    height: 140pt;
     margin: auto;
     overflow: hidden;
 }
 
 .half-size {
-    width: 43%;
-    height: 140pt;
+    width: 49%;
     float: left;
     text-align: center;
-    line-height: 140pt;
-     margin: 1%;
+    /* line-height: 140pt; */
+    margin: 0.5%;
 }
 
 .quarter-size {
-    width: 21%;
-    height: 140pt;
+    width: 24%;
+    /* height: 140pt; */
     float: left;
     text-align: center;
-    line-height: 140pt;
-     margin: 1%;
+    /* line-height: 140pt; */
+    margin: 0.5%;
 }
 
 .image-column-container {
     width: 24%;
+    margin:0.5%;
     height: 140pt;
     float: left;
 }
@@ -74,5 +77,56 @@
 }
 
 .images-container img{
-    width: 38vmax;
+    width:100% 
+}
+
+/* main block part */
+
+.main-block{
+    width:80%;
+    margin: auto;
+}
+
+.info-block{
+    width:30%;
+    height:40%;
+}
+
+.bg-aqua{
+    background: aqua;
+}
+
+.info-block-header{
+    display: block;
+    margin:auto;
+    width:min-content;
+    font-size: 1.5em;
+    font-weight: bold;
+}
+
+.info-block-text{
+    text-align: justify;
+    /* font-size: 0.7em; not sure */
+}
+.info-block-image{
+    margin: auto;
+    width:25%;
+    height:10%;
+    overflow: hidden;
+}
+.info-block-image >img{
+    width: 100%;
+}
+
+.rounded{
+    border-radius: 5%;
+    overflow: hidden;
+}
+
+.info-block-button{
+    float: right;
+    margin-right: 10%;
+    color:white;
+    background-color: blue;
+     border-radius: 5px;
 }

index.html

@@ -32,7 +32,7 @@
         </a>
     </div>
 
-    
+
     <div class="images-container">
         <div class="half-size">
             <img src="./images/arduino.png" alt="Arduino">
@@ -52,6 +52,33 @@
         </div>
     </div>
 
+    <div class="main-block">
+        <div class="main-right main-column">
+            <div class="info-block rounded bg-aquae">
+                <span class="info-block-header">ASdasdasd</span>
+                <span class="info-block-text">
+                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
+                    Text Text Text Text Text
+                </span>
+                <div class="info-block-image rounded">
+                    <img src="./images/institute.png" alt="ESP32">
+                </div>
+                <button type="button" class="info-block-button" >More info-</button>
+            </div>
+
+        </div>
+
+        <div class="main-center">
+
+
+        </div>
+
+
+        <div class="main-left main-column">
+
+
+        </div>
+    </div>