Skip to content

Commit

Permalink
Add line on hover at footer (#519)
Browse files Browse the repository at this point in the history 
<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
Issue NO #507 
<!--Please include a brief description of the changes-->
Successfully addded the ine on hover, which will enhance the user
interaction with website.





## Screenshots / videos (if applicable)

<h3>Before</h3>


https://github.com/user-attachments/assets/171581ea-f8d1-421a-b570-128cf68cbed6


<h2>After:</h2>



https://github.com/user-attachments/assets/4304d56d-4f10-4711-890b-7f545ece82ce




## 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.-->
  • Loading branch information
@Anjaliavv51
Anjaliavv51 authored Oct 15, 2024
2 parents 00543ea + 2d13717 commit e5eedc8
Show file tree
Hide file tree
Showing 8 changed files with 357 additions and 112 deletions.
2 changes: 1 addition & 1 deletion Css-files/content.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -391,7 +391,7 @@ div.deals:hover{
/* footer */
.foot-panel2{
background-color: transparent;
color:white;
/* color:white; */
display: flex;
justify-content: space-evenly;
}
Expand Down
35 changes: 35 additions & 0 deletions Html-files/Electronic.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -526,6 +526,41 @@
.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%;
}
</style>
<title>Retro</title>
</head>
Expand Down
134 changes: 86 additions & 48 deletions Html-files/cart.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,39 +255,77 @@
border: 3px solid whitesmoke;
}

.social-icons a {
font-size: 1.2rem;
padding: 8px;
margin: 15px;
text-decoration: none;
color: brown !important;
}
.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;
}
@media (max-width: 768px) {
.foot-panel2{
display: flex;
flex-direction: column;

}
}

.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: brown;
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%;
}

.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;
}
@media (max-width: 768px) {
.foot-panel2{
display: flex;
flex-direction: column;

}
}

</style>
</head>
Expand Down Expand Up @@ -412,36 +450,36 @@ <h1 style="color: black;font-family: var(--ff-philosopher);">C A R T</h1>
<div class="foot-panel2">
<ul class="footer-colums">
<p style="font-family: var(--ff-philosopher);">Our Pages</p>
<a href="../index.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">Home</a>
<a href="menu.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">About</a>
<a href="services.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">Services</a>
<a href="contact.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">Contact us</a>
<a href="cart.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">Cart</a>
<a href="contributor.html" style="text-decoration: none;color: black;font-family: var(--ff-poppins);">Contributor</a>
<a href="../index.html" style="font-family: var(--ff-poppins);">Home</a>
<a href="menu.html" style="font-family: var(--ff-poppins);">About</a>
<a href="services.html" style="font-family: var(--ff-poppins);">Services</a>
<a href="contact.html" style="font-family: var(--ff-poppins);">Contact us</a>
<a href="cart.html" style="font-family: var(--ff-poppins);">Cart</a>
<a href="contributor.html" style="font-family: var(--ff-poppins);">Contributor</a>
</ul>


<ul class="footer-colums">
<p style="font-family: var(--ff-philosopher);">Exclusive Offers</p>
<a style="color: black;font-family: var(--ff-poppins);">Retro Discounts</a>
<a style="color: black;font-family: var(--ff-poppins);">Limited-Time Promotions</a>
<a style="color: black;font-family: var(--ff-poppins);">Special Event Packages</a>
<a style="color: black;font-family: var(--ff-poppins);">Membership Benefits</a>
<a style="color: black;font-family: var(--ff-poppins);">Early Access to New Collections</a>
<a style="color: black;font-family: var(--ff-poppins);">VIP Retro Events</a>
<a style="color: black;font-family: var(--ff-poppins);">Personalized Culinary Experiences</a>
<a style="font-family: var(--ff-poppins);">Retro Discounts</a>
<a style="font-family: var(--ff-poppins);">Limited-Time Promotions</a>
<a style="font-family: var(--ff-poppins);">Special Event Packages</a>
<a style="font-family: var(--ff-poppins);">Membership Benefits</a>
<a style="font-family: var(--ff-poppins);">Early Access to New Collections</a>
<a style="font-family: var(--ff-poppins);">VIP Retro Events</a>
<a style="font-family: var(--ff-poppins);">Personalized Culinary Experiences</a>


</ul>


