Skip to content

Commit 58fd7dc

Browse files
tirtharajsinhatirtharajsinha
authored
Add files via upload
1 parent 7b8f9c8 commit 58fd7dc

File tree

5 files changed

+256
-0
lines changed

5 files changed

+256
-0
lines changed

‎inspired/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
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+
<link rel="stylesheet" href="style.css" />
8+
<script src="script.js"></script>
9+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
10+
<link rel="preconnect" href="https://fonts.gstatic.com" />
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap"
13+
rel="stylesheet"
14+
/>
15+
<link
16+
rel="stylesheet"
17+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
18+
/>
19+
<title>Future</title>
20+
</head>
21+
<body>
22+
<div class="main">
23+
<div class="textbottom">
24+
<div class="left"></div>
25+
<div class="right">
26+
<div class="nev">
27+
<a href="#" class="active">HOME</a>
28+
<a href="#">ABOUT</a>
29+
<a href="#">SERVICE</a>
30+
<a href="#">CONTACT</a>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="magictext">
35+
<p class="left">#gr</p>
36+
<p class="right">een</p>
37+
</div>
38+
<div class="textbottom">
39+
<div class="left">
40+
<div class="datetime">
41+
<p class="time">
42+
<span class="mark">TIME</span><br />
43+
<span class="hour" id="hour"></span
44+
><span class="minute" id="minute"></span> <br />
45+
</p>
46+
<p class="date">
47+
<span class="day" id="day"></span>
48+
<span class="daydate" id="date"></span>
49+
<span class="month" id="month"></span>
50+
</p>
51+
</div>
52+
</div>
53+
<div class="right">
54+
<div class="social">
55+
<p>FOLLOW</p>
56+
<a href="#"><i class="fa fa-instagram w3-xlarge"></i></a>
57+
<a href="#"><i class="fa fa-youtube w3-xlarge"></i></a>
58+
<a href="#"><i class="fa fa-twitter w3-xlarge"></i></a>
59+
<a href="#"><i class="fa fa-linkedin w3-xlarge"></i></a>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</body>
65+
</html>

