modified - design, heavy images.

Author: l2DWOLF

css/style.css

@@ -63,6 +63,7 @@ html {
 }
 
 body {
+    position: relative;
     min-height: calc(100vh - 75px);
     z-index: -1;
     display: flex;
@@ -212,7 +213,7 @@ img {
 .wrapper-animation .bar {
     width: 100%;
     height: 100%;
-    background: var(--backcolor2);
+    background: white;
 
     transform: translateY(-100%);
     animation: show-bars .7s ease-in forwards;
@@ -240,12 +241,12 @@ img {
     75% {
         transform: translateY(125%);
         opacity: 0.4;
-        color: var(--backcolor1)
+        color: black;
     }
 
     100% {
         opacity: 0;
-        color: var(--backcolor1);
+        color: white;
         visibility: hidden;
     }
 }
@@ -287,9 +288,8 @@ img {
     animation: show-content 1s linear forwards;
     animation-delay: 0.5s;
 
-    /*   background-image: url('../public/KARELA-09530-3.JPG'); */
+    background-image: url('../public/gallery/tempbgs/table-bg.jpg');
 
-    background-image: url('../public/KARELA-09530-3.JPG');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -323,15 +323,15 @@ img {
 }
 @keyframes float {
     0% {
-            transform: translateY(0);
+            transform: translateY(7.5px);
         }
 
     50% {
         transform: translateY(15px);
     }
 
     100% {
-        transform: translateY(0);
+        transform: translateY(7.5px);
     }
 }
 
@@ -362,7 +362,7 @@ img {
     position: absolute;
     width: 315px;
     height: 315px;
-    border-left: 2px solid rgb(255, 255, 255);
+    border-left: 1px solid rgb(255, 255, 255);
     transform: rotate(0deg);
     animation: rotate-border 4s linear infinite;
     box-shadow: 0px 0px 50px 1px rgba(0, 0, 0, 0.);
@@ -470,7 +470,6 @@ img {
 }
 
 .typing-text-container {
-    margin-top: 1em;
     min-width: 450px;
     max-width: 100%;
     display: flex;
@@ -491,7 +490,6 @@ img {
 }
 
 .typing-text {
-    padding: 0px 7px;
     align-items: center;
     font-size: 1.25rem;
     font-weight: 700;
@@ -515,19 +513,19 @@ img {
     border-left: none;
 }
 
-/* Span letter animation */
 .animated-typing span {
     color: black;
     font-size: 1.25rem;
+    font-weight: 500;
     display: inline-block;
     position: relative;
     padding-left: 0px;
     opacity: 0;
-    font-weight: 300;
-    transform: translateX(-10px);
-    -webkit-text-stroke: 2.7px black;
+    transform: translateX(-5px);
+    -webkit-text-stroke: 1px black;
     animation: typing 0.5s forwards;
-    margin-right: 3px;
+    margin-right: 1.5px;
+    min-width: 5px;
 }
 
 .animated-typing span::before {
@@ -561,7 +559,7 @@ img {
     background: rgba(0, 0, 0, 0.651);
     text-align: right;
     padding: 1em 20px;
-    width: 60%;
+    width: 40%;
     font-size: var(--fs-p);
     visibility: hidden;
     opacity: 0;
@@ -577,6 +575,7 @@ img {
 }
 
 .home-info .social-icons {
+    margin-top: 3em;
     display: flex;
     align-items: center;
     visibility: hidden;
@@ -605,10 +604,6 @@ img {
     transform: scale(1.1) translateY(-5%);
 }
 
-.home-section .social-icons .social-icons-box {
-    margin-left: 20px;
-}
-
 .home-section .social-icons .social-icons-box a {
     display: inline-flex;
     padding: 10px;
@@ -628,13 +623,12 @@ img {
     box-shadow: 0 0 10px var(--secondary);
     transform: scale(1.1) translateY(-5%);
 }
-
-
 /* <!-- ----End Home Section--------> */
 
+
 /* <!-- ----Projects Section---------------> */
 .projects-section {
-    background-image: url('../public/gallery//venue-arrangements/arrangement-4.JPG');
+    background-color: rgb(43, 43, 43);
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -646,9 +640,10 @@ img {
     align-items: center;
     max-width: 100vw;
     height: 100%;
-    padding: 0 0;
+    padding: 0 0 5em 0;
     position: relative;
     box-shadow: inset 0px 0px 20px 2px rgba(0, 0, 0, 0.642);
+
 }
 
 .cards-container {
@@ -876,7 +871,7 @@ img {
     align-content: center;
     position: relative;
 
-    background-image: url('../public/KARELA-09530-2.JPG');
+    background-image: url('../public/gallery/tempbgs/table-bg.jpg');
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -886,10 +881,9 @@ img {
 .about-content-wrapper {
     scrollbar-color: goldenrod black;
     scrollbar-width: thin;
-    
-    box-shadow: 0px 0px 5px 2px goldenrod;
     height: auto;
-    max-height: 80%;
+    max-height: 500px;
+
 
     overflow-y: auto;
     overscroll-behavior: contain;
@@ -1010,7 +1004,7 @@ img {
     align-items: center;
     align-content: center;
 
-    background-image: url('../public/gallery//dishes/dishes-1.JPG');
+    background-image: url('../public/gallery/tempbgs/wood-bg.jpg');
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center center;
@@ -1414,6 +1408,7 @@ img {
     }
 
     .home-section-header {
+        width: unset;
         gap: 3em;
         padding: 0px 3em;
         transform: unset;
@@ -1424,6 +1419,7 @@ img {
     }
 
     .typing-text-container{
+        display: none;
         transform: unset;
         min-width: 90%;
         max-width: 90%;
@@ -1439,7 +1435,10 @@ img {
     }
 
     .home-logo-wrapper {
+        margin-bottom: 1em;
+
         margin-top: 3em;
+        
         height: 190px;
         width: 225px;
         border-radius: 50px 50px 0px 0px;
@@ -1506,18 +1505,16 @@ img {
 
     /* <!-- ----@Media Projects Section--------------> */
     .projects-section {
-        object-fit: cover !important;
-        background-blend-mode: multiply;
-        background-repeat: repeat-y;
-
-        padding: 2.5em 0px 0em;
-        background-position: bottom !important;
-        background-repeat: repeat-y !important;
-
-    background-image: url('../public/KARELA-09530-3.JPG');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
+    background-image: unset;
+    background-color: #0e1116;
+    /* overflow-y: scroll;
+    scrollbar-width: none; */
+    padding: 2.5em 0px 0em;
+    /* max-height: 100vh; */
+
+    /* background-image: url('../public/gallery/tempbgs/bg19.jpg');
+    background-size:cover; */
+    
     }
 
     .sticky-title {
@@ -1526,6 +1523,10 @@ img {
         border: none;
         height: 70px;
     }
+    .sticky-title, .sticky-title h2, .projects-menu{
+        z-index: 5;
+        position: relative;
+    }
 
     .projects-menu {
         display: flex;
@@ -1554,6 +1555,7 @@ img {
 
     .projects-section p {
         font-size: .75rem;
+        border-radius: 0px !important;
     }
 
     .cards-container {
@@ -1565,7 +1567,7 @@ img {
 
     .cards-box {
         min-width: 250px;
-        
+        box-shadow: 0px 0px 15px 2px black;
     }
 
     .cards-box.visible {
@@ -1574,7 +1576,6 @@ img {
         border-radius: 15px;
         -webkit-backdrop-filter: blur(2px);
         backdrop-filter: blur(2px);
-        border: 1px solid goldenrod;
         opacity: 1;
     }
 

index.html

@@ -77,7 +77,7 @@ <h1>Alegro</h1>
                 </div>
 
                 <p style="text-align: center;">
-                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus aperiam omnis esse praesentium, non iste dolorem voluptatibus velit animi tempore libero quam accusamus autem fuga ipsam officia nobis dolores rem numquam voluptatem, quia a. Aperiam?
+                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus aperiam omnis esse praesentium, non iste dolorem voluptatibus
                 </p>
 
                 <div class="typing-text-container">