This is a solution to the Testimonials grid section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: https://www.frontendmentor.io/solutions/testimonialsgridsectionmain-SJKLuSrUc
- Live Site URL: https://pharaohmak.github.io/testimonials-grid-section-main/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
this challenge helped me practice my skills with css and css grid to design moderate layouts.
:root {
--moderate-violet: hsl(263, 55%, 52%);
--very-dark-grayish-blue: hsl(217, 19%, 35%);
--very-dark-blackish-blue: hsl(219, 29%, 14%);
--white: hsl(0, 0%, 100%);
--light-gray: hsl(0, 0%, 81%);
--light-grayish-blue: hsl(210, 46%, 95%);
}
body {
height: 100vh;
width: auto;
font-size: 13px;
font-family: 'Barlow Semi Condensed', sans-serif;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "card";
height: auto;
grid-auto-flow: auto;
}
.card {
grid-area: card;
}
.card {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-areas: "daniel daniel johnathan kira" "jeanette patrick patrick kira ";
grid-gap: 1em;
justify-content: space-evenly;
margin: 180px;
background-color: whitesmoke;
padding: 10em;
}
.daniel {
grid-row: 1/3;
grid-column: 1/3;
background-color: var(--moderate-violet);
border-radius: 12px;
color: white;
}
I plan to continue my skills in css grid, flexbox, and mobile first development.
- Website - Makram Ibrahim
- Frontend Mentor - @pharaohmak
- Twitter - @pharaohmak