sdf

realdisplyy · May 18, 2024 · 5cc20bf · 5cc20bf
1 parent 4a17498
commit 5cc20bf
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@ <h1>Product Name</h1>
         </header>
         <main>
             <div class="product-image">
-                <img src="ProductImage.jpg" alt="Product Image">
+                <img src="product-image.jpg" alt="Product Image">
             </div>
             <div class="product-details">
                 <h2>Product Title</h2>

diff --git a/styles.css b/styles.css
@@ -1,31 +1,65 @@
 body {
-    background-color: #121212;
+    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
     color: #ffffff;
-    font-family: Arial, sans-serif;
+    font-family: 'Arial', sans-serif;
     margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    overflow: hidden;
 }
 
 .container {
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 20px;
+    border-radius: 10px;
+    background: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
+    transition: transform 0.3s ease-in-out;
+}
+
+.container:hover {
+    transform: scale(1.05);
 }
 
 header {
     margin-bottom: 20px;
 }
 
 h1 {
-    font-size: 2em;
+    font-size: 2.5em;
     margin: 0;
+    background: linear-gradient(to right, #6dd5ed, #2193b0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    animation: gradient-animation 5s infinite;
+}
+
+@keyframes gradient-animation {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
 }
 
 .product-image img {
     max-width: 100%;
     height: auto;
     border-radius: 10px;
+    transition: transform 0.3s ease-in-out;
+}
+
+.product-image img:hover {
+    transform: scale(1.1);
 }
 
 .product-details {
@@ -34,17 +68,18 @@ h1 {
 }
 
 .product-details h2 {
-    font-size: 1.5em;
+    font-size: 1.8em;
     margin: 10px 0;
+    color: #6dd5ed;
 }
 
 .price {
-    font-size: 1.2em;
+    font-size: 1.4em;
     color: #00e676;
 }
 
 .description {
-    font-size: 1em;
+    font-size: 1.1em;
     margin: 20px 0;
 }
 
@@ -56,6 +91,7 @@ h1 {
     font-size: 1em;
     cursor: pointer;
     border-radius: 5px;
+    transition: background-color 0.3s ease-in-out;
 }
 
 .buy-button:hover {