<ul class="footer-colums">
<p style="font-family: var(--ff-philosopher);">Payment Products</p>
<a style="color: black;font-family: var(--ff-poppins);">Secure Checkout</a>
<a style="color: black;font-family: var(--ff-poppins);">Credit/Debit Cards</a>
<a style="color: black;font-family: var(--ff-poppins);">Online Payment</a>
<a style="color: black;font-family: var(--ff-poppins);">Mobile Wallets</a>
<a style="color: black;font-family: var(--ff-poppins);">Contactless Payments</a>
<a style="font-family: var(--ff-poppins);">Secure Checkout</a>
<a style="font-family: var(--ff-poppins);">Credit/Debit Cards</a>
<a style="font-family: var(--ff-poppins);">Online Payment</a>
<a style="font-family: var(--ff-poppins);">Mobile Wallets</a>
<a style="font-family: var(--ff-poppins);">Contactless Payments</a>
</ul>


Expand Down
75 changes: 58 additions & 17 deletions Html-files/contact.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,47 @@
padding: 20px;
}
}

.foot-panel2 ul a {
padding: 0; /* Reset padding */
list-style: none; /* Remove default bullet points */
}

.foot-panel2 ul 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 ul a::after{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background-color: brown;
transition: width 0.3s ease;
width:0;

}

.foot-panel2 ul a:hover{
transform: scale(1.05);
}

.foot-panel2 ul a:hover::after{
width:100%;
}

</style>

<style>
Expand Down Expand Up @@ -769,30 +810,30 @@ <h1 style="color: hsl(357, 53%, 8%); font-family: Tahoma, sans-serif;">
<ul>
<p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align: left;">Our Pages</p>
<a href="#" style="color: black;">Home</a>
<a href="Html-files/menu.html" style="color: black;">About</a>
<a href="Html-files/services.html" style="color: black;">Services</a>
<a href="Html-files/contact.html" style="color: black;">Contact us</a>
<a href="Html-files/cart.html" style="color: black;">Cart</a>
<a href="contributor.html" style="color: black;">Contributors</a>
<a href="Html-files/menu.html" >About</a>
<a href="Html-files/services.html" >Services</a>
<a href="Html-files/contact.html" >Contact us</a>
<a href="Html-files/cart.html" >Cart</a>
<a href="contributor.html" ">Contributors</a>
</ul>
<ul>
<p style="color: rgb(162, 16, 23);font-family: var(--ff-philosopher); text-align:left"> Exclusive Offers</p>
<a href="#" style="color: black;">Retro Discounts</a>
<a href="#" style="color: black;">Limited-Time Promotions</a>
<a href="#" style="color: black;">Special Event Packages</a>
<a href="#" style="color: black;">Membership Benefits</a>
<a href="#" style="color: black;">Early Access to New Collections</a>
<a href="#" style="color: black;">VIP Retro Events</a>
<a href="#" style="color: black;">Personalized Culinary Experiences</a>
<a href="#" >Retro Discounts</a>
<a href="#" >Limited-Time Promotions</a>
<a href="#" >Special Event Packages</a>
<a href="#" >Membership Benefits</a>
<a href="#" >Early Access to New Collections</a>
<a href="#" >VIP Retro Events</a>
<a href="#" >Personalized Culinary Experiences</a>

</ul>
<ul>
<p style="color: hsl(357, 82%,35%);font-family: var(--ff-philosopher);text-align:left">Payment Products</p>
<a href="./Html-files/payment2.html" style="color: black;">Secure Checkout</a>
<a href="./Html-files/payment2.html" style="color: black;">Credit/Debit Cards</a>
<a href="./Html-files/payment2.html" style="color: black;">Online Payment</a>
<a href="./Html-files/payment2.html" style="color: black;">Mobile Wallets</a>
<a href="./Html-files/payment2.html" style="color: black;">Contactless Payments</a>
<a href="./Html-files/payment2.html" >Secure Checkout</a>
<a href="./Html-files/payment2.html" >Credit/Debit Cards</a>
<a href="./Html-files/payment2.html" >Online Payment</a>
<a href="./Html-files/payment2.html" >Mobile Wallets</a>
<a href="./Html-files/payment2.html" >Contactless Payments</a>
</ul>
</div>

Expand Down
Loading

0 comments on commit e5eedc8

Please sign in to comment.