-
-
-
-
-
-
-
+
-
-
-
-
-
-
diff --git a/Css-files/about.css b/Css-files/about.css
index b255a580..27ec4701 100644
--- a/Css-files/about.css
+++ b/Css-files/about.css
@@ -105,7 +105,7 @@
}
.mainhead h1 {
font-family: Georgia;
- font-size: 3.8rem;
+ font-size: 3rem;
color: white;
padding-bottom: 20px;
}
@@ -334,22 +334,21 @@
}
.social-icons a {
- font-size: 1.2rem;
- padding: 8px;
- margin: 15px;
+ font-size: 1rem;
+ padding: 7px;
+ margin: 7px 6px 0 8px;
text-decoration: none;
/* color: white; */
}
.fa-facebook{
color: hsl(203, 30%, 26%);
- font-size: 1.2rem;
+ font-size: 1rem;
padding: 8px;
margin: 15px;
}
.fa-facebook:hover {
-
transform: scale(1.5);
color:#3B5998;
transition: transform 0.2s ease, color 0.2s ease;
@@ -357,7 +356,7 @@
.fa-instagram{
color: hsl(203, 30%, 26%);
- font-size: 1.2rem;
+ font-size: 1rem;
padding: 8px;
margin: 15px;
}
@@ -368,18 +367,39 @@
}
.fa-x-twitter{
color: hsl(203, 30%, 26%);
- font-size: 1.2rem;
+ font-size: 1rem;
padding: 8px;
margin: 15px;
-
}
-
.fa-x-twitter:hover {
color:black;
transform: scale(1.5);
transition: transform 0.2s ease, color 0.2s ease;
}
-
+ .fa-youtube {
+ color: hsl(203, 30%, 26%);
+ font-size: 1rem;
+ padding: 8px;
+ margin: 15px;
+ }
+
+ .fa-youtube:hover {
+ transform: scale(1.5);
+ color: #FF0000;
+ transition: transform 0.2s ease, color 0.2s ease;
+ }
+
+ .fa-snapchat {
+ color: hsl(203, 30%, 26%);
+ font-size: 1rem;
+ padding: 8px;
+ margin: 15px;
+ }
+ .fa-snapchat:hover {
+ transform: scale(1.5);
+ color: #FFFC00;
+ transition: transform 0.2s ease, color 0.2s ease;
+ }
.foot_panel4{
background-color: transparent;
@@ -432,24 +452,6 @@
background-color: rgb(196, 89, 89);
}
- .social-icons a{
- font-size: 1.2rem;
- padding: 15px;
- text-decoration: none;
- color: hsl(203, 30%, 26%);
- }
-
- .fa-facebook:hover {
- color:#3B5998;
- }
-
- .fa-instagram:hover {
- color:#D62976;
- }
-
- .fa-twitter:hover {
- color:#00B6F1;
- }
.cart-section{
padding: 55px 70px 30px 70px;
diff --git a/Css-files/content.css b/Css-files/content.css
index aa971113..4b2a42e7 100644
--- a/Css-files/content.css
+++ b/Css-files/content.css
@@ -119,11 +119,11 @@ body {
.mainhead {
text-align: center;
padding-top: 30px;
- padding-bottom: 50px;
+ /* padding-bottom: 50px; */
}
.mainhead h1 {
font-family: Georgia;
- font-size: 3.8rem;
+ font-size: 3rem;
color: white;
padding-bottom: 20px;
}
@@ -240,6 +240,7 @@ input[type="submit"]:hover {
.first_cont {
display: flex;
+ flex-wrap: wrap;
justify-content: center;
}
@@ -288,6 +289,7 @@ input[type="submit"]:hover {
}
.second_cont{
display: flex;
+ flex-wrap: wrap;
padding: 40px;
justify-content: center;
}
@@ -367,10 +369,11 @@ div.deals:hover{
box-shadow: 2px 2px 20px black;
}
.testimonal__image{
- width:100px;
- height:100px;
- border-radius:50%;
- margin:0 auto 1.5rem;
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ object-fit: cover;
+ margin: 0 auto 1.5rem;
}
.testimonal__title{
margin-bottom: .75rem;
@@ -379,7 +382,6 @@ div.deals:hover{
margin-bottom: 1.25rem;
}
-
.section__title{
text-align: center;
font-size: 2rem;
@@ -389,8 +391,7 @@ div.deals:hover{
/* footer */
.foot-panel2{
background-color: transparent;
- color:white;
- height: 300px;
+ /* color:white; */
display: flex;
justify-content: space-evenly;
}
@@ -413,7 +414,7 @@ div.deals:hover{
.foot_panel4{
background-color: transparent;
color: white;
- height: 160px;
+ height: auto;
font-size: 0.9rem;
text-align: center;
}
@@ -459,8 +460,9 @@ input
}
.social-icons a{
- font-size: 1.2rem;
- padding: 15px;
+ font-size: 1rem;
+ padding: 7px;
+ margin: 7px 6px 0 8px;
text-decoration: none;
color: brown !important;
}
@@ -476,6 +478,12 @@ input
.fa-twitter:hover {
color:#00B6F1;
}
+.fa-youtube:hover {
+ color: #FF0000;
+}
+.fa-snapchat:hover {
+ color: #FFFC00;
+}
.cart-section{
padding: 55px 70px 30px 70px;
@@ -498,9 +506,12 @@ input
.cart table,th,td{
text-align: center;
- border: 2px solid black;
+ border: 2px solid whitesmoke;
width: 75%;
}
+td{
+ font-size: 20px;
+}
#bill{
color: rgb(196, 74, 74);
@@ -553,22 +564,26 @@ input
flex-direction: column;
justify-content: center;
align-items: center;
- width: 20rem;
height: max-content;
}
#contactForm input,
#contactForm textarea {
- width: 50%;
+ width: 64%;
padding: 20px;
+ font-size: 15px;
margin: 5px;
border-radius: 10px;
border: none;
}
+#contactForm input{
+ width: 76%;
+ font-size: 15px;
+}
#contactForm h3 {
height: 30px;
- color: #141414;
+ color: hsl(357, 82%,35%);
}
#contactForm textarea {
height: 100px;
@@ -613,4 +628,4 @@ input
border-radius: 50%;
padding: 5px 8px;
font-size: 12px;
-}
\ No newline at end of file
+}
diff --git a/Css-files/contributor.css b/Css-files/contributor.css
new file mode 100644
index 00000000..6d0ff7ca
--- /dev/null
+++ b/Css-files/contributor.css
@@ -0,0 +1,262 @@
+body {
+ font-family: "Poppins";
+ color: #333;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ margin: 0;
+}
+
+.container {
+ text-align: center;
+}
+
+.title {
+ display: inline-block;
+ font-size: 3em;
+ margin-bottom: 20px;
+ padding: 10px;
+ color: #bb0111;
+ text-shadow: 1px 1px 2px rgb(220, 181, 187),
+ 0 0 1em rgba(216, 130, 200, 0.617), 0 0 0.2em rgba(237, 233, 238, 0.623);
+ /* border-radius: 20px; */
+ /* background-color: rgba(209, 209, 255, 0.8); */
+}
+
+.contributors-grid {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 20px;
+ justify-content: center;
+ padding: 20px;
+ gap: 40px;
+}
+
+.contributor-card {
+ width: 300px;
+ position: relative;
+ overflow: hidden;
+ max-width: calc(55% - 16px);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: #f9e2f9;
+ /* border: 1px solid #00ebdf; */
+ border-radius: 8px;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ padding: 16px;
+ transition: transform 0.5s ease-in-out, box-shadow 0.3s ease;
+ text-decoration: none;
+ color: inherit;
+ /* margin-bottom: 16px; */
+}
+
+.contributor-card:hover {
+ transform: scale(1.02);
+ box-shadow: 1px 1px 23px rgba(11, 9, 11, 0.915);
+ border: none;
+ cursor: pointer;
+}
+
+.contributor-card::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(132deg, brown 50%, rgb(206, 203, 203) 51%);
+ /* background: linear-gradient(130deg, #3b89ff 50%, #eef6ff 50%); */
+ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+ transform: translate(-100%, -100%);
+ opacity: 0;
+ z-index: -1;
+}
+
+.contributor-card:hover::before {
+ transform: translate(0, 0);
+ opacity: 1;
+}
+
+.contributor-card img {
+ border-radius: 50%;
+ width: 100px;
+ height: 100px;
+ object-fit: cover;
+ margin-bottom: 10px;
+ transition: box-shadow 0.3s ease-in-out, border 0.1s ease-in-out;
+}
+
+.contributor-card:hover img {
+ border: 2px solid rgb(255, 234, 0);
+ box-shadow: -1px 2px 27px rgb(0, 217, 255);
+}
+
+/*
+ .contributor-card h2 {
+ margin: 0 0 10px;
+ } */
+/*
+ .contributor-card p {
+ } */
+
+.contributor-card h2 {
+ font-size: 1.2em;
+ color: #040404;
+ position: relative;
+ z-index: 1;
+ transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+}
+
+.contributor-card p {
+ font-size: 1.2em;
+ color: #040404;
+ position: relative;
+ z-index: 1;
+ transition: text-shadow 0.3s ease-in-out, color 0.3s ease-in-out;
+ margin: 0 0 10px;
+}
+
+.contributor-card:hover h2 {
+ text-shadow: 1px 1px 2px rgb(0, 108, 108), 0 0 0.2em rgb(0, 14, 108),
+ 0 0 0.8em rgb(0, 14, 108);
+ color: white;
+}
+
+.contributor-card:hover p {
+ text-shadow: 1px 1px 2px rgba(4, 0, 127, 0.715), 0 0 0.2em rgb(5, 18, 168),
+ 0 0 0.3em rgb(134, 136, 250);
+ color: white;
+
+ /* font-weight: 400; */
+}
+
+/* dark mode */
+/* Toggle button styles */
+.toggle-container {
+ position: fixed; /* Change this as needed for positioning */
+ top: 25px;
+ right: 40px;
+}
+
+.toggle {
+ appearance: none;
+ outline: none;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+ border-radius: 999px;
+ color: hsl(240, 100%, 95%);
+ transition: all 500ms;
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
+.toggle:checked {
+ background-color: #333;
+}
+.toggle:checked:before {
+ transform: translateX(25px);
+}
+
+body {
+ background-color: #f8f9fa;
+ color: #212529;
+}
+
+.nav-container {
+ background-color: #ffffff;
+}
+
+.footer {
+ background-color: #ffffff;
+ color: #212529;
+}
+
+/* Dark mode styles */
+body.dark-mode {
+ background-color: #333;
+ color: #ffffff;
+}
+
+body.dark-mode .nav-container {
+ background-color: #343a40;
+}
+
+body.dark-mode .footer {
+ background-color: #343a40;
+ color: #ffffff;
+}
+#toggle {
+ display: inline-block;
+ border-radius: 50px;
+ transition: all 0.4s ease-in-out;
+ padding: 10px 10px;
+ background-color: transparent;
+ border: 2px solid #c6c9d8bf;
+ color: #c6c9d8bf;
+ font-weight: 600;
+ font-size: 14px;
+ letter-spacing: 2px;
+ text-decoration: none;
+}
+.toggle-container {
+ --size: 2rem;
+ width: var(--size);
+ height: var(--size);
+}
+
+.toggle {
+ appearance: none;
+ outline: none;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ box-shadow: inset calc(var(--size) * 0.33) calc(var(--size) * -0.25) 0;
+ border-radius: 999px;
+ color: hsl(240, 100%, 95%);
+ transition: all 500ms;
+ position: absolute;
+ top: 25px;
+ right: 0;
+
+ &:checked {
+ --ray-size: calc(var(--size) * -0.4);
+ --offset-orthogonal: calc(var(--size) * 0.65);
+ --offset-diagonal: calc(var(--size) * 0.45);
+ transform: scale(0.75);
+ color: hsl(40, 100%, 50%);
+ box-shadow: inset 0 0 0 var(--size),
+ calc(var(--offset-orthogonal) * -1) 0 0 var(--ray-size),
+ var(--offset-orthogonal) 0 0 var(--ray-size),
+ 0 calc(var(--offset-orthogonal) * -1) 0 var(--ray-size),
+ 0 var(--offset-orthogonal) 0 var(--ray-size),
+ calc(var(--offset-diagonal) * -1) calc(var(--offset-diagonal) * -1) 0
+ var(--ray-size),
+ var(--offset-diagonal) var(--offset-diagonal) 0 var(--ray-size),
+ calc(var(--offset-diagonal) * -1) var(--offset-diagonal) 0 var(--ray-size),
+ var(--offset-diagonal) calc(var(--offset-diagonal) * -1) 0 var(--ray-size);
+ }
+}
+
+/* Apply fade-down animation to the toggle container */
+.toggle-container[data-aos="fade-down"] {
+ transition: opacity 500ms ease-in-out;
+ opacity: 0;
+}
+
+.toggle-container[data-aos="fade-down"].aos-animate {
+ opacity: 1;
+}
+body.dark-mode .contributor-card {
+ background: #0e1525;
+}
+body.dark-mode .contributor-card p {
+ color: white;
+}
+body.dark-mode .contributor-card h2 {
+ color: white;
+}
diff --git a/Css-files/forgotpass1.css b/Css-files/forgotpass1.css
new file mode 100644
index 00000000..245aee19
--- /dev/null
+++ b/Css-files/forgotpass1.css
@@ -0,0 +1,145 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&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&display=swap');
+
+body {
+ margin: 0;
+ font-family: 'Noto Sans', sans-serif;
+ 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;
+}
+.circle {
+ z-index: 998;
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ pointer-events: none;
+ animation: colors 5s infinite;
+ position: fixed;
+ transform: translate(-50%, -50%);
+}
+.card-forgot {
+ width: 60%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ padding: 30px 35px;
+ border-radius: 20px;
+ 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 */
+ animation: fadeIn 2s ease-in-out;
+}
+
+@keyframes fadeIn {
+ 0% {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+.card-forgot h1 {
+ color: hsl(203, 30%,26%);
+ font-family: "Philosopher", sans-serif;
+ text-transform: uppercase;
+ text-align: center;
+}
+
+.home-btn {
+ position: absolute;
+ top: 32px;
+ font-family: "Philosopher", sans-serif;
+ left: 30px;
+}
+
+.home-btn a {
+ font-size: 30px;
+ text-decoration: none;
+ 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: '';
+ position: absolute;
+ width: 100%;
+ height: 1.5px;
+ bottom: -5px;
+ left: 0;
+ background-color: transparent;
+ transition: background-color 0.3s ease; /* Smooth transition */
+}
+
+.home-btn a:hover::after {
+ background-color: rgb(141, 108, 108);
+}
+.textfield {
+ width: 100%;
+ margin-bottom: 15px;
+}
+
+.textfield > input {
+ width: 100%;
+ height: 45px;
+ border-radius: 15px;
+ border: 1px solid #b38484;
+ padding-left: 10px;
+ outline: none;
+ transition: border 0.3s ease; /* Smooth border transition */
+}
+
+.textfield > input:focus {
+ border: 2px solid #a76666; /* Highlight border on focus */
+}
+.btn-reset {
+ width: 100%;
+ padding: 10px 0;
+ border: none;
+ background-color: #e55d5d;
+ color: #fff;
+ font-size: 18px;
+ font-weight: bold;
+ border-radius: 10px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.btn-reset:hover {
+ background-color: #ff4a4a;
+}
+
+.error-message {
+ color: red;
+ font-family: "Poppins", sans-serif;
+ margin-top: 10px;
+}
+.switch-link {
+ text-align: center;
+ margin-top: 20px;
+ font-family: "Poppins", sans-serif;
+}
+
+.switch-link a {
+ color: hsl(0, 100%, 50%);
+ text-decoration: none;
+ font-weight: bold;
+ transition: color 0.3s ease;
+}
+
+.switch-link a:hover {
+ color: hsl(203, 30%, 26%);
+}
\ No newline at end of file
diff --git a/Css-files/login1.css b/Css-files/login1.css
index 3ba147a6..cbe234ea 100644
--- a/Css-files/login1.css
+++ b/Css-files/login1.css
@@ -129,7 +129,7 @@ body {
}
.textfield > input {
- width: 100%;
+ width: 95%;
height: 45px;
border-radius: 15px;
border: 1px solid #b38484;
diff --git a/Css-files/popup.css b/Css-files/popup.css
new file mode 100644
index 00000000..b429412f
--- /dev/null
+++ b/Css-files/popup.css
@@ -0,0 +1,128 @@
+
+ /* Styling for the pop-up */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.7);
+ justify-content: center;
+ align-items: center;
+ z-index: 1000;
+ }
+
+ .popup-content {
+ display: flex;
+ background-color: #feaea5;
+ border-radius: 10px;
+ max-width: 800px;
+ height: 450px;
+ overflow: hidden;
+ position: relative;
+ box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .popuplogo{
+ position: absolute;
+ top: 0;
+ right: 12px;
+ height: 50px;
+ }
+
+ .popup-left img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .popup-right {
+ padding: 20px;
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .popup h1 {
+ font-size: 31px;
+ color: #8B4513;
+ margin-bottom: 10px;
+ margin-top: 45px;
+ padding-top: 10px;
+ }
+
+ #h2{
+ font-size: 18px;
+ margin-bottom: 16px;
+ font-weight: bold;
+ }
+
+ /* h2 {
+ font-size: 24px;
+ margin-bottom: 10px;
+ color: #4B3B2A;
+ } */
+
+ .popup-right p{
+ margin-bottom: 26px;
+ color: #4B3B2A;
+ margin-bottom: 30px;
+ }
+
+ input[type="email"] {
+ width: 100%;
+ padding: 18px;
+ padding-bottom: 20px;
+ margin-bottom: 10px;
+ border: 1px solid #8B4513;
+ border-radius: 5px;
+ font-size: 14px;
+ }
+
+ #emailForm{
+ padding-top: 0px;
+ padding-bottom: 0px;
+ }
+
+ .signup-btn {
+ width: 100%;
+ padding: 10px 0;
+ background-color: #8B4513;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+ font-size: 13px;
+ }
+
+ .signup-btn:hover {
+ background-color: #6f3920;
+ font-size: 13.2px;
+ }
+
+ .no-thanks {
+ display: block;
+ margin-top: 14px;
+ color: #4B3B2A;
+ text-decoration: none;
+ margin-bottom: 40px;
+ }
+
+ .no-thanks:hover {
+ text-decoration: underline;
+ color: #381d0a;
+ }
+
+ .terms {
+ margin-top: 15px;
+ font-size: 10px;
+ color: #4B3B2A;
+ }
+
+ .terms a {
+ color: #8B4513;
+ }
+
\ No newline at end of file
diff --git a/Css-files/signup1.css b/Css-files/signup1.css
index 11321066..ce2ce7f5 100644
--- a/Css-files/signup1.css
+++ b/Css-files/signup1.css
@@ -24,7 +24,6 @@ body {
align-items: center;
height: 100vh; /* Full viewport height */
padding: 20px; /* Padding to avoid overflow */
- overflow: hidden; /* Prevents overflow */
position:relative;
}
@@ -154,14 +153,13 @@ body {
}
/* Responsive design for smaller screens */
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 980px) {
.main-login {
flex-direction: column;
padding: 0 20px; /* Added padding to avoid edge overflow */
}
.card-login {
- width: 100%; /* Full width for mobile */
padding: 20px; /* Adjust padding */
}
}
diff --git a/Html-files/Electronic.html b/Html-files/Electronic.html
index 3ac2784e..cafb6bb1 100644
--- a/Html-files/Electronic.html
+++ b/Html-files/Electronic.html
@@ -1,874 +1,1265 @@
-
-
-
+
+
+
Retro
-
+
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
Retro
-
-
+ }
+
+ .head_container_service {
+ height: 30px;
+ }
+
+ .navbar ul {
+ overflow: hidden;
+ display: flex;
+ justify-content: center;
+ }
+
+ .navbar li {
+ float: left;
+ list-style: none;
+ padding: 8px 20px;
+ }
+
+ .navbar li a {
+ text-decoration: none;
+ color: black;
+ font-size: 1.3rem;
+ font-family: var(--ff-philosopher);
+ }
+
+ .wrapper {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .container {
+ height: 400px;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: start;
+ }
+
+ .card {
+ width: 80px;
+ border-radius: 2rem;
+ background-size: cover;
+ cursor: pointer;
+ overflow: hidden;
+ margin: 0 10px;
+ display: flex;
+ align-items: flex-end;
+ transition: 0.6s cubic-bezier(0.28, -0.03, 0, 0.99);
+ box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8);
+ }
+
+ .card > .row {
+ color: white;
+ display: flex;
+ flex-wrap: nowrap;
+ }
+
+ .card > .row > .icon {
+ background: #223;
+ color: white;
+ border-radius: 50%;
+ width: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 15px;
+ }
+
+ .card > .row > .description {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ overflow: hidden;
+ height: 80px;
+ width: 520px;
+ opacity: 0;
+ transform: translateY(30px);
+ transition-delay: 0.3s;
+ transition: all ease;
+ }
+
+ .description p {
+ color: white;
+ padding-top: 5px;
+ }
+
+ .description h4 {
+ text-transform: uppercase;
+ }
+
+ input {
+ display: none;
+ }
+
+ input:checked + label {
+ width: 600px;
+ }
+
+ input:checked + label .description {
+ opacity: 1 !important;
+ transform: translateY(0) !important;
+ }
+
+ .foot-panel2 {
+ background-color: transparent;
+ color: white;
+ height: 300px;
+ display: flex;
+ justify-content: space-evenly;
+ }
+
+ .footer-colums p {
+ font-weight: 700;
+ }
+
+ .footer-colums a {
+ display: block;
+ font-size: 0.85rem;
+ margin-top: 10px;
+ color: #dddddd;
+ }
+ .fa-facebook {
+ color: white;
+ font-size: 1.2rem;
+ padding: 8px;
+ margin: 15px;
+ }
+
+ .fa-facebook:hover {
+ transform: scale(1.5);
+ color: #3b5998;
+ transition: transform 0.2s ease, color 0.2s ease;
+ }
+
+ .fa-instagram {
+ color: white;
+ font-size: 1.2rem;
+ padding: 8px;
+ margin: 15px;
+ }
+ .fa-instagram:hover {
+ transform: scale(1.5);
+ color: #d62976;
+ transition: transform 0.2s ease, color 0.2s ease;
+ }
+
+ .fa-x-twitter {
+ color: hsl(203, 30%, 26%);
+ font-size: 1.2rem;
+ padding: 8px;
+ margin: 15px;
+ }
+
+ .fa-x-twitter:hover {
+ color: black;
+ transform: scale(1.5);
+ transition: transform 0.2s ease, color 0.2s ease;
+ }
+
+ .foot_panel4 {
+ background-color: transparent;
+ /* color: white; */
+ height: 160px;
+ font-size: 0.9rem;
+ text-align: center;
+ }
+
+ form {
+ padding-top: 20px;
+ display: grid;
+ padding-bottom: 100px;
+ }
+
+ input,
+ textarea {
+ height: 30px;
+ width: 120%;
+ padding: 2.5px;
+ box-sizing: border-box;
+ border-radius: 2px;
+ }
+
+ #butt {
+ background-color: brown;
+ color: white !important;
+ padding: 3px;
+ border: 1px solid white;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+
+ #butt:hover {
+ background-color: rgb(196, 89, 89);
+ }
+
+ .social-icons a {
+ font-size: 1.2rem;
+ padding: 8px;
+ margin: 15px;
+ text-decoration: none;
+ color: brown !important;
+ }
+
+ .social-icons a:hover {
+ color: brown;
+ background-color: hsl(203%, 29%, 91%);
+ border-radius: 10px;
+ transform: scale(1.5); /* Increase size */
+ transition: transform 0.3s ease; /* Smooth transition effect */
+ }
+ .fa-brands.fa-facebook:hover {
+ color: #3b5998 !important;
+ }
+
+ .fa-brands.fa-instagram:hover {
+ color: #d62976 !important;
+ }
+
+ .fa-brands.fa-x-twitter:hover {
+ color: #181e20 !important;
+ }
+
+ #sr {
+ display: none;
+ position: fixed;
+ bottom: 70px;
+ right: 15px;
+ z-index: 99;
+ font-size: 18px;
+ border: none;
+ outline: none;
+ background-color: transparent;
+ color: rgb(17, 17, 17);
+ cursor: pointer;
+ padding: 15px;
+ border-radius: 4px;
+ }
+
+ #sr:hover {
+ color: #000;
+ border-radius: 100px;
+ }
+ ::-webkit-scrollbar {
+ width: 10px; /* Width of the scrollbar */
+ }
+ ::-webkit-scrollbar-track {
+ background-color: white; /* Color of the track */
+ border-radius: 10px;
+ }
+
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ background: gray;
+ border-radius: 6px; /* Rounded corners of the thumb */
+ }
+
+ * {
+ scrollbar-width: thick; /* Width of the scrollbar */
+ }
+ ::-webkit-scrollbar-button {
+ display: none;
+ }
+
+ #badgeCount {
+ position: relative;
+ top: -7px;
+ right: 1px;
+ background-color: red;
+ color: white;
+ border-radius: 50%;
+ padding: 5px 8px;
+ font-size: 12px;
+ }
+
+ /*Animation sliders*/
+ .wrapper {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ .container {
+ height: 400px;
+ display: flex;
+ flex-wrap: nowrap;
+ justify-content: start;
+ }
+ .card {
+ width: 80px;
+ border-radius: 0.75rem;
+ background-size: cover;
+ cursor: pointer;
+ overflow: hidden;
+ border-radius: 2rem;
+ margin: 0 10px;
+ display: flex;
+ align-items: flex-end;
+ transition: 0.6s cubic-bezier(0.28, -0.03, 0, 0.99);
+ box-shadow: 0px 10px 30px -5px rgba(0, 0, 0, 0.8);
+ }
+ .card > .row {
+ color: white;
+ display: flex;
+ flex-wrap: nowrap;
+ }
+ .card > .row > .icon {
+ background: #223;
+ color: white;
+ border-radius: 50%;
+ width: 50px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 15px;
+ }
+ .card > .row > .description {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ overflow: hidden;
+ height: 80px;
+ width: 520px;
+ opacity: 0;
+ transform: translateY(30px);
+ transition-delay: 0.3s;
+ transition: all ease;
+ }
+ .description p {
+ color: #b0b0ba;
+ padding-top: 5px;
+ }
+ .description h4 {
+ text-transform: uppercase;
+ }
+ input {
+ display: none;
+ }
+ input:checked + label {
+ width: 600px;
+ }
+ input:checked + label .description {
+ opacity: 1 !important;
+ transform: translateY(0) !important;
+ }
+ .card[for="c1"] {
+ background-image: url(https://i.pinimg.com/564x/60/88/94/6088941267edcc935e97fd5c856b7821.jpg);
+ }
+ .card[for="c2"] {
+ background-image: url(https://i.pinimg.com/564x/dd/7d/ac/dd7daca632d0f865ba2d9726bb358a50.jpg);
+ }
+ .card[for="c3"] {
+ background-image: url(https://i.pinimg.com/564x/11/44/9b/11449b6ce1ef8dc39c27d3586afa65dd.jpg);
+ }
+ .card[for="c4"] {
+ background-image: url(https://i.pinimg.com/564x/25/00/d0/2500d0ab5a70b750e18fe8685e863ca0.jpg);
+ }
+ .card[for="c5"] {
+ background-image: url(https://i.pinimg.com/564x/e0/5b/12/e05b126721a1582adaccab8b5e219f81.jpg);
+ }
+ .card[for="c6"] {
+ background-image: url(https://i.pinimg.com/564x/5c/c7/70/5cc770adfc5a4d75b4909d698eb447f7.jpg);
+ }
+ .card[for="c7"] {
+ background-image: url(https://i.pinimg.com/474x/9e/84/04/9e84043d5af1b0476a5c1fa12df38aef.jpg);
+ }
+ .card[for="c8"] {
+ background-image: url(https://i.pinimg.com/474x/5c/76/51/5c76513ce8e3443a7a30cd3bbc86d94c.jpg);
+ }
+ .card[for="c9"] {
+ background-image: url(https://i.pinimg.com/564x/cd/89/a5/cd89a5e968ed0b1b68e73a5ac2ffe1b1.jpg);
+ }
+ .card[for="c10"] {
+ background-image: url(https://i.pinimg.com/474x/42/69/19/426919f03cc846b881903e3dd40a0bc6.jpg);
+ }
+
+ .foot-panel2 .footer-colums a {
+ /* /* color: black!important; */
+ text-decoration: none !important;
+ transition:transform 0.2s ease, text-decoration-color 0.2s ease;
+ /* display: inline-block; */
+
+
+ text-decoration: none;
+ /* color: #000; */
+ position: relative;
+ padding-bottom: 2px;
+
+ }
+
+ .foot-panel2 .footer-colums a::after{
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 0;
+ height: 2px;
+ background-color: black;
+ transition: width 0.3s ease;
+ width:0;
+
+ }
+
+ .foot-panel2 .footer-colums a:hover{
+ transform: scale(1.05);
+ }
+
+ .foot-panel2 .footer-colums a:hover::after{
+ width:100%;
+ }
+
+
Retro
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+