Skip to content

Commit 8291fd0

Browse files
GeylanKalafMoheGeylanKalafMohe
committed
finished website
0 parents  commit 8291fd0

12 files changed

+181
-0
lines changed

‎.gitignore

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Avoid accidental upload of the Sketch and Figma design files
2+
#####################################################
3+
## Please do not remove lines 5 and 6 - thanks! 🙂 ##
4+
#####################################################
5+
*.sketch
6+
*.fig
7+
8+
# Avoid accidental XD upload if you convert the design file
9+
###############################################
10+
## Please do not remove line 12 - thanks! 🙂 ##
11+
###############################################
12+
*.xd
13+
14+
# Avoid your project being littered with annoying .DS_Store files!
15+
.DS_Store
16+
.prettierignore

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2024 Geylan Kalaf Mohe
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# QR code component
2+
3+
This is a a simple website that shows a QR code component.
4+
5+
## Table of contents
6+
7+
- [Overview](#overview)
8+
- [Screenshot](#screenshot)
9+
- [Links](#links)
10+
- [My process](#my-process)
11+
- [Built with](#built-with)
12+
- [Author](#author)
13+
14+
## Overview
15+
16+
### Screenshot
17+
18+
![](./screenshot.jpg)
19+
20+
### Links
21+
22+
- Live Site URL: [Qr Code Website](https://geylankalafmohe.github.io/web-qr-code/)
23+
24+
## My process
25+
26+
### Built with
27+
28+
- Semantic HTML5 markup
29+
- CSS global variables for fonts and colors
30+
- Web-first workflow
31+
32+
## Author
33+
34+
- LinkedIn - [Geylan Kalaf Mohe](https://sa.linkedin.com/in/geylan-kalaf-mohe-1366a220b)

‎design/desktop-design.jpg

24.1 KB
Loading

‎design/mobile-design.jpg

24.5 KB
Loading

‎images/favicon-32x32.png

1.04 KB
Loading

‎images/image-qr-code.png

5.1 KB
Loading

‎index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
6+
7+
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
8+
9+
<title>Frontend Mentor | QR code component</title>
10+
11+
<link rel="preconnect" href="https://fonts.googleapis.com">
12+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13+
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap" rel="stylesheet">
14+
<link rel="stylesheet" href="./styles/styles.css">
15+
</head>
16+
<body>
17+
18+
<main id="qr-card">
19+
<img src="./images/image-qr-code.png" alt="Qr code image">
20+
<div id="qr-card-details">
21+
<h1>Improve your front-end skills by building projects</h1>
22+
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
23+
</div>
24+
</main>
25+
26+
</body>
27+
</html>

‎preview.jpg

33.1 KB
Loading

‎screenshot.jpg

54.3 KB
Loading

‎style-guide.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Front-end Style Guide
2+
3+
## Layout
4+
5+
The designs were created to the following widths:
6+
7+
- Mobile: 375px
8+
- Desktop: 1440px
9+
10+
> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.
11+
12+
## Colors
13+
14+
- White: hsl(0, 0%, 100%)
15+
16+
- Slate 300: hsl(212, 45%, 89%)
17+
- Slate 500: hsl(216, 15%, 48%)
18+
- Slate 900: hsl(218, 44%, 22%)
19+
20+
## Typography
21+
22+
### Body Copy
23+
24+
- Font size (paragraph): 15px
25+
26+
### Font
27+
28+
- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
29+
- Weights: 400, 700

‎styles/styles.css

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
body {
2+
--color-slate-900: rgb(31, 49, 79);
3+
--color-slate-500: rgb(104, 119, 141);
4+
--color-slate-300: rgb(213 225, 239);
5+
6+
--spacing-500: 40px;
7+
--spacing-300: 24px;
8+
--spacing-200: 16px;
9+
10+
--text-preset-1: normal bold 22px/1.2 "Outfit", sans-serif;
11+
--text-preset-2: normal 400 15px/1.4 "Outfit", sans-serif;
12+
13+
background-color: var(--color-slate-300);
14+
margin: 0;
15+
display: flex;
16+
justify-self: center;
17+
align-items: center;
18+
min-height: 100vh;
19+
}
20+
21+
#qr-card {
22+
max-width: 20rem;
23+
padding: var(--spacing-200) var(--spacing-200) var(--spacing-500)
24+
var(--spacing-200);
25+
background-color: white;
26+
filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.0477));
27+
border-radius: 20px;
28+
margin: auto;
29+
text-align: center;
30+
}
31+
32+
#qr-card img {
33+
max-width: 100%;
34+
border-radius: 10px;
35+
vertical-align: top;
36+
}
37+
38+
#qr-card-details {
39+
padding: 0 var(--spacing-200);
40+
}
41+
42+
#qr-card-details h1 {
43+
font: var(--text-preset-1);
44+
color: var(--color-slate-900);
45+
margin-top: var(--spacing-300);
46+
margin-bottom: var(--spacing-200);
47+
}
48+
49+
#qr-card-details p {
50+
font: var(--text-preset-2);
51+
color: var(--color-slate-500);
52+
margin-bottom: 0;
53+
letter-spacing: 0.2px;
54+
}

0 commit comments

Comments
 (0)