Skip to content

Commit 2971120

Browse files
nipun-ionipun-io
committed
video file
1 parent 35fb437 commit 2971120

File tree

5 files changed

+330
-2
lines changed

5 files changed

+330
-2
lines changed

‎Dance.mp4‎

33.6 MB
Binary file not shown.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Project 2</title>
7+
<title>Project 3</title>
88
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
99
<link rel="stylesheet" href="style.css" />
1010
</head>

‎project2.css‎

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
* {
2+
margin: 0%;
3+
padding: 0%;
4+
box-sizing: border-box;
5+
}
6+
html,
7+
body {
8+
height: 100%;
9+
width: 100%;
10+
}
11+
#main {
12+
width: 100%;
13+
height: 100%;
14+
overflow: hidden;
15+
}
16+
#main video {
17+
height: 100%;
18+
width: 100%;
19+
position: absolute;
20+
object-fit: cover;
21+
}
22+
#main>#blend {
23+
height: 200px;
24+
width: 90%;
25+
background-color: rgb(11, 26, 74);
26+
mix-blend-mode: difference;
27+
position: absolute;
28+
top: 50%;
29+
transform: translate(0%, -50%);
30+
}
31+
#nav {
32+
display: flex;
33+
color: white;
34+
height: 50px;
35+
width: 90%;
36+
position: absolute;
37+
background-color: rgba(0, 0, 0, 0.466);
38+
top: 50px;
39+
left: 48%;
40+
transform: translate(-50%, -50%);
41+
align-items: center;
42+
justify-content: space-between;
43+
}
44+
#nav > i {
45+
padding: 20px;
46+
font-size: 30px;
47+
}
48+
#nav > #navright {
49+
height: 100%;
50+
width: 230px;
51+
display: flex;
52+
justify-content: space-between;
53+
align-items: center;
54+
padding-right: 30px;
55+
}
56+
#nav > input {
57+
border: solid black 5px;
58+
border-radius: 10px;
59+
}
60+
#rightbox{
61+
background-color: black;
62+
height:50px;
63+
width:50px;
64+
border: solid white 3px;
65+
border-radius: 50%;
66+
color: white;
67+
font-size: 5px;
68+
position: absolute;
69+
right: 20px;
70+
top: 50px;
71+
transform: translate(-50%,-50%);
72+
}
73+
#rightbox>h2{
74+
position: relative;
75+
top: 37%;
76+
left: 19%;
77+
transform: translate(-50%-50%);
78+
font-weight: 500;
79+
font-family: Gilroy;
80+
}
81+
#maintext{
82+
position: absolute;
83+
width: 550px;
84+
height: 110px;
85+
color: rgb(255, 255, 255);
86+
font-size: 39px;
87+
font-family: Anurati;
88+
top: 30%;
89+
left: 15%;
90+
line-height: 1;
91+
letter-spacing:12px;
92+
}
93+
#low{
94+
display: flex;
95+
position: absolute;
96+
justify-content: space-between;
97+
width: 450px;
98+
align-items: center;
99+
top: 53%;
100+
left: 15%;
101+
color: white;
102+
font-family: Oswald;
103+
margin-top: 20px;
104+
}
105+
#low>#count>h1{
106+
line-height:0px;
107+
letter-spacing: 2px;
108+
font-weight: 700;
109+
font-size: 35px;
110+
111+
}
112+
#low>#count>p{
113+
margin-top: -10px;
114+
font-size: 15px;
115+
text-align: center;
116+
text-decoration: underline;
117+
font-weight: 300;
118+
}
119+
#low>i{
120+
font-size: 35px;
121+
padding-left: 10px;
122+
}
123+
#side{
124+
position: absolute;
125+
height: 250px;
126+
width: 400px;
127+
left: 60%;
128+
top: 30%;
129+
z-index: 99999px;
130+
overflow: hidden;
131+
/* background-color: red; */
132+
color: white;
133+
}
134+
#side>img{
135+
height: 150px;
136+
width: 150px;
137+
object-fit: cover;
138+
}
139+
#side>h2{
140+
letter-spacing: 2px;
141+
font-size: 17px;
142+
padding-top: 20px;
143+
text-decoration: underline;
144+
font-weight: 200;
145+
}
146+
#side>p{
147+
padding-top: 5px;
148+
font-size: 15px;
149+
letter-spacing: 3px;
150+
font-weight: 100;
151+
}
152+
#left{
153+
border: double white 3px;
154+
text-align: center;
155+
width: 100px;
156+
left: 55%;
157+
top: 55%;
158+
position: absolute;
159+
}
160+
#left>i{
161+
font-size: 30px;
162+
}
163+
#left>p{
164+
font-size: 14px;
165+
}
166+
#left>h1{
167+
font-size: 17px;
168+
}
169+
#bottom{
170+
color: white;
171+
font-family: Gilroy;
172+
display: flex;
173+
justify-content: space-between;
174+
position: absolute;
175+
top: 65%;
176+
height: 110px;
177+
background-color: rgba(0, 0, 0, 0.379);
178+
}
179+
#bottomlist{
180+
display: flex;
181+
justify-content: space-between;
182+
flex-direction: column;
183+
width: 50%;
184+
background-color: rgba(0, 0, 0, 0.445);
185+
}
186+
.list{
187+
display: flex;
188+
justify-content: space-between;
189+
align-items: center;
190+
}
191+
#listleft>img{
192+
height: 50px;
193+
width: 50px;
194+
object-fit: cover;
195+
}
196+
#listleft{
197+
display: flex;
198+
}
199+
#head{
200+
padding: 5px;
201+
display: flex;
202+
flex-direction: column;
203+
}
204+
#head>p{
205+
color: rgb(139, 241, 6) ;
206+
}
207+
.list>i{
208+
font-size: 45px;
209+
align-items: center;
210+
color:rgb(139, 241, 6) ;
211+
}
212+
#bottomtext{
213+
padding-left: 50px;
214+
width: 49%;
215+
}
216+
#bottomtext>h4{
217+
font-size: 20px;
218+
font-weight: 900;
219+
letter-spacing: 3px;
220+
padding-bottom: 20px;
221+
}
222+
#bottomtext>p{
223+
font-size: 16px;
224+
225+
}
226+
#main>h5{
227+
position: absolute;
228+
top: 95%;
229+
left: 50%;
230+
transform: translate(-50%,-50%);
231+
font-size: 15px;
232+
font-family: Oswald;
233+
letter-spacing: 4px;
234+
text-decoration: underline 10px ;
235+
236+
color: #fff;
237+
}

