From 3ed41b443bbf9e3ee44b65f183df7d88a92d68bb Mon Sep 17 00:00:00 2001 From: Suhaina Fathima M <153417476+SuhainaFathimaM@users.noreply.github.com> Date: Fri, 2 Aug 2024 23:00:39 +0530 Subject: [PATCH 1/4] 1. Updated style.css --- Projects/Pet_Website/assets/css/style.css | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/Projects/Pet_Website/assets/css/style.css b/Projects/Pet_Website/assets/css/style.css index b335bdd6..5d282e87 100644 --- a/Projects/Pet_Website/assets/css/style.css +++ b/Projects/Pet_Website/assets/css/style.css @@ -1,15 +1,3 @@ -/*-----------------------------------*\ - #style.css -\*-----------------------------------*/ - -/** - * copyright 2022 codewithsadee - */ - - - - - /*-----------------------------------*\ #CUSTOM PROPERTY \*-----------------------------------*/ @@ -87,10 +75,6 @@ } - - - - /*-----------------------------------*\ #RESET \*-----------------------------------*/ @@ -116,6 +100,7 @@ a { text-decoration: none; } + img { height: auto; } button { From 96ffc01d904fbf4799b400af0fc9a52bcdc3f333 Mon Sep 17 00:00:00 2001 From: Suhaina Fathima M <153417476+SuhainaFathimaM@users.noreply.github.com> Date: Fri, 2 Aug 2024 23:04:10 +0530 Subject: [PATCH 2/4] Update style.css --- Projects/Pet_Website/assets/css/style.css | 8 -------- 1 file changed, 8 deletions(-) diff --git a/Projects/Pet_Website/assets/css/style.css b/Projects/Pet_Website/assets/css/style.css index 5d282e87..41773a9a 100644 --- a/Projects/Pet_Website/assets/css/style.css +++ b/Projects/Pet_Website/assets/css/style.css @@ -99,8 +99,6 @@ a { color: inherit; text-decoration: none; } - - img { height: auto; } button { @@ -138,9 +136,6 @@ body { ::-webkit-scrollbar-thumb:hover { background-color: hsl(0, 0%, 70%); } - - - /*-----------------------------------*\ #REUSED STYLE \*-----------------------------------*/ @@ -244,9 +239,6 @@ body { .w-100 { width: 100%; } - - - /*-----------------------------------*\ #HEADER \*-----------------------------------*/ From 8d042e4843f28cc581e25670e18e4e252a19a2a7 Mon Sep 17 00:00:00 2001 From: Suhaina Fathima M <153417476+SuhainaFathimaM@users.noreply.github.com> Date: Fri, 2 Aug 2024 23:06:54 +0530 Subject: [PATCH 3/4] 3. Added Product Card hovering effects --- Projects/Pet_Website/assets/css/style.css | 57 +++++++++++++++++++++-- 1 file changed, 54 insertions(+), 3 deletions(-) diff --git a/Projects/Pet_Website/assets/css/style.css b/Projects/Pet_Website/assets/css/style.css index 41773a9a..2bcde0cb 100644 --- a/Projects/Pet_Website/assets/css/style.css +++ b/Projects/Pet_Website/assets/css/style.css @@ -255,6 +255,7 @@ body { z-index: 4; } + .header.active { position: fixed; box-shadow: var(--shadow-1); @@ -350,9 +351,6 @@ body { } - - - /*-----------------------------------*\ #HERO \*-----------------------------------*/ @@ -444,6 +442,7 @@ body { border: 1px solid var(--platinum); border-radius: var(--radius-10); margin-block-end: 20px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .product-card :is(.wrapper, .rating-wrapper) { display: flex; } @@ -478,6 +477,58 @@ body { font-weight: var(--fw-700); } +/* Product Card Hover Effects */ +.product-card:is(:hover, :focus-within) .img-cover { + transform: scale(1.05); /* Smooth scaling on hover */ + transition: var(--transition-2); /* Smooth transition */ +} + +.product-card:is(:hover, :focus-within) .card-title { + color: var(--portland-orange); /* Title color change on hover */ +} + +.product-card .card-action-btn { + display: none; + position: absolute; + top: 15px; + right: 15px; + background-color: var(--portland-orange); + color: var(--white); + font-size: 20px; + padding: 12px; + border-radius: 50%; + transition: var(--transition-1); +} + +.product-card:is(:hover, :focus-within) .card-action-btn { + display: block; + opacity: 1; +} + +/* Styling the "Add to Cart" icon */ +.product-card .card-action-btn:is(:hover, :focus) { + background-color: var(--white); + color: var(--portland-orange); + border: 1px solid var(--portland-orange); /* Add a border */ +} + +/* Styling the hover image */ +.product-card .img-cover.hover { + position: absolute; + top: 0; + left: 0; + opacity: 0; +} + +.product-card:is(:hover, :focus-within) .img-cover.default { + opacity: 0; +} + +.product-card:is(:hover, :focus-within) .img-cover.hover { + opacity: 1; +} + + From 2d46b869c43c27718f93671dc3a47fe572a727b3 Mon Sep 17 00:00:00 2001 From: Suhaina Fathima M <153417476+SuhainaFathimaM@users.noreply.github.com> Date: Fri, 2 Aug 2024 23:08:54 +0530 Subject: [PATCH 4/4] Made it responsive and added other hovering effects and transitions --- Projects/Pet_Website/assets/css/style.css | 64 ++++++++++++++++++++--- 1 file changed, 58 insertions(+), 6 deletions(-) diff --git a/Projects/Pet_Website/assets/css/style.css b/Projects/Pet_Website/assets/css/style.css index 2bcde0cb..ac9562b0 100644 --- a/Projects/Pet_Website/assets/css/style.css +++ b/Projects/Pet_Website/assets/css/style.css @@ -529,10 +529,6 @@ body { } - - - - /*-----------------------------------*\ #SERVICE \*-----------------------------------*/ @@ -638,6 +634,13 @@ body { margin-block-end: 25px; } +.footer-link { + padding-block: 4px; + transition: var(--transition-1); +} + +.footer-link:is(:hover, :focus) { color: var(--amber); } + .footer-text .link { display: inline-block; color: var(--portland-orange); @@ -658,6 +661,54 @@ body { color: var(--portland-orange); } +/* Contact Form Styling */ +#contact { + padding: 50px 0; + background-color: #F7BB4A; + margin-bottom: 20rem; +} + +.contact-form-wrapper { + background: #fff; + padding: 40px; + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +.form-group { + margin-bottom: 20px; +} + +.form-control { + width: 100%; + padding: 15px; + margin-top: 5px; + border-radius: 10px; + border: 1px solid #ccc; + font-size: 1em; + transition: border-color 0.3s, box-shadow 0.3s; +} + +.form-control:focus { + border-color: #5cb85c; + box-shadow: 0 0 5px rgba(92, 184, 92, 0.5); +} + +.btn-primary { + background-color: #5cb85c; + border: none; + color: white; + padding: 15px 25px; + font-size: 1.2em; + border-radius: 10px; + cursor: pointer; + transition: background-color 0.3s; +} + +.btn-primary:hover { + background-color: #4cae4c; +} + .social-list { display: flex; gap: 10px; @@ -1081,7 +1132,6 @@ body { - /** * responsive for large than 1200px screen */ @@ -1134,6 +1184,7 @@ body { .footer { padding-block-start: 40px; } } + /* General Styles */ body { font-family: Arial, sans-serif; @@ -1198,9 +1249,10 @@ body { background-color: #5cb85c; border: none; color: white; - padding: 15px; + padding: 15px 25px; font-size: 1.2em; border-radius: 10px; + cursor: pointer; transition: background-color 0.3s; }