Skip to content

Commit 409d785

Browse files
nishachawla2004nishachawla2004
authored
Add files via upload
1 parent 121efd1 commit 409d785

File tree

3 files changed

+167
-0
lines changed

3 files changed

+167
-0
lines changed

‎Css Animations/Job-card 3d/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Job card</title>
9+
<link rel="stylesheet" href="style.css">
10+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
11+
</head>
12+
13+
<body>
14+
<div class="container">
15+
16+
<div class="front-face">
17+
18+
<div class="cover">
19+
20+
<img src="p.jpg" class="profile">
21+
</div>
22+
23+
<div class="name">Nisha</div>
24+
25+
<div class="tag">Front-End Developer</div>
26+
27+
<p class="about">
28+
A computer science enthusiast with college project experiences in programming, machine learning, and
29+
data analysis looking to apply gained knowledge and skills in a short-term internship role in analytics,
30+
data, or research.
31+
</p>
32+
33+
</div>
34+
35+
<div class="back-face">
36+
37+
<h1>Job Description</h1>
38+
<p>
39+
Hard-working web developer with a flair for creating elegant solutions in the least amount of time.
40+
Developed an ecommerce webapp, customer web portal, documentary launch website, and donations webapp for
41+
a local charity. Passionate about software architecture and cloud computing. Regular attendee of web
42+
developer meetups and hackathons.
43+
</p>
44+
45+
<a href="https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
46+
<a href="https://github.com/"><i class="fa fa-github"></i></a>
47+
<a href="https://www.instagram.com/"><i class="fa fa-instagram"></i></a>
48+
<a href="https://www.linkedin.com/"><i class="fa fa-linkedin"></i></a>
49+
</div>
50+
</div>
51+
52+
53+
</body>
54+
55+
</html>

‎Css Animations/Job-card 3d/p.jpg

29.2 KB
Loading

‎Css Animations/Job-card 3d/style.css

+112
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
body {
2+
background: linear-gradient(75deg, #2980b9, #8e44ad);
3+
font-family: Arial;
4+
}
5+
6+
.profile {
7+
width: 115px;
8+
height: 115px;
9+
border-radius: 50%;
10+
padding: 5px;
11+
background: white;
12+
margin-top: 50px;
13+
}
14+
15+
.name {
16+
font-size: 30px;
17+
padding-top: 75px;
18+
font-family: Arial;
19+
}
20+
21+
.tag {
22+
padding: 5px 0;
23+
}
24+
25+
.about {
26+
margin-top: 10px;
27+
padding: 0px 35px;
28+
font-size: 15px;
29+
}
30+
31+
h1 {
32+
color: #0d0d0d;
33+
}
34+
35+
p {
36+
padding: 20px;
37+
color: #262626;
38+
text-align: justify;
39+
}
40+
41+
i {
42+
font-size: 25px;
43+
padding-left: 20px;
44+
cursor: poniter;
45+
}
46+
47+
i.fa-facebook-squre {
48+
padding-left: 0;
49+
color: #4267b2
50+
}
51+
52+
i.fa-twitter-squre {
53+
background-color: #38A1F3
54+
}
55+
56+
i.fa-instagram {
57+
color: #d72888
58+
}
59+
60+
i.fa-youtube {
61+
color: #eb1c14
62+
}
63+
64+
i.fa-linkedin {
65+
color: #0077B5
66+
}
67+
68+
.back-face {
69+
transform: perspective(800px) rotateY(-180deg);
70+
}
71+
72+
.front-face {
73+
transform: perspective(800px) rotateY(0deg);
74+
}
75+
76+
.container:hover>.back-face {
77+
transform: perspective(800px) rotateY(0deg);
78+
}
79+
80+
.container:hover>.front-face {
81+
transform: perspective(800px) rotateY(180deg);
82+
}
83+
84+
.container {
85+
position: absolute;
86+
top: 50%;
87+
left: 50%;
88+
transform: translate(-50%, -50%);
89+
height: 430px;
90+
width: 350px;
91+
text-align: center;
92+
border-radius: 5px;
93+
}
94+
95+
.front-face,
96+
.back-face {
97+
position: absolute;
98+
height: 100%;
99+
width: 100%;
100+
background: #ebf8f9;
101+
border-radius: 5px;
102+
backface-visibility: hidden;
103+
border: 0 2px 3px rgba(0, 0, 0, .2);
104+
transition: transform .5s linear;
105+
}
106+
107+
.cover {
108+
background: linear-gradient(75deg, #8e44ad, #2980b9);
109+
height: 115px;
110+
width: 100%;
111+
border-radius: 5px 5px 0 0;
112+
}

0 commit comments

Comments
 (0)