‎project2.html‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Project-2</title>
8+
<link
9+
href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="project2.css" />
13+
</head>
14+
<body>
15+
<div id="main">
16+
<video autoplay loop muted src="Dance.mp4"></video>
17+
<div id="mainnav">
18+
<div id="nav">
19+
<i class="ri-headphone-fill"></i>
20+
<div id="navright">
21+
<input type="text" />
22+
<i class="ri-search-2-line"></i>
23+
</div>
24+
</div>
25+
<div id="rightbox"><h2>Sacrifice</h2></div>
26+
</div>
27+
<div id="blend"></div>
28+
<div id="maintext"><h1>BRAND OF SACRIFICE</h1></div>
29+
<div id="low">
30+
<div id="count">
31+
<h1>234,543</h1>
32+
<br />
33+
<p>monthly subscribers</p>
34+
</div>
35+
<i class="ri-bar-chart-2-fill"></i><i class="ri-focus-line"></i>
36+
</div>
37+
<div id="bottom">
38+
<div id="bottomlist">
39+
<div class="list" id="list1">
40+
<div id="listleft">
41+
<img
42+
src="https://images.unsplash.com/photo-1495582575459-2eac77721458?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80"
43+
alt=""
44+
/>
45+
<div id="head">
46+
<h5>True Bernard</h5>
47+
<p>Eddie Guerrero</p>
48+
</div>
49+
</div>
50+
<i class="ri-play-circle-fill"></i>
51+
</div>
52+
<div class="list" id="list2">
53+
<div id="listleft">
54+
<img
55+
src="https://images.unsplash.com/photo-1638579577793-925bb92d744b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8cm9jayUyMGJhbmR8ZW58MHwyfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
56+
alt=""
57+
/>
58+
<div id="head">
59+
<h5>True Bernard</h5>
60+
<p>Eddie Guerrero</p>
61+
</div>
62+
</div>
63+
<i class="ri-play-circle-fill"></i>
64+
</div>
65+
</div>
66+
<div id="bottomtext">
67+
<h4>Lorem, ipsum dolor.</h4>
68+
<p>
69+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
70+
inventore consequatur voluptatum aliquam fuga, accusamus temporibus
71+
itaque, magnam asperiores veritatis magni sint accusantium rem
72+
voluptatibus ipsa, voluptatem qui dicta tenetur.
73+
</p>
74+
</div>
75+
</div>
76+
<div id="side">
77+
<img
78+
src="https://images.unsplash.com/photo-1495582575459-2eac77721458?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80"
79+
alt=""
80+
/>
81+
<h2>Brand of Sacrifice</h2>
82+
<p>Since 1942</p>
83+
<div id="left">
84+
<i class="ri-amazon-fill"></i><br />
85+
<p>Visit on amazon</p>
86+
<h1>Order</h1>
87+
</div>
88+
</div>
89+
<h5>Contact us:nipunjain899@gmail.com</h5>
90+
</div>
91+
</body>
92+
</html>

‎style.css‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ html,body{
1010
font-family: Gilroy;
1111
background-color: rgb(228, 162, 30);
1212
overflow: hidden;
13-
1413
}
1514
#main{
1615
padding: 30px;

0 commit comments

Comments
 (0)