Final website for the fundamentals-module at Hyper Island
Hi, This is a beginner project i did at Hyper Island where im currently studiying to become a Front End Developer. This was about a 2 week project were we were assigned to create a 90s-styled webpage from scratch. For this project i put alot of effort into structuring my code, making sure its very readable with styles that are easily interchangeable by the use of Css and Sass variables.
-
Grid and Flex-box.
-
Sass variables, nesting, @imports and mixins.
-
BEM naming convention.
-
Mobile-first workflow
-
Responsiveness using fluid units.
-
Intergrate Parcel for better optimisation.
A bit of code using:
BEM naming-convention for class-names.
Sass-variables in nested @media-queries
set to the (Bootrap breakpoints-values).
Costum css-properties for easy accessibility and dry code.
//* Header
.site-header {
width: 100%;
z-index: 100;
position: sticky;
top: 0;
padding: 2rem 0;
background: var(--clr-blue);
}
.site-header__nav {
display: flex;
justify-content: end;
}
.site-header__menu {
display: none;
gap: var(--gap-md);
&--visable {
@media (min-width: variables.$breakpoint-md) {
display: flex;
}
}
}
💬 ask me about anything, i am happy to help