This is a solution to the Huddle landing page with curved sections 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
- See hover states for all interactive elements on the page
- HTML
- CSS
- JavaScript
- Flexbox
- CSS Grid
- Font Awesome for icons Font Awesome
I thoroughly enjoyed this challenge 😅
This was my first time using CSS Grid, i've been wanting to experiment with it so learnt it whilst building this landing page. As well as getting stuck in with a responsive design from desktop to mobile was a great challenge.
Below is some of my CSS Grid code
.grid {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin: 0 10%;
column-gap: 5%;
}
.inner-grid {
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 80%;
color: var(--VeryDarkCyan)
}
Below was my first time validating an email input form by JavaScript
function buttonValidation(email) {
let element = document.getElementById("subscribe-form");
let elementError = document.getElementById("email-error")
let emailFormat = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (email.value.match(emailFormat)) {
return true;
} else {
element.classList.add("invalid");
elementError.classList.add("email-error");
document.subscribe.email.focus();
return false;
}
}
- Website - Made by Willo
- Frontend Mentor - @Louise-Ann93
- Dev.to - @louise-ann93