├── README.md
├── home.png
├── utils.css
├── style.css
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | # Myntra-Clone
2 | It is made with only HTML and CSS
3 |
--------------------------------------------------------------------------------
/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/uttammane1/Myntra-Clone/HEAD/home.png
--------------------------------------------------------------------------------
/utils.css:
--------------------------------------------------------------------------------
1 | .flex{
2 | display:flex;
3 | }
4 |
5 | .items-center{
6 | align-items:center;
7 | }
8 |
9 | .justify-center{
10 | justify-content: center;
11 | }
12 |
13 | .space-between{
14 | justify-content: space-between;
15 | }
16 |
17 | .uppercase{
18 | text-transform: uppercase;
19 | }
20 |
21 | .semibold{
22 | font-weight: bolder;
23 | }
24 |
25 | .mx-2{
26 | margin-left: 100px;
27 | margin-right: 40px;
28 | }
29 |
30 | .my-2{
31 | margin: 12px 0;
32 | }
33 |
34 | .flex-wrap{
35 | flex-wrap: wrap;
36 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
2 | html, body {
3 | height: 100%;
4 | width: 100%;
5 | margin: 0;
6 | padding: 0;
7 | font-family: 'Roboto', sans-serif;
8 | }
9 |
10 | header{
11 | position: sticky;
12 | top: 0;
13 | background: rgb(147, 222, 131);
14 | height: 66px;
15 | box-shadow: rgba(7, 7, 7, 0.15) 1.95px 1.95px 2.6px;
16 | }
17 |
18 | .rightBox{
19 | display: flex;
20 | margin: 12px;
21 | }
22 |
23 | .left img{
24 | width: 55px;
25 | height: 40px;
26 | }
27 |
28 | .container{
29 | padding: 0 10vw;
30 | }
31 |
32 | .containerHeader{
33 | padding: 0 10vw;
34 | }
35 |
36 | nav{
37 | font-size: 12px;
38 | padding-top: 14px;
39 | }
40 |
41 | nav ul li{
42 | list-style: none;
43 | padding: 0 12px;
44 | }
45 |
46 | .section1{
47 | background: #f2f2f2;
48 | }
49 |
50 | .search{
51 | width: 34vw;
52 | padding: 7px 17px;
53 | border: 0.5px solid grey;
54 | background: #f7f8fd;
55 | border-radius: 5px;
56 | }
57 |
58 | .homeImg{
59 | width: 80vw;
60 | margin: 12px 0;
61 | }
62 |
63 | .itemImg{
64 | width: 10vw;
65 | margin: 6px 12px;
66 | }
67 |
68 | footer{
69 | padding: 23px;
70 | text-align: center;
71 | box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;
72 | }
73 |
74 | .tall{
75 | min-height: 40vh;
76 | }
77 |
78 | @media (max-width: 450px) {
79 | .search {
80 | width: 72vw;
81 | }
82 | }
83 |
84 | @media (max-width: 1550px) {
85 |
86 | nav ul li {
87 | list-style: none;
88 | padding: 0 4px;
89 | font-size: 10px;
90 | }
91 |
92 |
93 | .containerHeader {
94 | padding: 0 2vw;
95 | }
96 |
97 | header{
98 | height:122px;
99 | }
100 |
101 | nav{
102 | flex-direction: column;
103 | align-items: center;
104 | }
105 |
106 | .right{
107 | flex-direction: column;
108 | }
109 |
110 | .rightBox{
111 | display: flex;
112 | margin: 12px;
113 | }
114 | }
115 | /*end*/
116 | .top{
117 | height: 40px;
118 | background-color: #d3b315;
119 | display: flex;
120 | align-items: center;
121 | justify-content: space-evenly;
122 | }
123 |
124 | .top a{
125 | color: white;
126 | font-size: 14px;
127 | text-decoration: none;
128 | font-family: Arial, Helvetica, sans-serif;
129 | }
130 | .customer-footer{
131 | background-color: #2569bd;
132 | height: 400px;
133 | display: flex;
134 | justify-content: space-evenly;
135 | align-items: center;
136 | }
137 | .cust-first{
138 | color: white;
139 | font-size: 16px;
140 | font-weight: 700;
141 | font-family: Arial, Helvetica, sans-serif;
142 | margin-bottom: 15px;
143 | }
144 | .cust-Second{
145 | color: white;
146 | font-size: 14px;
147 | font-family: Arial, Helvetica, sans-serif;
148 | margin-bottom: 10px;
149 | }
150 | .end{
151 | background-color: aqua;
152 | }
153 |
154 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
8 | Uttam's Online Shopping for Men, Women, Kids Fashion & Lifestyle - Myntra
9 |
10 |
11 |
12 |
13 |
14 |
37 |
42 |
43 | 
44 | 
45 | 
46 | 
47 | 
48 | 
49 | 
50 | 
51 |
52 |
53 | 
54 |
55 |
58 |
105 |
112 |
113 |
114 |
--------------------------------------------------------------------------------
39 | 
40 | 
41 |