├── Img
    ├── middle1.webp
    ├── middle2.webp
    ├── middle3.webp
    ├── app store.webp
    ├── googleplay.webp
    ├── screenshot1.webp
    ├── screenshot2.webp
    ├── backgroundimg.webp
    ├── swiggy_logobody.png
    ├── swiggyfacebook.webp
    ├── swiggytwitter.webp
    ├── AppStorefootter.webp
    ├── GooglePlayfootter.webp
    ├── footterswiggylogo.webp
    ├── swiggyinstagram.webp
    ├── swiggypinterest.webp
    └── swiggy-1.svg
├── Css
    └── style.css
└── index.html


/Img/middle1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/middle1.webp


--------------------------------------------------------------------------------
/Img/middle2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/middle2.webp


--------------------------------------------------------------------------------
/Img/middle3.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/middle3.webp


--------------------------------------------------------------------------------
/Img/app store.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/app store.webp


--------------------------------------------------------------------------------
/Img/googleplay.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/googleplay.webp


--------------------------------------------------------------------------------
/Img/screenshot1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/screenshot1.webp


--------------------------------------------------------------------------------
/Img/screenshot2.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/screenshot2.webp


--------------------------------------------------------------------------------
/Img/backgroundimg.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/backgroundimg.webp


--------------------------------------------------------------------------------
/Img/swiggy_logobody.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/swiggy_logobody.png


--------------------------------------------------------------------------------
/Img/swiggyfacebook.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/swiggyfacebook.webp


--------------------------------------------------------------------------------
/Img/swiggytwitter.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/swiggytwitter.webp


--------------------------------------------------------------------------------
/Img/AppStorefootter.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/AppStorefootter.webp


--------------------------------------------------------------------------------
/Img/GooglePlayfootter.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/GooglePlayfootter.webp


--------------------------------------------------------------------------------
/Img/footterswiggylogo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/footterswiggylogo.webp


--------------------------------------------------------------------------------
/Img/swiggyinstagram.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/swiggyinstagram.webp


--------------------------------------------------------------------------------
/Img/swiggypinterest.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/JiyadAhammad/swiggydesign/HEAD/Img/swiggypinterest.webp


--------------------------------------------------------------------------------
/Img/swiggy-1.svg:
--------------------------------------------------------------------------------
1 | <svg height="2500" viewBox="-7.3 3.6 2520.1 3702.8" width="1708" xmlns="http://www.w3.org/2000/svg"><path d="m1255.2 3706.3c-2.4-1.7-5-4-7.8-6.3-44.6-55.3-320.5-400.9-601.6-844.2-84.4-141.2-139.1-251.4-128.5-279.9 27.5-74.1 517.6-114.7 668.5-47.5 45.9 20.4 44.7 47.3 44.7 63.1 0 67.8-3.3 249.8-3.3 249.8 0 37.6 30.5 68.1 68.2 68 37.7 0 68.1-30.7 68-68.4l-.7-453.3h-.1c0-39.4-43-49.2-51-50.8-78.8-.5-238.7-.9-410.5-.9-379 0-463.8 15.6-528-26.6-139.5-91.2-367.6-706-372.9-1052-7.5-488 281.5-910.5 688.7-1119.8 170-85.6 362-133.9 565-133.9 644.4 0 1175.2 486.4 1245.8 1112.3 0 .5 0 1.2.1 1.7 13 151.3-820.9 183.4-985.8 139.4-25.3-6.7-31.7-32.7-31.7-43.8-.1-115-.9-438.8-.9-438.8-.1-37.7-30.7-68.1-68.4-68.1-37.6 0-68.1 30.7-68.1 68.4l1.5 596.4c1.2 37.6 32.7 47.7 41.4 49.5 93.8 0 313.1-.1 517.4-.1 276.1 0 392.1 32 469.3 90.7 51.3 39.1 71.1 114 53.8 211.4-154.9 866-1135.9 1939.1-1172.8 1983.8z" fill="#fc8019"/></svg>


