Skip to content

Commit 17675f5

Browse files
LaaouatniLaaouatni
committed
FREECODECAMP PROJECTS LAAOUATNI
1 parent 10af35d commit 17675f5

File tree

11 files changed

+1977
-0
lines changed

11 files changed

+1977
-0
lines changed

‎Responsive-Web-Design-Projects/1-Build-a-Tribute-Page/Laaouatni-Anas.css‎

Lines changed: 317 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,317 @@
1+
html {
2+
scroll-behavior: smooth;
3+
font-family: 'Poppins', monospace;
4+
background-color: rgb(239, 251, 255);
5+
}
6+
7+
.TitleContainer {
8+
display: grid;
9+
justify-content: center;
10+
}
11+
12+
h1 {
13+
font-weight: bolder;
14+
}
15+
16+
#title {
17+
transition-duration: 0.3s;
18+
}
19+
20+
#title:hover {
21+
font-size: 3.5em;
22+
color: rgb(0, 123, 255);
23+
transition-duration: 0.3s;
24+
}
25+
26+
p {
27+
position: relative;
28+
font-weight: lighter;
29+
color: rgba(0, 0, 0, 0.6);
30+
}
31+
32+
a {
33+
text-decoration: none;
34+
}
35+
36+
u {
37+
color: rgba(0, 0, 0, 0.8);
38+
}
39+
40+
figcaption {
41+
position: relative;
42+
top: 2em;
43+
color: blue;
44+
font-size: 11px;
45+
opacity: 0;
46+
transition-duration: 0.6s;
47+
left: 40%;
48+
}
49+
50+
#image:hover+figcaption {
51+
opacity: 1;
52+
transition-duration: 1000ms;
53+
left: 0px;
54+
}
55+
56+
#img-div {
57+
display: grid;
58+
justify-content: center;
59+
}
60+
61+
#image {
62+
box-shadow: rgba(75, 102, 255, 0.1) 0px 0em 1em 1em;
63+
margin-bottom: 5px;
64+
border: 10px solid white;
65+
transition-duration: 0.5s;
66+
border-radius: 10%;
67+
}
68+
69+
#image:hover {
70+
transition-duration: 200ms;
71+
border: 1em solid white;
72+
box-shadow: rgba(0, 143, 253, 0.15) 0px 0em 1em 1em;
73+
border-radius: 50%;
74+
}
75+
76+
img {
77+
max-width: 100%;
78+
}
79+
80+
.org-link:hover,
81+
.org-link:hover::after {
82+
content: ".org";
83+
transition-duration: 0.4s;
84+
color: rgba(0, 13, 196, 0.919);
85+
}
86+
87+
#descriptionP:hover:not(.org-link) {
88+
color: rgba(0, 0, 0, 0.9);
89+
transition-duration: 0.4s;
90+
}
91+
92+
#descriptionP {
93+
bottom: 2em;
94+
font-weight: 500 !important;
95+
}
96+
97+
p::after,
98+
h1::after,
99+
figcaption::after {
100+
content: ".";
101+
}
102+
103+
figcaption::before {
104+
content: "- "
105+
}
106+
107+
.footer-icons {
108+
max-width: 40px;
109+
height: auto;
110+
margin-right: 10px;
111+
border-radius: 10%;
112+
transition-duration: 0.2s;
113+
}
114+
115+
.footer-icons:hover {
116+
transition-duration: 0.3s;
117+
transform: rotate(10deg)
118+
}
119+
120+
.footer-div {
121+
margin-top: 5em;
122+
display: flex;
123+
background-color: rgba(197, 239, 253, 0.804);
124+
width: 100%;
125+
padding: 1em;
126+
justify-items: center;
127+
position: fixed;
128+
left: 0;
129+
bottom: 0;
130+
align-items: center;
131+
}
132+
133+
.footer-text {
134+
margin-right: 3em;
135+
margin-left: 1em;
136+
bottom: 0em !important;
137+
font-size: 1.1em;
138+
font-weight: bold;
139+
color: rgba(0, 0, 255, 0.893);
140+
}
141+
142+
#tribute-info {
143+
margin-top: 3rem;
144+
margin-left: 5em;
145+
transition-duration: 0.3s;
146+
}
147+
148+
.periodo::before {
149+
content: "Completato in: ";
150+
opacity: 0.6;
151+
padding-right: 1em;
152+
font-weight: 300;
153+
}
154+
155+
.periodo::after {
156+
content: " giorni(circa).";
157+
opacity: 0.6;
158+
font-weight: 300;
159+
}
160+
161+
.periodo-giorno::before {
162+
content: "Completato in: ";
163+
opacity: 0.6;
164+
padding-right: 1em;
165+
font-weight: 300;
166+
}
167+
168+
.periodo-giorno::after {
169+
content: " giorno(circa).";
170+
opacity: 0.6;
171+
font-weight: 300;
172+
}
173+
174+
.inizio::before {
175+
content: "Iniziato il: ";
176+
opacity: 0.6;
177+
padding-right: 1em;
178+
font-weight: 300;
179+
}
180+
181+
.fine::before {
182+
content: "Completato il: ";
183+
opacity: 0.6;
184+
padding-right: 1em;
185+
font-weight: 300;
186+
}
187+
188+
.github::before {
189+
content: "repesitory Github: ";
190+
opacity: 0.6;
191+
padding-right: 1em;
192+
font-weight: 300;
193+
}
194+
195+
.github::after,
196+
.fine::after,
197+
.inizio::after {
198+
content: ".";
199+
opacity: 0.6;
200+
font-weight: 300;
201+
}
202+
203+
.important-items {
204+
padding-left: 1em;
205+
padding-right: 1em;
206+
padding-bottom: 0.5em;
207+
padding-top: 0.5em;
208+
margin: 0.5em;
209+
border-radius: 10px;
210+
background-color: rgba(0, 0, 255, 0.153);
211+
color: blue;
212+
transition-duration: 0.3s;
213+
font-weight: bold;
214+
}
215+
216+
summary {
217+
font-size: 1.5em;
218+
font-weight: bold;
219+
cursor: pointer;
220+
}
221+
222+
details:nth-last-of-type(1) {
223+
margin-bottom: 35%;
224+
}
225+
226+
.summary-container {
227+
position: relative;
228+
bottom: 0 !important;
229+
}
230+
231+
.link-underline {
232+
text-decoration: underline;
233+
}
234+
235+
@media(max-width:550px) {
236+
img {
237+
transition-duration: 0.2s;
238+
max-width: 80%;
239+
height: auto;
240+
margin: auto;
241+
}
242+
.footer-text {
243+
transition-duration: 0.2s;
244+
margin-right: 1em;
245+
font-size: small;
246+
margin-left: 0;
247+
;
248+
}
249+
#title:hover {
250+
font-size: 210%;
251+
}
252+
#tribute-info {
253+
margin-left: 3em !important;
254+
}
255+
.link-long {
256+
font-size: 0.8em;
257+
transition-duration: 0.2s;
258+
}
259+
}
260+
261+
@media (max-width:507px) {
262+
#tribute-info {
263+
margin-left: 1.5em !important;
264+
}
265+
}
266+
267+
@media (max-width:485px) {
268+
#tribute-info {
269+
margin-left: 0.7em !important;
270+
}
271+
summary {
272+
font-size: 1.2em !important;
273+
transition-duration: 0.3s;
274+
}
275+
}
276+
277+
@media (max-width: 400px) {
278+
.footer-text {
279+
transition-duration: 0.2s;
280+
font-size: 10px;
281+
margin-right: 10px;
282+
}
283+
}
284+
285+
@media (max-width:350px) {
286+
.footer-icons {
287+
transition-duration: 0.2s;
288+
width: 30px;
289+
height: auto;
290+
}
291+
}
292+
293+
@media (max-width: 315px) {
294+
.footer-text {
295+
transition-duration: 0.2s;
296+
display: none;
297+
}
298+
.footer-icons {
299+
transition-duration: 0.2s;
300+
margin-left: 1em;
301+
}
302+
}
303+
304+
@media (max-width: 150px) {
305+
h1 {
306+
overflow-x: scroll;
307+
}
308+
summary {
309+
overflow-x: scroll;
310+
}
311+
p {
312+
overflow-x: scroll;
313+
}
314+
.footer-div {
315+
overflow-x: scroll;
316+
}
317+
}

‎Responsive-Web-Design-Projects/1-Build-a-Tribute-Page/github-anas.jpg‎

878 KB
Loading

0 commit comments

Comments
 (0)