Skip to content

Commit 8c8bc18

Browse files
tirtharajsinhatirtharajsinha
authored
adding html file along with css & js
1 parent 2bc2641 commit 8c8bc18

19 files changed

+780
-0
lines changed

‎css_effect/login.css‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
box-sizing: border-box;
5+
font-family: 'Poppins',sans-serif;
6+
}
7+
8+
section{
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
min-height: 100vh;
13+
background: linear-gradient(-25deg, #03a9f4 0%, #3a78b7 50%, #262626 50%, #607d8d 100%);
14+
filter:hue-rotate(120deg);
15+
animation: animate 10s linear infinite;
16+
}
17+
@keyframes animate {
18+
0%{
19+
filter: hue-rotate(0deg);
20+
}
21+
100%{
22+
filter: hue-rotate(360deg);
23+
}
24+
}
25+
26+
.box{
27+
position: relative;
28+
padding:50px;
29+
width:360px;
30+
height: 480px;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
background: rgba(255,255,255,0.1);
35+
border-radius: 6px;
36+
box-shadow: 0 5px 35px rgba(0,0,0,0.2);
37+
}
38+
39+
.box::after{
40+
content:'';
41+
position: absolute;
42+
top: 5px;
43+
left: 5px;
44+
right: 5px;
45+
bottom: 5px;
46+
border-radius: 5px;
47+
pointer-events: none;
48+
background: linear-gradient(to bottom,rgba(255,255,255,0.3) 0%,rgba(255,255,255,0.1) 15%, transparent 50%, transparent 85%, rgba(255,255,255,0.3) 100%);
49+
}
50+
51+
.box .form
52+
{
53+
position: relative;
54+
width: 100%;
55+
}
56+
.box .form h2
57+
{
58+
color: white;
59+
font-weight: 600;
60+
letter-spacing: 2px;
61+
margin-bottom: 30px;
62+
}
63+
64+
.box .form .inputBx{
65+
position: relative;
66+
width: 100%;
67+
margin-bottom: 20px;
68+
69+
}
70+
71+
.box .form .inputBx input{
72+
width: 100%;
73+
outline: none;
74+
border:1px solid rgba(255,255,255,0.2);
75+
background: transparent;
76+
padding: 8px 10px;
77+
padding-left: 35px;
78+
border-radius: 6px;
79+
color:white;
80+
font-size: 16px;
81+
font-weight: 300;
82+
box-shadow: inset 0 0 25px rgba(0,0,0,0.2);
83+
}
84+
85+
86+
.box .form .inputBx input ::placeholder
87+
{
88+
color: white;
89+
}
90+
91+
.box .form .inputBx input[type="submit"]{
92+
background: white;
93+
color: black;
94+
max-width: 100px;
95+
padding: 8px 10px;
96+
box-shadow: none;
97+
font-weight: 500;
98+
letter-spacing: 1px;
99+
cursor: pointer;
100+
}
101+
102+
.box .form .inputBx img{
103+
position: absolute;
104+
top:10px;
105+
left: 10px;
106+
transition: scale(0.7);
107+
filter: invert(1);
108+
}
109+
110+
.remeber{
111+
position:relative;
112+
display: inline-block;
113+
color:white;
114+
font-weight: 300;
115+
margin-bottom: 10px;
116+
cursor: pointer;
117+
}
118+
119+
120+
.box .form p{
121+
color:white;
122+
font-weight: 300;
123+
font-size: 15px;
124+
margin-top: 5px;
125+
}
126+
127+
.box .form a{
128+
color:white;
129+
}
130+
.box .form a:hover{
131+
color:purple;
132+
}

‎css_effect/login.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>login</title>
6+
<link rel="stylesheet" href="login.css">
7+
</head>
8+
<body>
9+
<section>
10+
<div class="box">
11+
<div class="form">
12+
<h2>Login</h2>
13+
<form class="" action="login.html" method="post" enctype="multipart/form-data">
14+
<div class="inputBx">
15+
<input type="text" name="username" placeholder="Username" required>
16+
<img src="static/user.png" alt="">
17+
</div>
18+
<div class="inputBx">
19+
<input type="password" name="passward" placeholder="Passward" required>
20+
<img src="static/lock.png" alt="">
21+
</div>
22+
<label class="remeber"><input type="checkbox"> Remember Me</label>
23+
<div class="inputBx">
24+
<input type="submit" name="submit" value="Login">
25+
</div>
26+
</form>
27+
<p>Forget <a href="#">Passward</a> </p>
28+
<p>Need for a <a href="#">Account</a> </p>
29+
30+
</div>
31+
32+
</div>
33+
</section>
34+
35+
</body>
36+
</html>

‎css_effect/scroll.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
body{
2+
margin:0;
3+
padding:0;
4+
5+
}
6+
section{
7+
position:relative;
8+
width: 100%;
9+
height: 100vh;
10+
display:flex;
11+
align-items: center;
12+
background: black;
13+
color:white;
14+
15+
16+
}
17+
18+
section .content h2{
19+
position: relative;
20+
margin: 0;
21+
padding: 0;
22+
display: inline-block;
23+
font-size: 3em;
24+
transition: 0.5s;
25+
}

‎css_effect/scroll.html‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>scroll</title>
6+
7+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
8+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
9+
</head>
10+
<body>
11+
12+
<div data-aos="fade-right">
13+
<h2>hi,this is Tirtharaj Sinha</h2>
14+
15+
</div>
16+
17+
<script>
18+
AOS.init();
19+
</script>
20+
</body>
21+
</html>

‎css_effect/shape.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
.hex {
2+
height: 50vh;
3+
overflow: hidden;
4+
background: linear-gradient(18deg, #e37682,
5+
#a58fe9);
6+
display: flex;
7+
flex-wrap: wrap;
8+
justify-content: space-evenly;
9+
align-items: center;
10+
top:100px;
11+
}
12+
13+
.hexagon-wrapper {
14+
margin-top:100px;
15+
display: flex;
16+
text-align: initial;
17+
width: 200px;
18+
height: 200px;
19+
cursor: pointer;
20+
21+
}
22+
23+
.hexagon {
24+
position: relative;
25+
width: 46%;
26+
height: 80%;
27+
margin: auto;
28+
color: white;
29+
background: linear-gradient(-180deg, white, #fda3b2);
30+
display: flex;
31+
align-content: center;
32+
justify-content: center;
33+
transition: 0.5s;
34+
35+
}
36+
37+
.hexagon i {
38+
z-index: 1;
39+
margin: auto;
40+
font-size: 20px;
41+
color: transparent;
42+
background: linear-gradient(45deg, #a58fe9, #e37682);
43+
background-clip: text;
44+
-webkit-background-clip: text;
45+
}
46+
47+
.hexagon:before,
48+
.hexagon:after {
49+
position: absolute;
50+
content: "";
51+
background: inherit;
52+
height: 100%;
53+
width: 100%;
54+
border-radius: 0;
55+
transition: 0.5s;
56+
transform-origin: center;
57+
}
58+
.hexagon:before {
59+
transform: rotateZ(60deg);
60+
}
61+
.hexagon:after {
62+
transform: rotateZ(-60deg);
63+
}
64+
.hexagon:hover {
65+
border-radius: 50px;
66+
transition: 0.5s;
67+
}
68+
.hexagon:hover:before {
69+
border-radius: 50px;
70+
transition: 0.5s;
71+
}
72+
.hexagon:hover:after {
73+
border-radius: 50px;
74+
transition: 0.5s;
75+
}
76+
.hexa-position1{
77+
top: 10vh;
78+
left: 1%;
79+
}
80+
.hexa-position2{
81+
top: 30vh;
82+
left: 3%;
83+
}
84+
.hexa-position3{
85+
top: 10vh;
86+
left: 5%;
87+
}
88+
.hexa-position4{
89+
top: 30vh;
90+
left: 7%;
91+
}

‎css_effect/shape.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>shape</title>
6+
<link rel="stylesheet" href="shape.css">
7+
</head>
8+
<body>
9+
<div class="hex">
10+
<div class="hexagon-wrapper hexa-position1">
11+
<div class="hexagon">
12+
<i class="fab fa-facebook"></i>
13+
</div>
14+
</div>
15+
<div class="hexagon-wrapper">
16+
<div class="hexagon">
17+
<i class="fab fa-twitter">highjkfghj</i>
18+
19+
20+
</div>
21+
</div>
22+
<div class="hexagon-wrapper">
23+
<div class="hexagon">
24+
<i class="fab fa-instagram"></i>
25+
</div>
26+
</div>
27+
<div class="hexagon-wrapper">
28+
<div class="hexagon">
29+
<i class="fab fa-google"></i>
30+
</div>
31+
</div>
32+
</div>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)