Skip to content

Commit

Permalink
✅ adding newsletter & footer v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@ShaifArfan
ShaifArfan committed Jul 26, 2021
1 parent 6e84495 commit ffff219
Show file tree
Hide file tree
Showing 3 changed files with 261 additions and 0 deletions.
56 changes: 56 additions & 0 deletions components.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* Global Button Styles */
.btn {
color: var(--green-1);
font-family: Poppins;
Expand All @@ -16,3 +17,58 @@
font-size: 2rem;
}
}
/* End Global Button Styles */


/* Footer Styles */
footer{
background: var(--lightGreen-1);
padding-top: 5rem;
padding-bottom: 2rem;
}
.footer__wrapper{
display: flex;
flex-direction: column;
gap: 3rem;
}
.footer__logo{
width: 150px;
margin-bottom: 2rem;
}
.footer__desc{
font-size: 1.4rem;
color: var(--black-2);
margin-bottom: 2rem;
}
.footer__socials__title{
font-size: 1.8rem;
color: var(--black-1);
margin-bottom: 1rem;
}
.footer__socials li{
display: inline-block;
margin-right: .5rem;
}
.footer__socials a{
padding: .5rem .8rem;
background-color: var(--white-1);
border: 1px solid var(--green-2);
border-radius: 8px;
}
.footer__socials svg{
width: 20px;
color: var(--black-2);
}
.footer__text__title{
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--black-1);
font-weight: 600;
}
.footer__text a{
font-size: 1.4rem;
margin-bottom: .5rem;
color: var(--black-2);
font-family: Poppins;
}
/* End Footer Styles */
83 changes: 83 additions & 0 deletions home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -678,3 +678,86 @@
}
}
/* End Testimonial Section */

/* Newsletter Section */
.newsletter__wrapper{
display: flex;
flex-direction: column;
background-color: var(--green-2);
padding: 1.5rem;
border-radius: 8px;
gap: 2rem;
}
.newsletter__title{
font-size: 1.8rem;
color: var(--black-1);
font-weight: 600;
margin-bottom: 1.3rem;
}
.newsletter__text{
font-size: 1.4rem;
color: var(--black-2);
font-weight: 500;
}
.newsletter__form form{
position: relative;
width: 100%;
border-radius: 8px;
overflow: hidden;
}
.newsletter__form label{
width: 100%;
}
.newsletter__form input{
width: 100%;
font-size: 1.4rem;
padding: 1.5rem 1rem;
border: none;
}
.newsletter__form input::placeholder{
color: rgb(168, 166, 166);
}
.newsletter__form button[type=submit]{
background-color: var(--green-1);
color: var(--white-1);
border: none;
font-size: 1.4rem;
padding: 0 2rem;
height: 100%;
/* width: 100%; */
position: absolute;
right: 0;
top: 0;
}
@media only screen and (min-width: 768px){
.newsletter__wrapper{
flex-direction: row;
padding: 5rem;
align-items: center;
}
.newsletter__info,
.newsletter__form{
flex: 1;
}
.newsletter__title{
font-size: 3.6rem;
margin-bottom: 2rem;
}
.newsletter__text{
font-size: 1.8rem;
max-width: 400px;
}
.newsletter__form{
max-width: 450px;
border-radius: 12px;
}
.newsletter__form input{
font-size: 1.8rem;
padding: 2rem;
}
.newsletter__form button[type=submit]{
font-size: 1.8rem;
padding: 0 3rem;
}
}
/* End Newsletter Section */
122 changes: 122 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,6 +395,128 @@ <h3 class="testimonial__item__name">Sayed Ahmed</h3>
</div>
</section>
<!-- End Testimonial Section -->
<!-- Newsletter Section -->
<section id="newsletter">
<div class="container">
<div class="newsletter__wrapper">
<div class="newsletter__info">
<h3 class="newsletter__title">Join Newsletter</h3>
<p class="newsletter__text">
Get notified with the latest news and recent offers from the “Shaif’s Cuisine”
</p>
</div>
<div class="newsletter__form">
<form action="">
<label for="email">
<input type="email" placeholder="Your Email Address">
</label>
<button type="submit">Join</button>
</form>
</div>
</div>
</div>
</section>
<!-- End Newsletter Section -->

<!-- Footer -->
<footer>
<div class="container">
<div class="footer__wrapper">
<div class="col-1">
<div class="footer__logo">
<img src="./images/logo.svg" alt="shaif's cuisine">
</div>
<p class="footer__desc">
Fresh and delicious traditional Bangladeshi food to delight the whole family.
</p>
<div class="footer__socials">
<h4 class="footer__socials__title">Follow us</h4>
<ol class="footer__socials__list">
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-facebook">
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
</svg>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-instagram">
<rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
</svg>
</a>
</li>
<li>
<a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-twitter">
<path
d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />
</svg>
</a>
</li>
</ol>
</div>
</div>
<div class="footer__col2">
<h3 class="footer__text__title">
Links
</h3>
<ol class="footer__text">
<li>
<a href="Menu">Menu</a>
</li>
<li>
<a href="Menu">Book Table</a>
</li>
<li>
<a href="Menu">About Us</a>
</li>
</ol>
</div>
<div class="footer__col2">
<h3 class="footer__text__title">
Links
</h3>
<ol class="footer__text">
<li>
<a href="Menu">Menu</a>
</li>
<li>
<a href="Menu">Book Table</a>
</li>
<li>
<a href="Menu">About Us</a>
</li>
</ol>
</div>
<div class="footer__col2">
<h3 class="footer__text__title">
Links
</h3>
<ol class="footer__text">
<li>
<a href="Menu">Menu</a>
</li>
<li>
<a href="Menu">Book Table</a>
</li>
<li>
<a href="Menu">About Us</a>
</li>
</ol>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
</body>

</html>

0 comments on commit ffff219

Please sign in to comment.