This is a solution to the Loopstudios landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Note: Delete this note and update the table of contents based on what sections you keep.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Solution URL: Source Code
- Live Site URL: Live Site
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
I decided to use this project to get a little more practice with the basics; Flexbox, CSS-Grid and responsive design. Always finding that spending so much time using react and css libraries/frameworks makes me feel like I'm relying too much on them and not really understanding or dulling my sense for the underlying tehnologies. Just a little sharpening of the basics is a necessity for me now and then. I realize I don't have some of these concepts down as much as I thought I did. I think
Tried to make a responsive grid thing based on a clip I saw on instagram. Happy with the results.
<div class="creations__grid">
<div class="creation c1">
<h2 class="creation__text">
Deep earth
</h2>
</div>
<div class="creation c2">
<h2 class="creation__text">
Night arcade
</h2>
</div>
<div class="creation c3">
<h2 class="creation__text">
Soccer team VR
</h2>
</div>
<div class="creation c4">
<h2 class="creation__text">
The grid
</h2>
</div>
<div class="creation c5">
<h2 class="creation__text">
From up above VR
</h2>
</div>
<div class="creation c6">
<h2 class="creation__text">
Pocket borealis
</h2>
</div>
<div class="creation c7">
<h2 class="creation__text">
The curiosity
</h2>
</div>
<div class="creation c8">
<h2 class="creation__text">
Make it fisheye
</h2>
</div>
</div>
THE GRID CONTAINER
.creations__grid{
display: grid;
grid-template-columns: repeat(4, minmax(auto,260px));
gap: 3.5em;
}
THE CARD
.creation{
grid-column-end: span 1;
height: 450px;
padding:2.25em;
position:relative;
display: flex;
flex-direction: column-reverse;
}
.creation:hover{
cursor: pointer;
}
CARD HOVER EFFECT
.creation::after{
content: "";
position: absolute;
left: 0;
top: 0;
height: 0;
width: 100%;
background-color:rgba(255, 255, 255, 0.8);
transform-origin: center;
transition: all .3s ease-in-out;
}
.creation:hover::after{
height:100%;
}
.creation:hover .creation__text{
transition: color .5s ease-out .3s;
color: var(--colors-very-dark-gray);
}
- Website - Portfolio
- Frontend Mentor - @blaqbox-prime
- Instagram -@ig_blaqbox.dev