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.
This is a project to test beginner level skills in Css and HTML. It is a component that can be re-used in future projects.
- Solution URL: Add solution URL here
- Live Site URL: Add live site URL here
- I created a grid with three columns and one row
- I then placed the main container in the second column to keep it centered on the page
- The image was nested in the main container, in a seperate container ๐
- text paragraphs was placed in another div, also inside the main container.
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Css for styling
- Centering a div using Css grid
<div class="grid-container">
<div class="main-container"></div>
</div>
.grid-container{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 5px;
margin-top: 10%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 10%;
place-items: center;
}
.main-container{
border-radius: 15px 15px 15px 15px;
border: 1px solid hsl(0, 0%, 100%);
display: inline-block;
width: 250px;
grid-column-start: 2;
background-color: hsl(0, 0%, 100%);
}
- Css grid and styling
- Centering a Div ๐ค - surprising, i know
- Website - Aromi Benard
- Frontend Mentor - @aromibenard