some sweet animations so nice added

Obed47 · Apr 23, 2024 · 6cef808 · 6cef808
1 parent 5907247
commit 6cef808
Show file tree

Hide file tree

Showing 10 changed files with 275 additions and 10 deletions.
diff --git a/Untitled design.png b/Untitled design.png
diff --git a/Untitled design1.png b/Untitled design1.png
diff --git a/about.css b/about.css
@@ -0,0 +1,18 @@
+.mainAbout .head
+{
+    margin: auto;
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    align-items: center;
+    align-content: center;
+    width: 100%;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+}
+.mainAbout .head a{
+    font-size: 14px;
+    height: 10px;
+    padding: 25px;
+    text-decoration: none;
+    font-family: sans-serif;
+}
diff --git a/about.html b/about.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>About</title>
+    <link rel="stylesheet" href="about.css">
+</head>
+<body>
+    <div class="mainAbout">
+        <div class="head">
+            <a href="index.html">Home</a>
+            <a href="dressing.html">Dressing</a>
+            <a href="foodPreference.html">Food Preferences</a>
+            <a href="about.html">About</a>
+        </div>
+        <div class="buttomText">
+        <h3>About Her</h3>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+            At culpa ullam similique inventore, quo beatae iure hic
+             est quasi facilis enim voluptatibus, earum, esse deleniti
+              vero nobis sint magnam ipsa? Corporis ea, recusandae 
+              praesentium quod, sunt molestias suscipit nam odit reprehenderit,
+               incidunt distinctio culpa necessitatibus hic et quam 
+               repellendus laborum cum illo voluptate sapiente porro. 
+               Ut, alias. Minima exercitationem vel officia illo molestias
+               , eligendi magnam reiciendis beatae accusamus soluta, 
+               expedita ipsum! Quisquam soluta, magni accusantium nihil
+                adipisci nobis fugiat ut consequatur illum? Quaerat f
+                acere, ad dolorum, et neque unde quidem obcaecati doloremqu
+                e quis animi dolore sunt velit hic magnam sint!</p>
+            </div>
+    </div>
+</body>
+</html>
diff --git a/dressing.css b/dressing.css
@@ -0,0 +1,87 @@
+*{
+    padding: 0;
+    margin: 0;
+}
+.mainDressing
+{
+
+    background-color: #ffd9005e;
+}
+.mainDressing .head
+{
+    margin: auto;
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    align-items: center;
+    align-content: center;
+    width: 90%;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+}
+.mainDressing .head a
+{
+    font-size: 14px;
+    height: 10px;
+    padding: 25px;
+    text-decoration: none;
+    font-family: sans-serif;
+}
+.mainDressing .topElt
+{
+    width: 80%;
+    height: 14rem;
+    justify-content: center;
+    align-content: center;
+    background-color: rgba(255, 255, 255, 0.493);
+    margin: auto;
+    text-align: center;
+    border-radius: 10px;
+}
+.mainDressing .topElt p{
+    margin: auto;
+    margin-top: 1rem;
+    align-items: center;
+    width: 70%;
+}
+.mainDressing .topElt h3{
+    padding-top: .5rem;
+}
+.mainDressing .images
+{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin: auto;
+    animation: pass 1s linear;
+}
+.mainDressing .images img
+{
+    width: 20rem;
+    padding-top: 2rem;
+    height: 30rem;  
+    margin: auto;
+    border-radius: 10rem;
+    overflow: hidden;
+    opacity: .5;
+    filter: grayscale(1.5);
+    border-bottom: 10px solid transparent;
+}
+.mainDressing .images img:hover{
+    transition: 700ms linear;
+    overflow: hidden;
+    opacity: 1;
+    border-bottom: 10px solid rgba(70, 69, 69, 0.685);
+    filter: none;
+    transform: scale(1.04);
+}
+
+@keyframes pass
+{
+    from
+    {
+        opacity: 0;
+    }
+    to{
+        opacity: 1;
+    }
+}
diff --git a/dressing.html b/dressing.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dressing</title>
+    <link rel="stylesheet" href="dressing.css">
+</head>
+<body>
+    <div class="mainDressing">
+        <div class="head">
+            <a href="index.html">Home</a>
+            <a href="dressing.html">Dressing</a>
+            <a href="foodPreference.html">Food Preferences</a>
+            <a href="foodPreference.html">About</a>
+        </div>
+        <div class="topElt">
+            <h3>About Dressing</h3>
+            <p>Muriel Blanche, the epitome of grace and sophistication, 
+                effortlessly commands attention not only with her undeniable 
+                talent but also with her impeccable sense of style. 
+                As a Cameroonian actress and influencer, she exudes an aura
+                 of timeless elegance in every ensemble she dons. From
+                  the red carpet to intimate gatherings, Muriel's 
+                  wardrobe is a carefully curated symphony of luxurious 
+                  fabrics, exquisite tailoring, and statement accessories.
+                   Whether she's clad in a flowing silk gown adorned with 
+                   intricate embroidery or a sleek power suit that exudes 
+                   confidence and strength, Muriel's sartorial choices always
+                    strike the perfect balance between classic glamour and 
+                    contemporary chic. With her innate sense of style, she 
+                    not only inspires countless fashion enthusiasts but also 
+                    effortlessly redefines the boundaries of elegance with every elegant step she takes.
+                </p>
+        </div>
+        <div class="images">
+            <img src="Vous-nous-insultez-a-longueur-de-journee.-Muriel-Blanche-pousse-un-coup-de-gueule-758x572.jpg" alt="">
+            <img src="Vous-nous-insultez-a-longueur-de-journee.-Muriel-Blanche-pousse-un-coup-de-gueule-758x572.jpg" alt="">
+            <img src="Vous-nous-insultez-a-longueur-de-journee.-Muriel-Blanche-pousse-un-coup-de-gueule-758x572.jpg" alt="">
+            <img src="Vous-nous-insultez-a-longueur-de-journee.-Muriel-Blanche-pousse-un-coup-de-gueule-758x572.jpg" alt="">
+
+        </div>
+    </div>
+</body>
+</html>
diff --git a/food.css b/food.css
@@ -0,0 +1,19 @@
+.mainFood .Head
+{
+    margin: auto;
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    align-items: center;
+    align-content: center;
+    width: 90%;
+    box-shadow: 2px 2px 2px #00000080;
+
+}
+.mainFood .Head a{
+    font-size: 14px;
+    height: 10px;
+    padding: 25px;
+    text-decoration: none;
+    font-family: sans-serif;
+}
diff --git a/foodPreference.html b/foodPreference.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Food</title>
+    <link rel="stylesheet" href="food.css">
+</head>
+<body>
+    <div class="mainFood">
+        <div class="Head">
+            <a href="index.html">Home</a>
+            <a href="dressing.html">Dressing</a>
+            <a href="foodPreference.html">Food Preferences</a>
+            <a href="about.html">About</a>
+        </div>
+        <div class="buttom">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
+                Eaque beatae nemo consequatur est mollitia impedit sapiente
+                 similique nulla repellat libero quae nisi, quia sequi ea? Nobis 
+                 esse fugit tempora exercitationem vel autem eos amet quam porro 
+                 reprehenderit mollitia, qui quaerat aspernatur obcaecati 
+                 perspiciatis ipsam! Perspiciatis asperiores odio aliquid 
+                 alias numquam molestias eum, laudantium, ut, doloribus nulla 
+                 id porro quibusdam nesciunt! At sit eius magni cumque doloremque
+                  nisi blanditiis assumenda ullam tempore natus reiciendis
+                   deserunt quo qui dolorum quasi, minus, nesciunt sequi tenetur
+                    expedita nihil et. Eveniet reprehenderit perspiciatis quia culpa 
+                    ullam vel! Illum perferendis laudantium nemo temporibus, maxime aut tempora.</p>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -7,25 +7,27 @@
     <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=Anton&family=Archivo+Black&family=Bebas+Neue&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Orbitron:wght@400..900&family=Permanent+Marker&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
