Hugging Face's logo

Spaces:
Amrrs
/
portfolio
Running

App Files Community
Amrrs commited on
Commit
2cd8d91
•
1 Parent(s): d23fbb4

Upload style.css

Browse files
Files changed (1) hide show
  1. style.css +178 -16
style.css CHANGED
@@ -1,28 +1,190 @@
 
 
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
4
  }
5
 
6
  h1 {
7
- font-size: 16px;
8
- margin-top: 0;
 
 
 
 
 
 
 
 
 
 
9
  }
10
 
11
  p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html {
2
+ margin: 0;
3
+ padding: 0;
4
+ }
5
+
6
  body {
7
+ font-family: 'Bellota', cursive;
8
+ font-size: 26pt;
9
+ background-color: #f2f2f2;
10
+ padding: 20px;
11
+ margin: 0;
12
  }
13
 
14
  h1 {
15
+ font-size: 15pt;
16
+ color: #ffffff;
17
+ text-align: center;
18
+ padding: 18px 0 18px 0;
19
+ margin: 0 0 10px 0;
20
+ }
21
+
22
+ h1 span {
23
+ border: 8px solid #666666;
24
+ border-radius: 8px;
25
+ background-image: url("https://media.giphy.com/media/KVZWZQoS0yqfIiTAKq/giphy.gif");
26
+ padding: 12px;
27
  }
28
 
29
  p {
30
+ padding: 0;
31
+ margin: 0;
32
+ color: #000000;
 
33
  }
34
 
35
+ .img-circle {
36
+ border: 8px solid white;
37
+ border-radius: 50%;
 
 
 
38
  }
39
 
40
+ .section {
41
+ background-color: #fff;
42
+ padding: 20px;
43
+ margin-bottom: 10px;
44
+ border-radius: 30px;
45
  }
46
+
47
+ #header {
48
+ background-image: url("https://media.giphy.com/media/KVZWZQoS0yqfIiTAKq/giphy.gif");
49
+ background-size: cover;
50
+ }
51
+
52
+ #header img {
53
+ display: block;
54
+ width: 500px;
55
+ height: 500px;
56
+ margin: auto;
57
+ }
58
+
59
+ #header p {
60
+ font-size: 60pt;
61
+ color: #ffffff;
62
+ padding-top: 8px;
63
+ margin: 0;
64
+ font-weight: bold;
65
+ text-align: center;
66
+ }
67
+
68
+ .quote {
69
+ font-size: 12pt;
70
+ text-align: right;
71
+ margin-top: 10px;
72
+ color: grey;
73
+ }
74
+
75
+ #res {
76
+ text-align: center;
77
+ margin: 50px auto;
78
+ }
79
+
80
+ #res a {
81
+ margin: 20px 20px;
82
+ display: inline-block;
83
+ text-decoration: none;
84
+ color: black;
85
+ }
86
+
87
+ .selected {
88
+ background-color: #f36f48;
89
+ font-weight: bold;
90
+ color: white;
91
+ }
92
+
93
+ li {
94
+ margin-bottom: 15px;
95
+ font-weight: bold;
96
+ }
97
+
98
+ progress {
99
+ width: 70%;
100
+ height: 20px;
101
+ color: #3fb6b2;
102
+ background: #efefef;
103
+ }
104
+
105
+ progress::-webkit-progress-bar {
106
+ background: #efefef;
107
+ }
108
+
109
+ progress::-webkit-progress-value {
110
+ background: #3fb6b2;
111
+ }
112
+
113
+ progress::-moz-progress-bar {
114
+ color: #3fb6b2;
115
+ background: #efefef;
116
+ }
117
+
118
+ iframe,
119
+ audio {
120
+ display: block;
121
+ margin: 0 auto;
122
+ border: 3px solid #3fb6b2;
123
+ border-radius: 10px;
124
+ }
125
+
126
+ hr {
127
+ border: 0;
128
+ height: 1px;
129
+ background: #f36f48;
130
+ }
131
+
132
+ input {
133
+ text-align: center;
134
+ font-size: 25pt;
135
+ border: none;
136
+ border-radius: 12px;
137
+ padding: 30px 8%;
138
+ margin: 20px 5px 10px 5px;
139
+ background-color: #d7d7d7;
140
+ }
141
+
142
+ input:focus {
143
+ background-color: #2f2f2f;
144
+ color: white;
145
+ }
146
+
147
+ form {
148
+ text-align: center;
149
+ font-size: 30pt;
150
+ font-family: Helvetica;
151
+ font-weight: 500;
152
+ margin: 10% 15% 8% 15%;
153
+ border-radius: 12px;
154
+ }
155
+
156
+ #insta-image {
157
+ display: block;
158
+ width: 100px;
159
+ height: 100px;
160
+ border: 5px solid #d7d7d7;
161
+ border-radius: 50%;
162
+ margin: auto;
163
+ margin-top: -75px;
164
+ }
165
+
166
+ #contacts img {
167
+ height: 150px;
168
+ width: 150px;
169
+ margin-left: 7px;
170
+ margin-right: 7px;
171
+ }
172
+
173
+ #contacts a {
174
+ text-decoration: none;
175
+ }
176
+
177
+ #contacts img:hover {
178
+ opacity: 0.8;
179
+ }
180
+
181
+ #contacts {
182
+ text-align: center;
183
+ }
184
+
185
+ .copyright {
186
+ font-size: 8pt;
187
+ text-align: right;
188
+ padding-bottom: 10px;
189
+ color: grey;
190
+ }