pista

Kirti-salunkhe · Mar 6, 2022 · e67db02 · e67db02
1 parent aea9302
commit e67db02
Show file tree

Hide file tree

Showing 10 changed files with 261 additions and 0 deletions.
diff --git a/bg.png b/bg.png
diff --git a/img1.png b/img1.png
diff --git a/img2.png b/img2.png
diff --git a/img3.png b/img3.png
diff --git a/img4.png b/img4.png
diff --git a/img5.png b/img5.png
diff --git a/img6.png b/img6.png
diff --git a/index.html b/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" 
+integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
+ <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+ <div class="container">
+ <div class="wave">
+ <img src="bg.png" alt="">
+ </div>
+
+ <nav>
+ <ul>
+ <li><a href="#">Home</a></li>
+ <li><a href="#">Products</a></li>
+ <li><a href="#">Service</a></li>
+ <li><a href="#">Types</a></li>
+ <li><a href="#">FAQ</a></li>
+ </ul>
+ <img src="logo.png" alt="">
+ </nav>
+
+ <div class="main-content">
+
+ <div class="image-pista">
+ <div class="swiper mySwiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide"><img src="img1.png" alt=""></div>
+ <div class="swiper-slide"><img src="img2.png" alt=""></div>
+ <div class="swiper-slide"><img src="img3.png" alt=""></div> 
+ </div> 
+ </div>
+ </div>
+ <div class="main-text">
+ <h1>The Pistachios</h1>
+ <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.adipisicing elit.</p>
+ <button>Know More</button>
+ </div>
+ </div>
+
+ <div class="right">
+ <div class="box">
+ <div class="image">
+ <img src="img4.png" alt="">
+ </div>
+ <div class="inner-box">
+ <h3>100% Organic</h3>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </div>
+ </div>
+ <div class="box">
+ <div class="image">
+ <img src="img5.png" alt="">
+ </div>
+ <div class="inner-box">
+ <h3>Not Expensive</h3>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </div>
+ </div>
+ <div class="box">
+ <div class="image">
+ <img src="img6.png" alt="">
+ </div>
+ <div class="inner-box">
+ <h3>Super Healthy</h3>
+ <p>Lorem ipsum dolor sit amet.</p>
+ </div>
+ </div>
+ </div>
+
+ <div class="social-links">
+ <i class="fab fa-instagram"></i>
+ <i class="fab fa-facebook-f"></i>
+ <i class="fab fa-twitter"></i>
+ <i class="far fa-envelope"></i>
+ </div>
+ </div>
+ <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
+ <!-- Initialize Swiper -->
+ <script>
+ var swiper = new Swiper(".mySwiper", {
+ slidesPerView: 1,
+ spaceBetween: 30,
+ loop: true,
+ });
+ </script>
+</body>
+
+</html>
diff --git a/logo.png b/logo.png
diff --git a/style.css b/style.css
@@ -0,0 +1,163 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
+
+* {
+ padding: 0%;
+ margin: 0;
+ font-family: 'Montserrat', sans-serif;
+}
+
+.container {
+ height: 100vh;
+ width: 100%;
+ background: linear-gradient(to right, #93C572 70%, #C8EBB1 30%);
+ position: relative;
+ overflow: hidden;
+}
+.wave {
+ position: absolute;
+ top: 0;
+ right: 30%;
+}
+nav {
+ width: 90%;
+ margin: auto;
+ padding-top: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+nav ul {
+ display: flex;
+ list-style-type: none; 
+}
+nav ul li{
+ margin:0 5px;
+}
+nav ul a{
+ text-decoration: none;
+ padding: 0.3rem 1.3rem;
+ font-size: 17px;
+ font-weight: bold;
+ color: #494234;
+ position: relative;
+ z-index: 1;
+}
+nav ul a::after{
+ content: "";
+ width: 0%;
+ height: 100%;
+ position: absolute;
+ top:0;
+ left:0px;
+ border-radius: 20px;
+ background-color: #C8EBB1;
+ z-index: -1;
+ transition: 0.5s;
+}
+nav ul a:hover:after{
+ width: 100%;
+}
+.main-content {
+ width: 60%;
+ padding-top: 100px;
+ margin-left: 3rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+}
+.image-pista ,.main-text{
+ flex-basis: 50%;
+}
+.image-pista img{
+ width: 100%;
+}
+.main-content h1 {
+ font-size: 60px;
+ letter-spacing: 1px;
+ color: #494234;
+}
+.main-content p{
+ margin-top: 10px;
+ font-size: 15px;
+ letter-spacing: 1px;
+}
+.main-content button{
+ margin-top: 2.5rem;
+ outline: none;
+ border: none;
+ font-size: 18px;
+ padding: 0.5rem 2.5rem 0.5rem 1rem;
+ border-radius: 0 50% 50% 0;
+ background-color: #494234;
+ color: white;
+ cursor: pointer;
+}
+.swiper{
+ width: 20rem;
+}
+.swiper-slide{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.right{
+ position: absolute;
+ right: 8%;
+ bottom: 20%;
+}
+.box{
+ display: flex;
+ align-items: center;
+}
+.right .box .image img{
+ width: 70%;
+}
+.image{
+ margin-top: 2rem;
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ box-shadow: -5px 5px 17px rgba(0,0,0,0.3);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: 0.5s;
+}
+.image:hover{
+ background-color: rgba(73,66,52,0.7);
+}
+.box .inner-box{
+ margin: 1.5rem 0 0 1rem;
+}
+.box .inner-box p{
+ font-size: 14px;
+ font-weight: 500;
+}
+.social-links{
+ position: absolute;
+ right: 5%;
+ bottom: 5%;
+}
+.social-links::before{
+ content: "";
+ width: 80%;
+ height: 3px;
+ position: absolute;
+ top:42%;
+ left: -150px;
+ background-color: #494234;
+}
+.social-links i{
+ margin-left: 10px;
+ width: 35px;
+ height: 35px;
+ border-radius: 50%;
+ background-color: #93C572;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ transition: 0.5s;
+}
+.social-links i:hover{
+ transform: translateY(-5px);
+}