diff --git a/.vscode/settings.json b/.vscode/settings.json index 4aab4aeb..3d25faff 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,4 +1,4 @@ { - "liveServer.settings.port": 5501 + "liveServer.settings.port": 5502 } diff --git a/Css-files/content.css b/Css-files/content.css index 77ecf76a..7c18167d 100644 --- a/Css-files/content.css +++ b/Css-files/content.css @@ -223,7 +223,8 @@ input[type="submit"]:hover { .menu_items .items img { justify-content: center; height: 190px; - width: 230px; + width: 228px; + border-radius: 10px 10px 0 0; } .menu_items .items h3 { diff --git a/Css-files/login1.css b/Css-files/login1.css index cc692bed..b0311f3d 100644 --- a/Css-files/login1.css +++ b/Css-files/login1.css @@ -3,24 +3,22 @@ body { margin: 0; font-family: 'Noto Sans', sans-serif; -} - -body * { - box-sizing: border-box; - background-attachment: fixed; - - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); + overflow: hidden; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c198.8 51.8 403.4 40.8 597.3-14.8V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; } .main-login { width: 100vw; height: 100vh; - background: white; display: flex; justify-content: center; align-items: center; - flex-direction: row; + gap: 2rem; /* Add spacing between sections */ } .left-login { @@ -42,31 +40,48 @@ body * { .home-btn a { font-size: 30px; text-decoration: none; - color: rgb(149, 15, 95); + color: rgb(134, 78, 112); + position: relative; + transition: color 0.3s ease; /* Smooth color transition */ +} + +.home-btn a:hover { + color: rgb(141, 108, 108); /* Darken color on hover */ } .home-btn a::after { - content: ''; /* Creates a pseudo-element */ + content: ''; position: absolute; - width: 100%; /* Full width of the link */ - height: 1.5px; /* Thickness of the underline */ + width: 100%; + height: 1.5px; bottom: -5px; left: 0; - background-color: transparent; /* Default background (invisible) */ - transition: background-color 0.1s ease; /* Smooth transition */ + background-color: transparent; + transition: background-color 0.3s ease; /* Smooth transition */ } .home-btn a:hover::after { - background-color: white; + background-color: rgb(141, 108, 108); } .left-login > h1 { color: #e13838; font-size: 2.5vw; + text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Soft text shadow */ } .left-login-image { - width: 35vw; + width: 40vw; + animation: float 6s ease-in-out infinite; +} + +@keyframes float { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } } .right-login { @@ -74,7 +89,19 @@ body * { height: 100vh; display: flex; justify-content: center; - align-items: center; + align-items: center; + animation: fadeIn 2s ease-in-out; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + transform: translateY(30px); + } + 100% { + opacity: 1; + transform: translateY(0); + } } .card-login { @@ -85,75 +112,85 @@ body * { flex-direction: column; padding: 30px 35px; border-radius: 20px; - box-shadow: 0px 10px 40px #00000056; + box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.15); + background: rgba(236, 236, 236, 0.8); + backdrop-filter: blur(10px); /* Soft background blur effect */ } .card-login > h1 { - color: #e13838; - font-weight: 800; - margin: 0; + color: #de6c6c; + font-size: 2.2vw; + margin-bottom: 20px; } .textfield { width: 100%; - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - margin: 10px 0px; + margin-bottom: 15px; } .textfield > input { width: 100%; - border: none; - border-radius: 10px; - padding: 15px; - background: transparent; - color: #030707de; - font-size: 12pt; - box-shadow: 0px 10px 40px #00000056; + height: 45px; + border-radius: 15px; + border: 1px solid #b38484; + padding-left: 10px; outline: none; - box-sizing: border-box; -} - -.textfield > label { - color: transparent; - margin-bottom: 10px; + transition: border 0.3s ease; /* Smooth border transition */ } -.textfield > input::placeholder { - color: #000000; +.textfield > input:focus { + border: 2px solid #a76666; /* Highlight border on focus */ } -.btn-login { +.btn-login, +#google-login { width: 100%; - padding: 16px 0; - margin: 25px; + height: 45px; + border-radius: 15px; border: none; - border-radius: 8px; - outline: none; - text-transform: uppercase; - font-weight: 800; - letter-spacing: 3px; - color: #bec44b; - background: transparent; + margin: 10px; /*Margin added so that they do not overlap*/ + background-color: #aa6a6a; + color: rgb(190, 135, 135); + font-size: 16px; cursor: pointer; - box-shadow: 0px 10px 40px -12px black; + transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transitions for hover and active states */ +} + +.btn-login:hover, +#google-login:hover { + background-color: #ac7070; /* Darker shade on hover */ + transform: translateY(-3px); /* Lift effect on hover */ +} + +.btn-login:active, +#google-login:active { + transform: translateY(1px); /* Slight press effect */ } #google-login { - width: 100%; - padding: 16px 0; - margin: 25px; - border: none; - border-radius: 8px; - outline: none; - text-transform: uppercase; - font-weight: 800; - letter-spacing: 3px; - color: #bec44b; - background: transparent; - cursor: pointer; + background-color: #ad6660; /* Google red color */ +} + +#google-login:hover { + background-color: #b8938f; /* Darker Google color on hover */ +} + +/* Accessibility: Adding focus styles for inputs and buttons */ +.textfield > input:focus { + outline: 2px solid #a45b5b; /* Red outline for focused input */ +} + +.btn-login:focus, +#google-login:focus { + outline: 2px solid #bc8a8a; /* Red outline for focused button */ +} + +/* Loading state for buttons */ +.loading { + pointer-events: none; /* Prevent interactions */ + opacity: 0.6; /* Slightly fade the button */ +} + box-shadow: 0px 10px 40px -12px black; } diff --git a/Css-files/signup1.css b/Css-files/signup1.css index eae11495..74bfcf91 100644 --- a/Css-files/signup1.css +++ b/Css-files/signup1.css @@ -34,11 +34,14 @@ body { align-items: center; width: 100%; overflow: hidden; /* Ensure nothing overflows from the flexbox */ + gap: 20px; /* Spacing between the card and image */ + } .homebtn{ position: absolute; top:30px; left:25px; + } .homebtn a{ font-size: 30px; @@ -69,6 +72,10 @@ body { display: flex; /* Flex to stack elements */ flex-direction: column; /* Column layout for the card */ overflow: hidden; /* Added to ensure no content spills out */ + border-radius: 50px; + align-items: center; + justify-content: center; + gap: 20px; } .card-login:hover { @@ -89,23 +96,26 @@ body { margin-bottom: 15px; /* Add margin to space fields */ display: flex; /* Flex for better layout */ flex-direction: column; /* Column layout for input and label */ + border-radius: 50px; } .textfield label { font-weight: 700; /* Bold label for clarity */ margin-bottom: 5px; /* Space between label and input */ color: #555; /* Slightly darker color for the label */ + border-radius: 50px; } .textfield > input { width: 100%; - padding: 15px; + padding: 10px; background-color: var(--input-bg); border: 2px solid transparent; border-radius: var(--border-radius); /* Consistent rounded corners */ transition: border var(--transition-speed), box-shadow var(--transition-speed); font-size: 1rem; color: #333; + border-radius: 50px; box-sizing: border-box; /* Ensures padding doesn't affect input width */ } @@ -125,9 +135,13 @@ body { cursor: pointer; transition: background-color var(--transition-speed), box-shadow var(--transition-speed), transform var(--transition-speed); letter-spacing: 1.5px; - width: 100%; /* Full width for buttons */ + border-radius: 500px; + min-width: 50%; +} +.btnNext{ + display: flex; + gap: 10px; } - .btn-login:hover, #google-login:hover { background-color: var(--hover-color); box-shadow: 0px 15px 45px -10px rgba(0, 0, 0, 0.2); diff --git a/Html-files/about.html b/Html-files/about.html index 91d08fbb..3362ac28 100644 --- a/Html-files/about.html +++ b/Html-files/about.html @@ -9,7 +9,7 @@ integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> - + @@ -71,8 +71,7 @@ } body{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffb9b0' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%23ffc1b7' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%23ffc8bf' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23ffcfc6' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%23FFD6CE' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%23ffdcd4' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%23ffe1d9' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23ffe6df' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%23ffebe4' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%23FFF0EA' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); - background-size: cover; - background-attachment: fixed; + background-size: cover; } ::-webkit-scrollbar { width: 10px; @@ -175,6 +174,60 @@ transform: rotate(360deg); } } +.header { + background: radial-gradient(circle at bottom left, #FED6D6, #FFE4E1 60%, transparent 80%); + /* padding: 2rem; */ + text-align: center; + font-family: 'Philosopher', sans-serif; +} + +.animated-header { + font-family: Arial, sans-serif; /* Use a basic font for testing */ + color: #dc3545; + display: inline-block; /* Allow individual letters to be styled separately */ + overflow: hidden; /* Ensures text appears only when animated */ +} + +/* Animation for each letter */ +.letter { + display: inline-block; /* Allows each letter to be animated individually */ + opacity: 0; /* Start invisible */ + transform: translateY(20px); /* Start slightly below */ + animation: appear 1.0s forwards; /* Animation for appearance */ +} + +/* Keyframes for letter appearance */ +@keyframes appear { + 0% { + opacity: 0; + transform: translateY(20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} +.spacer { + display: inline-block; /* Allows it to take up space */ + width: 40px; /* Adjust the width for more or less space */ +} + +/* Add animation delay for each letter */ +.letter:nth-child(1) { animation-delay: 0s; } +.letter:nth-child(2) { animation-delay: 0.2s; } +.letter:nth-child(3) { animation-delay: 0.4s; } +.letter:nth-child(4) { animation-delay: 0.6s; } +.letter:nth-child(5) { animation-delay: 0.8s; } +.letter:nth-child(6) { animation-delay: 01.0s; } +.letter:nth-child(7) { animation-delay: 01.2s; } +.letter:nth-child(8) { animation-delay: 01.4s; } +.letter:nth-child(9) { animation-delay: 01.6s; } +.letter:nth-child(10) { animation-delay: 01.8s; } +.letter:nth-child(11) { animation-delay: 2.0s; } +.letter:nth-child(12) { animation-delay: 2.1s; } +/* .letter:nth-child(13) { animation-delay: 1.2s; } */ + + .social-icons a { font-size: 1.2rem; padding: 8px; @@ -190,6 +243,289 @@ transform: scale(1.5); /* Increase size */ transition: transform 0.3s ease; /* Smooth transition effect */ } + + + + .about_container { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; + background-color: hsl(203, 30%, 96%); + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} +/* .aboutcontainer { + max-width: 1200px; + margin: 0 auto; + padding: 40px 20px; + background-color: hsl(203, 30%, 96%); + border-radius: 10px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); +} */ +.about_container:hover { + box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.3); /* Adds a shadow to the outer container */ + transform: scale(1.05); /* Slightly enlarges the outer box */ + transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */ +} + +.about_container > * { + /* Prevent hover effect on inner elements */ + transition: none; + transform: none; +} + + +.about1 { + font-family: var(--ff-poppins); /* Use your defined font */ + color: hsl(208, 7%, 46%); /* Text color */ + line-height: 1.6; /* Increase line height for readability */ + margin-bottom: 20px; /* Spacing below this paragraph */ +} + + +.about2, +.about3 { + margin-bottom: 40px; /* Spacing between sections */ +} + +.section__title { + font-family: var(--ff-philosopher); /* Use your defined font */ + color: hsl(357, 82%, 35%); /* Title color */ + font-size: 1.8rem; /* Font size for headings */ + margin-bottom: 15px; /* Spacing below headings */ + border-bottom: 2px solid hsl(357, 82%, 35%); /* Underline for headings */ + padding-bottom: 5px; /* Padding below the heading */ +} +.section__titlestyle{ + font-family: var(--ff-philosopher); /* Use your defined font */ + color: hsl(357, 82%, 35%); /* Title color */ + font-size: 1.8rem; /* Font size for headings */ + margin-bottom: 15px; /* Spacing below headings */ + border-bottom: 2px solid hsl(357, 82%, 35%); /* Underline for headings */ + padding-bottom: 5px; + text-align: center; +} + +.about2 p, +.about3 p { + font-family: var(--ff-poppins); /* Use your defined font */ + color: hsl(208, 7%, 46%); /* Paragraph color */ + line-height: 1.6; /* Increase line height for readability */ + margin-bottom: 20px; /* Spacing below paragraphs */ +} + +/* Responsive design */ +@media (max-width: 768px) { + .about_container { + padding: 20px; /* Adjust padding for smaller screens */ + } + + .section__title { + font-size: 1.5rem; /* Adjust heading size for smaller screens */ + } + + .about1, .about2 p, .about3 p { + font-size: 0.9rem; /* Adjust font size for paragraphs */ + } +} + + + + +.new_footer_area { + background: hsl(203, 30%, 96%); + margin-top: 20px; +} + +.new_footer_top { + padding: 80px 0px 150px; + position: relative; + overflow-x: hidden; +} + +/* Footer Bottom */ +.new_footer_area .footer_bottom { + padding-top: 5px; + padding-bottom: 50px; +} +.footer_bottom { + font-size: 14px; + font-weight: 300; + line-height: 20px; + color: #7f88a6; + padding: 27px 0px; +} + +/* Company Widget Styling */ +.new_footer_top .company_widget p { + font-size: 16px; + font-weight: 300; + line-height: 28px; + color: #6a7695; + margin-bottom: 20px; +} +.new_footer_top .company_widget .f_subscribe_two .btn_get { + border-width: 1px; + margin-top: 20px; +} + +/* Contact Form Styling */ +.f_subscribe_two { + display: flex; + flex-direction: column; + gap: 15px; /* Ensure enough space between input fields */ +} + +.f_subscribe_two input[type="email"], +.f_subscribe_two textarea { + width: 100%; + padding: 12px; + border: 1px solid #e2e2eb; + border-radius: 5px; + font-size: 14px; + color: #333; + background-color: #f7f7f7; + margin-bottom: 10px; /* Spacing between inputs */ +} + +.f_subscribe_two input[type="email"]::placeholder, +.f_subscribe_two textarea::placeholder { + color: #b3b3b3; +} + +.f_subscribe_two textarea { + height: 120px; + resize: none; +} + +/* Button Styling */ +.f_subscribe_two button#butt { + background-color: #5e2ced; + color: white; + padding: 12px 20px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.f_subscribe_two button#butt:hover { + background-color: #3d1bb0; +} + +/* General Hover Effects */ +a:hover, a:focus, .btn:hover, .btn:focus, button:hover, button:focus { + text-decoration: none; + outline: none; +} + +/* Widget and List Styling */ +.new_footer_top .f_widget.about-widget .f_list li a:hover { + color: #5e2ced; +} +.new_footer_top .f_widget.about-widget .f_list li { + margin-bottom: 11px; +} +.f_widget.about-widget .f_list li:last-child { + margin-bottom: 0px; +} +.f_widget.about-widget .f_list li { + margin-bottom: 15px; +} +.f_widget.about-widget .f_list { + margin-bottom: 0px; +} + +/* Social Icon Styling */ +.new_footer_top .f_social_icon a { + width: 44px; + height: 44px; + line-height: 43px; + background: transparent; + border: 1px solid #e2e2eb; + font-size: 24px; +} +.f_social_icon a { + width: 46px; + height: 46px; + border-radius: 50%; + font-size: 14px; + line-height: 45px; + color: #858da8; + display: inline-block; + background: #ebeef5; + text-align: center; + transition: all 0.2s linear; +} +.new_footer_top .f_social_icon a:hover { + background: #5e2ced; + border-color: #5e2ced; + color: white; +} +.new_footer_top .f_social_icon a + a { + margin-left: 4px; +} + +/* Heading and Title Styling */ +.new_footer_top .f-title { + margin-bottom: 30px; + color: #263b5e; +} +.f_600 { + font-weight: 600; +} +.f_size_18 { + font-size: 18px; +} +h1, h2, h3, h4, h5, h6 { + color: #4b505e; +} +.new_footer_top .f_widget.about-widget .f_list li a { + color: #6a7695; +} + +/* Background Animations */ +.new_footer_top .footer_bg { + position: absolute; + bottom: 0; + /* background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigB8iI5tb8WSVBuVUGc9UjjB8O0708X7Fdic_4O1LT4CmLHoiwhanLXiRhe82yw0R7LgACQ2IhZaTY0hhmGi0gYp_Ynb49CVzfmXtYHUVKgXXpWvJ_oYT8cB4vzsnJLe3iCwuzj-w6PeYq_JaHmy_CoGoa6nw0FBo-2xLdOPvsLTh_fmYH2xhkaZ-OGQ/s16000/footer_bg.png") no-repeat scroll center 0; */ + width: 100%; + height: 266px; +} + +.new_footer_top .footer_bg .footer_bg_one { + /* background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia0PYPxwT5ifToyP3SNZeQWfJEWrUENYA5IXM6sN5vLwAKvaJS1pQVu8mOFFUa_ET4JuHNTFAxKURFerJYHDUWXLXl1vDofYXuij45JZelYOjEFoCOn7E6Vxu0fwV7ACPzArcno1rYuVxGB7JY6G7__e4_KZW4lTYIaHSLVaVLzklZBLZnQw047oq5-Q/s16000/volks.gif") no-repeat center center; */ + width: 330px; + height: 105px; + background-size: 100%; + position: absolute; + bottom: 0; + left: 30%; + animation: myfirst 22s linear infinite; +} + +.new_footer_top .footer_bg .footer_bg_two { + background: url("https://cdn.pixabay.com/animation/2023/02/07/13/30/13-30-08-292_512.gif") no-repeat center center; + width: 330px; + height: 105px; + background-size: 100%; + bottom: 0; + left: 38%; + position: absolute; + animation: myfirst 30s linear infinite; +} + +/* Animation Keyframes */ +@keyframes myfirst { + 0% { + left: -25%; + } + 100% { + left: 100%; + } +} + +/* Social Icons Hover Color */ .fa-brands.fa-facebook:hover { color: #3B5998 !important; } @@ -201,6 +537,7 @@ .fa-brands.fa-x-twitter:hover { color: #181e20 !important; } + @@ -276,8 +613,21 @@



-
-

About Retro

+
+

+ A + B + O + U + T + +   + R + E + T + R + O +

@@ -285,104 +635,105 @@

About
-

At Retro, we celebrate the essence of timeless moments, where the charm of vintage design meets the warmth of nostalgia. Our love for the past inspires us to create an experience that connects the beauty of bygone eras with today’s world. Whether it's 60s-style floral patterns or classic tech from yesteryear, Retro brings back the simplicity, elegance, and innovation of those unforgettable days. + +

At Retro, we celebrate the essence of timeless moments, where the charm of vintage design meets the warmth of nostalgia. Our love for the past inspires us to create an experience that connects the beauty of bygone eras with today’s world. Whether it's 60s-style floral patterns or classic tech from yesteryear, Retro brings back the simplicity, elegance, and innovation of those unforgettable days.

-

Our Story

+

Our Story

Retro was born from a desire to relive and share the joy of the past. We believe that every era has something special to offer, whether it’s the bold designs of the 60s, the innovative spirit of the 70s, or the tech revolutions of the 80s and 90s. Our journey began with a passion for collecting vintage items and a dream to create a space where people could immerse themselves in a world that captures the essence of different generations.

-

Why Choose Retro?

+

Why Choose Retro?

We’re not just about products – we’re about creating a lifestyle that honors the beauty and inspiration of the past. Each item we offer is carefully selected to bring nostalgia to life, allowing you to embrace the timeless designs, flavors, and stories that have shaped history. Whether you're a vintage enthusiast or simply love the look and feel of classic designs, Retro is your gateway to a world that values tradition as much as it does innovation.

-
- - - - -