--------------------------------------------------------------------------------
/Css/style.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |     margin: 0px;
  3 |     padding: 0px;
  4 | }
  5 | .top_body{
  6 |     width: 100%;
  7 |     display: flex;
  8 |     height: 542px;
  9 | }
 10 | .top_left_body{
 11 |     width: 55%;
 12 |     background: #fff;
 13 |     
 14 | }
 15 | .top_left_body h1{
 16 |     margin-left: 165px;
 17 |     margin-top: 85px;
 18 | }
 19 | .top_left_body h2{
 20 |     margin-left: 165px;
 21 | 
 22 | }
 23 | .form_align{
 24 |     margin-left: 165px;
 25 | }
 26 | .form_align input{
 27 |     height: 60px;
 28 |     width: 482px;
 29 |     border-color: #fc8019;
 30 | }
 31 | .form_align button{
 32 |     height: 65px;
 33 |     width: 120px;
 34 |     color: #fff;
 35 |     background-color: #fc8019;
 36 |     border: 0px;
 37 |     font-weight: 600;
 38 |     cursor: pointer;
 39 | }
 40 | .pointer{
 41 |     cursor: pointer;
 42 | }
 43 | 
 44 | .top_left_body >div{
 45 |     display: flex;
 46 | }
 47 | .top_left_body img{
 48 |     width: 200px;
 49 |     margin-top: 60px;
 50 |     margin-left: 165px;
 51 | 
 52 | }
 53 | .login_button{
 54 |     margin-top: 80px;
 55 |     margin-left: 245px;
 56 |     color: black;
 57 |     background: #fff;
 58 |     border: 0px;
 59 |     font-weight: 600;
 60 |     font-size: 15px;
 61 |     cursor: pointer;
 62 | }
 63 | .signup_button{
 64 |     color: white;
 65 |     background: black;
 66 |     border: 0px;
 67 |     font-weight: bold;
 68 |     height: 40px;
 69 |     width: 100px;
 70 |     margin-left: 20px;
 71 |     font-size: 15px;
 72 |     cursor: pointer;
 73 | }
 74 | .top_right_body{
 75 |     width: 45%;
 76 |     overflow: hidden;
 77 | }
 78 | .top_right_body img{
 79 |     height: 542px;
 80 |     width: 100%;
 81 |     object-fit: cover;
 82 | }
 83 | .middle_body{
 84 |     background: #2b1e16;
 85 |     display: flex;
 86 |     justify-content: space-around;
 87 |     align-items: center;
 88 |     height: 420px;
 89 | }
 90 | .middle_body img{
 91 |     width: 120px;
 92 |     
 93 | }
 94 | .img_align{
 95 |     width: 20%;
 96 |     color: white;
 97 |     text-align: center;
 98 | }
 99 | .bottom_body{
100 |     width: 100%;
101 |     display: flex;
102 | }
103 | .bottom_left{
104 |     width: 50%;
105 |     background: #fff;
106 |     height: 500px;
107 | }
108 | 
109 | .bottom_left h1{
110 |     margin-left: 165px;
111 |     margin-top: 85px;
112 |     font-size: 40px;
113 |     font-weight: 600;
114 |     width: 300px;
115 |     line-height: 1;
116 |     letter-spacing: -.45px;
117 | }
118 | .bottom_left p{
119 |     
120 |     font-size: 20px;
121 |     width: 400px;
122 |     font-weight: 300;
123 |     padding-left: 165px;
124 |     padding-bottom: 60px;
125 |     color: #7e808c;
126 | }
127 | .install{
128 |     width: 150px;
129 |     height: 60px;
130 |     margin-left: 160px;
131 |     display: flex;
132 | }
133 | .install img{
134 |     width: 150px;
135 |     cursor: pointer;
136 |     margin-right: 20px;
137 | }
138 | .bottom_right{
139 |     width: 50%;
140 |     height: 500px;
141 | }
142 | .bottom_right img{
143 |     width: 350px;
144 |     height: 100%;
145 | }
146 | .footer{
147 |     background: black;
148 |     width: 100%;
149 | overflow: hidden;
150 | display: flex;
151 | color: #fff;
152 | }
153 | .left_footer{
154 |     width: 75%;
155 |     color: #fff;
156 |     display: flex;
157 |     justify-content: space-around;
158 |     margin-top: 80px;
159 | 
160 | }
161 | .right_footer{
162 |     width: 25%;
163 |     color: white;
164 |     margin-top: 80px;
165 | }
166 | .right_footer img{
167 |     margin-top: 20px;
168 |     cursor: pointer;
169 |     
170 | }
171 | .right_footer img:hover{
172 |     transform: scale(1.03);
173 | }
174 | .list{
175 |     list-style: none;
176 |     line-height: 2;
177 |     font-size: 18px;
178 |     cursor: pointer;
179 | }
180 | .list h4{
181 |     color: gray;
182 |     
183 | }
184 | .line{
185 |     border-top: 1px solid #fff;
186 |     display: flex;
187 |     width: 100%;
188 |     
189 | }
190 | .footer-end{
191 |     
192 |     background: #000;
193 |     padding: 0 132px;
194 |     display: flex;
195 | 
196 | }
197 | .text{
198 |     text-align: center;
199 |     width: 72%;
200 |     margin: auto;
201 | }
202 | 
203 | .footer-end h3{
204 |     color: #fff;
205 | }
206 | .footer-end img{
207 |     width: 162px;
208 |     margin-top: 23px;
209 |     
210 | }
211 | .social-media{
212 |     margin-left: auto;
213 |     margin-right: 10px;
214 | }
215 | 
216 | .social-media img{
217 |     width: 30px;
218 |     margin-top: 23px;
219 |     margin-right: 10px;
220 |     cursor: pointer;
221 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |     <meta charset="UTF-8">
  6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8 |     <link rel="icon" href="Img/swiggy-1.svg">
  9 |     <title>Order food online from India's best food delivery service. Order from restaurants near you</title>
 10 |     <link rel="stylesheet" href="Css/style.css">
 11 | </head>
 12 | 
 13 | <body>
 14 |     <div class="top_body">
 15 | 
 16 |         <div class="top_left_body">
 17 |             <div>
 18 |                 <div>
 19 |                     <img src="Img/swiggy_logobody.png" alt="swiggy_logo">
 20 |                 </div>
 21 |                 <div>
 22 |                     <button class="login_button">Login</button>
 23 |                     <button class="signup_button">Sign up</button>
 24 |                 </div>
 25 |             </div>
 26 |             <div>
 27 |                 <h1>Hungry?</h1>
 28 |             </div>
 29 |             <div>
 30 |                 <h2>Order food from favourite restaurants near you.</h2>
 31 |             </div>
 32 |             <div>
 33 |                 <form class="form_align">
 34 |                     <input type="text" placeholder="Enter your delivery location">
 35 |                     <button>FIND FOOD</button>
 36 |                 </form>
 37 |             </div>
 38 |             <h4 class="form_align">POPOULAR CITES IN INDIA</h4>
 39 |             <div class="form_align ">
 40 | 
 41 |                 <span class="pointer">Ahmedabad Bangalore Chennai Delhi Gurgaon Hyderabad Kolkata Mumbai Pune &
 42 |                     more.</span>
 43 |             </div>
 44 | 
 45 |         </div>
 46 | 
 47 |         <div class="top_right_body">
 48 | 
 49 |             <img src="Img/backgroundimg.webp" alt="Background Image">
 50 |         </div>
 51 | 
 52 |     </div>
 53 |     <div class="middle_body">
 54 |         <div class="img_align">
 55 |             <img src="Img/middle1.webp" alt="">
 56 |             <h2>No Minimum Order</h2>
 57 |             <p>Order in for yourself or for the group, with no restrictions on order value</p>
 58 |         </div>
 59 |         <div class="img_align">
 60 |             <img src="Img/middle2.webp" alt="">
 61 |             <h2>Live Order Tracking</h2>
 62 |             <p>Know where your order is at all times, from the restaurant to your doorstep</p>
 63 |         </div>
 64 |         <div class="img_align">
 65 |             <img src="Img/middle3.webp" alt="">
 66 |             <h2>Lightning-Fast Delivery</h2>
 67 |             <p>Experience Swiggy's superfast delivery for food delivered fresh & on time</p>
 68 |         </div>
 69 |     </div>
 70 |     <div class="bottom_body">
 71 |         <div class="bottom_left">
 72 |             <h1>Restaurants in your pocket</h1>
 73 |             <p> Order from your favorite restaurants & track on the go, with the all-new Swiggy app.</p>
 74 |             <div class="install">
 75 |                 <img src="Img/googleplay.webp" alt="googleplay">
 76 |                 <img src="Img/app store.webp" alt="AppStore">
 77 |             </div>
 78 |         </div>
 79 |         <div class="bottom_right">
 80 |             <img src="Img/screenshot1.webp" alt="Swiggy App Example">
 81 |             <img src="Img/screenshot2.webp" alt="Swiggy App Example">
 82 |         </div>
 83 |     </div>
 84 |     <div class="footer">
 85 |         <div class="left_footer">
 86 |             <ul class="list">
 87 |                 <h4>COMPANY</h4>
 88 |                 <li>About us</li>
 89 |                 <li>Team</li>
 90 |                 <li>Careers</li>
 91 |                 <li>Swiggy Blog</li>
 92 |                 <li>Bug Bounty</li>
 93 |                 <li>Swiggy One</li>
 94 |                 <li>Swiggy Corporate</li>
 95 |                 <li>Swiggy Instamart</li>
 96 |             </ul>
 97 | 
 98 |             <ul class="list">
 99 |                 <h4>CONTACT</h4>
100 |                 <li>Help & Support</li>
101 |                 <li>Partner with us</li>
102 |                 <li>Ride with us</li>
103 |             </ul>
104 | 
105 |             <ul class="list">
106 |                 <h4>LEGAL</h4>
107 |                 <li>Terms & Conditions</li>
108 |                 <li>Refund & Cancellation</li>
109 |                 <li>Privacy Policy</li>
110 |                 <li>Cookie Policy</li>
111 |                 <li>Offer Terms</li>
112 |                 <li>Phishing & Fraud</li>
113 |             </ul>
114 | 
115 |         </div>
116 | 
117 |         <div class="right_footer">
118 |             <img src="Img/GooglePlayfootter.webp" alt="Google play">
119 |             <img src="Img/AppStorefootter.webp" alt="Apple store">
120 |         </div>
121 | 
122 |     </div>
123 | 
124 |     <div class="footer-end">
125 |         <div class="line">
126 |         <img src="Img/footterswiggylogo.webp" alt="footer logo">
127 |         <div class="text">
128 |             <h3>© 2022 Swiggy</h3>
129 |         </div>
130 |         <div class="social-media">
131 |             <img src="Img/swiggyfacebook.webp" alt="FaceBook">
132 |             <img src="Img/swiggypinterest.webp" alt="">
133 |             <img src="Img/swiggyinstagram.webp" alt="Instagram">
134 |             <img src="Img/swiggytwitter.webp" alt="Twitter">
135 |         </div>
136 |     </div>
137 | </div>
138 | 
139 | </body>
140 | 
141 | </html>


--------------------------------------------------------------------------------