dannybdev.tngl.sh
Test Profile
1:root {
2 --blue: #2c4c5c;
3 --gray: #b8bfc1;
4 --yellow: #f3e308;
5 --lightBlue: #6c8494;
6 --yellowGreen: #9cac54;
7 --lightGreen: #97cd97;
8 --hackerGreen: #70ffaf;
9 --blue: #a7f0dd;
10 --white: #f4fcfb;
11 --black: #000000;
12
13 /*Margins*/
14 --margin-PC: 8rem;
15 --margin-Tablet: 6rem;
16 --margin-Phone: 4rem;
17 /*Breakpoints*/
18 --BreakL: 1328px;
19 --BreakM: 900px;
20 --BreakS: 600px;
21}
22
23* {
24 margin: 0;
25 padding: 0;
26 box-sizing: border-box;
27 scroll-behavior: smooth;
28}
29
30body {
31 background: var(--white);
32 transition: 0.3s;
33 font-family: "Slabo 13px", serif;
34 font-style: normal;
35}
36
37span {
38 color: var(--white);
39}
40#Blog {
41 display: flex;
42 flex-direction: column;
43 justify-content: center;
44}
45
46.Blog-Heading {
47 text-align: center;
48 background-color: var(--blue);
49 color: var(--yellow);
50 transform: skew(14deg);
51 width: 70%;
52 padding: 0 2rem;
53 margin: 0 auto;
54 margin-top: var(--margin-Phone);
55 font-size: 1.5rem;
56
57 @media (min-width: 900px) {
58 margin-bottom: var(--margin-Tablet);
59 font-size: 3.04rem;
60 max-width: none;
61 }
62}
63
64.Blog-Text {
65 line-height: 1.5rem;
66 text-align: center;
67 display: inline-block;
68 max-width: 300px;
69 margin: 0 auto;
70 margin-bottom: var(--margin-Phone);
71
72 @media (min-width: 900px) {
73 margin-bottom: var(--margin-Tablet);
74 font-size: 1.6rem;
75 margin-inline: auto;
76 line-height: 2.2rem;
77 max-width: 400px;
78 }
79}
80
81.Blog-Container {
82 display: block;
83 margin: auto;
84 margin-bottom: var(--margin-Phone);
85
86 @media (min-width: 900px) {
87 display: flex;
88 justify-content: center;
89 align-items: center;
90 max-width: 84rem;
91 }
92}
93
94.Blog-Card {
95 padding: 3rem;
96 box-shadow: 3.4px 6.9px 6.9px hsl(0deg 0% 0% / 0.39);
97 margin-bottom: 2rem;
98 border: 2px solid black;
99 width: 19rem;
100 background-color: white;
101
102 @media (min-width: 900px) {
103 width: auto;
104 margin-right: 0.5rem;
105 margin-left: 0.5rem;
106 }
107
108 @media (min-width: 1328px) {
109 margin-right: 2rem;
110 width: auto;
111 }
112}
113
114.Blog-Highlight {
115 margin-bottom: 1rem;
116 margin-left: 1rem;
117}
118
119.Blog-Span {
120 background-color: var(--yellow);
121 color: var(--black);
122 box-shadow:
123 1.5em 0 0 var(--yellow),
124 -1.5em 0 0 var(--yellow);
125 border-radius: 30px;
126 font-size: 0.875rem;
127
128 @media (min-width: 900px) {
129 font-size: 1.2rem;
130 }
131}