Skip to content

Enhanced the footer UI #1395

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 12, 2024
Merged

Enhanced the footer UI #1395

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b1c4f00
UI enhnaced of footer section
Dec 9, 2024
71b1747
UI enhnaced of footer
Dec 9, 2024
a5ca552
Update style.css
biswajit-sarkar-007 Dec 10, 2024
5c79db3
Add changes
Rakesh9100 Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions assets/css_files/about.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,3 +226,4 @@ section {
border-radius: 0;
}
}

8 changes: 4 additions & 4 deletions assets/html_files/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,14 +131,14 @@ <h3 align="center" style="color: #ffecd1;">Thank You for Visiting Beautiify!</h3

<footer>
<div class="footer-container">
<div class="company-info">
<div class="company-info"> <div class="flex-item-left" style="height: 25px; width: 30px;"><img src="/assets/images/logo.png" width="80px" height="80px"></div>
<h1 class="company-name heading">Beautiify</h1>
<p>
Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
</p>
</div>
<div class="quick-links">
<h1 class="heading">Quick Links</h1>
<h1 class="heading company-name" style="margin-right: -105px;">Quick Links</h1>
<ul class="footer-ul">
<li><a href="../../index.html"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="#"><i class="fa-solid fa-circle-info"></i> About</a></li>
Expand All @@ -148,8 +148,8 @@ <h1 class="heading">Quick Links</h1>
<li><a href="./contact.html"><i class="fa-solid fa-phone"></i> Contact</a></li>
</ul>
</div>
<div class="send-message">
<h1 class="heading">Keep In Touch</h1>
<div class="send-message ">
<h1 class="heading company-name">Keep In Touch</h1>
<form action="#">
<div class="form-group group1">
<input type="text" id="name" name="name" placeholder="Enter your name">
Expand Down
7 changes: 4 additions & 3 deletions assets/html_files/contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,14 +153,15 @@ <h2 class="form-title">Send us a message :)</h2>

<footer>
<div class="footer-container">
<div class="company-info">
<div class="company-info">
<div class="flex-item-left" style="height: 25px; width: 30px;"><img src="/assets/images/logo.png" width="80px" height="80px"></div>
<h1 class="company-name heading">Beautiify</h1>
<p>
Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
</p>
</div>
<div class="quick-links">
<h1 class="heading">Quick Links</h1>
<h1 class="company-name heading" style="margin-right: -105px;">Quick Links</h1>
<ul class="footer-ul">
<li><a href="../../index.html"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="./about.html"><i class="fa-solid fa-circle-info"></i> About</a></li>
Expand All @@ -171,7 +172,7 @@ <h1 class="heading">Quick Links</h1>
</ul>
</div>
<div class="send-message">
<h1 class="heading">Keep In Touch</h1>
<h1 class="company-name heading">Keep In Touch</h1>
<form action="#">
<div class="form-group group1">
<input type="text" id="name" name="name" placeholder="Enter your name">
Expand Down
7 changes: 4 additions & 3 deletions assets/html_files/contributor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,14 +100,15 @@ <h1 class="heading">Our Valuable Contributors</h1>

<footer>
<div class="footer-container">
<div class="company-info">
<div class="company-info">
<div class="flex-item-left" style="height: 25px; width: 30px;"><img src="/assets/images/logo.png" width="80px" height="80px"></div>
<h1 class="company-name heading">Beautiify</h1>
<p>
Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
</p>
</div>
<div class="quick-links">
<h1 class="heading">Quick Links</h1>
<h1 class="company-name heading" style="margin-right: -105px;">Quick Links</h1>
<ul class="footer-ul">
<li><a href="../../index.html"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="./about.html"><i class="fa-solid fa-circle-info"></i> About</a></li>
Expand All @@ -118,7 +119,7 @@ <h1 class="heading">Quick Links</h1>
</ul>
</div>
<div class="send-message">
<h1 class="heading">Keep In Touch</h1>
<h1 class="company-name heading">Keep In Touch</h1>
<form action="#">
<div class="form-group group1">
<input type="text" id="name" name="name" placeholder="Enter your name">
Expand Down
6 changes: 3 additions & 3 deletions assets/html_files/faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,14 +101,14 @@

