Merge branch 'master' into feature/make-new-layout

Signed-off-by: Vaishnavi Kale <[email protected]>

FlipCart-Clone/README.md

@@ -0,0 +1,58 @@
+# Flipkart Clone 
+
+Welcome to the Flipkart project! This is a simple Online Shopping website which becomes in use now-a-days.
+
+## Table of Contents
+- [Project Overview](#projectOverview)
+- [Features](#features)
+- [Screenshots](#demo)
+- [Getting Started](#getting-started)
+- [Project Structure](#project-Structure)
+
+## Project Overview
+In this project, I aim to replicate the basic structure and design of the Flipkart website using HTML for the content and CSS for styling. Please note that this clone is for educational purposes and does not have the full functionality of the actual Flipkart website.
+## Features
+
+- Homepage clone with product listings
+- Product detail pages
+- Basic styling to match Flipkart's design
+- Responsive design for different screen sizes
+- Scrollable Banner Images provides at top of body...
+
+## Screenshots
+- Mobile Flexibility
+
+![Alt text](image-1.png)
+- iPad Flexibility
+
+![Alt text](image-2.png)
+- FullScreen Flexibility
+
+![Alt text](image-3.png)
+
+## Getting Started
+
+Follow these instructions to get a copy of the project up and running on your local machine.
+
+1. **Clone the repository**
+
+   ```bash
+   git clone https://github.com/vaishnavi-3969/Web-Componentify.git
+   ```
+
+2. **Open index.html in your preferred browser**
+
+   Simply open the `index.html` file in your web browser.
+
+## Project-Structure
+
+flipkart-clone/
+- ── index.html
+- ── css/
+   ├── style.css
+   └── (other CSS files)
+- ── (image assets)
+- ── README.md
+
+
+

FlipCart-Clone/css/responsive.css

@@ -0,0 +1,191 @@
+@media screen and (max-width:1000px) {
+    nav {
+       flex-direction: column;
+    }
+
+    header {
+       height: 15vh;
+       width: 100%;
+
+    }
+
+    .logo {
+       justify-content: center;
+       margin-top: 10px;
+    }
+
+    nav ul {
+       justify-content: center;
+       height: 46px;
+    }
+
+    .search {
+       justify-content: center;
+       /* align-items: center;
+         width: 209px; */
+       margin: 0px 14vw;
+       border-radius: 5px;
+    }
+
+    #btn8 {
+       margin: 0px 5px 0px 3px;
+    }
+
+    .slidder {
+       height: 20vh;
+    }
+
+    .cardbtn p {
+       font-size: 1rem;
+       margin: 2px;
+    }
+
+    .cardbtn button {
+       margin-left: 10px;
+       font-size: 0.5rem;
+       width: 10vw;
+       height: 3vh;
+
+    }
+
+    .image1 {
+       width: 17vw;
+       height: 10vh;
+       float: left;
+       /* margin: 0px 40px; */
+
+    }
+
+    .con1 {
+       height: 20vh;
+       margin: 20px;
+    }
+
+    .con2 {
+       margin: 20px;
+    }
+
+    .con3 {
+       margin: 20px;
+    }
+
+    .con4 {
+       margin: 20px;
+    }
+
+    .con5 {
+       margin: 20px;
+    }
+
+    .con6 {
+       margin: 20px;
+    }
+
+    .image2 {
+       width: 17vw;
+       height: 10vh;
+       float: left;
+       /* margin: 0px 40px; */
+
+    }
+
+    .image3 {
+       width: 17vw;
+       height: 10vh;
+       float: left;
+       /* margin: 0px 40px; */
+
+    }
+
+    .image4 {
+       width: 17vw;
+       height: 10vh;
+       float: left;
+       /* margin: 0px 40px; */
+
+    }
+
+    .image5 {
+       width: 17vw;
+       height: 10vh;
+       float: left;
+       /* margin: 0px 40px; */
+
+    }
+
+    .image6 {
+       width: 17vw;
+       height: 10vh;
+       float: left;
+       /* margin: 0px 40px; */
+    }
+
+    .card {
+       height: 25vh;
+    }
+
+    #btn1 {
+       width: 40px;
+       height: 8vh;
+       margin-top: 30px;
+       margin-left: 23px;
+    }
+
+    #ibtn {
+       width: 4vw;
+       margin: 2px;
+    }
+
+    .images::after {
+       display: table;
+       clear: both;
+    }
+
+    #w1 {
+       font-size: 0.8rem;
+    }
+
+    #w2 {
+       font-size: 0.8rem;
+    }
+
+    #w3 {
+       font-size: 0.8rem;
+    }
+
+    #w4 {
+       font-size: 0.8rem;
+    }
+
+    #w5 {
+       font-size: 0.8rem;
+    }
+
+    #w6 {
+       font-size: 0.8rem;
+    }
+
+    #w7 {
+       font-size: 0.7rem;
+    }
+
+    #w8 {
+       font-size: 0.7rem;
+    }
+
+    #w9 {
+       font-size: 0.7rem;
+    }
+
+    #w10 {
+       font-size: 0.7rem;
+    }
+
+    #w11 {
+       font-size: 0.7rem;
+    }
+
+    #w12 {
+       font-size: 0.7rem;
+    }
+ }