This project is solely for learning purposes. I take no any responsibility or liability for the accuracy, completeness, or usefulness of any information provided in this project. You should not use it as a reference for creating your project.
I am currently no longer working on this project.
This time, there was no active-states preview for the links on header. So, I created my own active-states.
If you see the mobile design and compare it to the desktop design, you will see that the .hero__title has different font family.
<h1 class="hero__title">
All your files in one secure location, accessible anywhere.
</h1>I changed the color of bg-curve from #F8F8FE to #f6f6fe, so it has the same color as the background color of the next section.
On mobile design, the productive__description has desaturated blue color, but on desktop design it has very dark blue. So, I chose to make it very dark blue color.
If you see the mobile design then you may notice that See how Fylo works link is on the center. But, for an unknown reason, the productive__link doesn't want to go to the center even though I already tried a couple things like using flexbox and text-align: center.
I know that I can make it center by wrapping the link with div, then using absolute positioning on the link and make top: 50% and left: 50%, after that I add transform: translate(50%, 50%). But, seriously?! It's too overkill in my opinion. So, I'm just leave as it is, since on the big screen it doesn't need to be in the center. It's also make the layout looks consistent.
The original quotes icon images/icon-quotes.svg does not look similar as the design, so I downloaded another quotes icon from Flaticon which looks more similar to the design.
The style-guide.md said that you only need an Open Sans font family with 400 weights only. But when I see Kyle Burton text, it needs Open Sans font family with 700 weights.
When I started building the mobile layout, I realized that the layout on mobile design wasn't consistent. This section had less width than the other section. So, I didn't follow the mobile design, I was just using the same .container as the other section had. That way, the layout is always consistent even in mobile devices 👍.
For the footer, I use grid to make them three columns on desktop view. I also make the social media circle bigger than the design. It's also an accessibility, to make sure that they are easy to click by the user.
- Using
rel="preload"andfont-display: optionalto prevent shifting layout on font family. But I usedfont-display: swapsince if you import it usinglinktags, there is this&display=swap. - I learned that using
woff2font format is better than usingttf. The reason for that is becausewoff2has smaller file size which is equal to better performance. - I learned that
imgmust havewidthandheightattributes to prevent jumping layout. - I also found out a link that explain, why you need
role="contentinfo"onfooter. The link in Useful Resources section.
This project is created using HTML5, CSS3, and Sass.
I used one of the form features from Netlify which Forms Spam Filters, using Honeypot field.
I also used Mailgo, which is a light JavaScript library for mailto and tel. It will give you a nice popup for every mailto and tel link.