provide mobile adaptation on Home page

MME-NTU-KhPI · Oct 21, 2024 · c8f4d3f · c8f4d3f
1 parent d0533ef
commit c8f4d3f
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 8 deletions.
diff --git a/css/home.css b/css/home.css
@@ -6,7 +6,7 @@
 }
 
 .main-left p{
-    font-size: 2.3vh;
+    font-size: 2.4vh;
     width: 60%;
     line-height: 3.6vh;
 }
@@ -60,24 +60,49 @@
 a{
     text-decoration: none !important;
 }
+.cont{
+    display: flex;
+    flex-direction: row;
+}
+.main-right-mobile{
+    display: none;
+}
 @media (max-width: 1197px) {
+    .text-cont{
+        display: flex;
+        margin-left: 3rem;
+        margin-right: 3rem;
+    }
+    .cube-pic-cont{
+        display: flex;
+        justify-content: center;
+    }
+    .cube-pic{
+        width: 80%;
+    }
+    .cont{
+        flex-direction: column;
+    }
     .main-left{
         width: 100%;
+        display: flex;
+        flex-direction: column;
     }
     .main-left p{
-        width: 90%;
+        width: 100%;
         margin-left: auto !important;
         margin-right: auto !important;
         margin-top: -3.5vh;
     }
     .main-right{
         display: none;
     }
+    .main-right-mobile{
+        display: flex;
+    }
     .heading-cont h3{
         margin-top: 2vh !important;
-        margin-left: auto !important;
-        margin-right: auto !important;
-        width: 90%;
+        margin: 0;
     }
     .main-left .button-cont{
         text-align: center;

diff --git a/home_en.html b/home_en.html
@@ -18,7 +18,7 @@
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 </head>
 
-<body style=" color: white; background: linear-gradient(126deg, #0A0B14 50%, #171C27 70%, #2E3B4B 100%); height: 100vh;"
+<body style=" color: white; background: linear-gradient(126deg, #0A0B14 50%, #171C27 70%, #2E3B4B 100%);background-position: center; background-repeat: no-repeat; background-size: cover; min-height: 100vh; margin: 0; padding: 0;"
   class="ink-light link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">
   <header>
     <nav class="navbar navbar-expand-xl navbar-dark bg-header pl-5 pr-5 pt-3 pb-3 border-bottom border-dark">
@@ -89,20 +89,27 @@ <h3 class="h3 ml-5 mt-5">Tool for 3D modeling and visualization of microstructur
     <div class="cont">
       <div class="main-left">
         <br>
-        <p class="ml-5 ">It is a powerful software for creating and visualizing microstructures using cellular automata.
+        <div class="text-cont"><p class="ml-5 ">It is a powerful software for creating and visualizing microstructures using cellular automata.
           The tool allows you to model complex structures of materials, animation of the process of their formation and
           detailed analysis.</p>
+        </div>
+        <div class="main-right-mobile">
+          <div class="cube-pic-cont">
+          <img src="img/cube-pic.png" alt="" class="cube-pic">
+        </div>
+        </div>
         <div class="button-cont">
           <a target="_blank" href="https://github.com/MME-NTU-KhPI/MatViz3D">
             <button class="download-button ml-5">
             </button>
           </a>
-
         </div>
       </div>
       <div class="main-right">
+        <div class="cube-pic-cont">
         <img src="img/cube-pic.png" alt="" class="cube-pic">
       </div>
+      </div>
     </div>
   </div>
   <footer class="border-top border-dark">