diff --git a/QR-Code-Component/.gitignore b/QR-Code-Component/.gitignore new file mode 100644 index 0000000..d13464a --- /dev/null +++ b/QR-Code-Component/.gitignore @@ -0,0 +1,16 @@ +# Avoid accidental upload of the Sketch and Figma design files +##################################################### +## Please do not remove lines 5 and 6 - thanks! 🙂 ## +##################################################### +*.sketch +*.fig + +# Avoid accidental XD upload if you convert the design file +############################################### +## Please do not remove line 12 - thanks! 🙂 ## +############################################### +*.xd + +# Avoid your project being littered with annoying .DS_Store files! +.DS_Store +.prettierignore \ No newline at end of file diff --git a/QR-Code-Component/css/style.css b/QR-Code-Component/css/style.css new file mode 100644 index 0000000..f79f6eb --- /dev/null +++ b/QR-Code-Component/css/style.css @@ -0,0 +1,92 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --White: hsl(0, 0%, 100%); + --LightGray: hsl(212, 45%, 89%); + --GrayishBlue: hsl(220, 15%, 55%); + --DarkBlue: hsl(218, 44%, 22%); +} + +@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap"); + +body { + background-color: var(--LightGray); + font-family: "Outfit", sans-serif; + font-size: 16px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +main { + display: flex; + justify-content: center; + align-items: center; + margin: 40px 0 0 0; +} + +.card { + background-color: var(--White); + border-radius: 14px; + margin: 20px 0 0 0; +} + +.card__qr__wrapper { + display: flex; + justify-content: center; + align-items: center; + margin: 20px; +} + +.card__qr { + border-radius: 14px; + width: 90%; +} + +.card__text__wrapper__heading { + text-align: center; + font-size: 38px; + margin: 40px 0 0 0; +} + +.card__text__wrapper__paragraph { + color: var(--GrayishBlue); + font-size: 16px; + text-align: center; + display: block; + margin: 10%; +} + +footer { + text-align: center; + margin: 40px 0 0 0; +} + +footer a { + color: hsl(228, 45%, 44%); +} + +@media screen and (max-width: 375px) { + main { + width: 80%; + } + + .card__qr { + width: 100%; + } + + .card__text__wrapper__heading { + font-size: 18px; + margin: 0; + } + + footer { + font-size: 12px; + margin: 40px 0 40px 0; + } +} diff --git a/QR-Code-Component/images/favicon-32x32.png b/QR-Code-Component/images/favicon-32x32.png new file mode 100644 index 0000000..1e2df7f Binary files /dev/null and b/QR-Code-Component/images/favicon-32x32.png differ diff --git a/QR-Code-Component/images/image-qr-code.png b/QR-Code-Component/images/image-qr-code.png new file mode 100644 index 0000000..2e0095a Binary files /dev/null and b/QR-Code-Component/images/image-qr-code.png differ diff --git a/QR-Code-Component/index.html b/QR-Code-Component/index.html new file mode 100644 index 0000000..2e9e086 --- /dev/null +++ b/QR-Code-Component/index.html @@ -0,0 +1,43 @@ + + + + + + + + + Ron The Web Dev | QR code component + + + + + +
+
+
+ +
+
+

+ Improve your front-end
skills by building projects! +

+

+ Scan the QR code to visit Frontend Mentor and take your coding + skills to the next level +

+
+
+
+ + +