Skip to content

Commit

Permalink
Merge pull request #527 from Saurabhchaudhary9799/footer-ui-improvemnet
Browse files Browse the repository at this point in the history 
fix footer ui improvemnt
  • Loading branch information
@ANSHIKA-26
ANSHIKA-26 authored Oct 7, 2024
2 parents 39ca502 + 9f15746 commit 36ae3f9
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 31 deletions.
118 changes: 87 additions & 31 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,61 @@
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="Scroll_and_progressbar.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
@media (max-width: 1200px) {
.footer-container {
padding: 20px;
}
.col-3-main {
flex-direction: row;
flex-wrap: wrap;
}
.col-3 {
width: 33.33%;
}
}

@media (max-width: 992px) {
.col-3 {
width: 50%; /* Stack 2 columns side by side on medium screens */
}
}

@media (max-width: 768px) {
.col-3 {
width: 100%; /* Stack all columns vertically on small screens */
margin-bottom: 20px;
}

.feature-post div {
flex-direction: column;
}

.tags {
text-align: center;
}
}

@media (max-width: 576px) {
.feature-post div {
align-items: center;
}

.tags.social {
justify-content: center;
}

.wordwise-footer-content {
text-align: center;
}
}

/* Optional: You can also set max-width for images */
img.object-fit {
max-width: 100%; /* Makes images responsive */
height: auto;
}
</style>

</head>
<body>
Expand Down Expand Up @@ -669,24 +724,24 @@ <h2>Subscribe to Our Newsletter</h2>
<div class="row mb-3 col-3-main">
<div class="col-3">
<div id = "about-us">
<h2 class="footer-title secondary-title">About Us</h2>
<h2 class="footer-title secondary-title" >About Us</h2>

<div class="secondary-title text-secondary">
<p class="mt-2 ">
<div class="secondary-title text-secondary " >
<p class="mt-2 text-lg" style="text-align: left;" >
We are a close-knit team of passionate storytellers dedicated to sharing captivating content with the world.
</p>

<address>
<address class="mt-2">
<i class="fas fa-map-marker-alt text-primary"></i>
5 South Main Street Los Angeles, ZZ-9611 USA
</address>

<div class="phone">
<div class="phone mt-2">
<i class="fas fa-mobile text-primary"></i>
125-896-485
</div>

<div class="email">
<div class="email mt-2">
<a href="mailto: [email protected]" style="color: 3B3B58;"><i class="fas fa-envelope text-primary"></i>
<span>[email protected]</span>
</a>
Expand All @@ -704,32 +759,33 @@ <h2 class="footer-title secondary-title">Feature Post</h2>

<div class="feature-post">
<div class="flex-item">
<article class="article">
<div class="d-flex ">
<a class="d-flex" href="#">
<img src="./assets/img9.jpg" class="object-fit" alt="">
<div class="px-1" style="width: 300px;">
<a href="#" class="text-title display-2 text-dark">
<article class="article">
<div class="d-flex" style="align-items: flex-start; ">
<a class="d-flex" href="#">
<img src="./assets/img9.jpg" class="object-fit" alt="">
<div class="px-1" style="width: 300px; ">
<a href="#" class="text-title display-2 text-dark">
Embrace the beauty of nature through our enchanting blog, where we celebrate the wonders of the natural world
</a>
<p class="secondary-title text-secondary display-3" style="margin-top:3px;">
<span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
</p>
</div>
</a>
</div>
</article>
</a>
<p class="secondary-title text-secondary " style="margin-top:3px;margin-left:0px; text-align: left; ">
<span><i class="far fa-clock text-primary"></i> Wed 02, 2022 </span>
</p>
</div>
</a>
</div>
</article>

</div>
<div class="flex-item">
<article class="article">
<div class="d-flex">
<div class="d-flex" style="align-items: flex-start; ">
<a class="d-flex" href="#">
<img src="./assets/img1.jpg" class="object-fit" alt="">
<div class="px-1" style="width: 300px;">
<a href="#" class="text-title display-2 text-dark">
Embark on unforgettable journeys through our travel blog, where wanderlust meets inspiration
</a>
<p class="secondary-title text-secondary display-3" style="margin-top:3px;">
<p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
<span><i class="far fa-clock text-primary"></i> Wed 05, 2020 </span>
</p>
</div>
Expand All @@ -739,14 +795,14 @@ <h2 class="footer-title secondary-title">Feature Post</h2>
</div>
<div class="flex-item">
<article class="article">
<div class="d-flex">
<a class="d-flex" href="#">
<div class="d-flex" style="align-items: flex-start; ">
<a class="d-flex " href="#" >
<img src="./assets/img2.jpg" class="object-fit" alt="">
<div class="px-1" style="width: 300px;">
<a href="#" class="text-title display-2 text-dark">
Gaming Adventures Unleashed
</a>
<p class="secondary-title text-secondary display-3" style="margin-top:3px;">
<p class="secondary-title text-secondary display-3" style="margin-top:3px;margin-left:0px; text-align: left;">
<span><i class="far fa-clock text-primary"></i> Wed 02, 2021 </span>
</p>
</div>
Expand All @@ -761,15 +817,15 @@ <h2 class="footer-title secondary-title">Popular Tags</h2>

<div class="tags">
<div class="d-flex-gap flex-wrap">
<a href="#" class="nav-link btn bg-light">Travel</a>
<a href="#" class="nav-link btn bg-light">Food</a>
<a href="#" class="nav-link btn bg-light">Lifestyle</a>
<a href="#" class="nav-link btn bg-light">Techonogy</a>
<a href="#" class="nav-link btn bg-light">Fashion</a>
<a href="#" class="nav-link btn bg-light " style="font-weight: 400;">Travel</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Food</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Lifestyle</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Techonogy</a>
<a href="#" class="nav-link btn bg-light" style="font-weight: 400;">Fashion</a>
</div>
</div>

<h2 class="footer-title secondary-title mt-2">Connect with us</h2>
<h2 class="footer-title secondary-title mt-5">Connect with us</h2>

<div class="tags social" id="contact">
<div class="d-flex-gap flex-wrap">
Expand Down
7 changes: 7 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1410,6 +1410,13 @@ a {
text-align: center;
}

.nav-link:hover{
/* Change background color on hover */
color: #f8b5b5;
scale: 1.1; /* Change text color on hover */
/* Optional: Change border color on hover */
transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
}
.search-box {
border-right: none;
}
Expand Down

0 comments on commit 36ae3f9

Please sign in to comment.