Skip to content

Commit 51c8a70

Browse files
Gourav2609Gourav2609
committed
Animation
1 parent 65201c6 commit 51c8a70

File tree

5 files changed

+157
-25
lines changed

5 files changed

+157
-25
lines changed

‎src/Components/innerveText.jsx

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
import React from "react";
2-
import InnText from "../assets/images/innText.svg";
3-
4-
2+
import InnText from "../assets/images/innText.svg";
3+
import "../Components/innerveTextStyles.css";
54

65
export default function InnerveText() {
7-
return (
8-
<div className="absolute overflow-hidden top-[25rem]">
9-
{/* <h1 className="text-[7rem] md:text-[12rem] lg:text-[16rem] xl:text-[27rem] text-black">Innerve</h1> */}
10-
<img src={InnText} alt="Innerve" className="scale-100"/>
11-
</div>
12-
);
13-
}
6+
return (
7+
<div className="content">
8+
<h1 className="">Innerve</h1>
9+
<h1 className="">Innerve</h1>
10+
<h1 className="">Innerve</h1>
11+
{/* <img src={InnText} alt="Innerve" className="scale-100"/> */}
12+
</div>
13+
);
14+
}

‎src/Components/innerveTextStyles.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
2+
3+
.content h1 {
4+
position: absolute;
5+
/* color:black; */
6+
transform: translate(-50%, -35%);
7+
z-index: 1000;
8+
font-size: 28rem;
9+
font-weight: 900;
10+
}
11+
12+
.content h1:nth-child(1){
13+
color: transparent;
14+
-webkit-text-stroke: 1px black;
15+
}
16+
17+
.content h1:nth-child(3){
18+
color: transparent;
19+
-webkit-text-stroke: 0 black;
20+
}
21+
22+
.content h1:nth-child(2) {
23+
color: rgba(253 , 222 , 86 ,1);
24+
/* color:black; */
25+
animation: animate 3s ease-in-out infinite;
26+
}
27+
28+
.content h1:nth-child(3) {
29+
color: rgba(201 , 127 , 176 ,1);
30+
/* color:black; */
31+
animation: animate1 6s ease-in-out infinite;
32+
}
33+
34+
@keyframes animate {
35+
0%,
36+
100% {
37+
clip-path: polygon(
38+
0% 45%,
39+
15% 44%,
40+
32% 50%,
41+
54% 60%,
42+
70% 61%,
43+
84% 59%,
44+
100% 52%,
45+
100% 100%,
46+
0% 100%
47+
);
48+
}
49+
50% {
50+
clip-path: polygon(
51+
0% 60%,
52+
16% 65%,
53+
34% 66%,
54+
51% 62%,
55+
67% 50%,
56+
84% 45%,
57+
100% 46%,
58+
100% 100%,
59+
0% 100%
60+
);
61+
}
62+
}
63+
64+
@keyframes animate1 {
65+
0%,
66+
100% {
67+
clip-path: polygon(
68+
0% 60%,
69+
16% 65%,
70+
34% 66%,
71+
51% 62%,
72+
67% 50%,
73+
84% 45%,
74+
100% 46%,
75+
100% 100%,
76+
0% 100%
77+
);
78+
}
79+
50% {
80+
clip-path: polygon(
81+
0% 45%,
82+
15% 44%,
83+
32% 50%,
84+
54% 60%,
85+
70% 61%,
86+
84% 59%,
87+
100% 52%,
88+
100% 100%,
89+
0% 100%
90+
);
91+
}
92+
}
93+
94+
95+
@media screen and (max-width: 1440px) {
96+
.content h1 {
97+
font-size: 22rem;
98+
}
99+
}
100+
101+
@media screen and (max-width: 1200px) {
102+
.content h1 {
103+
font-size: 16rem;
104+
}
105+
}
106+
107+
@media screen and (max-width: 860px) {
108+
.content h1 {
109+
font-size: 14rem;
110+
}
111+
}
112+
@media screen and (max-width: 750px) {
113+
.content h1 {
114+
font-size: 11rem;
115+
}
116+
}
117+
@media screen and (max-width: 600px) {
118+
.content h1 {
119+
font-size: 8rem;
120+
}
121+
}
122+
@media screen and (max-width: 450px) {
123+
.content h1 {
124+
font-size: 6rem;
125+
}
126+
}
127+
@media screen and (max-width: 350px) {
128+
.content h1 {
129+
font-size: 4rem;
130+
}
131+
}

