-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaboutme.css
127 lines (106 loc) · 3.14 KB
/
aboutme.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Borel&family=Bungee&family=Bungee+Spice&family=Nabla&family=Playfair+Display+SC&family=Press+Start+2P&family=Reenie+Beanie&family=Rock+Salt&family=Rubik+80s+Fade&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto:700');
@import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Rock+Salt&display=swap'); /* Rock salt */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Concert+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Covered+By+Your+Grace&display=swap');
.vision{
display: flex;
align-items: center;
justify-content: center;
place-items: center;
font-family: 'Courier New', Courier, monospace;
padding-top: 1rem;
}
.about-myself{
padding-top: 5rem;
padding-bottom: 3rem;
}
.profilepic{
border-radius: 25% 10%;
/* height: 260px;
width: 325px; */
object-fit: cover;
width: 300px;
height: 310px;
outline: 5px solid #f3e6fb; /* Add an outline with a width of 5px and black color */
}
.text-back{
font-family: "Concert One", sans-serif;
font-weight: 400;
color: white;
font-size: 25px;
}
.before-hello{
font-family: "Covered By Your Grace", cursive;
font-weight: 400;
font-style: normal;
text-decoration: underline;
color: #f3e6fb;
}
.first, .second, .third {
font-family: "Concert One", sans-serif;
font-weight: 100;
font-style: normal;
}
body {
font-family: "Reenie Beanie";
background-color: #131417;
}
p {
text-shadow: 0 0 7px rgba(255,255,255,.3), 0 0 3px rgba(255,255,255,.3);
}
.container {
color: #e5e5e5;
font-size: 2.26rem;
text-transform: uppercase;
/*height: 100vh; */
display: flex;
/* align-items: center;
justify-content: center;
*/
}
.animation {
height: 60px;
overflow:hidden;
margin-left: 1rem;
}
.animation > div > div {
padding: 0.25rem 0.75rem;
height:3.30rem;
margin-bottom: 2.81rem;
display:inline-block;
}
.animation div:first-child {
animation: text-animation 8s infinite;
}
.first div {
background-color:#20a7d8;
border-radius: 25px;
}
.second div {
background-color:#CD921E;
border-radius: 25px;
}
.third div {
background-color:#c10528;
border-radius: 25px;
}
@keyframes text-animation {
0% {margin-top: 0;}
10% {margin-top: 0;}
20% {margin-top: -5.62rem;}
30% {margin-top: -5.62rem;}
40% {margin-top: -11.24rem;}
60% {margin-top: -11.24rem;}
70% {margin-top: -5.62rem;}
80% {margin-top: -5.62rem;}
90% {margin-top: 0;}
100% {margin-top: 0;}
}