Frontend Mentor | Responsive QR code Scanning page coding challenge solution

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hello Mathanraj T ! Congo 👏 on completing this challenge

Let's look at some of your issues, shall we:

Consider using h2-h6 elements to add identifying headings to all sections.

happy Coding😀

Mathanraj T• 60

@mathanraj0601

Posted over 2 years ago

@Crazimonk It's really helps in Moving forward, Thank you:) could you explain where can i add Heading element in the challenge as i found there is no heading in the preview? I little bit cofused

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

@mathanraj0601 If you can show me your code then i can tell you

Mathanraj T• 60

@mathanraj0601

Posted over 2 years ago

@Crazimonk <!DOCTYPE html>

<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Scan QR code</title> <link rel="stylesheet" type="text/css" href="index.css"> <link rel="icons" type="image/x-icon" href="./images/favicon-32x32.png"> <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@400;700&display=swap" rel="stylesheet"> </head> <body> <main> <section id="qr-block"> <img id="qr-image" src="./images/image-qr-code.png" height="285px" width="285px" alt="QrR code for the frontend mentor website"> <p id="qr-para1"> Improve your front-end skills by building projects </p> <p id="qr-para2"> Scan the QR code to visit Frontend Mentor and take your coding skills to the next level </p> </section> </main> <footer > <p id="footer-para"> Challenge by <a href="https://www.frontendmentor.io/home">Frontend Mentor</a>. Coded by <a href="https://github.com/mathanraj0601">Mathanraj T </a>. </p> </footer> </body> </html>

*
{
    font-family: 'Outfit', sans-serif;
	padding: 0;
	margin: 0;
}
body
{
	width: 100vw;
	height: 100vh;
	background-color:hsl(212, 45%, 89%) ;
	
}
main{
	width: 100%;
	height: 95%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
#qr-block
{
	height: auto;
	width: 305px;
	background-color: hsl(0, 0%, 100%) ;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 15px;

	box-shadow: 0px 5px 15px hsl(212, 45%, 89%) ;
}
#qr-image
{
	border-radius: 15px;
}
#qr-para1
{
	text-align: center;
	margin: 10px;

	padding: 10px;
	font-size: 20px;
	font-weight: 700;
	color:  hsl(218, 44%, 22%);
}
#qr-para2
{
	text-align: center;
	margin: 10px;
	margin-bottom: 20px;
	font-size: 15px;
	font-weight: 400;
	color: hsl(220, 15%, 55%);
}
#footer-para
{
	font-weight: 700;
	color:  hsl(218, 44%, 22%);
	font-size: 15px;
	padding: 10px;
	text-align: center;
}
a{
	text-decoration: none;
}
a:hover
{
	text-decoration: underline;
}

Responsive QR code Scanning page

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community