├── images └── image-qr-code.png ├── index.html └── styles.css /images/image-qr-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mondher0/QR-code-component/bc65884996c6b07d3031906206de102b2c6442ce/images/image-qr-code.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Qr Code Component 10 | 11 | 12 | 13 |
14 | 15 |

Improve Your Front-End Skills By Building Projects

16 |

Scan your Qr code to visite Front-End Mentor and take your coding skills to the next level

17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: hsl(220, 15%, 55%); 3 | font-family: "Outfit", sans-serif; 4 | display: flex; 5 | height: 500px; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | .qrcode { 10 | display: flex; 11 | flex-direction: column; 12 | justify-content: center; 13 | align-items: center; 14 | justify-items: center; 15 | width: 250px; 16 | background-color: white; 17 | border-radius: 10px 10px 10px 10px; 18 | 19 | } 20 | .qrcode img { 21 | margin-top: 10px; 22 | width: 90%; 23 | border-radius: 10px 10px 10px 10px; 24 | 25 | } 26 | .qrcode h2{ 27 | font-size: 17px; 28 | width: 90%; 29 | text-align: center; 30 | margin-bottom: 0; 31 | 32 | } 33 | .qrcode p { 34 | font-size: 13px; 35 | color: gray; 36 | width: 90%; 37 | text-align: center; 38 | margin-bottom: 50px; 39 | } 40 | /* @media (max-width: 1000px) { 41 | .qrcode { 42 | width: 40%; 43 | } 44 | } */ --------------------------------------------------------------------------------