‎src/Components/timer.jsx

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,29 +42,29 @@ export default function Timer() {
4242
const { days, hours, minutes, seconds } = timeRemaining;
4343

4444
return (
45-
<div className="flex flex-row w-4/6 h-full justify-between pt-14 max-w-5xl">
45+
<div className="flex flex-row w-3/6 h-full justify-between pt-14 max-w-3xl">
4646
<div className="">
47-
<span className="flex flex-col w-24 h-24 justify-center border-2 border-dayColor rounded-md ">
48-
<p className="text-black flex justify-center text-lg md:text-3xl lg:text-4xl xl:text-5xl">{days}</p>
49-
<p className="text-black flex justify-center">Days</p>
47+
<span className="flex flex-col w-24 h-24 justify-center border-2 bg-dayColor rounded-md">
48+
<p className="text-white flex justify-center text-lg md:text-3xl lg:text-4xl xl:text-5xl">{days}</p>
49+
<p className="text-white flex justify-center">Days</p>
5050
</span>
5151
</div>
5252
<div>
53-
<span className="flex flex-col w-[100px] h-[100px] justify-center border-2 border-hourColor rounded-md">
54-
<p className="text-WHITE flex justify-center text-lg md:text-3xl lg:text-4xl xl:text-5xl">{hours}</p>
53+
<span className="flex flex-col w-24 h-24 justify-center border-2 bg-hourColor rounded-md">
54+
<p className="text-white flex justify-center text-lg md:text-3xl lg:text-4xl xl:text-5xl">{hours}</p>
5555
<p className="text-white flex justify-center">Hours</p>
5656
</span>
5757
</div>
5858
<div>
59-
<span className="flex flex-col w-24 h-24 justify-center border-2 border-minuteColor rounded-md">
59+
<span className="flex flex-col w-24 h-24 justify-center border-2 bg-minuteColor rounded-md">
6060
<p className="text-white flex justify-center text-lg md:text-3xl lg:text-4xl xl:text-5xl">{minutes}</p>
6161
<p className="text-white flex justify-center">Minutes</p>
6262
</span>
6363
</div>
6464
<div>
65-
<span className="flex flex-col w-24 h-24 justify-center border-2 border-secondColor rounded-md">
66-
<p className="text-black flex justify-center text-lg md:text-3xl lg:text-4xl xl:text-5xl">{seconds}</p>
67-
<p className="text-black flex justify-center">Seconds</p>
65+
<span className="flex flex-col w-24 h-24 justify-center border-2 bg-secondColor rounded-md">
66+
<p className="text-white flex justify-center text-lg md:text-3xl lg:text-4xl xl:text-5xl">{seconds}</p>
67+
<p className="text-white flex justify-center">Seconds</p>
6868
</span>
6969
</div>
7070
</div>

‎src/Pages/home.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ export default function Home() {
1515
</div>
1616
<div className="w-full flex flex-col h-2/6">
1717
<div className="flex flex-col w-full items-center">
18-
<p className="text-WHITE text-lg md:text-3xl lg:text-4xl xl:text-5xl pt-6">India's biggest student driven hackathon</p>
19-
<p className="text-WHITE text-lg md:text-3xl lg:text-4xl xl:text-5xl">happening in</p>
18+
<p className="text-WHITE text-lg md:text-3xl lg:text-4xl xl:text-5xl pt-6 text-black">India's biggest student driven hackathon</p>
19+
<p className="text-WHITE text-lg md:text-3xl lg:text-4xl xl:text-5xl text-black">happening in</p>
2020
</div>
2121
<div className="h-full flex justify-center">
2222
<Timer />

‎tailwind.config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ export default {
77
theme: {
88
extend: {
99
colors:{
10-
'secondColor': '#DD6843',
10+
'secondColor': '#DF6E47',
1111
'minuteColor': '#F5AEDD',
12-
'hourColor': '#61D290',
13-
'dayColor': '#61D290',
12+
'hourColor': '#90C280',
13+
'dayColor': '#FDDE56',
1414
},
1515
},
1616
// fontSize: {

0 commit comments

Comments
 (0)