Skip to content

Commit

Permalink
Website reviewed and finalilzed
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rahad-Ullah
Rahad-Ullah committed Jul 11, 2023
1 parent badafb6 commit 55c8e23
Show file tree
Hide file tree
Showing 2 changed files with 152 additions and 21 deletions.
83 changes: 68 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,17 @@
<header>
<!-- Navigation Bar -->
<nav class="navbar">
<div class="navbar-logo">
<img src="asset/logo.png" alt="">
<h1>Flower Shop</h1>
</div>
<div class="navbar-logo">
<img src="asset/logo.png" alt="">
<h1>Flower Shop</h1>
</div>
<div class="navbar-menu">
<ul>
<li class="nav-item"><a href="#">Home</a></li>
<li class="nav-item"><a href="#">Products</a></li>
<li class="nav-item"><a href="#">Offers</a></li>
<li class="nav-item"><a href="#">Contact</a></li>
<li class="nav-lastitem"><a href="#">Login</a></li>
<li class="nav-item"><a href="#">Big Sale</a></li>
<li class="nav-lastitem"><a href="#"><i class="fa-solid fa-bag-shopping fa-fade"></i> Cart</a></li>
</ul>
</div>
</nav>
Expand All @@ -31,7 +31,7 @@ <h1>Flower Shop</h1>
<div class="banner-content">
<h1 class="banner-title">Let's make <br> beautiful flowers a <br> part of your life.</h1>
<p class="banner-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
<button class="btn btn-banner">Shop Now</button>
<button class="btn"><i class="fa-solid fa-cart-shopping fa-bounce"></i> Shop Now</button>
</div>
<div class="banner-img">
<img src="asset/pngwing 10.png" alt="cover-img">
Expand All @@ -41,7 +41,7 @@ <h1 class="banner-title">Let's make <br> beautiful flowers a <br> part of your l
</header>
<main>
<!-- Feature Section -->
<div class="feature-section margin">
<section class="feature-section margin">
<h2 class="section-title">Our Featured Flowers</h2>
<p class="section-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="feature-content">
Expand All @@ -64,8 +64,10 @@ <h3 class="feature-title">Pink Flower Tree</h3>
<h3 class="feature-title">Pink Flower Tree</h3>
</div>
</div>
</div>
<div class="service-section margin">
</section>

<!-- Service Section -->
<section class="service-section margin">
<div class="service-box">
<img src="asset/Group 57.png" alt="service">
<h4 class="service-title">Same Day Delivery. Click & Collect.</h4>
Expand All @@ -78,19 +80,23 @@ <h4 class="service-title">Fresh Flowers. Local Growers.</h4>
<img src="asset/Group 59.png" alt="service">
<h4 class="service-title">24/7 Free Support.</h4>
</div>
</div>
</section>

<!-- Offer Section -->
<section class="offer-section">
<div class="offer-container">
<div class="offer-content">
<h2 class="offer-title section-title">Hot Deal ! Sale Up To 25% <span class="primary">Off</span></h2>
<p class="offer-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<button class="btn offer-btn">Sign Up</button>
<button class="btn offer-btn"><i class="fa-solid fa-right-to-bracket fa-beat"></i> Sign Up</button>
</div>
<div class="offer-image">
<img src="asset/pngwing 8.png" alt="offer">
</div>
</div>
</section>

<!-- Instagram Section -->
<section class="instagram-section margin">
<h2 class="section-title">Instagram</h2>
<p class="section-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
Expand All @@ -109,19 +115,66 @@ <h2 class="section-title">Instagram</h2>
</div>
</div>
</section>

<!-- Newsletter Section -->
<section class="newsletter margin">
<h2 class="section-title">Get The Latest Deals</h2>
<p class="section-description">$30 coupon for first shopping</p>
<div class="submit-form">
<input type="email" name="" id="" placeholder="Enter your email here....">
<button type="submit" class="btn">Submit</button>
<button type="submit" class="btn"><i class="fa-regular fa-paper-plane fa-beat"></i> Submit</button>
</div>
</section>
</main>

