Skip to content

Commit

Permalink
Services page need changes in the footer icons and Gaps in between (#287
Browse files Browse the repository at this point in the history 
)

<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
I made all the corrections in the services page!
footer icons are  behaving correctly on hover
There are no irrelevant gaps in between elements



## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes #282 

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [ ] ()

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->
![Screenshot
(240)](https://github.com/user-attachments/assets/c263d99a-84af-475e-bd02-d9e67d29be5b)
![Screenshot
(241)](https://github.com/user-attachments/assets/882ac0ad-68e3-4285-8aab-9386edd00bc1)


## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [ X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [ X] I have updated my branch and synced it with project `main` branch
before making this PR
- [ X] I have performed a self-review of my code
- [ X] I have tested the changes thoroughly before submitting this pull
request.
- [ X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [ X] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
<!--Include any additional information or context that might be helpful
for reviewers.-->
I'd like to take any further desirable inputs @Anjaliavv51
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 7, 2024
2 parents 10b3db2 + fbaf58e commit b6155f6
Showing 1 changed file with 108 additions and 23 deletions.
131 changes: 108 additions & 23 deletions Html-files/services.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,100 @@
color: hsl(203, 30%, 50%); /* Change to a darker color for contrast on hover */
color: hsl(203, 30%, 50%);
}

.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(22, 76%, 85%);
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;
}
/* Testimonial Container */
.testimonal__container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding: 1rem;
}

/* Testimonial Card */
.testimonal__card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
overflow: hidden;
max-width: 300px;
text-align: center;
transition: transform 0.3s ease-in-out;
}

.testimonal__card:hover {
transform: translateY(-10px);
background-color: #ffaba1;
}



/* Testimonial Title */
.testimonal__title {
font-family: var(--ff-philosopher);
font-size: 1.5rem;
color: hsl(203, 30%, 26%);
margin-top: 1rem;
}

/* Testimonial Description */
.testimonal__description {
font-family: var(--ff-poppins);
font-size: 1rem;
color: hsl(208, 7%, 46%);
padding: 0.75rem 1rem;
}

/* Testimonial Stars */
.testimonal__stars {
margin-top: 0.5rem;
color: #ffcc00;
font-size: 1.4rem;
}

.testimonal__stars i {
margin-right: 0.15rem;
}

.testimonal__swiper {
display: flex;
justify-content: center;
}

/* Cards Wrapper */
.cards {
flex: 1;
display: flex;
justify-content: center;
padding: 1rem;
}

</style>

</head>
Expand Down Expand Up @@ -224,7 +318,7 @@
<div id="loader"></div>
</div>

<div class="head_container_service" style="color: black; font-family: var(--ff-philosopher);">

<header>
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
Expand Down Expand Up @@ -262,15 +356,15 @@
</div>
</nav>
</header>
</div>



<div class="mainhead">
<h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R V I C E S</h1>
<h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%); margin-top: 10vh;">S E R V I C E S</h1>

</div>
<div class="first_cont">
<div class="items" style="align-content: center;">
<div class="first_cont" style="gap:3rem">
<div class="items" style="align-content: center; background-color: #fae2cf ;">
<h3
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Vintage
Vibe!</h3>
Expand All @@ -280,7 +374,7 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R
style="text-decoration: none;">Take
Experience</a></button>
</div>
<div class="items" style="align-content: center;">
<div class="items" style="align-content: center; background-color: #fae2cf">
<h3
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Services
for Events</h3>
Expand All @@ -290,7 +384,7 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R
style="text-decoration: none;">Book Now</a></button>
</div>
<div class="items"
style="align-items: center;align-content: center;">
style="align-items: center;align-content: center; background-color: #fae2cf ">
<h3
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Retro
Delivery Subscription</h3>
Expand All @@ -306,10 +400,9 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R

<section class="service_container">

<section class="testimonalsection" id="testimonal">
<h2 class=section__title
style="font-family: var(--ff-philosopher);color: hsl(357, 82%,35%);">Customer
Opinion</h2>

<h2 class=section__title
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%); margin-top: 10vh;">CUSTOMER OPINIONS</h2>
<!-- <div class="main-cards"> -->
<div class="testimonal__container">
<div class="testimonal__swiper">
Expand Down Expand Up @@ -373,8 +466,7 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R
<article class="testimonal__card">
<img
src="https://blogs.kcl.ac.uk/editlab/files/2017/04/Elena-2-Cropped-200x2801.jpg"
alt
class="testimonal__image">
alt class="testimonal__image">
<h2 class="testimonal__title"
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Angel
Dravid</h2>
Expand Down Expand Up @@ -423,7 +515,6 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R
</div>
</div>

</section>
<div class="second_cont" style="font-family: Garamond;">
<div class="deals">
<i class="fa-solid fa-gift"></i>
Expand Down Expand Up @@ -539,17 +630,11 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">S E R
style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
Us</h4>

<div class="social-icons">
<div class="social-icons">
<a class="fa-brands fa-facebook"
href="https://facebook.com" target="_blank"></a>
<a class="fa-brands fa-instagram"
href="https://instagram.com"
target="_blank"></a>
<a class="fa-brands fa-x-twitter"
href="https://twitter.com" target="_blank"></a>
<a class="fa-brands fa-facebook" href="https://facebook.com" style="color: hsl(203, 30%, 26%);"></a>
<a class="fa-brands fa-instagram" href="https://instagram.com" style="color: hsl(203, 30%, 26%);"></a>
<a class="fa-brands fa-x-twitter" href="https://twitter.com" style="color: hsl(203, 30%, 26%);"></a>
</div>
</div>
<p
style="margin-bottom:0;font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Stay
connected with us on social media for the latest
Expand Down

0 comments on commit b6155f6

Please sign in to comment.