diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/README.md b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/README.md index 970d1d0..41ca86a 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/README.md +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/README.md @@ -33,7 +33,7 @@ Users should be able to: Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it. -Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. +Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it. Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. @@ -41,8 +41,8 @@ Then crop/optimize/edit your image however you like, add it to your project, and ### Links -- Solution URL: [Add solution URL here](https://your-solution-url.com) -- Live Site URL: [Add live site URL here](https://your-live-site-url.com) +- Solution URL: [Github](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/skilled-elearning-landing-page) +- Live Site URL: [tarasis.github.io](https://tarasis.github.io/FrontendMentor/newbie/skilled-elearning-landing-page/) ## My process diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css index d8a93fa..9b6cc39 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/css/styles.css @@ -14,6 +14,63 @@ } :root { + /* Colors */ + --col-medium-purple: hsla(234, 25%, 52%, 1); + --col-dark-purple: hsla(234, 53%, 16%, 1); + --col-light-purple: hsla(233, 10%, 56%, 1); + + --col-hot-pink: hsla(341, 92%, 62%, 1); + --col-light-pink: hsla(341, 100%, 83%, 1); + + --col-white: hsla(0, 0%, 100%, 1); + + --col-orange-to-pink: linear-gradient(180deg, #ff6f48 0.04%, #f02aa6 100%); + --col-purple-to-pink: linear-gradient(180deg, #4851ff 0%, #f02aa6 99.92%); + + --col-orange-to-pink-hover: linear-gradient( + 0deg, + rgba(255, 255, 255, 0.5), + rgba(255, 255, 255, 0.5) + ), + linear-gradient(180deg, #ff6f48 0%, #f02aa6 100%); + --col-purple-to-pink-hover: linear-gradient( + 0deg, + rgba(255, 255, 255, 0.5), + rgba(255, 255, 255, 0.5) + ), + linear-gradient(180deg, #4851ff -54.32%, #f02aa6 100%); + + /* Typography */ + --fs-heading-xl: 3.5rem; + --lh-heading-xl: 71px; + --fw-headings: 800; + + --fs-heading-l: 2.5rem; + --lh-heading-l: 3.1875rem; + + --fs-heading-m: 2rem; + --lh-heading-m: 2.5rem; + + --fs-heading-s: 1.5rem; + --lh-heading-s: 1.75rem; + + --fs-body-m: 1.125rem; + --lh-body-m: 1.75rem; + --fw-body-m: 500; + + --fs-body-s: 1rem; + --lh-body-s: 1.625rem; /* design system says 28px / 1.75rem, but in the elements themselves its 26px / 1.625rem */ + --fw-body-s: 700; + /* Sizing */ + + --border-radius: 1.75rem; + + /* Other */ +} + +body { + min-height: 100vh; + font-family: "Plus Jakarta Sans", sans-serif; } @media screen and (min-width: 768px) { diff --git a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html index b784ece..c1cb744 100644 --- a/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html +++ b/projects/FrontendMentor/newbie/skilled-elearning-landing-page/index.html @@ -1,52 +1,105 @@ + - + + + + + + + Frontend Mentor | Skilled e-learning landing page + - Get Started +
+ skilled logo + Get Started +
- Maximize skill, minimize budget - Our modern courses across a range of in-demand skills will give you the - knowledge you need to live the life you want. +
+
+

Maximize skill, minimize budget

+

+ Our modern courses across a range of in-demand skills will give you the + knowledge you need to live the life you want. +

- Get Started + Get Started - Check out our most popular courses! + + + + - Animation - Learn the latest animation techniques to create stunning motion - design and captivate your audience. - Get Started +
- Design - Create beautiful, usable interfaces to help shape the future of - how the web looks. - Get Started +
- Photography - Explore critical fundamentals like lighting, composition, and focus - to capture exceptional photos. - Get Started +

Check out our most popular courses!

- Crypto - All you need to know to get started investing in crypto. Go from beginner - to advanced with this 54 hour course. - Get Started +
+ +

Animation

+

+ Learn the latest animation techniques to create stunning motion design and captivate your audience. +

+ Get Started +
- Business - A step-by-step playbook to help you start, scale, and sustain your business - without outside investment. - Get Started +
+ +

Design

+

+ Create beautiful, usable interfaces to help shape the future of how the web looks. +

+ Get Started +
- Get Started +
+ +

Photography

+

+ Explore critical fundamentals like lighting, composition, and focus to capture exceptional photos. +

+ Get Started +
+ +
+ +

Crypto

+

+ All you need to know to get started investing in crypto. Go from beginner to advanced with this 54 hour + course. +

+ Get Started +
+ +
+ +

Business

+

+ A step-by-step playbook to help you start, scale, and sustain your business without outside investment. +

+ Get Started +
+ +
+
+ + + \ No newline at end of file