Wasitp0n · Wasitp0n · Jun 2, 2023
diff --git a/HandOn3-2/Navbarphoto.jpg b/HandOn3-2/Navbarphoto.jpg
diff --git a/HandOn3-2/R.png b/HandOn3-2/R.png
diff --git a/HandOn3-2/geforce.jpg b/HandOn3-2/geforce.jpg
diff --git a/HandOn3-2/hamburger.png b/HandOn3-2/hamburger.png
diff --git a/HandOn3-2/index.html b/HandOn3-2/index.html
@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap"
+      rel="stylesheet"
+    />
+    <title>Document</title>
+  </head>
+  <body>
+    <nav>
+      <div class="navcon1">
+        <div class="nvpix">
+          <img src="nvdia.jpg" alt="Nvdia" width="100px" />
+        </div>
+        <div class="navcon2">
+          <img src="nvdia.jpg" alt="Nvdia" width="100px" />
+          <p>Product</p>
+          <p>Solution</p>
+          <p>Industries</p>
+          <p>For You</p>
+        </div>
+        <div class="navcon2">
+          <p>Shop</p>
+          <p>Drivers</p>
+          <p>Support</p>
+          <img src="search.png" alt="seach" width="20px" />
+          <img src="R.png" alt="login" width="20px" />
+        </div>
+        <div class="hamberger">
+          <img src="hamburger.png" alt="Hamberger" width="40px" />
+        </div>
+      </div>
+      <div>
+        <h3
+          style="
+            background-color: black;
+            color: white;
+            text-align: start;
+            padding: 10px 10%;
+          "
+        >
+          NVDIA Store
+        </h3>
+      </div>
+    </nav>
+
+    <div
+      style="
+        padding: 20 px 10%;
+        margin: auto;
+        font-family: 'Ubuntu', sans-serif;
+      "
+    >
+      <h1>Gameing and Entertaining</h1>
+
+      <main class="container">
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+      </main>
+
+      <h1>Gameing and Entertaining</h1>
+
+      <main class="container">
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+
+        <div class="frame">
+          <img src="geforce.jpg" alt="Im1" />
+          <div style="background-color: white">
+            <h2 style="height: 70px; padding-top: 20px">Geforce Graphic</h2>
+            <p>Shop Now ></p>
+          </div>
+        </div>
+      </main>
+    </div>
+  </body>
+</html>
diff --git a/HandOn3-2/nvdia.jpg b/HandOn3-2/nvdia.jpg
diff --git a/HandOn3-2/search.png b/HandOn3-2/search.png
diff --git a/HandOn3-2/style.css b/HandOn3-2/style.css
@@ -0,0 +1,92 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+body {
+  text-align: center;
+  background-color: aliceblue;
+}
+h1 {
+  margin: 10 px;
+  padding: 20px 10%;
+}
+.nvpix {
+  display: none;
+}
+.navcon1 {
+  background-color: white;
+  display: flex;
+  justify-content: space-between;
+  gap: 5px;
+  padding: 0 10%;
+  flex-wrap: wrap;
+  position: sticky;
+  width: 80%;
+}
+.navcon2 {
+  display: flex;
+  justify-content: space-around;
+  border-radius: 10px;
+  gap: 10px;
+  align-items: center;
+}
+.hamberger {
+  display: none;
+}
+.main1 {
+  display: flex;
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 10px;
+  /* padding: 20px 5%; */
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+.frame {
+  width: 20%;
+  gap: 10px;
+  background-color: whitesmoke;
+  box-shadow: inset;
+  /* justify-content: space-around; */
+  box-shadow: 5px 5px 5px rgb(159, 158, 158);
+  font-weight: bold;
+}
+.frame img {
+  width: 100%;
+}
+
+@media (min-width: 481px) and (max-width: 1200px) {
+  .frame {
+    width: 40%;
+  }
+  .hamberger {
+    display: block;
+  }
+  .navcon2 {
+    display: none;
+  }
+  .nvpix {
+    display: block;
+  }
+}
+
+@media (max-width: 480px) {
+  .frame {
+    width: 100%;
+  }
+  .hamberger {
+    display: block;
+  }
+  .navcon2 {
+    display: none;
+  }
+  .nvpix {
+    display: block;
+  }
+}