‎inspired/script.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
setInterval(() => {
2+
a=new Date();
3+
var min=a.getHours();
4+
if(min>12){
5+
min=min-12;
6+
}
7+
if(min==0){
8+
min=12;
9+
}
10+
else if(min<10){
11+
min="0"+min;
12+
}
13+
document.getElementById("hour").innerHTML=min
14+
document.getElementById("minute").innerHTML=":"+a.getMinutes();
15+
document.getElementById("date").innerHTML=String(a.getDate()).padStart(2, '0');
16+
var dd = a.getDay();
17+
var weekday = ['SUNDAY', 'MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
18+
document.getElementById("day").innerHTML=weekday[dd];
19+
var mm = a.getMonth();
20+
var month=["jan","feb","mar","apr","may","jun","jul","aug","sep","oct","nov","dec"]
21+
document.getElementById("month").innerHTML=month[mm];
22+
23+
}, 500);
24+

‎inspired/static/floral.jpg‎

101 KB
Loading

‎inspired/static/greenbg.jpg‎

405 KB
Loading

‎inspired/style.css‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
.main {
7+
width: 100%;
8+
9+
text-align: center;
10+
background-image: url(static/greenbg.jpg);
11+
background-repeat: repeat;
12+
overflow: hidden;
13+
}
14+
.magictext {
15+
display: flex;
16+
justify-content: center;
17+
font-size: 8vw;
18+
text-align: center;
19+
font-weight: bold;
20+
text-transform: uppercase;
21+
font-family: "Steelfish Rg", "helvetica neue", helvetica, arial, sans-serif;
22+
font-weight: 800;
23+
24+
overflow: hidden;
25+
}
26+
.magictext .left {
27+
display: inline;
28+
color: rgb(193, 221, 186);
29+
width: 50%;
30+
text-align: right;
31+
}
32+
.magictext .right {
33+
display: inline;
34+
position: relative;
35+
color: black;
36+
text-align: left;
37+
mix-blend-mode: lighten;
38+
background-color: rgb(193, 221, 186);
39+
text-shadow: 5px 2px 4px #a8a2a2;
40+
width: 50%;
41+
}
42+
.textbottom {
43+
width: 100%;
44+
display: flex;
45+
justify-content: center;
46+
background-color: transparent;
47+
height: 250px;
48+
overflow: hidden;
49+
}
50+
.textbottom .left {
51+
width: 50%;
52+
}
53+
.textbottom .right {
54+
width: 50%;
55+
/* mix-blend-mode: lighten; */
56+
background-color: rgb(193, 221, 186);
57+
}
58+
.nev a {
59+
text-decoration: none;
60+
color: rgb(101, 155, 101);
61+
font-weight: 900;
62+
font-size: 20px;
63+
transition: all 0.3s ease;
64+
border-bottom-width: 4px;
65+
}
66+
.nev {
67+
margin-top: 20px;
68+
width: 100%;
69+
display: flex;
70+
justify-content: space-evenly;
71+
font-size: 20px;
72+
color: greenyellow;
73+
}
74+
.nev .active {
75+
color: green;
76+
}
77+
.nev a:hover {
78+
border-bottom-style: double;
79+
color: teal;
80+
}
81+
.social a {
82+
text-transform: none;
83+
color: rgb(101, 155, 101);
84+
border-width: 0px;
85+
border-left-width: 2px;
86+
padding: 5px;
87+
transition: all 0.3s ease;
88+
}
89+
.social p {
90+
writing-mode: vertical-rl;
91+
color: teal;
92+
border-width: 0px;
93+
border-left-width: 2px;
94+
padding-bottom: 10px;
95+
transition: all 0.3s ease;
96+
font-size: 20px;
97+
letter-spacing: 1px;
98+
font-weight: 400;
99+
}
100+
.social {
101+
height: 150px;
102+
display: flex;
103+
/* margin-top: 100px; */
104+
flex-direction: column;
105+
position: relative;
106+
float: right;
107+
padding-right: 20px;
108+
}
109+
.social a:hover {
110+
border-left-style: solid;
111+
color: teal;
112+
}
113+
.datetime {
114+
float: left;
115+
padding-left: 20px;
116+
text-align: left;
117+
transition: all 0.2s ease;
118+
}
119+
.datetime .time {
120+
color: rgb(193, 221, 186);
121+
122+
font-size: 30px;
123+
}
124+
.time .hour {
125+
margin-right: 10px;
126+
font-size: 60px;
127+
font-weight: 900;
128+
}
129+
.time .minute {
130+
color: rgb(193, 221, 186);
131+
132+
font-size: 30px;
133+
}
134+
.time .mark {
135+
font-size: 20px;
136+
color: white;
137+
}
138+
.date .day {
139+
position: relative;
140+
top: -20px;
141+
writing-mode: vertical-rl;
142+
color: rgb(193, 221, 186);
143+
font-size: 20px;
144+
font-family: 400;
145+
border-left: 4px solid rgb(193, 221, 186);
146+
}
147+
.date .daydate {
148+
position: relative;
149+
top: -20px;
150+
font-family: "Steelfish Rg", "helvetica neue", helvetica, arial, sans-serif;
151+
/* color: rgba(255, 255, 255, 0.411); */
152+
font-size: 110px;
153+
font-weight: 900;
154+
background: linear-gradient(to top right, #ffffffc4 0%, #fcfcfc00 100%);
155+
-webkit-background-clip: text;
156+
-webkit-text-fill-color: transparent;
157+
}
158+
.date .month {
159+
position: relative;
160+
z-index: 100;
161+
top: -40px;
162+
left: -110px;
163+
color: rgb(255, 255, 255);
164+
font-family: "Dancing Script", cursive;
165+
font-size: 45px;
166+
font-weight: 900;
167+
}

0 commit comments

Comments
 (0)