Skip to content

Commit 04025cf

Browse files
denetodevdenetodev
committed
Finalização do projeto
1 parent 10cec7f commit 04025cf

File tree

3 files changed

+88
-14
lines changed

3 files changed

+88
-14
lines changed

‎css/style.css

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");
2+
3+
:root {
4+
--white: hsl(0, 0%, 100%);
5+
--slate-300: hsl(212, 45%, 89%);
6+
--slate-500: hsl(216, 15%, 48%);
7+
--slate-900: hsl(218, 44%, 22%);
8+
}
9+
10+
body {
11+
background-color: var(--slate-300) !important;
12+
margin: 0;
13+
height: 100vh;
14+
display: flex;
15+
flex-direction: column;
16+
}
17+
18+
main {
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
24+
.card {
25+
background-color: var(--white);
26+
border: none !important;
27+
}
28+
29+
.card-title {
30+
font-family: "Outfit", sans-serif;
31+
font-size: 19px;
32+
font-weight: 700;
33+
font-style: normal;
34+
color: var(--slate-900) !important;
35+
}
36+
37+
.card-text {
38+
font-family: "Outfit", sans-serif;
39+
font-size: 13px;
40+
font-weight: 400;
41+
font-style: normal;
42+
color: var(--slate-500) !important;
43+
}
44+
45+
.outfit {
46+
font-family: "Outfit", sans-serif;
47+
font-optical-sizing: auto;
48+
font-weight: 700;
49+
font-style: normal;
50+
}
51+
52+
/* Footer */
53+
footer {
54+
font-size: 11px;
55+
text-align: center;
56+
padding: 10px;
57+
}
58+
59+
footer a {
60+
color: hsl(228, 45%, 44%);
61+
}

‎index.html

Lines changed: 27 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="stylesheet" href="style.css" />
6+
<link rel="stylesheet" href="css/style.css" />
77
<link
88
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
99
rel="stylesheet"
@@ -20,16 +20,36 @@
2020
<title>Frontend Mentor | QR code component</title>
2121
</head>
2222
<body>
23-
Improve your front-end skills by building projects Scan the QR code to visit
24-
Frontend Mentor and take your coding skills to the next level
23+
<main class="d-flex justify-content-center align-items-center vh-100">
24+
<div
25+
class="card text-center p-3 rounded-4 shadow-lg"
26+
style="width: 18rem"
27+
>
28+
<img
29+
src="images/image-qr-code.png"
30+
class="card-img-top rounded-3"
31+
alt="QR-code component"
32+
/>
33+
<div class="card-body">
34+
<h5 class="card-title">
35+
Improve your front-end skills by building projects
36+
</h5>
37+
<p class="card-text">
38+
Scan the QR code to visit Frontend Mentor and take your coding
39+
skills to the next level
40+
</p>
41+
</div>
42+
</div>
43+
</main>
2544

26-
27-
2845
<footer class="attribution">
2946
Challenge by
30-
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
47+
<a
48+
href="https://www.frontendmentor.io/learning-paths/getting-started-on-frontend-mentor-XJhRWRREZd/steps/66b5556445dac691039c60ca/challenge/submit"
49+
target="_blank"
3150
>Frontend Mentor</a
32-
>. Coded by <a href="#">Your Name Here</a>.
51+
>. Coded by
52+
<a href="https://github.com/deusdeteneto" target="_blank">Neto</a>.
3353
</footer>
3454

3555
<script

‎style.css

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)