diff --git a/Html-files/profile.html b/Html-files/profile.html new file mode 100644 index 0000000..a63d092 --- /dev/null +++ b/Html-files/profile.html @@ -0,0 +1,422 @@ + + + + + + + User Profile + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + +
+

Profile Page

+
+

Name:

+

Email:

+ +
+ + +
+ + + + + + + + + \ No newline at end of file diff --git a/Html-files/signup.html b/Html-files/signup.html index 2d5f367..3ca9062 100644 --- a/Html-files/signup.html +++ b/Html-files/signup.html @@ -265,16 +265,36 @@
Retro Vibe is Good Vibe
+
+
+

SIGN UP

+
+
+ + +
-
- -
- +
@@ -298,100 +318,99 @@

SIGN UP

Already have an account ? Login

- - - + + + + + + +
+ + - const nextCircle = circles[index + 1] || circles[0]; - x += (nextCircle.x - x) * 0.3; - y += (nextCircle.y - y) * 0.3; - }); - - requestAnimationFrame(animateCircles); - } - - animateCircles(); - - - - -
- - \ No newline at end of file diff --git a/index.html b/index.html index e272dfa..88112a6 100644 --- a/index.html +++ b/index.html @@ -7,29 +7,26 @@ Retro - - - - - - - + } + + + + + + + - - + - - @@ -42,39 +39,39 @@ + - - + + #about { + display: flex; + flex-wrap: wrap; + /* Allow boxes to wrap */ + gap: 20px; + /* Space between boxes */ + justify-content: center; + /* Center align items */ + } + + .box { + background-color: transparent; + /* Optional for visual separation */ + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + display: flex; + flex-direction: column; + /* Stack content vertically */ + align-items: center; + max-width: 350px; + /* Maximum width of each card */ + flex: 1 1 280px; + /* Allow boxes to grow and shrink */ + min-width: 300px; + /* Minimum width for responsiveness */ + min-height: 480px; + /* Minimum height for the card */ + } + + .card-image { + width: auto; + /* Set width to auto to allow centering */ + height: auto; + /* Maintain aspect ratio */ + max-width: 100%; + /* Ensure image does not exceed card width */ + max-height: 200px; + /* Limit the max height to prevent overflow */ + object-fit: cover; + /* Ensure the image covers the card area without distorting */ + border-radius: 10px; + /* Match border radius of the box */ + margin: 0 auto; + /* Center the image horizontally */ + } + + .box h2 { + margin-top: 10px; + text-align: center; + } + + p { + text-align: center; + margin: 10px 0; + /* Add some margin for spacing */ + } + + /* Additional responsive adjustments */ + @media (max-width: 600px) { + .box { + max-width: 100%; + /* Allow full width on small screens */ + min-height: auto; + /* Allow height to adjust for smaller screens */ + } + + .card-image { + max-height: 150px; + /* Adjust max height for smaller screens */ + } + } + +
@@ -429,15 +512,16 @@
- +