Skip to content

Commit 82a4391

Browse files
preet2856preet2856
committed
second commit
1 parent a3b53f9 commit 82a4391

File tree

2 files changed

+215
-16
lines changed

2 files changed

+215
-16
lines changed

‎index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -158,8 +158,52 @@ <h2><i class="bi bi-arrow-90deg-left"></i> Contact</h2>
158158

159159
</div>
160160
</div>
161+
<div id="team">
162+
<h3>Our strength lies in our people <i class="bi bi-arrow-90deg-right"></i></h3>
163+
<h1>Meet your team</h1>
164+
</div>
161165
</div>
166+
<div id="part6"></div>
162167
</div>
168+
<div id="footer">
169+
<div class="footer-top">
170+
<div class="footer-t-up">
171+
<div class="footer-t-left">
172+
<div class="footer-t-left-up">
173+
<h1>Relax. We've got you.</h1>
174+
<p>Take a seat</p>
175+
</div>
176+
<div class="footer-t-left-down">
177+
<h3>San Diego—California</h3>
178+
<h3>Paris—France</h3>
179+
</div>
180+
</div>
181+
</div>
182+
<div class="footer-t-right">
183+
<div class="footer-t-right-up">
184+
<ul>
185+
<li><a href="#">Home</a></li>
186+
<li><a href="#">Work</a></li>
187+
<li><a href="#">About</a></li>
188+
<li><a href="#">Services & Models</a></li>
189+
<li><a href="#">Contact</a></li>
190+
</ul>
191+
<ul>
192+
<li><a href="#">X <i class="bi bi-arrow-up-right"></i></a></li>
193+
<li><a href="#">Instagram <i class="bi bi-arrow-up-right"></i></a></li>
194+
<li><a href="#">Linkedin <i class="bi bi-arrow-up-right"></i></a></li>
195+
</ul>
196+
</div>
197+
<div class="footer-t-right-down">
198+
<p><a href="#">biz@rejouice.com</a></p>
199+
<p>©2023 legal</p>
200+
</div>
201+
</div>
202+
</div>
203+
<div id="footer-bottom">
204+
<h1><span>r</span><span>e</span><span>j</span><span>o</span><span>u</span><span>i</span><span>c</span><span>e</span>
205+
</h1>
206+
</div>
163207
</div>
164208

165209

‎style.css

Lines changed: 171 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,36 @@ body {
2828
color: #FF5F38;
2929
}
3030

31+
a {
32+
text-decoration: none;
33+
color: #D8D5CC;
34+
}
35+
36+
#loader {
37+
position: fixed;
38+
width: 100%;
39+
height: 100%;
40+
top: 0;
41+
z-index: 99;
42+
gap: 10px;
43+
display: flex;
44+
align-items: center;
45+
justify-content: center;
46+
background-color: #000000;
47+
}
48+
49+
#loader h3 {
50+
font-family: NBIPB;
51+
font-size: 1.8vw;
52+
font-weight: 400;
53+
color: #FAF8F3;
54+
}
55+
56+
#main {
57+
position: relative;
58+
z-index: 10;
59+
}
60+
3161
#part1 {
3262
position: relative;
3363
width: 100%;
@@ -52,6 +82,11 @@ body {
5282
font-weight: 500;
5383
}
5484

85+
#part1 {
86+
width: 100%;
87+
height: 100vh;
88+
}
89+
5590
#part1 video {
5691
position: absolute;
5792
width: 100%;
@@ -303,11 +338,11 @@ nav h4 {
303338

304339
#part4-bottom #part4b-center {
305340
position: absolute;
341+
color: #FAF8F3;
306342
display: flex;
343+
align-items: center;
307344
flex-direction: column;
308345
justify-content: center;
309-
align-items: center;
310-
color: #FAF8F3;
311346
}
312347

313348
#part4-bottom #part4b-center h1 {
@@ -322,16 +357,16 @@ nav h4 {
322357
#part5 {
323358
position: relative;
324359
width: 100%;
325-
height: 150vh;
360+
height: 200vh;
326361
padding: 5vw 2.5vw;
327362
background-color: #FAF8F3;
328363
}
329364

330365
#part5-heading {
366+
padding: 1.5vw 0;
331367
display: flex;
332-
justify-content: space-between;
333368
align-items: flex-end;
334-
padding: 1.5vw 0;
369+
justify-content: space-between;
335370
}
336371