<!-- Footer Section -->
<footer>
<h2 class="section-title footer-title"><span class="primary">Flower</span>Shop</h2>
<p class="section-description footer-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="footer-container">
<div class="footer-box box-1">
<div class="footer-logo">
<img src="asset/logo.png" alt="">
<h2 class="footer-title"><span class="primary">Flower</span>Shop</h2>
</div>
<p class="footer-description">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
<div class="social-link">
<i class="fa-brands fa-facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-instagram"></i>
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<div class="footer-box">
<h3>Useful Links</h3>
<ul>
<li><a href="#">Popular Products</a></li>
<li><a href="#">Big Sale</a></li>
<li><a href="#">News and Article</a></li>
<li><a href="#">Legal Notice</a></li>
</ul>
</div>
<div class="footer-box">
<h3>Supports</h3>
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
<div class="footer-box">
<h3>Contact Information</h3>
<ul>
<li>Feel free to contact & reach us !!</li>
<li><i class="fa-solid fa-location-dot"></i> 3557 Derek Drive, Orlando, Florida</li>
<li><i class="fa-solid fa-phone"></i> +1(456)657-887</li>
<li><a href="#"><i class="fa-solid fa-envelope"></i> [email protected]</a></li>
</ul>
</div>
</div>
<small class="copyright">@2020-2023, FlowerShop.com | All rights reserved. </small>
</footer>

<!-- Font-awesome Kit -->
<script src="https://kit.fontawesome.com/9c87656713.js" crossorigin="anonymous"></script>
</body>
</html>
90 changes: 84 additions & 6 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ a {
}

.btn {
padding: 12px 25px;
padding: 12px 20px;
background-color: #E55473;
color: white;
border: none;
Expand All @@ -52,6 +52,12 @@ a {
.btn:hover {
background-color: #de214a;
}
i{
margin-right: 5px;
}
.btn i{
margin-right: 8px;
}

.margin {
width: 80%;
Expand Down Expand Up @@ -84,6 +90,8 @@ a {
.navbar-logo {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}

.navbar-logo img {
Expand All @@ -106,6 +114,8 @@ a {
color: #272727;
padding: 10px 20px;
text-decoration: none;
font-weight: 400;
font-size: 18px;
}

.navbar a:hover {
Expand All @@ -118,11 +128,15 @@ a {
border-radius: 7px;
background-color: #e5547305;
padding: 10px 25px;
font-weight: 700;
}

.nav-lastitem a:hover {
background-color: #e5547324;
}
.nav-lastitem a i{
margin-right: 5px;
}



Expand Down Expand Up @@ -298,7 +312,7 @@ a {
}

.gallery-item img {
width: 250px;
width: 100%;
}


Expand Down Expand Up @@ -327,25 +341,89 @@ a {
font-size: 16px;
font-weight: 400;
}
.submit-form input:focus-visible{
outline: 2px solid #E55473;
}



/* Footer section */
footer{
background-color: #111010;
padding: 120px 0;
padding-top: 100px;
color: white;
}
footer a, h3{
color: white;
}
.footer-container{
display: flex;
align-items: flex-start;
justify-content: space-evenly;
gap: 24px;
width: 70%;
margin: 0 auto;
}
.footer-box{
width: 25%;
}
.box-1{
width: 38%;
margin-right: 15px;
}
.footer-logo{
display: flex;
justify-content: start;
align-items: center;
margin: 15px 0;
}
.footer-logo img{
width: 35px;
margin-right: 10px;
}
.social-link{
display: flex;
align-items: center;
}
.social-link i{
margin-right: 15px;
font-size: 18px;
cursor: pointer;
}
.social-link i:hover{
color: #E55473;
}
.footer-box h3{
font-size: 18px;
margin: 20px 0;
}
.footer-box ul{
list-style: none;
}
.footer-box ul li, a, p{
font-size: 16px;
margin: 5px 0;
}
.footer-box ul li a:hover{
text-decoration: underline;
color: #E55473;
}
.footer-title{
color: white;
font-size: 30px;
}
.footer-description{
color: white;
}

.copyright{
display: flex;
justify-content: center;
display: block;
width: 70%;
margin: 0 auto;
margin-top: 50px;
text-align: center;
color: #ffffff66;
font-size: 18px;
font-size: 16px;
padding: 20px 0;
border-top: 1px solid #ddd;
}

0 comments on commit 55c8e23

Please sign in to comment.