From e8d1137b61bf34167e5e548b183d7e14222c7106 Mon Sep 17 00:00:00 2001
From: ratul0vai <ratulbd2003@gmail.com>
Date: Mon, 9 Oct 2023 02:05:03 +0600
Subject: [PATCH] middle part done

---
 index.html     | 51 ++++++++++++++++------------
 responsive.css | 55 ++++++++++++++++++++++++++++++
 style.css      | 92 +++++++++++++++++++++++++++++++-------------------
 3 files changed, 142 insertions(+), 56 deletions(-)
 create mode 100644 responsive.css

diff --git a/index.html b/index.html
index e747888..13b1f5a 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Game online_gg</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="responsive.css" />
     <script
       src="https://kit.fontawesome.com/96919fe459.js"
       crossorigin="anonymous"
@@ -32,30 +33,36 @@
       </div>
     </nav>
     <section class="main-container">
-      <div class="auxlilary-container">
-        <img id="gradient" src="./images/Group 14.png" alt="" />
-        <section class="paragraph-main">
-          <h1 class="play">play like the</h1>
-          <h1>g.o.a.t</h1>
-          <ul class="highlighted-option">
-            <li class="ids">
-              <img src="./images/download.svg" alt="" />1-Click instant play
-            </li>
-            <li id="ids"><img src="./images/play.svg" alt="" />No download</li>
-            <li id="ids">
-              <img src="./images/people.svg" alt="" />1000s of supported online
-              games
-            </li>
-          </ul>
-          <section class="button-cluster">
-            <button class="pink-btn">SIGN IN</button
-            ><button class="blue-btn">GO ROUGE</button>
-          </section>
-        </section>
+      <div class="main-container-text">
+        <img src="./images/Group 14.png" alt="" />
+        <div class="overlay-text">
+          <h1>Play like</h1>
+          <p>g.o.a.t</p>
+          <div class="social-icons">
+            <span
+              ><i class="fa-solid fa-play" style="color: palevioletred"></i
+              ><span class="features-text">1-Click instant play</span>
+            </span>
+            <span
+              ><i class="fa-solid fa-download" style="color: palevioletred"></i
+              ><span class="features-text">1-Click instant play</span>
+            </span>
+            <span
+              ><i class="fa-solid fa-user" style="color: palevioletred"></i
+              ><span class="features-text">1-Click instant play</span>
+            </span>
+          </div>
+          <div class="btn">
+            <button>Sign in</button><button>GO ROGUE</button>
+          </div>
+        </div>
       </div>
-      <div class="play-img">
-        <img src="./images/Group 18.png" alt="" />
+      <div class="main-container-img">
+        <img class="3-pictures" src="./images/Group 18.png" alt="" />
       </div>
     </section>
+    <section class="us-pic">
+      <div class="toys-pic"></div>
+    </section>
   </body>
 </html>
diff --git a/responsive.css b/responsive.css
new file mode 100644
index 0000000..a1135b6
--- /dev/null
+++ b/responsive.css
@@ -0,0 +1,55 @@
+@media screen and (max-width: 567px) {
+  nav {
+    flex-direction: column;
+    padding: 0px 0px;
+    margin: 60px 0px;
+  }
+  .contact-us {
+    flex-direction: column;
+    padding: 30px 0px;
+    margin: 0px 0px;
+  }
+  .g {
+    padding-left: 15px;
+    margin: 0px 0px;
+  }
+  button {
+    padding: 10px 25px;
+    margin: 0px 0px;
+  }
+  .about-us {
+    padding: 0px 0px;
+    margin: 0px 0px;
+  }
+  .devlopers {
+    padding: 30px 0px;
+    margin: 0px 0px;
+  }
+  /*section mid*/
+
+  .main-container-text {
+    margin-left: 0px;
+  }
+  .main-container {
+    flex-direction: column-reverse;
+    margin: 0px 0px;
+  }
+  .main-container-text > img {
+    width: 200%;
+    height: 660%;
+  }
+  .main-container-img > img {
+    width: 170%;
+    padding-left: 10px;
+  }
+  .main-container-text,
+  .main-container-img > img {
+    margin-left: 10px;
+    padding-top: 50px;
+  }
+  .overlay-text {
+    position: absolute;
+    top: 20%;
+    left: 20%;
+  }
+}
diff --git a/style.css b/style.css
index 78be06b..5730267 100644
--- a/style.css
+++ b/style.css
@@ -13,7 +13,7 @@ a {
 nav {
   display: flex;
   align-items: center; /* Vertically center items in the nav */
-  margin: 90px 140px; /* Adjust the margin as needed */
+  margin: 90px 140px;
   background-color: #fff; /* Optional background color for the navigation bar */
 }
 
@@ -60,41 +60,65 @@ button img {
 }
 
 /* main section starts form here */
-
-.main-container {
-  display: flex;
+.main-container-text {
   position: relative;
+  width: 50%;
 }
-.paragraph-main {
+.main-container-text > img {
+  height: 100%;
+  width: 100%;
+}
+.overlay-text {
   position: absolute;
   top: 30%;
-  left: 10%;
-}
-@media screen and (max-width: 567px) {
-  nav {
-    flex-direction: column;
-    padding: 0px 0px;
-    margin: 60px 0px;
-  }
-  .contact-us {
-    flex-direction: column;
-    padding: 30px 0px;
-    margin: 0px 0px;
-  }
-  .g {
-    padding-left: 15px;
-    margin: 0px 0px;
-  }
-  button {
-    padding: 10px 25px;
-    margin: 0px 0px;
-  }
-  .about-us {
-    padding: 0px 0px;
-    margin: 0px 0px;
-  }
-  .devlopers {
-    padding: 30px 0px;
-    margin: 0px 0px;
-  }
+  left: 20%;
+}
+.main-container {
+  max-width: 1400px;
+  min-height: 50px;
+  display: flex;
+  margin: 0px 125px;
+}
+.main-container-img {
+  width: 50%;
+}
+.main-container-img > img {
+  width: 100%;
+  height: 100%;
+}
+.features-text {
+  padding-left: 10px;
+}
+.social-icons {
+  display: flex;
+
+  flex-direction: column;
+}
+.fa-solid {
+  margin-top: 10px;
+}
+.overlay-text h1 {
+  color: #0b0223;
+  font-size: 49px;
+
+  font-weight: 600;
+
+  text-transform: uppercase;
+}
+.overlay-text p {
+  background: linear-gradient(180deg, #f948b2 0%, #8758f1 100%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+
+  font-size: 95px;
+
+  font-weight: 800;
+
+  text-transform: uppercase;
+}
+.btn {
+  padding-top: 30px;
+  display: flex;
+  gap: 20px;
 }