diff --git a/HandOn3-2/Navbarphoto.jpg b/HandOn3-2/Navbarphoto.jpg new file mode 100644 index 0000000..c1c132f Binary files /dev/null and b/HandOn3-2/Navbarphoto.jpg differ diff --git a/HandOn3-2/R.png b/HandOn3-2/R.png new file mode 100644 index 0000000..9e2e85a Binary files /dev/null and b/HandOn3-2/R.png differ diff --git a/HandOn3-2/geforce.jpg b/HandOn3-2/geforce.jpg new file mode 100644 index 0000000..aebf22a Binary files /dev/null and b/HandOn3-2/geforce.jpg differ diff --git a/HandOn3-2/hamburger.png b/HandOn3-2/hamburger.png new file mode 100644 index 0000000..4052ae2 Binary files /dev/null and b/HandOn3-2/hamburger.png differ diff --git a/HandOn3-2/index.html b/HandOn3-2/index.html new file mode 100644 index 0000000..e2b0774 --- /dev/null +++ b/HandOn3-2/index.html @@ -0,0 +1,134 @@ + + + + + + + + + + + Document + + + + +
+

Gameing and Entertaining

+ +
+
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+ +
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+ +
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+ +
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+
+ +

Gameing and Entertaining

+ +
+
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+ +
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+ +
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+ +
+ Im1 +
+

Geforce Graphic

+

Shop Now >

+
+
+
+
+ + diff --git a/HandOn3-2/nvdia.jpg b/HandOn3-2/nvdia.jpg new file mode 100644 index 0000000..54487d5 Binary files /dev/null and b/HandOn3-2/nvdia.jpg differ diff --git a/HandOn3-2/search.png b/HandOn3-2/search.png new file mode 100644 index 0000000..59a0b6f Binary files /dev/null and b/HandOn3-2/search.png differ diff --git a/HandOn3-2/style.css b/HandOn3-2/style.css new file mode 100644 index 0000000..f9d97fc --- /dev/null +++ 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; + } +}