<footer>
<div class="footer-container">
<div class="company-info">
<div class="company-info"> <div class="flex-item-left" style="height: 25px; width: 30px;"><img src="/assets/images/logo.png" width="80px" height="80px"></div>
<h1 class="company-name heading">Beautiify</h1>
<p>
Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
</p>
</div>
<div class="quick-links">
<h1 class="heading">Quick Links</h1>
<h1 class="company-name heading" style="margin-right: -105px;">Quick Links</h1>
<ul class="footer-ul">
<li><a href="../../index.html#home"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="./about.html"><i class="fa-solid fa-circle-info"></i> About</a></li>
Expand All @@ -119,7 +119,7 @@ <h1 class="heading">Quick Links</h1>
</ul>
</div>
<div class="send-message">
<h1 class="heading">Keep In Touch</h1>
<h1 class="company-name heading">Keep In Touch</h1>
<form action="#">
<div class="form-group group1">
<input type="text" id="name" name="name" placeholder="Enter your name">
Expand Down
9 changes: 5 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,13 +336,14 @@ <h2>Transfer Lists</h2>
<footer>
<div class="footer-container">
<div class="company-info">
<h1 class="company-name heading">Beautiify</h1>
<div class="flex-item-left" style="height: 25px; width: 30px;"><img src="./assets/images/logo.png" width="80px" height="80px"></div>
<h1 class="company-name heading" style="margin-left: -115px;">Beautiify</h1>
<p>
Beautiify comprises a curated selection of beautifully designed components and animations that can be seamlessly incorporated into any website, elevating its overall UI experience. Discover elegant buttons, stylish sliders, and captivating animations to elevate your website.
</p>
</div>
<div class="quick-links">
<h1 class="heading">Quick Links</h1>
<h1 class="heading company-name" style="margin-right: -105px;">Quick Links</h1>
<ul class="footer-ul">
<li><a href="#home"><i class="fa-solid fa-house"></i> Home</a></li>
<li><a href="./assets/html_files/about.html"><i class="fa-solid fa-circle-info"></i> About</a></li>
Expand All @@ -352,8 +353,8 @@ <h1 class="heading">Quick Links</h1>
<li><a href="./assets/html_files/contact.html"><i class="fa-solid fa-phone"></i> Contact</a></li>
</ul>
</div>
<div class="send-message">
<h1 class="heading">Keep In Touch</h1>
<div class="send-message ">
<h1 class="heading company-name">Keep In Touch</h1>
<form action="#">
<div class="form-group group1">
<input type="text" id="name" name="name" placeholder="Enter your name">
Expand Down
91 changes: 91 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1186,3 +1186,94 @@ footer {
margin: 15px !important;
}
}


.footer-ul {
list-style: none;
padding: 0;
text-align: center;


}

.footer-ul li {
/* display: inline-block; */
margin: 7px 15px;
position: relative;

}

.footer-ul li a {
text-decoration: none;
font-size: 16px;
color: #d9e6e7;
padding: 5px 0;
transition: color 0.3s ease-in-out;
position: relative;

}

.footer-ul li a::after {
content: "";
display: block;
width: 0;
height: 3px;
background: #d31313; /* Color of the underline */
transition: width 0.3s ease-in-out;
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
}

.footer-ul li a:hover {
color: #ec685c; /* Color of the text on hover */
}

.footer-ul li a:hover::after {
width: 100%; /* Fully expand the underline */
}

.company-name {

font-weight: bold;
color: #49025f; /* Default color */
position: relative;

text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
animation: gradientColor 6s infinite alternate;
transition: all 0.4s ease-in-out;
margin-left: -115px; /* Inline style from the HTML */
perspective: 1000px; /* Adds depth for 3D effect */
}

.company-name:hover {
transform: rotateY(15deg) rotateX(5deg) scale(1.2);
text-shadow: 5px 5px 15px rgba(73, 2, 95, 0.8),
0 0 20px rgba(255, 99, 71, 0.6),
-5px -5px 15px rgba(0, 255, 255, 0.5);
}

/* Keyframe animation for a gradient color change */
@keyframes gradientColor {
0% {
color: #ff5733;
text-shadow: 0 0 5px rgba(255, 87, 51, 0.5);
}
25% {
color: #33ff57;
text-shadow: 0 0 10px rgba(51, 255, 87, 0.5);
}
50% {
color: #3357ff;
text-shadow: 0 0 15px rgba(51, 87, 255, 0.5);
}
75% {
color: #ff33a1;
text-shadow: 0 0 20px rgba(255, 51, 161, 0.5);
}
100% {
color: #ffde33;
text-shadow: 0 0 25px rgba(255, 222, 51, 0.5);
}
}
Loading