Hugging Face's logo

Spaces:
AstraOS
/
learning
Running

App Files Community
AstraOS commited on
Commit
7b712e0
·
verified ·
1 Parent(s): ded7cac

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +158 -154
style.css CHANGED
@@ -1,154 +1,158 @@
1
- body{
2
- color: cornsilk;
3
- background-color: black;
4
- font-size: x-large;
5
- margin-left: 0.5em;
6
- margin-right: 0.5em;
7
- }
8
-
9
- header{
10
- color: khaki;
11
- font-size: 2em;
12
- text-align: justify;
13
- }
14
- .Heading{
15
- color: coral;
16
- font: 4em sans-serif;
17
- font-style: italic;
18
- text-align: center;
19
- }
20
- strong{
21
- color: burlywood;
22
- font-family: monospace;
23
- text-decoration: underline;
24
- font-size: xx-large;
25
- }
26
- .Description, main{
27
- font-size: 30px;
28
- text-indent: 1em;
29
- }
30
-
31
- .gallery{
32
-
33
- /* margin: 4px; */
34
- opacity: 80%;
35
- outline: auto;
36
- border-radius: 16px;
37
- cursor: pointer;
38
- width: 100%;
39
- transition: opacity 0.3s ease;
40
-
41
-
42
- display: block;
43
- margin-bottom: 16px;
44
- }
45
-
46
- .image-container{
47
- columns: 250px;
48
-
49
- margin-right: 32px;
50
- margin-left: 32px;
51
- }
52
-
53
- img:hover {
54
- opacity: 1;
55
-
56
- }
57
-
58
- .circle-container {
59
- display: flex;
60
- justify-content: center;
61
- align-items: center;
62
- }
63
-
64
- .webp {
65
- display: block;
66
- width: 300px;
67
- margin-left: -60px;
68
- border-radius: 150px;
69
- outline: auto;
70
- }
71
-
72
- footer{
73
- background-color:coral;
74
- text-align: center;
75
- font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
76
- font-style: italic;
77
- outline: auto;
78
- border-radius: 10px;
79
- }
80
-
81
- iframe{
82
- background-color: cadetblue;
83
- border-radius: 20px;
84
- width: 100%;
85
- height: 100vh;
86
- border: none;
87
- }
88
-
89
- #last{
90
- padding-top: 1em;
91
- }
92
-
93
- /* -------------------------------- Responsive adjustments -----------------------*/
94
-
95
- /* Default (mobile first) — up to 540px */
96
- @media (max-width: 540px) {
97
- /* --------------------------- */
98
-
99
- .webp:nth-child(3) {
100
- margin-left: 0;
101
- }
102
- /* ----------------------------- */
103
- .webp.first {
104
- display: none;
105
- }
106
- .webp.second {
107
- display: none;
108
- }
109
- .webp.third {
110
- display: block;
111
- }
112
- }
113
-
114
- /* Medium screens — 541px to 768px */
115
- @media (min-width: 541px) and (max-width: 768px) {
116
- /* --------------------------- */
117
-
118
- .webp:nth-child(2) {
119
- margin-left: 0;
120
- }
121
- /* ----------------------------- */
122
- .webp.first {
123
- display: none;
124
- }
125
- .webp.second {
126
- display: block;
127
- }
128
- .webp.third {
129
- display: block;
130
- }
131
- }
132
-
133
- /* Large screens — 769px and up */
134
- @media (min-width: 769px) {
135
- /* --------------------------- */
136
-
137
- .webp:nth-child(1) {
138
- margin-left: 0;
139
- }
140
- /* ----------------------------- */
141
-
142
- .webp.first {
143
- display: block;
144
- }
145
- .webp.second {
146
- display: block;
147
- }
148
- .webp.third {
149
- display: block;
150
- }
151
- }
152
-
153
-
154
-
 
 
 
 
 