+<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=Anton&family=Archivo+Black&family=Bebas+Neue&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Monoton&family=Orbitron:wght@400..900&family=Permanent+Marker&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Unbounded:wght@200..900&display=swap" rel="stylesheet">
     <title>Muriel Blanche</title>
 </head>
 <body>
 
     <div class="body">
-
         <div class="head">
-            <a href="/">Explore</a>
-            <a href="/">Contacts</a>
-            <a href="/">Booking</a>
-            <a href="/">Fit In</a>
+            <a href="index.html">Home</a>
+            <a href="dressing.html">Dressing</a>
+            <a href="foodPreference.html">Food Preferences</a>
+            <a href="about.html">About</a>
         </div>
         <div class="down">
-    <div class="star"></div>
-    <div class="star2"></div>
+     <img class="img1" src="Untitled design1.png" alt="">
     <div class="personImage">
         <img src="Untitled design.png" alt="failed">
     </div>
     <div class="Texts">
+        <h2>Muriel Blanche</h2>
         <h3 class="title">Entertainment On My Finger Tips</h3>
         <p class="description-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
             Dicta dolore ratione pariatur cum voluptatem porro et, 

diff --git a/style.css b/style.css
@@ -22,6 +22,15 @@ body
     margin: auto;
     animation: rotate 10s linear infinite;
 }
+
+.Texts h2
+{
+    color: rgba(0, 0, 0, 0.568);
+    font-family: "Permanent Marker", sans-serif;
+    font-weight: 600;
+    font-size: 50px;
+    font-style: normal;
+}
 .down .star2
 {
     height: 40px;
@@ -39,10 +48,16 @@ body
     text-decoration: none;
     align-items: center;
     align-content: center;
-    width: 100%;
+    width: 90%;
     box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
 
 }
+.down .img1{
+    width: 250px;
+    height: 280px;
+    margin: auto;
+    animation: rotate 13s linear infinite;
+}
 .body .head a
 {
     font-size: 14px;
@@ -65,9 +80,10 @@ body
 }
 .personImage img
 {
-    height: 730px;
-    width: 100%;
+    height: 520px;
+    width: 70%;
     margin: auto;
+    animation: animateImage 2s linear;
 }
 .Texts
 {
@@ -126,4 +142,14 @@ body
     to{
         transform: rotate(360deg);
     }
+}
+@keyframes animateImage{
+    from{
+        filter: grayscale(1);
+        opacity: 0;
+    }
+    to{
+        filter: none;
+        opacity: 1;
+    }
 }