Skip to content

Commit 2a02dee

Browse files
ANIRUDH-VADERAANIRUDH-VADERA
committed
Added Responsivity first 2 and footer fixed timer
1 parent 4dfb908 commit 2a02dee

File tree

6 files changed

+222
-31
lines changed

6 files changed

+222
-31
lines changed

‎css/styles.css

+186-24
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,8 @@ body {
2121
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 61.46%, #000000 100%),
2222
linear-gradient(0deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)),
2323
url("../images/animation.svg");
24-
<<<<<<< HEAD
25-
background: url(../images/final\ render.mp4);
26-
z-index: 10;
27-
=======
28-
>>>>>>> 54a9bd7a09b5b5c223744c6e2fa2c79ddf967581
24+
/* background: url(../images/final_render.mp4);
25+
z-index: 10; */
2926
}
3027

3128
.main {
@@ -517,15 +514,17 @@ body {
517514

518515
/* Footer */
519516
.footer {
517+
display: flex;
518+
justify-content: center;
520519
padding-top: 50px;
521-
padding-left: 150px;
522-
padding-right: 200px;
523-
height: 60vh;
520+
height: 65vh;
524521
background: #000000;
525522
}
526523

527524
.footer_main {
525+
margin-top: 80px;
528526
display: flex;
527+
width: 70vw;
529528
flex-direction: column;
530529
align-items: flex-start;
531530
justify-content: center;
@@ -543,12 +542,12 @@ body {
543542
}
544543

545544
.div_two {
546-
width: 210px;
545+
height: 215px;
546+
width: 14vw;
547547
}
548548

549549
.div_three .icons a {
550550
text-decoration: none;
551-
height: fit-content;
552551
}
553552

554553
.links {
@@ -561,7 +560,8 @@ body {
561560
}
562561

563562
.div_three {
564-
width: 200px;
563+
height: 215px;
564+
width: 13vw;
565565
}
566566

567567
.icons {
@@ -576,10 +576,43 @@ body {
576576
}
577577

578578
.footer_down {
579+
display: flex;
580+
flex-direction: column;
581+
justify-content: center;
582+
align-items: center;
579583
width: 100%;
580584
margin-top: 70px;
581585
}
582586

587+
.footer_para_up {
588+
width: 87.5vw;
589+
display: flex;
590+
justify-content: center;
591+
align-items: center;
592+
}
593+
594+
.line {
595+
transform: translateX(2.1vw);
596+
}
597+
598+
.line-up {
599+
transform: translateX(4vw);
600+
}
601+
602+
.footer_button {
603+
cursor: pointer;
604+
display: flex;
605+
justify-content: center;
606+
align-items: center;
607+
border-radius: 100%;
608+
width: 64px;
609+
height: 64px;
610+
}
611+
612+
.footer_para {
613+
transform: translateY(-30px);
614+
}
615+
583616
/* Headings Footer */
584617
.footer_up .h4 {
585618
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
@@ -608,7 +641,7 @@ body {
608641
}
609642

610643
.line {
611-
height: 1px;
644+
height: 0.001px;
612645
border: 1px solid #4b5b65;
613646
margin-bottom: 25px;
614647
float: left;
@@ -638,20 +671,17 @@ body {
638671
color: #ffffff;
639672
}
640673

641-
.img_one {
642-
transform: translateX(-5px);
643-
}
644-
645-
.img_two {
646-
transform: translateX(13px);
647-
}
674+
/* Media Queries */
648675

649-
.img_three {
650-
transform: translateX(18px);
676+
@media only screen and (max-width: 1300px) {
677+
.div_two {
678+
width: 18vw;
679+
}
680+
.div_three {
681+
width: 12vw;
682+
}
651683
}
652684

653-
/* Media Queries */
654-
655685
@media only screen and (max-width: 1025px) {
656686
/* Navbar */
657687

@@ -728,6 +758,68 @@ body {
728758
.info_div_three {
729759
width: 26.5vw;
730760
}
761+
762+
/* Footer */
763+
764+
.footer_main {
765+
width: 80vw;
766+
}
767+
768+
.footer_up {
769+
width: 100%;
770+
}
771+
772+
.links {
773+
display: flex;
774+
}
775+
776+
.div_two {
777+
width: 25vw;
778+
}
779+
780+
.div_three {
781+
width: 14vw;
782+
}
783+
784+
.icons {
785+
margin-top: 0;
786+
}
787+
788+
.icons img {
789+
margin-bottom: 5px;
790+
}
791+
792+
.footer_down {
793+
width: 100%;
794+
margin-top: 70px;
795+
}
796+
797+
.footer_para_up {
798+
width: 87.5vw;
799+
display: flex;
800+
justify-content: center;
801+
align-items: center;
802+
}
803+
804+
.line {
805+
transform: translateX(2.1vw);
806+
}
807+
808+
/* Headings Footer */
809+
810+
.line {
811+
width: 80%;
812+
}
813+
814+
.line-up {
815+
margin-bottom: 25px;
816+
}
817+
}
818+
819+
@media only screen and (max-width: 850px) {
820+
.div_three {
821+
width: 14vw;
822+
}
731823
}
732824

733825
@media only screen and (max-width: 700px) {
@@ -833,6 +925,28 @@ body {
833925
.info_div .h4 {
834926
font-size: 10px;
835927
}
928+
929+
/* Footer */
930+
931+
.footer_main {
932+
width: 90vw;
933+
}
934+
.footer_adg {
935+
height: 150px;
936+
width: 150px;
937+
}
938+
939+
.links {
940+
display: flex;
941+
}
942+
943+
.div_two {
944+
width: 25vw;
945+
}
946+
947+
.div_three {
948+
width: 19vw;
949+
}
836950
}
837951

838952
@media only screen and (max-width: 450px) {
@@ -898,7 +1012,7 @@ body {
8981012
/* Headins Info Page */
8991013

9001014
.info_heading_img {
901-
width: 40vw;
1015+
width: 50vw;
9021016
height: 121.13px;
9031017
}
9041018

@@ -937,4 +1051,52 @@ body {
9371051
.info_div .h4 {
9381052
font-size: 8px;
9391053
}
1054+
/* Footer */
1055+
1056+
.icons img {
1057+
margin-bottom: 15px;
1058+
width: 35px;
1059+
height: 35px;
1060+
}
1061+
1062+
.div_three {
1063+
width: 24vw;
1064+
}
1065+
.div_two {
1066+
width: 28vw;
1067+
}
1068+
1069+
.footer_main {
1070+
width: 90vw;
1071+
}
1072+
.footer_adg {
1073+
height: 120px;
1074+
width: 120px;
1075+
}
1076+
/* Headings Footer */
1077+
.footer_up .h4 {
1078+
font-size: 14px;
1079+
}
1080+
1081+
.links p {
1082+
font-size: 11px;
1083+
margin-right: 3px;
1084+
}
1085+
1086+
.footer_para {
1087+
font-size: 12px;
1088+
}
1089+
.links .second {
1090+
margin-right: 0;
1091+
}
1092+
1093+
.footer_button {
1094+
width: 44px;
1095+
height: 44px;
1096+
}
1097+
1098+
.footer_button_img {
1099+
width: 44px;
1100+
height: 44px;
1101+
}
9401102
}

‎images/facebook.png

932 Bytes
Loading

‎images/final render.mp4 ‎images/final_render.mp4

File renamed without changes.

‎images/instagram.png

1.28 KB
Loading

‎index.html

+12-6
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
</head>
7070

7171
<body>
72-
<section class="landing_page">
72+
<section class="landing_page" id="landing_page">
7373
<nav class="navbar navbar-dark" id="navbar">
7474
<div class="container-fluid">
7575
<a class="navbar-brand"><img src="./images/adg_logo.svg" alt="" /></a>
@@ -102,7 +102,7 @@
102102
/>
103103
</button>
104104
<p class="h1">Deadline For Registering: 25th November,2021</p>
105-
<p class="h2">02:12:20:30</p>
105+
<p class="h2 timer"></p>
106106
</div>
107107
</div>
108108
</section>
@@ -295,7 +295,7 @@
295295
<div class="footer_up">
296296
<div class="div_one">
297297
<a href="https://adgvit.com/"
298-
><img src="./images/adg_logo2.svg" alt=""
298+
><img class="footer_adg" src="./images/adg_logo2.svg" alt=""
299299
/></a>
300300
</div>
301301
<div class="div_two">
@@ -339,9 +339,15 @@
339339
</div>
340340
</div>
341341
<div class="footer_down">
342-
<div class="line"></div>
343-
<div class="line-up">
344-
<img src="./assets/up.svg" />
342+
<div class="footer_para_up">
343+
<div class="line"></div>
344+
<div class="line-up">
345+
<a href="#landing_page">
346+
<button class="footer_button">
347+
<img class="footer_button_img" src="./assets/up.svg" />
348+
</button>
349+
</a>
350+
</div>
345351
</div>
346352
<div class="footer_para">
347353
<p>Developed by ADG | © 2021 All rights reserved.</p>

‎index.js

+24-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,24 @@
1-
// document.querySelector('video').playbackRate = 1.25;
1+
var timer = document.querySelector(".timer");
2+
3+
function updateTimer() {
4+
future = Date.parse("nov 26, 2021 00:00:00");
5+
now = new Date();
6+
diff = future - now;
7+
8+
days = Math.floor(diff / (1000 * 60 * 60 * 24));
9+
hours = Math.floor(diff / (1000 * 60 * 60));
10+
mins = Math.floor(diff / (1000 * 60));
11+
secs = Math.floor(diff / 1000);
12+
13+
d = days;
14+
h = hours - days * 24;
15+
m = mins - hours * 60;
16+
s = secs - mins * 60;
17+
18+
s=s<10 ? '0'+s : s;
19+
m=m<10 ? '0'+m : m;
20+
h=h<10 ? '0'+h : h;
21+
22+
timer.innerHTML = '0'+d+':'+h+':'+m+':'+ s;
23+
}
24+
setInterval("updateTimer()", 1000);

0 commit comments

Comments
 (0)