1
+ body{
2
+ color: cornsilk;
3
+ background-color: black;
4
+ font-size: x-large;
5
+ margin-left: 0.5em;
6
+ margin-right: 0.5em;
7
+ }
8
+
9
+ header{
10
+ color: khaki;
11
+ font-size: 2em;
12
+ text-align: justify;
13
+ }
14
+ .Heading{
15
+ color: coral;
16
+ font: 4em sans-serif;
17
+ font-style: italic;
18
+ text-align: center;
19
+ }
20
+ strong{
21
+ color: burlywood;
22
+ font-family: monospace;
23
+ text-decoration: underline;
24
+ font-size: xx-large;
25
+ }
26
+ .Description, main{
27
+ font-size: 30px;
28
+ text-indent: 1em;
29
+ }
30
+
31
+ .gallery{
32
+
33
+ /* margin: 4px; */
34
+ opacity: 80%;
35
+ outline: auto;
36
+ border-radius: 16px;
37
+ cursor: pointer;
38
+ width: 100%;
39
+ transition: opacity 0.3s ease;
40
+
41
+
42
+ display: block;
43
+ margin-bottom: 16px;
44
+ }
45
+
46
+ .image-container{
47
+ columns: 250px;
48
+
49
+ margin-right: 32px;
50
+ margin-left: 32px;
51
+ }
52
+
53
+ img:hover {
54
+ opacity: 1;
55
+
56
+ }
57
+
58
+ .circle-container {
59
+ display: flex;
60
+ justify-content: center;
61
+ align-items: center;
62
+ }
63
+
64
+ .webp {
65
+ display: block;
66
+ width: 300px;
67
+ margin-left: -60px;
68
+ border-radius: 150px;
69
+ outline: auto;
70
+ }
71
+
72
+ footer{
73
+ background-color:coral;
74
+ text-align: center;
75
+ font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
76
+ font-style: italic;
77
+ outline: auto;
78
+ border-radius: 10px;
79
+ }
80
+
81
+ iframe{
82
+ background-color: cadetblue;
83
+ border-radius: 20px;
84
+ width: 100%;
85
+ height: 100vh;
86
+ border: none;
87
+ }
88
+
89
+ li{
90
+ overflow: hidden
91
+ }
92
+
93
+ #last{
94
+ padding-top: 1em;
95
+ }
96
+
97
+ /* -------------------------------- Responsive adjustments -----------------------*/
98
+
99
+ /* Default (mobile first) — up to 540px */
100
+ @media (max-width: 540px) {
101
+ /* --------------------------- */
102
+
103
+ .webp:nth-child(3) {
104
+ margin-left: 0;
105
+ }
106
+ /* ----------------------------- */
107
+ .webp.first {
108
+ display: none;
109
+ }
110
+ .webp.second {
111
+ display: none;
112
+ }
113
+ .webp.third {
114
+ display: block;
115
+ }
116
+ }
117
+
118
+ /* Medium screens — 541px to 768px */
119
+ @media (min-width: 541px) and (max-width: 768px) {
120
+ /* --------------------------- */
121
+
122
+ .webp:nth-child(2) {
123
+ margin-left: 0;
124
+ }
125
+ /* ----------------------------- */
126
+ .webp.first {
127
+ display: none;
128
+ }
129
+ .webp.second {
130
+ display: block;
131
+ }
132
+ .webp.third {
133
+ display: block;
134
+ }
135
+ }
136
+
137
+ /* Large screens — 769px and up */
138
+ @media (min-width: 769px) {
139
+ /* --------------------------- */
140
+
141
+ .webp:nth-child(1) {
142
+ margin-left: 0;
143
+ }
144
+ /* ----------------------------- */
145
+
146
+ .webp.first {
147
+ display: block;
148
+ }
149
+ .webp.second {
150
+ display: block;
151
+ }
152
+ .webp.third {
153
+ display: block;
154
+ }
155
+ }
156
+
157
+
158
+