Skip to content

Commit 73c40ae

Browse files
parthdev1001parthdev1001
authored
Add files via upload
0 parents  commit 73c40ae

3 files changed

Lines changed: 266 additions & 0 deletions

File tree

‎61299-498228517_small.mp4‎

3.52 MB
Binary file not shown.

‎index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
9+
rel="stylesheet"/>
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div id="main">
14+
<div id="left-top-left">
15+
<div id="square"></div>
16+
</div>
17+
<div id="left-top-right">
18+
<h4>Menu</h4>
19+
<h5>HOME PAGE</h5>
20+
<h5>Fashoin weak</h5>
21+
<h5>News/Article</h5>
22+
<h5>Contact</h5>
23+
</div>
24+
<div id="left-center">
25+
<h1 id="a">SELECT</h1>
26+
<h1 id="b">FASHION</h1>
27+
<h1 id="c">MOD.05-</h1>
28+
<h1 id="d">SCENE</h1>
29+
</div>
30+
<div id="left-bottom">
31+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dolore sunt illo accusantium vero qui doloremque illum nisi, iste, quasi necessitatibus animi amet commodi error impedit quibusdam, vitae provident maxime odit.</p>
32+
</div>
33+
<div id="right">
34+
<video autoplay muted loop src="./61299-498228517_small.mp4"></video>
35+
</div>
36+
<div id="arrow">
37+
<i class="ri-arrow-right-line"></i>
38+
</div>
39+
</div>
40+
</body>
41+
</html>

‎style.css‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
*{
2+
margin: 0 ;
3+
padding: 0;
4+
box-sizing:border-box
5+
}
6+
7+
html,body{
8+
height: 100%;
9+
width: 100%;
10+
}
11+
#main{
12+
width: 100%;
13+
height: 100%;
14+
display: grid;
15+
grid-template-columns: 25% 25% 50%;
16+
grid-template-rows: 26% 56% 18% ;
17+
}
18+
#left-top-left{
19+
grid-row:1;
20+
grid-column: 1;
21+
padding: 30px;
22+
}
23+
#square{
24+
height: 20px;
25+
width: 20px;
26+
background-color: black;
27+
rotate: 45deg;
28+
29+
30+
/* transform: rotate(120deg); */
31+
}
32+
33+
#left-top-right{
34+
/* background-color: black; */
35+
grid-row: 1;
36+
grid-column: 2;
37+
justify-self: right;
38+
padding: 30px;
39+
text-align: right;
40+
}
41+
#left-top-right h4{
42+
margin-bottom: 40px;
43+
44+
}#left-top-right h5{
45+
font-size: 13px;
46+
font-weight: 500;
47+
48+
}
49+
50+
#left-center{
51+
/* background-color: darkcyan; */
52+
grid-column: 1/3;
53+
grid-row: 2;
54+
}
55+
#left-center h1{
56+
font-size: 5.5vw;
57+
text-transform: uppercase;
58+
font-weight: 500;
59+
font-family: Arial, Helvetica, sans-serif;
60+
margin-left: 20px;
61+
62+
}
63+
#left-center h1:nth-child(2n){
64+
text-align: center;
65+
}
66+
67+
#left-bottom{
68+
/* background-color: deeppink; */
69+
grid-column: 1 / 3;
70+
grid-row: 3;
71+
padding: 10px;
72+
}
73+
#left-bottom p{
74+
width: 70%;
75+
}
76+
#right{
77+
/* background-color: brown; */
78+
grid-column: 3;
79+
grid-row: 1/4;
80+
padding: 40px;
81+
padding-right: 130px;
82+
83+
}
84+
#right video{
85+
height: 100%;
86+
width: 100%;
87+
object-fit: cover;
88+
border-radius: 3px;
89+
}
90+
91+
#arrow{
92+
position: absolute;
93+
top: 50%;
94+
left: 52.5%;
95+
transform: translate(-50%,-50%);
96+
display: flex;
97+
justify-content: center;
98+
align-items: center;
99+
background: orangered;
100+
padding: 20px;
101+
color: aliceblue;
102+
border-radius: 50%;
103+
104+
105+
106+
}
107+
#arrow i{
108+
font-size: 40px;
109+
font-weight: 100;
110+
}
111+
112+
@media(max-width:600px){
113+
#main{
114+
width: 100%;
115+
height: 100%;
116+
display: grid;
117+
grid-template-columns: 50% 50%;
118+
grid-template-rows: 60px 30% 10% ;
119+
}
120+
#right{
121+
/* background-color: brown; */
122+
grid-column: 1/3;
123+
grid-row: 4;
124+
padding: 20px;
125+
margin-left: 30px;
126+
margin-top:60px;
127+
align-content: center;
128+
129+
}
130+
#left-top-left{
131+
grid-row:1;
132+
grid-column: 1;
133+
padding: 10px;
134+
}
135+
#square{
136+
height: 13px;
137+
width: 13px;
138+
background-color: black;
139+
rotate: 45deg;
140+
141+
142+
/* transform: rotate(120deg); */
143+
}
144+
145+
#left-top-right{
146+
/* background-color: black; */
147+
grid-row: 1;
148+
grid-column: 2;
149+
justify-self: right;
150+
padding: 10px;
151+
text-align: right;
152+
}
153+
#left-top-right h4{
154+
margin-bottom: 40px;
155+
156+
}#left-top-right h5{
157+
font-size: 13px;
158+
font-weight: 500;
159+
160+
}
161+
162+
#left-center{
163+
/* background-color: darkcyan; */
164+
grid-column: 1/3;
165+
grid-row: 2;
166+
align-content: center;
167+
padding: 60px;
168+
margin-top: 60px;
169+
}
170+
171+
#left-center h1{
172+
font-size: 9vw;
173+
line-height: 43px;
174+
text-transform: uppercase;
175+
font-weight: 300;
176+
font-family: Arial, Helvetica, sans-serif;
177+
margin-left: 50px;
178+
179+
180+
}
181+
#left-center h1:nth-child(2n){
182+
text-align: center;
183+
}
184+
185+
#left-bottom{
186+
/* background-color: deeppink; */
187+
grid-column: 1 / 3;
188+
grid-row: 3;
189+
padding: 14px;
190+
}
191+
#left-bottom p{
192+
width: 70%;
193+
}
194+
195+
#right video{
196+
height: 90%;
197+
width: 90%;
198+
object-fit: cover;
199+
border-radius: 3px;
200+
}
201+
202+
#arrow{
203+
position: absolute;
204+
top: 58%;
205+
left: 52.5%;
206+
transform: translate(-50%,-50%);
207+
display: flex;
208+
justify-content: center;
209+
align-items: center;
210+
background: orangered;
211+
padding: 20px;
212+
color: aliceblue;
213+
border-radius: 50%;
214+
215+
216+
217+
}
218+
#arrow i{
219+
font-size: 20px;
220+
rotate: 90deg;
221+
font-weight: 800;
222+
}
223+
224+
225+
}

0 commit comments

Comments
 (0)