perfecting webpage

Pobre-da-Silva · Aug 29, 2023 · 0c0d1a3 · 0c0d1a3
1 parent 3326d1b
commit 0c0d1a3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 7 deletions.
diff --git a/img/il_tinfoglio.png b/img/il_tinfoglio.png
diff --git a/index.html b/index.html
@@ -4,15 +4,19 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="styles.css">
-    <title>Clothing Store</title>
+    <title>Georgiani Faggotini - Home</title>
 </head>
 <body>
     <header class="header">
-        <h1>Clothing Store</h1>
+        <h1>Georgiani Faggotini</h1>
+        <h2>Leading fashion trends since 2023</h2>
         <nav>
             <ul>
                 <li><a href="#">Home</a></li>
-                <li><a href="#">Products</a></li>
+                <li><a href="#">Men</a></li>
+                <li><a href="#">Women</a></li>
+                <li><a href="#">Children</a></li>
+                <li><a href="#">Non-binary</a></li>
                 <li><a href="#">About Us</a></li>
                 <li><a href="#">Contact</a></li>
             </ul>
@@ -23,9 +27,9 @@ <h1>Clothing Store</h1>
         <section class="products">
             <!-- Product cards go here -->
             <div class="product-card">
-                <img src="product1.jpg" alt="Product 1">
-                <h2>Product 1</h2>
-                <p>Price: $29.99</p>
+                <img src="img/il_tinfoglio.png" alt="Il Tinfoglio">
+                <h2>Il Tinfoglio</h2>
+                <p>Price: $4.99</p>
             </div>
             <div class="product-card">
                 <img src="product2.jpg" alt="Product 2">
@@ -37,7 +41,7 @@ <h2>Product 2</h2>
     </main>
 
     <footer class="footer">
-        <p>&copy; 2023 Clothing Store. All rights reserved.</p>
+        <p>&copy; 2023 Georgiani Faggotini. All rights reserved.</p>
     </footer>
 </body>
 </html>

diff --git a/styles.css b/styles.css
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap');
+
 /* Reset some default styles */
 body, h1, h2, p, ul, li {
     margin: 0;
@@ -19,6 +21,14 @@ body {
 
 .header h1 {
     margin-bottom: 10px;
+    font-family: "Qwitcher Grypen", cursive;
+    font-size: 5rem;
+}
+
+.header h2 {
+    margin-bottom: 10px;
+    font-family: "Qwitcher Grypen", cursive;
+    font-size: 2rem;
 }
 
 .header nav ul {
@@ -35,6 +45,10 @@ body {
     color: #fff;
 }
 
+.header nav ul li a:hover {
+    text-decoration: underline;
+}
+
 /* Main styles */
 .main {
     padding: 20px;
@@ -53,10 +67,18 @@ body {
     width: calc(33.33% - 20px);
 }
 
+.product-card:hover {
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+}
+
 .product-card img {
     max-width: 100%;
 }
 
+.product-card h2 {
+    font-family: serif;
+}
+
 /* Footer styles */
 .footer {
     background-color: #333;