Hugging Face's logo

Spaces:
Katsukii
/
Katsukii_Neko_Portfolio
Running

App Files Community
Katsukii commited on
Commit
95765bd
•
1 Parent(s): 5ab509d

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +114 -19
style.css CHANGED
@@ -1,28 +1,123 @@
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
+ body{
2
+ font-size: 1.5rem;
3
+ font-family: "Bebas Neue";
4
+ src: url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.eot");
5
+ src: url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.eot?#iefix")format("embedded-opentype"),
6
+ url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.woff2")format("woff2"),
7
+ url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.woff")format("woff"),
8
+ url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.ttf")format("truetype"),
9
+ url("https://db.onlinewebfonts.com/t/84df7d9c4993a8f1aa0aa40fcb53c8b5.svg#Azeret Mono Medium")format("svg");
10
+ src: url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.eot");
11
+ src: url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.eot?#iefix")format("embedded-opentype"),
12
+ url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.woff2")format("woff2"),
13
+ url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.woff")format("woff"),
14
+ url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.ttf")format("truetype"),
15
+ url("https://db.onlinewebfonts.com/t/96d722be8231ee4778d745667de1c5ca.svg#Bebas Neue")format("svg");
16
+ color: #45454D;
17
+ background-color: #fff;
18
+ }
19
+ header {
20
+ background-color: #5edfff;
21
+ padding: 10px 0;
22
+ text-align: center;
23
+ }
24
+
25
+ nav :hover{
26
+
27
+ cursor: pointer;
28
+ }
29
+
30
+ nav ul {
31
+ list-style: none;
32
+ padding: 0;
33
+ margin: 0;
34
+ }
35
+
36
+ nav ul li {
37
+ display: inline;
38
+ margin: 0 10px;
39
+ }
40
+
41
+ nav ul li a {
42
+ color: #2f6c87;
43
+ opacity: .85;
44
+ text-decoration: none;
45
+ font-weight: bold;
46
+ }
47
+
48
+ #hero {
49
+ text-align: center;
50
+ padding: 50px 0;
51
+ background-color: #b2fcff;
52
+ }
53
+
54
+ #hero h1 p {
55
+ margin: 0;
56
+ color: #144A61;
57
+ }
58
+
59
+
60
+ #portfolio {
61
+ display: flex;
62
+ flex-wrap: wrap;
63
+ justify-content: space-around;
64
  }
65
 
66
+ .portfolio-item {
67
+ margin: 10px;
68
+ text-align: center;
69
  }
70
 
71
+ #contact-form {
72
+ display: flex;
73
+ flex-direction: column;
74
+ max-width: 600px;
75
+ margin: 0 auto;
76
  }
77
 
78
+ .container{
79
+ text-align: center;
 
 
 
 
80
  }
81
 
82
+ .item{
83
+ width: 45rem;height: auto;
84
  }
85
+
86
+ #contact-form label {
87
+ margin-top: 10px;
88
+ }
89
+
90
+ #contact-form input, #contact-form textarea {
91
+ padding: 10px;
92
+ margin-top: 5px;
93
+ border: 1px solid #45454D;
94
+ border-radius: 5px;
95
+ }
96
+
97
+ #contact-form button {
98
+ margin-top: 10px;
99
+ padding: 10px;
100
+ border: none;
101
+ background-color: #FF4893;
102
+ color: #FFF1E9;
103
+ font-size: 16px;
104
+ cursor: pointer;
105
+ border-radius: 5px;
106
+ transition: background-color 0.2s
107
+ }
108
+
109
+ #contact-form button:hover {
110
+ background-color: #45454D;
111
+ }
112
+
113
+ footer {
114
+ margin-top: 2rem;
115
+ text-align: center;
116
+ padding: 1px 0;
117
+ border-radius: 10px;
118
+ background-color: #3e64ff;
119
+ color: #FFF1E9;
120
+ position: auto;
121
+ width: 100%;
122
+ bottom: 0;
123
+ }