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 --teal: #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
41.Projects-Heading {
42 display: flex;
43 background-color: var(--blue);
44 transform: skew(14deg);
45 width: 100%;
46 padding: 0 2rem;
47}
48
49#Websites {
50 display: flex;
51 align-items: center;
52 flex-direction: column;
53}
54
55.Websites-Title {
56 margin-top: 2rem;
57 margin-bottom: var(--margin-Phone);
58 font-size: 21px;
59}
60
61@media (min-width: 600px) {
62 .Websites-Title {
63 font-size: 2.5rem;
64 }
65}
66
67@media (min-width: 1328px) {
68 .Websites-Title {
69 margin: 4rem 0;
70 font-size: 45px;
71 padding-left: 2rem;
72 }
73}
74
75/*// Projects //*/
76
77.Grid-Container {
78 display: grid;
79 grid-template-columns: 2fr;
80 column-gap: 2rem;
81 row-gap: 1.2rem;
82}
83
84@media (min-width: 1328px) {
85 .Grid-Container {
86 grid-template-columns: 1fr 1fr;
87 }
88}
89
90.Card {
91 border: 4px solid var(--blue);
92 border-radius: 20px;
93 padding: 1rem;
94 text-align: center;
95 transition: transform 0.3s ease;
96 margin-bottom: var(--margin-Phone);
97 z-index: 10;
98}
99
100@media (min-width: 600px) {
101 .Card {
102 margin-bottom: var(--margin-Tablet);
103 }
104}
105
106.Card:hover p {
107 color: black;
108}
109
110.Card:hover {
111 transform: scale(1.05);
112}
113
114.Card-Title {
115 text-decoration: none;
116 font-size: 16px;
117 font-weight: bold;
118 color: var(--purple);
119 transition: color 0.3s;
120}
121
122@media (min-width: 900px) {
123 .Card-Title {
124 font-size: 24px;
125 margin: 0.5rem 0;
126 }
127}
128
129a:link,
130p:visited,
131p:hover,
132p:active {
133 text-decoration: none;
134 color: inherit;
135}
136
137.Card-Image {
138 height: 8rem;
139 object-fit: cover;
140 transition: 0.3s ease;
141}
142
143@media (min-width: 600px) {
144 .Card-Image {
145 height: 15rem;
146 }
147}
148
149@media (min-width: 1328px) {
150 .Card-Image {
151 height: 16rem;
152 }
153}
154
155.Card-Image:hover {
156 color: var(--beige);
157}