add my files

mohaameed74 · Oct 3, 2023 · f32f1f3 · f32f1f3
1 parent 4d0c80a
commit f32f1f3
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 0 deletions.
diff --git a/images/favicon-32x32.png b/images/favicon-32x32.png
diff --git a/images/image-qr-code.png b/images/image-qr-code.png
diff --git a/index.html.html b/index.html.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>qr code</title>
+    <link rel="stylesheet" href="qr.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700&family=Work+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="qr-code">
+
+            <img src="images/image-qr-code.png" alt="">
+
+        <h3>improve your front-end skills by building projects</h3>
+
+<p>scan the qr code to visit front-end mentor and take your coding skills to the next level</p>
+
+    </div>
+</body>
+</html>
diff --git a/qr.css b/qr.css
@@ -0,0 +1,38 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: 'Outfit', sans-serif;
+font-family: 'Work Sans', sans-serif;
+box-sizing: border-box;
+}
+body { 
+    background-color: #d5e1ef;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+.qr-code {
+    width: 320px;
+    padding: 16px;
+    border-radius: 19px;
+    background-color: white;
+    box-shadow: 0 3px 15px 0px rgba(0, 0, 0, 0.2);
+}
+.qr-code img {
+    max-width: 100%;
+    border-radius: 10px;
+}
+h3 {
+    text-align: center;
+    margin: 20px 0;
+    font-size: 1.4rem;
+    color: #242c43;
+}
+p {
+    text-align: center;
+    margin-bottom: 20px;
+    color: #838792;
+}
+
+