Submitted over 2 years ago

Responsive QR code Scanning page

Mathanraj T•60

@mathanraj0601

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there any improvement needed in my solution kindly let me know. I am open to feedback and learning. Thank you:)

Community feedback

Shashree Samuel•9,260
@shashreesamuelPosted over 2 years ago
Good job with this challenge, keep up the good work.

Pertaining to your issues.

The rel unit for your favicon should be shortcut-icon

You just need to specify the value for the height and width without including the units when stating the sizing in the image tag.

specify the language of the document by typing the lang attribute in the <html> tag.

I hope this helps

Cheers Happy coding 👍
0
Mathanraj T•60
@mathanraj0601Posted over 2 years ago
@TheCoderGuru Thank you:). Its helps me in improving as i move towards future challenge.
1

Naveen Gumaste•10,480

@NaveenGumastePosted 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

@mathanraj0601Posted 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,480

@NaveenGumastePosted over 2 years ago

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

Mathanraj T•60

@mathanraj0601Posted 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;
}

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord