From 9ac5c127afb55ecc7a046105b388a04b77aecc03 Mon Sep 17 00:00:00 2001 From: rohitsharma2610 Date: Thu, 3 Oct 2024 12:36:56 +0530 Subject: [PATCH] changed the styling of cards in service page --- Css-files/content.css | 125 +++----- Html-files/services.html | 672 +++++++++++++++++++++++---------------- 2 files changed, 439 insertions(+), 358 deletions(-) diff --git a/Css-files/content.css b/Css-files/content.css index 807382e2..98dd473f 100644 --- a/Css-files/content.css +++ b/Css-files/content.css @@ -1,6 +1,7 @@ * { margin: 0px; padding: 0px; + } p{ color: hsl(208, 7%,46%); @@ -36,6 +37,9 @@ body { z-index: -1; } +.upper{ + margin-top: -5rem; +} .navbar { padding: 8px 10px; @@ -254,9 +258,15 @@ input[type="submit"]:hover { background-color: transparent; background-blend-mode:lighten; background-repeat: no-repeat; - background-size: cover; + /* background-size: cover; */ + } +.cards{ + height: 480px; + width: 480px; + margin-left: 2rem; +} .second_cont{ display: flex; padding: 40px; @@ -309,20 +319,30 @@ div.deals:hover{ padding-top: 400px; } .testimonal__container{ + width: 100%; display: flex; - padding: 3rem; + justify-content: center; + /* flex-direction: column; */ + /* padding: 3rem; */ + margin-top: 2rem; } .testimonal__card{ text-align: center; - padding:2rem 3rem 2.5rem; + border:2px solid rgba(224, 224, 252, 0.678); - transition:border .4s,background-color .4s; + transition:border .4s background-color .4s; background-color: white; box-shadow: 0 0 10px rgba(224, 224, 252, 0.678); border: 1px solid rgb(186, 186, 201); padding:40px 30px ; margin: 5px; color:rgb(107, 107, 122); + /* margin-left: 3rem; */ +} +.testimonal__card:hover{ + transform: translateY(-10px); + transition: 0.5s; + box-shadow: 2px 2px 20px black; } .testimonal__image{ width:100px; @@ -336,6 +356,8 @@ div.deals:hover{ .testimonal__description{ margin-bottom: 1.25rem; } + + .section__title{ text-align: center; font-size: 2rem; @@ -344,97 +366,42 @@ div.deals:hover{ /* footer */ .foot-panel2{ - background-color: transparent; - color:white; - height: 300px; - display: flex; - justify-content: space-evenly; + background-color: transparent; + color:white; + height: 300px; + display: flex; + justify-content: space-evenly; } .footer-colums{ - margin-top: 20px; + margin-top: 20px; } .footer-colums p{ - font-weight: 700; + font-weight: 700; } .footer-colums a{ - display: block; - font-size: 0.85rem; - margin-top: 10px; - color: #dddddd; -} - -.follow-us{ - margin-bottom: 20px; -} - -.social-icons a { - font-size: 1.2rem; - padding: 8px; - margin: 15px; - text-decoration: none; - /* color: white; */ -} - -.fa-facebook{ - color: hsl(203, 30%, 26%); - 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; + display: block; + font-size: 0.85rem; + margin-top: 10px; + color: #dddddd; } -.fa-instagram{ - color: hsl(203, 30%, 26%); - 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:hsl(203, 30%, 26%); */ - height: 160px; - /* font-size: 0.9rem; */ - text-align: center; - /* margin-bottom: 8px; */ + background-color: transparent; + color: white; + height: 160px; + font-size: 0.9rem; + text-align: center; } - - .pages{ - padding-top: 25px; + padding-top: 25px; } .copyright{ - padding-top: 10px; + padding-top: 10px; } form { @@ -473,7 +440,7 @@ textarea { font-size: 1.2rem; padding: 15px; text-decoration: none; - color: hsl(203, 30%, 26%); + color: white; } .fa-facebook:hover { @@ -577,8 +544,6 @@ textarea { border: none; } - - #contactForm h3 { height: 30px; color: #141414; diff --git a/Html-files/services.html b/Html-files/services.html index 58da5ae9..6c35a86b 100644 --- a/Html-files/services.html +++ b/Html-files/services.html @@ -1,28 +1,36 @@ - - - - Retro - - - - - - - - - - - + + + + Retro + + + + + + + - - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
- -
-
- -
- -
-

S E R V I C E S

+ + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-

Vintage Vibe!

- -
-
-

Services for Events

- -
-
-

Retro Delivery Subscription

- -
- +
+
-
- +
+
+ +
+ +
+

S + E R V I C E S

+
-
+
+
+

Vintage + Vibe!

+ +
+
+

Services + for Events

+ +
+
+

Retro + Delivery Subscription

+ +
-
-

Customer Opinion

+
+
-
-
-
-
- -

Riya Jain

-

- Wide selection of items.It's nice website for vintage collection lovers. -

- -
- - - - - -
-
+
+ +
+

Customer + Opinion

+ +
+
+ +
+
+ +

Riya + Jain

+

+ Wide selection of items.It's nice website + for vintage collection lovers. +

+ +
+ + + + + +
+
+
-
-
-
-
- -

Sudhanshu Sharma

-

- Must purchase the items in the website.Nice! -

- -
- - - - - -
-
+
+
+
+ +

Sudhanshu + Sharma

+

+ Must purchase the items in the website. Very Nice, Good Products! +

+ +
+ + + + + +
+
+
-
-
-
- -

Angel Dravid

-

- Good delivery and offers.Good Service.Must checkout. -

- -
- - - - - -
-
+ +
+
+ +
+
+ +

Angel + Dravid

+

+ Good delivery and offers.Good Service.Must + checkout. +

+ +
+ + + + + +
+
+
-
-
-
-
- -

Priya Sharma

-

- Nice offer above $5000.The items are very delicious. -

- -
- - - - - -
-
+
+
+
+ +

Priya + Sharma

+

+ Nice offer above $5000.The items are very + delicious. +

+ +
+ + + + + +
+
+
-
+
+
+
+ +

Gift + Card and Voucher Redemption

+
+
+ +

Exclusive + Offers and Promotions

+
-
-
-
- -

Gift Card and Voucher Redemption

-
-
- -

Exclusive Offers and Promotions

-
- - - - - - - + - - - - + - \ No newline at end of file + \ No newline at end of file