337372
#part5-heading h4 {
@@ -387,11 +422,11 @@ nav h4 {
387422
}
388423

389424
.swiper-slide {
390-
text-align: center;
391425
font-size: 18px;
426+
text-align: center;
392427
display: flex;
393-
justify-content: space-between;
394428
align-items: flex-end;
429+
justify-content: space-between;
395430
}
396431

397432
.swiper-slide img {
@@ -400,22 +435,142 @@ nav h4 {
400435
object-fit: contain;
401436
}
402437

403-
#loader {
438+
#part5 #team {
439+
width: 100%;
440+
height: 35vh;
441+
display: flex;
442+
align-items: center;
443+
flex-direction: column;
444+
justify-content: center;
445+
}
446+
447+
#part5 #team h1 {
448+
font-size: 4vw;
449+
font-weight: 300;
450+
}
451+
452+
#part5 #team h3 {
453+
font-size: 1.2vw;
454+
font-weight: 300;
455+
}
456+
457+
#part5 #team h3 i {
458+
display: inline-block;
459+
font-size: 1vw;
460+
transform: rotate(90deg);
461+
}
462+
463+
#part6 {
464+
width: 100%;
465+
height: 100vh;
466+
}
467+
468+
#footer {
404469
position: fixed;
405470
width: 100%;
406471
height: 100%;
407-
top: 0;
408-
z-index: 99;
409-
gap: 10px;
472+
bottom: 0;
473+
z-index: 9;
474+
color: #D8D5CC;
475+
padding: 3.5vw 3vw;
476+
display: flex;
477+
flex-direction: column;
478+
background-color: #000000;
479+
}
480+
481+
.footer-top {
482+
height: 60%;
483+
width: 100%;
410484
display: flex;
411485
align-items: center;
486+
justify-content: space-between;
487+
}
488+
489+
.footer-top .footer-t-up {
490+
width: 60%;
491+
height: 100%;
492+
}
493+
494+
.footer-t-left {
495+
height: 100%;
496+
display: flex;
497+
flex-direction: column;
498+
align-items: flex-start;
499+
justify-content: space-between;
500+
}
501+
502+
.footer-t-left-up {
503+
gap: 2vw;
504+
display: flex;
505+
flex-direction: column;
412506
justify-content: center;
413-
background-color: #000000;
507+
align-items: flex-start;
414508
}
415509

416-
#loader h3 {
417-
font-family: NBIPB;
418-
font-size: 1.8vw;
510+
.footer-t-left-up h1 {
511+
font-size: 1.6vw;
512+
font-weight: 500;
513+
}
514+
515+
.footer-t-left-up p {
516+
font-size: 1.2vw;
517+
border-radius: 10px;
518+
padding: 1vw 1.5vw;
519+
background: #000000;
520+
border: 1px solid #D8D5CC;
521+
transition: all 0.5s ease;
522+
}
523+
524+
.footer-t-left-up p:hover {
525+
background: #FAF8F3;
526+
color: #000000;
527+
}
528+
529+
.footer-t-left-down h3 {
530+
font-weight: 300;
531+
}
532+
533+
.footer-t-right {
534+
height: 100%;
535+
display: flex;
536+
flex-direction: column;
537+
justify-content: space-between;
538+
}
539+
540+
.footer-t-right-up {
541+
gap: 4vw;
542+
display: flex;
543+
justify-content: center;
544+
align-items: flex-start;
545+
}
546+
547+
.footer-t-right-up ul li {
548+
list-style: none;
549+
font-size: 1.2vw;
419550
font-weight: 400;
420-
color: #FAF8F3;
551+
}
552+
553+
.footer-t-right-down {
554+
gap: 4vw;
555+
display: flex;
556+
align-items: center;
557+
justify-content: space-between;
558+
}
559+
560+
.footer-t-right-down p {
561+
font-size: 1.2vw;
562+
font-weight: 400;
563+
}
564+
565+
#footer-bottom h1 {
566+
font-size: 27.1vw;
567+
line-height: 17vw;
568+
font-weight: 500;
569+
color: #D8D5CC;
570+
}
571+
572+
#footer-bottom h1 span {
573+
z-index: 99999;
574+
display: inline-block;
575+
font-family: Rejouice;
421576
}

0 commit comments

Comments
 (0)