This is a solution to the QR code component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
- Solution URL: Solution site
- Live Site URL: Live site
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
I'm implementing about the semantic component of HTML card with :
<!-- creating card section for container of the element -->
<div id="main-section">
<!-- creating the content wrapper, then put all element into this container -->
<div id="content">
<img src="/images/image-qr-code.png" alt="QR code image" />
<!-- this container should be positioning the box model of the card description -->
<div id="description">
<h1>Improve your front-end skills by building projects</h1>
<p>
Scan the QR code to visit Frontend Mentor and take your coding skills to
the next level
</p>
</div>
</div>
</div>/* creating the variable component for the color property */
html {
--color-white: hsl(0, 0%, 100%);
--color-light-gray: hsl(212, 45%, 89%);
--color-grayish-blue: hsl(220, 15%, 55%);
--color-dark-blue: hsl(218, 44%, 22%);
}- Frontend Mentor - @ddky16
- Twitter - @code_ddky