CREATE A QR CARD COMPONENT
To create a simple QR code component, we will use: HTML and CSS ONLY!
Today, we will be building a responsive QR component using Flexbox and the BEM method for our HTML and CSS structure.
Here is what we will be building today:

Index
1 – Create Folder Structure
2 – BEM Tutorials
3 – Create Markup (HTML) BEM Structure
4 – Create CSS
5 – GitHub Repo
6 – Conclusion
1 – Create Folder Structure
Create Folder Structure
I like to have my website structure nice and organized. To do this, I create separate folders for my stylesheet and my scripts. Since this tutorial won’t cover JavaScript or jQuery, we will just have one folder for our CSS under my dev folder.
Here is how I like to setup my folder structure:

2 – BEM Tutorials
I won’t cover BEM, but there are fantastic resources you can use to get more info on this standard.
BEM Tutorials
Check out the following BEM tutorials:


3 – Create Markup (HTML) BEM Structure
We will be creating our markup using the BEM naming standard. If you do not know what BEM is, it’s a simple, but simple and great way to create a naming convention for your Classes and IDs.
Create Markup for BEM
Ron The Web Dev | QR code component
Improve your front-end
skills by building projects!
4 – Create CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--White: hsl(0, 0%, 100%);
--LightGray: hsl(212, 45%, 89%);
--GrayishBlue: hsl(220, 15%, 55%);
--DarkBlue: hsl(218, 44%, 22%);
}
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap");
body {
background-color: var(--LightGray);
font-family: "Outfit", sans-serif;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
main {
display: flex;
justify-content: center;
align-items: center;
margin: 40px 0 0 0;
}
.card {
background-color: var(--White);
border-radius: 14px;
margin: 20px 0 0 0;
}
.card__qr__wrapper {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.card__qr {
border-radius: 14px;
width: 90%;
}
.card__text__wrapper__heading {
text-align: center;
font-size: 38px;
margin: 40px 0 40px 0;
}
.card__text__wrapper__paragraph {
color: var(--GrayishBlue);
font-size: 16px;
text-align: center;
display: block;
margin: 10%;
}
footer {
text-align: center;
margin: 40px 0 0 0;
}
footer a {
color: hsl(228, 45%, 44%);
}
@media screen and (max-width: 375px) {
main {
width: 80%;
}
.card__qr {
width: 100%;
}
.card__text__wrapper__heading {
font-size: 18px;
margin: 0;
}
footer {
font-size: 12px;
margin: 40px 0 40px 0;
}
}
4 – Conclusion
Hey! I appreciate you stopping by and checking out our blog! If you’re looking for a personal or business website, contact us today and let us know how we can help! Give us a call, or email us using our contact form here: !
Please connect with us on social media here: https://www.creatiquemedia.com/#contact
CreatiqueMedia LLC
- Facebook: https://www.facebook.com/creatiquemediallc
- Twitter: https://twitter.com/creatiquemedia1
- GitHub: https://github.com/CreatiqueMedia
- CodePen: https://codepen.io/creatiquemedia
Ron The Web Dev
- Facebook: https://www.facebook.com/RonTheWebDev