├── .DS_Store ├── LICENSE ├── README.md ├── base-apparel-coming-soon-master ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── bg-pattern-desktop.svg │ ├── favicon-32x32.png │ ├── hero-desktop.jpg │ ├── hero-mobile.jpg │ ├── icon-arrow.svg │ ├── icon-error.svg │ └── logo.svg ├── index.html ├── script.js ├── style-guide.md └── style.css ├── clipboard-landing-page ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── bg-header-desktop.png │ ├── bg-header-mobile.png │ ├── favicon-32x32.png │ ├── icon-blacklist.svg │ ├── icon-facebook.svg │ ├── icon-instagram.svg │ ├── icon-preview.svg │ ├── icon-text.svg │ ├── icon-twitter.svg │ ├── image-computer.png │ ├── image-devices.png │ ├── logo-google.png │ ├── logo-hp.png │ ├── logo-ibm.png │ ├── logo-microsoft.png │ ├── logo-vector-graphics.png │ └── logo.svg ├── index.html ├── style-guide.md └── style.css ├── four-card-feature-section-master ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── favicon-32x32.png │ ├── icon-calculator.svg │ ├── icon-karma.svg │ ├── icon-supervisor.svg │ └── icon-team-builder.svg ├── index.html ├── style-guide.md └── style.css ├── fylo-landing-page ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── avatar-testimonial.jpg │ ├── bg-curve-desktop.svg │ ├── bg-curve-mobile.svg │ ├── favicon-32x32.png │ ├── icon-arrow.svg │ ├── icon-email.svg │ ├── icon-phone.svg │ ├── icon-quotes.svg │ ├── illustration-1.svg │ ├── illustration-2.svg │ ├── logo white.svg │ └── logo.svg ├── index.html ├── style-guide.md └── style.css ├── huddle-landing-page ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── bg-hero-desktop.svg │ ├── bg-hero-mobile.svg │ ├── favicon-32x32.png │ ├── icon-email.svg │ ├── icon-location.svg │ ├── icon-phone.svg │ ├── illustration-flowing-conversation.svg │ ├── illustration-grow-together.svg │ ├── illustration-mockups.svg │ ├── illustration-your-users.svg │ ├── logo white.svg │ └── logo.svg ├── index.html ├── style-guide.md └── style.css ├── huddle-simple-landing ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── bg-desktop.svg │ ├── bg-mobile.svg │ ├── favicon-32x32.png │ ├── illustration-mockups.svg │ └── logo.svg ├── index.html ├── style-guide.md └── style.css ├── index.html ├── insure-landing-page ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── mobile-design.jpg │ └── mobile-nav-design.jpg ├── images │ ├── bg-pattern-footer-desktop.svg │ ├── bg-pattern-footer-mobile.svg │ ├── bg-pattern-how-we-work-desktop.svg │ ├── bg-pattern-how-we-work-mobile.svg │ ├── bg-pattern-intro-left-desktop.svg │ ├── bg-pattern-intro-left-mobile.svg │ ├── bg-pattern-intro-right-desktop.svg │ ├── bg-pattern-intro-right-mobile.svg │ ├── bg-pattern-mobile-nav.svg │ ├── favicon-32x32.png │ ├── icon-affordable-prices.svg │ ├── icon-close.svg │ ├── icon-facebook.svg │ ├── icon-hamburger.svg │ ├── icon-instagram.svg │ ├── icon-people-first.svg │ ├── icon-pinterest.svg │ ├── icon-snappy-process.svg │ ├── icon-twitter.svg │ ├── image-intro-desktop.jpg │ ├── image-intro-mobile.jpg │ └── logo.svg ├── index.html ├── script.js ├── style-guide.md └── style.css ├── ping-coming-soon-page-master ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-hover-error-states.jpg │ ├── desktop-preview.jpg │ ├── mobile-design.jpg │ └── mobile-error-state.jpg ├── images │ ├── favicon-32x32.png │ ├── illustration-dashboard.png │ └── logo.svg ├── index.html ├── script.js ├── style-guide.md └── style.css ├── pricing-toggle-component ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design-annually.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ ├── mobile-design-annually.jpg │ └── mobile-design-monthly.jpg ├── images │ ├── bg-bottom.svg │ ├── bg-top.svg │ └── favicon-32x32.png ├── index.html ├── script.js ├── style-guide.md └── style.css ├── script.js ├── signup-form-master ├── .gitignore ├── README.md ├── design │ ├── active-states.jpg │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ ├── bg-intro-desktop.png │ ├── bg-intro-mobile.png │ ├── favicon-32x32.png │ └── icon-error.svg ├── index.html ├── script.js ├── style-guide.md └── style.css ├── single-price-grid-component-master ├── .gitignore ├── README.md ├── design │ ├── desktop-design.jpg │ ├── desktop-preview.jpg │ └── mobile-design.jpg ├── images │ └── favicon-32x32.png ├── index.html ├── style-guide.md └── style.css ├── style.css └── tracking-info ├── .gitignore ├── .vscode └── settings.json ├── README.md ├── design ├── active-states.jpg ├── desktop-design.jpg ├── desktop-preview.jpg ├── mobile-design.jpg └── mobile-navigation.jpg ├── images ├── favicon-32x32.png ├── icon-close.svg ├── icon-hamburger.svg ├── illustration-devices.svg └── logo.svg ├── index.html ├── script.js ├── style-guide.md └── style.css /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/.DS_Store -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Florin Pop 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # frontend-mentor-challenges 2 | 3 | My submissions for the Frontend Mentor Challenges 4 | 5 | See them live [here](https://fervent-mayer-36e64f.netlify.com/). 6 | 7 | Also, check out the [playlist](https://www.youtube.com/playlist?list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp) with all of the recordings. 8 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/base-apparel-coming-soon-master/design/active-states.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/base-apparel-coming-soon-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/base-apparel-coming-soon-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/base-apparel-coming-soon-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/bg-pattern-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/base-apparel-coming-soon-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/hero-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/base-apparel-coming-soon-master/images/hero-desktop.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/hero-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/base-apparel-coming-soon-master/images/hero-mobile.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/icon-error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 15 | Frontend Mentor | Base Apparel coming soon page 16 | 17 | 18 |
19 |
20 |
21 | 22 | 23 | background mobile 28 |

29 | We're 30 |
31 | coming 32 |
33 | soon 34 |

35 | 36 |

37 | Hello fellow shoppers! We're currently building our new fashion 38 | store. Add your email below to stay up-to-date with announcements 39 | and our launch deals. 40 |

41 | 42 |
43 | 44 | error 45 | 48 | Please provide a valid email 49 |
50 |
51 |
52 | 53 |
54 |
55 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form'); 2 | const email = document.getElementById('email'); 3 | 4 | form.addEventListener('submit', e => { 5 | e.preventDefault(); 6 | const emailVal = email.value; 7 | 8 | // check if it is a valid email 9 | if (!validateEmail(emailVal)) { 10 | form.classList.add('error'); 11 | } else { 12 | form.classList.remove('error'); 13 | document.body.innerHTML = `

Thank you!

`; 14 | } 15 | }); 16 | 17 | function validateEmail(email) { 18 | var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 19 | return re.test(String(email).toLowerCase()); 20 | } 21 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Desaturated Red: hsl(0, 36%, 70%) 15 | - Soft Red: hsl(0, 93%, 68%) 16 | 17 | ### Neutral 18 | 19 | - Dark Grayish Red: hsl(0, 6%, 24%) 20 | 21 | ### Gradients 22 | 23 | - Linear, 135deg, from hsl(0, 0%, 100%), to hsl(0, 100%, 98%) 24 | - Linear, 135deg, from hsl(0, 80%, 86%), to hsl(0, 74%, 74%) 25 | 26 | ## Typography 27 | 28 | ### Body Copy 29 | 30 | - Font size: 16px 31 | 32 | ### Font 33 | 34 | - Family: [Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans) 35 | - Weights: 300, 400, 600 36 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Josefin+Sans:200,400,600&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | body { 7 | background-image: linear-gradient( 8 | 135deg, 9 | hsl(0, 0%, 100%), 10 | hsl(0, 100%, 98%) 11 | ); 12 | font-family: 'Josefin Sans', sans-serif; 13 | margin: 0; 14 | } 15 | 16 | .container { 17 | display: flex; 18 | min-height: 100vh; 19 | } 20 | 21 | .left { 22 | background-image: url('./images/bg-pattern-desktop.svg'); 23 | background-size: cover; 24 | background-position: center center; 25 | padding: 0 40px 40px; 26 | width: 60%; 27 | } 28 | 29 | .inner-container { 30 | max-width: 450px; 31 | margin: auto; 32 | } 33 | 34 | .right { 35 | width: 40%; 36 | } 37 | 38 | .bg-image { 39 | background-image: url('./images/hero-desktop.jpg'); 40 | background-size: cover; 41 | background-position: center center; 42 | } 43 | 44 | .logo { 45 | margin: 60px 0; 46 | width: 200px; 47 | } 48 | 49 | .bg-mobile { 50 | display: none; 51 | } 52 | 53 | h1 { 54 | color: hsl(0, 6%, 24%); 55 | font-size: 60px; 56 | letter-spacing: 10px; 57 | line-height: 1.1; 58 | margin-bottom: 0; 59 | transform: translateX(-100%); 60 | text-transform: uppercase; 61 | animation: comeinleft 0.5s ease forwards; 62 | } 63 | 64 | h1 span { 65 | color: hsl(0, 36%, 70%); 66 | font-weight: 200; 67 | } 68 | 69 | p { 70 | color: hsl(0, 36%, 70%); 71 | line-height: 26px; 72 | margin: 30px 0; 73 | transform: translateX(100%); 74 | opacity: 0; 75 | animation: comeinright 0.5s ease forwards; 76 | } 77 | 78 | form { 79 | position: relative; 80 | transform: translateX(-100%); 81 | animation: comeinleft 0.5s ease forwards; 82 | } 83 | 84 | input { 85 | background-color: transparent; 86 | border: 1px solid hsl(0, 36%, 70%); 87 | border-radius: 50px; 88 | font-size: 16px; 89 | padding: 15px 30px; 90 | height: 55px; 91 | width: 100%; 92 | } 93 | 94 | input:focus { 95 | border-width: 2px; 96 | box-shadow: 0px 0px 10px hsla(0, 36%, 70%, 0.5); 97 | outline: none; 98 | } 99 | 100 | input::placeholder { 101 | color: hsl(0, 36%, 70%); 102 | } 103 | 104 | form.error input { 105 | border: 2px solid hsl(0, 93%, 68%); 106 | } 107 | 108 | button { 109 | background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%)); 110 | box-shadow: 2px 5px 10px hsla(0, 36%, 70%, 0.5); 111 | border: none; 112 | border-radius: 50px; 113 | cursor: pointer; 114 | padding: 15px; 115 | position: absolute; 116 | top: 0; 117 | right: 0; 118 | transition: opacity 0.2s ease; 119 | height: 55px; 120 | width: 100px; 121 | } 122 | 123 | button:hover { 124 | opacity: 0.6; 125 | } 126 | 127 | .error-icon { 128 | display: none; 129 | position: absolute; 130 | top: 15px; 131 | right: 110px; 132 | } 133 | 134 | form.error .error-icon { 135 | display: block; 136 | } 137 | 138 | small { 139 | color: hsl(0, 93%, 68%); 140 | display: none; 141 | margin-top: 15px; 142 | margin-left: 30px; 143 | } 144 | 145 | form.error small { 146 | display: block; 147 | } 148 | 149 | /* Animations */ 150 | @keyframes comeinleft { 151 | to { 152 | transform: translateX(0); 153 | } 154 | } 155 | 156 | @keyframes comeinright { 157 | to { 158 | opacity: 1; 159 | transform: translateX(0); 160 | } 161 | } 162 | 163 | @media screen and (max-width: 600px) { 164 | .logo { 165 | margin: 30px 0; 166 | width: 100px; 167 | } 168 | 169 | .bg-mobile { 170 | display: block; 171 | margin-left: -40px; 172 | margin-right: -40px; 173 | width: calc(100% + 80px); 174 | } 175 | 176 | h1 { 177 | font-size: 40px; 178 | } 179 | 180 | .left { 181 | width: 100%; 182 | } 183 | 184 | .right { 185 | display: none; 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /clipboard-landing-page/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /clipboard-landing-page/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/design/active-states.jpg -------------------------------------------------------------------------------- /clipboard-landing-page/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/design/desktop-design.jpg -------------------------------------------------------------------------------- /clipboard-landing-page/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/design/desktop-preview.jpg -------------------------------------------------------------------------------- /clipboard-landing-page/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/design/mobile-design.jpg -------------------------------------------------------------------------------- /clipboard-landing-page/images/bg-header-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/bg-header-desktop.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/bg-header-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/bg-header-mobile.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/favicon-32x32.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/icon-blacklist.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clipboard-landing-page/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clipboard-landing-page/images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clipboard-landing-page/images/icon-preview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clipboard-landing-page/images/icon-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clipboard-landing-page/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clipboard-landing-page/images/image-computer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/image-computer.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/image-devices.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/image-devices.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/logo-google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/logo-google.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/logo-hp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/logo-hp.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/logo-ibm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/logo-ibm.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/logo-microsoft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/logo-microsoft.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/logo-vector-graphics.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/clipboard-landing-page/images/logo-vector-graphics.png -------------------------------------------------------------------------------- /clipboard-landing-page/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /clipboard-landing-page/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Strong Cyan: hsl(171, 66%, 44%) 15 | - Light Blue: hsl(233, 100%, 69%) 16 | 17 | ### Neutral 18 | 19 | - Dark Grayish Blue: hsl(210, 10%, 33%) 20 | - Grayish Blue: hsl(201, 11%, 66%) 21 | 22 | ## Typography 23 | 24 | ### Body Copy 25 | 26 | - Font size: 18px 27 | 28 | ### Fonts 29 | 30 | - Family: [Bai Jamjuree](https://fonts.google.com/specimen/Bai+Jamjuree) 31 | - Weights: 400, 600 32 | 33 | ## Icons 34 | 35 | For the social icons, you can use the SVGs provided or a font icon library. Some font icon library suggestions can be found below: 36 | 37 | - [Font Awesome](https://fontawesome.com) 38 | - [IcoMoon](https://icomoon.io) 39 | - [Ionicons](https://ionicons.com) -------------------------------------------------------------------------------- /clipboard-landing-page/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;600&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --strong-cyan: hsl(171, 66%, 44%); 9 | --light-blue: hsl(233, 100%, 69%); 10 | --dark-grayish-blue: hsl(210, 10%, 33%); 11 | --grayish-blue: hsl(201, 11%, 66%); 12 | } 13 | 14 | body { 15 | color: var(--dark-grayish-blue); 16 | font-family: 'Bai Jamjuree', sans-serif; 17 | margin: 0; 18 | text-align: center; 19 | } 20 | 21 | header { 22 | background-image: url('./images/bg-header-desktop.png'); 23 | background-repeat: no-repeat; 24 | background-size: cover; 25 | padding: 80px 0 20px; 26 | } 27 | 28 | img { 29 | max-width: 100%; 30 | } 31 | 32 | p { 33 | color: var(--grayish-blue); 34 | line-height: 1.5; 35 | } 36 | 37 | .container { 38 | padding: 0 20px; 39 | margin: 30px auto; 40 | max-width: 100%; 41 | width: 1200px; 42 | } 43 | 44 | .container-small { 45 | width: 700px; 46 | } 47 | 48 | section { 49 | padding: 30px 0; 50 | } 51 | 52 | .flex { 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | flex-wrap: wrap; 57 | } 58 | 59 | .flex > * { 60 | flex: 1; 61 | padding: 10px; 62 | } 63 | 64 | .m4 { 65 | margin: 100px auto; 66 | } 67 | 68 | .btn { 69 | border: none; 70 | border-radius: 50px; 71 | color: #fff; 72 | font-family: 'Bai Jamjuree', sans-serif; 73 | font-size: 16px; 74 | font-weight: 600; 75 | padding: 15px 35px; 76 | margin: 15px 5px; 77 | } 78 | 79 | .btn-primary { 80 | background-color: var(--strong-cyan); 81 | box-shadow: 0 4px hsl(171, 68%, 36%); 82 | } 83 | 84 | .btn-secondary { 85 | background-color: var(--light-blue); 86 | box-shadow: 0 4px hsl(233, 71%, 61%); 87 | } 88 | 89 | footer { 90 | background-color: hsl(0, 0%, 93%); 91 | } 92 | 93 | footer img { 94 | width: 60px; 95 | } 96 | 97 | footer ul { 98 | display: flex; 99 | flex-wrap: wrap; 100 | padding: 0; 101 | list-style-type: none; 102 | } 103 | 104 | footer .container { 105 | margin-bottom: 0; 106 | } 107 | 108 | footer ul a { 109 | color: var(--dark-grayish-blue); 110 | text-decoration: none; 111 | } 112 | 113 | footer .links { 114 | flex: 3; 115 | } 116 | 117 | footer .links li { 118 | padding: 10px; 119 | margin-right: 40px; 120 | } 121 | 122 | footer .social li { 123 | margin: 0 5px; 124 | } 125 | 126 | footer .social a { 127 | font-size: 24px; 128 | margin-right: 5px; 129 | } 130 | 131 | @media (max-width: 768px) { 132 | .flex { 133 | flex-direction: column; 134 | } 135 | 136 | footer .links { 137 | flex-direction: column; 138 | } 139 | 140 | footer .links li { 141 | padding: 10px; 142 | margin-right: 0; 143 | } 144 | } 145 | -------------------------------------------------------------------------------- /four-card-feature-section-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /four-card-feature-section-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Four card feature section 2 | 3 | ![Design preview for the Four card feature section coding challenge](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenge, you need a basic understanding of HTML and CSS.** 12 | 13 | ## The challenge 14 | 15 | Your challenge is to build out this feature section and get it looking as close to the design as possible. 16 | 17 | You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. 18 | 19 | Your users should: 20 | 21 | - View the optimal layout for the site depending on their device's screen size 22 | 23 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. 24 | 25 | ## Where to find everything 26 | 27 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 28 | 29 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 30 | 31 | If you would like the Sketch file in order to inspect the design in more detail it is available to [purchase here](https://bmc.xyz/l/uXWTfHQ53). 32 | 33 | You will find all the required assets in the `/images` folder. The assets are already optimized. 34 | 35 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 36 | 37 | ## Building your project 38 | 39 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 40 | 41 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 42 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [ZEIT Now](http://bit.ly/fem-zeit). We've got more information about deploying your project with ZEIT below. 43 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles. 44 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 45 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 46 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. 47 | 7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](http://bit.ly/fem-sizzy). It's a great browser that makes it easy to view your site across multiple devices. 48 | 49 | ## Deploying your project 50 | 51 | As mentioned above, there are a number of ways to host your project for free. We recommend using [ZEIT Now](http://bit.ly/fem-zeit) as it's an amazing service and extremely simple to get set up with. If you'd like to use ZEIT, here are some steps to follow to get started: 52 | 53 | 1. [Sign up to ZEIT Now](http://bit.ly/fem-zeit-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [ZEIT Now for GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) integration. 54 | 2. Connect your project to ZEIT Now from the ["Create a new project" page](https://zeit.co/new), using the "New Project From GitHub" button and selecting the project you want to deploy. 55 | 3. Once connected, every time you `git push`, ZEIT Now will create a new [deployment](https://zeit.co/docs/v2/platform/deployments) and the deployment URL will be shown on your [ZEIT Dashboard](https://zeit.co/dashboard). You will also receive an email for each deployment with the URL. 56 | 57 | ## Sharing your solution 58 | 59 | There are multiple places you can share your solution: 60 | 61 | 1. Submit it on the platform so that other users will see your solution on the site. Other users will be able to give you feedback, which could help improve your code for the next project. 62 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 63 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 64 | 65 | ## Giving feedback 66 | 67 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 68 | 69 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 70 | 71 | **Have fun building!** 🚀 72 | -------------------------------------------------------------------------------- /four-card-feature-section-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/four-card-feature-section-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /four-card-feature-section-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/four-card-feature-section-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /four-card-feature-section-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/four-card-feature-section-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /four-card-feature-section-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/four-card-feature-section-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /four-card-feature-section-master/images/icon-calculator.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /four-card-feature-section-master/images/icon-karma.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /four-card-feature-section-master/images/icon-supervisor.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /four-card-feature-section-master/images/icon-team-builder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /four-card-feature-section-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | Frontend Mentor | Four card feature section 13 | 14 | 15 | 16 |
17 |

18 | Reliable, efficient delivery 19 | Powered by Technology 20 |

21 |

22 | Our Artificial Intelligence powered tools use millions of project data 23 | points to ensure that your project is successful 24 |

25 |
26 | 27 |
28 |
29 |

Supervisor

30 |

Monitors activity to identify project roadblocks

31 | supervisor 32 |
33 | 34 |
35 |

Team Builder

36 |

37 | Scans our talent network to create the optimal team for your project 38 |

39 | supervisor 40 |
41 | 42 |
43 |

Calculator

44 |

Uses data from past projects to provide better delivery estimates

45 | supervisor 46 |
47 | 48 |
49 |

Karma

50 |

Regularly evaluates our talent to ensure quality

51 | supervisor 52 |
53 |
54 | 55 | 56 | -------------------------------------------------------------------------------- /four-card-feature-section-master/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Red: hsl(0, 78%, 62%) 15 | - Cyan: hsl(180, 62%, 55%) 16 | - Orange: hsl(34, 97%, 64%) 17 | - Blue: hsl(212, 86%, 64%) 18 | 19 | ### Neutral 20 | 21 | - Very Dark Blue: hsl(234, 12%, 34%) 22 | - Grayish Blue: hsl(229, 6%, 66%) 23 | - Very Light Gray: hsl(0, 0%, 98%) 24 | 25 | ## Typography 26 | 27 | ### Body Copy 28 | 29 | - Font size: 15px 30 | 31 | ### Fonts 32 | 33 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 34 | - Weights: 200, 400, 600 35 | -------------------------------------------------------------------------------- /four-card-feature-section-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:200,400,600&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: hsl(0, 0%, 98%); 9 | font-family: 'Poppins', sans-serif; 10 | } 11 | 12 | header { 13 | margin: 50px auto; 14 | max-width: 500px; 15 | text-align: center; 16 | } 17 | 18 | h1 { 19 | font-weight: 200; 20 | margin: 0; 21 | } 22 | 23 | h1 span { 24 | font-weight: 600; 25 | } 26 | 27 | p { 28 | color: hsl(229, 6%, 66%); 29 | } 30 | 31 | .container { 32 | display: flex; 33 | flex-wrap: wrap; 34 | justify-content: center; 35 | margin: 0 auto; 36 | max-width: 1140px; 37 | } 38 | 39 | .box { 40 | background-color: #fff; 41 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05), 0 6px 6px rgba(0, 0, 0, 0.1); 42 | border-radius: 5px; 43 | padding: 30px; 44 | position: relative; 45 | overflow: hidden; 46 | margin: 15px; 47 | width: 350px; 48 | } 49 | 50 | .box::after { 51 | content: ''; 52 | position: absolute; 53 | top: 0; 54 | left: 0; 55 | height: 5px; 56 | width: 100%; 57 | } 58 | 59 | .box-red::after { 60 | background-color: hsl(0, 78%, 62%); 61 | } 62 | 63 | .box-cyan::after { 64 | background-color: hsl(180, 62%, 55%); 65 | } 66 | 67 | .box-orange::after { 68 | background-color: hsl(34, 97%, 64%); 69 | } 70 | 71 | .box-blue::after { 72 | background-color: hsl(212, 86%, 64%); 73 | } 74 | 75 | .box-push { 76 | transform: translateY(50%); 77 | } 78 | 79 | .box h2 { 80 | margin: 0; 81 | } 82 | 83 | .box p { 84 | font-size: 14px; 85 | margin: 15px 0 40px; 86 | } 87 | 88 | .box img { 89 | display: block; 90 | margin-left: auto; 91 | } 92 | 93 | footer { 94 | text-align: center; 95 | } 96 | 97 | @media (max-width: 775px) { 98 | .box-push { 99 | transform: translateY(0); 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /fylo-landing-page/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /fylo-landing-page/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Fylo landing page with two column layout 2 | 3 | ![Design preview for the Fylo landing page with two column layout challenge](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenge, you need a basic understanding of HTML and CSS.** 12 | 13 | ## Where to find everything 14 | 15 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 16 | 17 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 18 | 19 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 20 | 21 | You will find all the required assets in the `/images` folder. The assets are already optimized. 22 | 23 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 24 | 25 | ## Building your project 26 | 27 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 28 | 29 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 30 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [ZEIT Now](http://bit.ly/fem-zeit). We've got more information about deploying your project with ZEIT below. 31 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles. 32 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 33 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 34 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. 35 | 7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](http://bit.ly/fem-sizzy). It's a great browser that makes it easy to view your site across multiple devices. 36 | 37 | ## Deploying your project 38 | 39 | As mentioned above, there are a number of ways to host your project for free. We recommend using [ZEIT Now](http://bit.ly/fem-zeit) as it's an amazing service and extremely simple to get set up with. If you'd like to use ZEIT, here are some steps to follow to get started: 40 | 41 | 1. [Sign up to ZEIT Now](http://bit.ly/fem-zeit-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [ZEIT Now for GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) integration. 42 | 2. Connect your project to ZEIT Now from the ["Create a new project" page](https://zeit.co/new), using the "New Project From GitHub" button and selecting the project you want to deploy. 43 | 3. Once connected, every time you `git push`, ZEIT Now will create a new [deployment](https://zeit.co/docs/v2/platform/deployments) and the deployment URL will be shown on your [ZEIT Dashboard](https://zeit.co/dashboard). You will also receive an email for each deployment with the URL. 44 | 45 | ## Sharing your solution 46 | 47 | There are multiple places you can share your solution: 48 | 49 | 1. Submit it on the platform so that other users will see your solution on the site. Other users will be able to give you feedback, which could help improve your code for the next project. 50 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 51 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 52 | 53 | ## Giving feedback 54 | 55 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 56 | 57 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 58 | 59 | **Have fun building!** 🚀 60 | -------------------------------------------------------------------------------- /fylo-landing-page/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/fylo-landing-page/design/desktop-design.jpg -------------------------------------------------------------------------------- /fylo-landing-page/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/fylo-landing-page/design/desktop-preview.jpg -------------------------------------------------------------------------------- /fylo-landing-page/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/fylo-landing-page/design/mobile-design.jpg -------------------------------------------------------------------------------- /fylo-landing-page/images/avatar-testimonial.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/fylo-landing-page/images/avatar-testimonial.jpg -------------------------------------------------------------------------------- /fylo-landing-page/images/bg-curve-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylo-landing-page/images/bg-curve-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylo-landing-page/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/fylo-landing-page/images/favicon-32x32.png -------------------------------------------------------------------------------- /fylo-landing-page/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylo-landing-page/images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylo-landing-page/images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylo-landing-page/images/icon-quotes.svg: -------------------------------------------------------------------------------- 1 | “ -------------------------------------------------------------------------------- /fylo-landing-page/images/logo white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylo-landing-page/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fylo-landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | Frontend Mentor | Fylo landing page with two column layout 16 | 17 | 21 | 22 | 23 | 24 |
25 |
26 | 46 | 47 |
48 |
49 |

50 | All your files in one secure location, accessible anywhere. 51 |

52 |

53 | Fylo stores your most important files in one secure location. 54 | Access them wherever you need, share and collaborate with friends, 55 | family, and co-workers. 56 |

57 |
58 | 59 | 62 |
63 |
64 |
65 | header-img 66 |
67 |
68 |
69 |
70 | 71 |
72 |
73 |
74 |
75 |

Stay productive, wherever you are

76 |

77 | Never let location be an issue when accessing your files. Fylo has 78 | you covered for all of your file storage needs. 79 |

80 |

81 | Securely share files and folders with friends, family and 82 | colleagues for live collaboration. No email attachments required! 83 |

84 | 85 | 86 | See how Fylo works 87 | arrow 88 | 89 | 90 |
91 | quote 92 |

93 | Fylo has improved our team productivity by an order of 94 | magnitude. Since making the switch our team has become a 95 | well-oiled collaboration machine. 96 |

97 | 110 |
111 |
112 |
113 | section-img 114 |
115 |
116 |
117 |
118 | 119 |
120 |
121 |
122 |
123 |

124 | Get early access today 125 |

126 |

127 | It only takes a minute to sign up and our free starter tier is 128 | extremely generous. If you have any questions, our support team 129 | would be happy to help you. 130 |

131 |
132 |
133 |
134 | 135 | 138 |
139 |
140 |
141 |
142 |
143 | 144 | 204 | 205 | 206 | -------------------------------------------------------------------------------- /fylo-landing-page/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Very Dark Blue: hsl(243, 87%, 12%) 15 | - Desaturated Blue: hsl(238, 22%, 44%) 16 | 17 | ### Accent 18 | 19 | - Bright Blue: hsl(224, 93%, 58%) 20 | - Moderate Cyan: hsl(170, 45%, 43%) 21 | 22 | ### Neutral 23 | 24 | - Light Grayish Blue: hsl(240, 75%, 98%) 25 | - Light Gray: hsl(0, 0%, 75%) 26 | 27 | ## Typography 28 | 29 | ### Headings, Call-to-actions, Header Navigation 30 | 31 | - Family: [Raleway](https://fonts.google.com/specimen/Raleway) 32 | - Weights: 400, 700 33 | 34 | ### Body 35 | 36 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 37 | - Weights: 400 -------------------------------------------------------------------------------- /fylo-landing-page/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans|Raleway:400,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | color: hsl(243, 87%, 12%); 9 | font-family: 'Open Sans', sans-serif; 10 | font-size: 1.1em; 11 | margin: 0; 12 | } 13 | 14 | a { 15 | color: #3da08f; 16 | } 17 | 18 | img { 19 | max-width: 100%; 20 | } 21 | 22 | h1, 23 | h2, 24 | h4 { 25 | font-family: 'Raleway', sans-serif; 26 | } 27 | 28 | h2 { 29 | font-size: 1.8em; 30 | margin-top: 0; 31 | } 32 | 33 | .container { 34 | padding: 30px; 35 | margin: 0 auto; 36 | max-width: 100%; 37 | width: 1200px; 38 | } 39 | 40 | .flex { 41 | display: flex; 42 | align-items: center; 43 | flex-wrap: wrap; 44 | } 45 | 46 | .align-start { 47 | align-items: flex-start; 48 | } 49 | 50 | .flex > div, 51 | .flex > ul { 52 | flex: 1; 53 | } 54 | 55 | .flex > div:first-child { 56 | margin-right: 20px; 57 | } 58 | 59 | .flex > div:last-child { 60 | margin-left: 20px; 61 | } 62 | 63 | /* Nav styling */ 64 | nav { 65 | display: flex; 66 | align-items: center; 67 | justify-content: space-between; 68 | margin: 30px 0; 69 | } 70 | 71 | nav ul { 72 | display: flex; 73 | padding: 0; 74 | list-style-type: none; 75 | } 76 | 77 | nav ul li { 78 | margin-left: 50px; 79 | } 80 | 81 | nav ul a { 82 | color: hsl(243, 87%, 12%); 83 | font-family: 'Raleway', sans-serif; 84 | text-decoration: none; 85 | } 86 | 87 | /* Form Section */ 88 | form { 89 | display: flex; 90 | } 91 | 92 | input { 93 | border: 1px solid hsl(243, 87%, 12%); 94 | border-radius: 2px; 95 | font-family: 'Raleway', sans-serif; 96 | font-size: 14px; 97 | flex: 0.7; 98 | padding: 15px; 99 | } 100 | 101 | input::placeholder { 102 | color: hsl(0, 0%, 75%); 103 | } 104 | 105 | button { 106 | border: 1px solid hsl(224, 93%, 58%); 107 | background-color: hsl(224, 93%, 58%); 108 | border-radius: 2px; 109 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 110 | color: #fff; 111 | font-family: 'Raleway', sans-serif; 112 | font-weight: 700; 113 | font-size: 14px; 114 | flex: 0.3; 115 | padding: 15px; 116 | margin-left: 10px; 117 | } 118 | 119 | .light-blueish { 120 | background-color: hsl(240, 75%, 98%); 121 | margin-top: 100px; 122 | position: relative; 123 | padding: 50px 0; 124 | } 125 | 126 | .light-blueish::before { 127 | content: ''; 128 | background-image: url('./images/bg-curve-desktop.svg'); 129 | background-size: cover; 130 | background-position: center center; 131 | position: absolute; 132 | top: -60px; 133 | left: 0; 134 | height: 60px; 135 | width: 100%; 136 | } 137 | 138 | /* Testimonial */ 139 | .testimonial-box { 140 | background-color: #fff; 141 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 142 | border-radius: 5px; 143 | padding: 25px; 144 | margin-top: 40px; 145 | width: 80%; 146 | } 147 | 148 | .testimonial-box p { 149 | font-size: 14px; 150 | letter-spacing: 1px; 151 | line-height: 1.7; 152 | } 153 | 154 | .user-info { 155 | display: flex; 156 | margin-top: 20px; 157 | } 158 | 159 | .user-info img { 160 | border-radius: 50%; 161 | height: 50px; 162 | margin-right: 10px; 163 | width: 50px; 164 | } 165 | 166 | .user-info h4 { 167 | font-weight: 700; 168 | margin: 0; 169 | } 170 | 171 | /* Blueish */ 172 | .blueish { 173 | background-color: hsl(238, 22%, 44%); 174 | color: #fff; 175 | padding: 50px 0; 176 | } 177 | 178 | .blueish form { 179 | flex-direction: column; 180 | } 181 | 182 | .blueish form input { 183 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 184 | border: none; 185 | flex: 1; 186 | } 187 | 188 | .blueish form button { 189 | margin: 20px 0 0; 190 | width: 50%; 191 | } 192 | 193 | /* Footer styling */ 194 | footer { 195 | background-color: hsl(243, 87%, 12%); 196 | color: #fff; 197 | padding: 50px 0; 198 | } 199 | 200 | footer ul { 201 | list-style-type: none; 202 | } 203 | 204 | footer ul li { 205 | margin-bottom: 20px; 206 | } 207 | 208 | footer .social-media { 209 | display: flex; 210 | align-items: center; 211 | justify-content: center; 212 | } 213 | 214 | footer .circle { 215 | border: 1px solid #fff; 216 | border-radius: 50%; 217 | color: #fff; 218 | display: inline-flex; 219 | align-items: center; 220 | justify-content: center; 221 | margin-right: 10px; 222 | height: 40px; 223 | width: 40px; 224 | text-decoration: none; 225 | } 226 | 227 | footer p { 228 | text-align: right; 229 | } 230 | 231 | @media screen and (max-width: 768px) { 232 | body { 233 | text-align: center; 234 | } 235 | 236 | nav { 237 | flex-direction: column; 238 | margin: 10px 0; 239 | } 240 | 241 | nav ul li { 242 | margin: 10px 20px; 243 | } 244 | 245 | .light-blueish::before { 246 | background-image: url('./images/bg-curve-mobile.svg'); 247 | height: 80px; 248 | } 249 | 250 | .flex { 251 | flex-direction: column; 252 | } 253 | 254 | .flex > div { 255 | width: 100%; 256 | } 257 | 258 | .flex > div:first-child { 259 | margin-right: 0; 260 | } 261 | 262 | .flex > div:last-child { 263 | margin-left: 0; 264 | } 265 | 266 | .testimonial-box { 267 | width: 100%; 268 | } 269 | 270 | .blueish form input { 271 | flex: 1; 272 | } 273 | 274 | .blueish form button { 275 | margin: 20px 0; 276 | width: 100%; 277 | } 278 | 279 | .illustration { 280 | margin-top: 30px; 281 | } 282 | 283 | .user-info { 284 | justify-content: center; 285 | } 286 | 287 | footer ul { 288 | padding: 0; 289 | width: 100%; 290 | } 291 | } 292 | -------------------------------------------------------------------------------- /huddle-landing-page/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /huddle-landing-page/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Huddle landing page with alternating feature blocks 2 | 3 | ![Design preview for the Huddle landing page with alternating feature blocks coding challenge](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenges, you need a basic understanding of HTML and CSS.** 12 | 13 | ## Where to find everything 14 | 15 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 16 | 17 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 18 | 19 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 20 | 21 | You will find all the required assets in the `/images` folder. The assets are already optimized. 22 | 23 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 24 | 25 | ## Building your project 26 | 27 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 28 | 29 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 30 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [ZEIT Now](http://bit.ly/fem-zeit). We've got more information about deploying your project with ZEIT below. 31 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles. 32 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 33 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 34 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. 35 | 7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](http://bit.ly/fem-sizzy). It's a great browser that makes it easy to view your site across multiple devices. 36 | 37 | ## Deploying your project 38 | 39 | As mentioned above, there are a number of ways to host your project for free. We recommend using [ZEIT Now](http://bit.ly/fem-zeit) as it's an amazing service and extremely simple to get set up with. If you'd like to use ZEIT, here are some steps to follow to get started: 40 | 41 | 1. [Sign up to ZEIT Now](http://bit.ly/fem-zeit-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [ZEIT Now for GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) integration. 42 | 2. Connect your project to ZEIT Now from the ["Create a new project" page](https://zeit.co/new), using the "New Project From GitHub" button and selecting the project you want to deploy. 43 | 3. Once connected, every time you `git push`, ZEIT Now will create a new [deployment](https://zeit.co/docs/v2/platform/deployments) and the deployment URL will be shown on your [ZEIT Dashboard](https://zeit.co/dashboard). You will also receive an email for each deployment with the URL. 44 | 45 | ## Sharing your solution 46 | 47 | There are multiple places you can share your solution: 48 | 49 | 1. Submit it on the platform so that other users will see your solution on the site. Other users will be able to give you feedback, which could help improve your code for the next project. 50 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 51 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 52 | 53 | ## Giving feedback 54 | 55 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 56 | 57 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 58 | 59 | **Have fun building!** 🚀 60 | -------------------------------------------------------------------------------- /huddle-landing-page/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-landing-page/design/desktop-design.jpg -------------------------------------------------------------------------------- /huddle-landing-page/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-landing-page/design/desktop-preview.jpg -------------------------------------------------------------------------------- /huddle-landing-page/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-landing-page/design/mobile-design.jpg -------------------------------------------------------------------------------- /huddle-landing-page/images/bg-hero-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page/images/bg-hero-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-landing-page/images/favicon-32x32.png -------------------------------------------------------------------------------- /huddle-landing-page/images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page/images/icon-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page/images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | Frontend Mentor | Huddle landing page with alternating feature blocks 15 | 16 | 17 | 21 | 22 | 23 | 24 |
25 |
26 | 32 | 33 |
34 |
35 |

Build The Community Your Fans Will Love

36 | 37 |

38 | Huddle re-imagines the way we build communities. You have a voice, 39 | but so does your audience. Create connections with your users as 40 | you engage in genuine discussion. 41 |

42 | 43 | 46 |
47 | 48 |
49 | mockups 54 |
55 |
56 |
57 |
58 | 59 |
60 |
61 |
62 |
63 |

Grow Together

64 |

65 | Generate meaningful discussions with your audience and build a 66 | strong, loyal community. Think of the insightful conversations you 67 | miss out on with a feedback form. 68 |

69 |
70 |
71 | grow-together 75 |
76 |
77 | 78 |
79 |
80 | flowing-conversation 84 |
85 |
86 |

Flowing Conversations

87 |

88 | You wouldn't paginate a conversation in real life, so why do it 89 | online? Our threads have just-in-time loading for a more natural 90 | flow. 91 |

92 |
93 |
94 | 95 |
96 |
97 |

Your Users

98 |

99 | It takes no time at all to integrate Huddle with your app's 100 | authentication solution. This means, once signed in to your app, 101 | your users can start chatting immediately. 102 |

103 |
104 |
105 | users 106 |
107 |
108 |
109 |
110 | 111 |
112 |
113 |

Ready To Build Your Community?

114 | 115 | 116 |
117 |
118 | 119 | 184 | 185 | 186 | -------------------------------------------------------------------------------- /huddle-landing-page/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Pink: hsl(322, 100%, 66%) 15 | 16 | ### Neutral 17 | 18 | - Very Pale Cyan: hsl(193, 100%, 96%) 19 | - Very Dark Cyan: hsl(192, 100%, 9%) 20 | - Grayish Blue: hsl(208, 11%, 55%) 21 | 22 | ## Typography 23 | 24 | ### Body Copy 25 | 26 | - Font size: 18px 27 | 28 | ### Headings 29 | 30 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 31 | - Weights: 600 32 | 33 | ### Body, Call-to-actions 34 | 35 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 36 | - Weights: 400, 700 37 | 38 | ## Icons 39 | 40 | For the social icons, you can use a font icon library. Some suggestions can be found below: 41 | 42 | - [Font Awesome](https://fontawesome.com/) 43 | - [IcoMoon](https://icomoon.io/) 44 | - [Ionicons](https://ionicons.com/) -------------------------------------------------------------------------------- /huddle-landing-page/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Poppins:600&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | /* General Styles */ 8 | body { 9 | color: hsl(192, 100%, 9%); 10 | font-family: 'Open Sans', sans-serif; 11 | font-size: 1.15em; 12 | margin: 0; 13 | } 14 | 15 | h1, 16 | h2 { 17 | font-family: 'Poppins', sans-serif; 18 | } 19 | 20 | p { 21 | opacity: 0.6; 22 | } 23 | 24 | img { 25 | max-width: 100%; 26 | } 27 | 28 | .btn { 29 | border-radius: 50px; 30 | background-color: #fff; 31 | border: none; 32 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 33 | cursor: pointer; 34 | font-size: 16px; 35 | font-weight: 700; 36 | padding: 15px 60px; 37 | } 38 | 39 | .btn-primary { 40 | background-color: hsl(322, 100%, 66%); 41 | color: #fff; 42 | } 43 | 44 | .container { 45 | padding: 0 20px; 46 | margin: 0 auto; 47 | max-width: 100%; 48 | width: 1000px; 49 | } 50 | 51 | .center { 52 | text-align: center; 53 | } 54 | 55 | .flex { 56 | display: flex; 57 | align-items: center; 58 | } 59 | 60 | .flex > div, 61 | .flex > ul { 62 | flex: 1; 63 | } 64 | 65 | .align-start { 66 | align-items: flex-start; 67 | } 68 | 69 | header { 70 | background-image: url('./images/bg-hero-desktop.svg'); 71 | background-size: cover; 72 | background-position: center center; 73 | background-color: hsl(193, 100%, 96%); 74 | padding: 40px 0; 75 | } 76 | 77 | nav { 78 | align-items: center; 79 | justify-content: space-between; 80 | margin-bottom: 40px; 81 | } 82 | 83 | .header-img { 84 | margin-left: 20%; 85 | width: 80%; 86 | } 87 | 88 | .box { 89 | background-color: #fff; 90 | border-radius: 15px; 91 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 92 | margin: 40px 0; 93 | padding: 60px; 94 | } 95 | 96 | .small-box { 97 | display: inline-block; 98 | position: relative; 99 | margin-bottom: -50%; 100 | z-index: 1; 101 | } 102 | 103 | .box img { 104 | width: 80%; 105 | } 106 | 107 | footer { 108 | background-color: hsl(192, 100%, 9%); 109 | color: #fff; 110 | padding: 180px 0 60px; 111 | } 112 | 113 | footer ul { 114 | list-style-type: none; 115 | } 116 | 117 | footer ul li { 118 | margin-bottom: 20px; 119 | } 120 | 121 | footer .social-media { 122 | display: flex; 123 | align-items: center; 124 | justify-content: center; 125 | } 126 | 127 | footer .circle { 128 | border: 1px solid #fff; 129 | border-radius: 50%; 130 | color: #fff; 131 | display: inline-flex; 132 | align-items: center; 133 | justify-content: center; 134 | margin-right: 10px; 135 | height: 40px; 136 | width: 40px; 137 | text-decoration: none; 138 | } 139 | 140 | footer p { 141 | text-align: right; 142 | } 143 | 144 | @media screen and (max-width: 768px) { 145 | body { 146 | text-align: center; 147 | } 148 | 149 | nav.flex { 150 | flex-direction: row; 151 | } 152 | 153 | .header-img { 154 | margin-top: 40px; 155 | margin-left: 0; 156 | width: 100%; 157 | } 158 | 159 | .flex { 160 | flex-direction: column; 161 | } 162 | 163 | .box-reverse-mobile { 164 | flex-direction: column-reverse; 165 | } 166 | 167 | footer ul { 168 | padding: 0; 169 | width: 100%; 170 | } 171 | 172 | footer p { 173 | text-align: center; 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /huddle-simple-landing/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /huddle-simple-landing/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Huddle landing page with single introductory section 2 | 3 | ![Design preview for the Huddle landing page with single introductory section](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenge, you need a basic understanding of HTML and CSS.** 12 | 13 | ## Where to find everything 14 | 15 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 16 | 17 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 18 | 19 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 20 | 21 | You will find all the required assets in the `/images` folder. The assets are already optimized. 22 | 23 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 24 | 25 | ## Building your project 26 | 27 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 28 | 29 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 30 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [ZEIT Now](http://bit.ly/fem-zeit). We've got more information about deploying your project with ZEIT below. 31 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles. 32 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 33 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 34 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. 35 | 7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](http://bit.ly/fem-sizzy). It's a great browser that makes it easy to view your site across multiple devices. 36 | 37 | ## Deploying your project 38 | 39 | As mentioned above, there are a number of ways to host your project for free. We recommend using [ZEIT Now](http://bit.ly/fem-zeit) as it's an amazing service and extremely simple to get set up with. If you'd like to use ZEIT, here are some steps to follow to get started: 40 | 41 | 1. [Sign up to ZEIT Now](http://bit.ly/fem-zeit-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [ZEIT Now for GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) integration. 42 | 2. Connect your project to ZEIT Now from the ["Create a new project" page](https://zeit.co/new), using the "New Project From GitHub" button and selecting the project you want to deploy. 43 | 3. Once connected, every time you `git push`, ZEIT Now will create a new [deployment](https://zeit.co/docs/v2/platform/deployments) and the deployment URL will be shown on your [ZEIT Dashboard](https://zeit.co/dashboard). You will also receive an email for each deployment with the URL. 44 | 45 | ## Sharing your solution 46 | 47 | There are multiple places you can share your solution: 48 | 49 | 1. Submit it on the platform so that other users will see your solution on the site. Other users will be able to give you feedback, which could help improve your code for the next project. 50 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 51 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 52 | 53 | ## Giving feedback 54 | 55 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 56 | 57 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 58 | 59 | **Have fun building!** 🚀 60 | -------------------------------------------------------------------------------- /huddle-simple-landing/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-simple-landing/design/desktop-design.jpg -------------------------------------------------------------------------------- /huddle-simple-landing/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-simple-landing/design/desktop-preview.jpg -------------------------------------------------------------------------------- /huddle-simple-landing/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-simple-landing/design/mobile-design.jpg -------------------------------------------------------------------------------- /huddle-simple-landing/images/bg-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-simple-landing/images/bg-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-simple-landing/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/huddle-simple-landing/images/favicon-32x32.png -------------------------------------------------------------------------------- /huddle-simple-landing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | 16 | Frontend Mentor | Huddle landing page with single introductory section 17 | 18 | 19 | 23 | 24 | 25 | 26 |
27 | logo 28 | 29 |
30 |
31 | illustration 32 |
33 | 34 |
35 |

Build The Community Your Fans Will Love

36 |

37 | Huddle re-imagines the way we build communities. You have a voice, 38 | but so does your audience. Create connections with your users as you 39 | engage in genuine discussion. 40 |

41 | 42 |
43 |
44 | 45 | 62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /huddle-simple-landing/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Violet: hsl(257, 40%, 49%) 15 | 16 | ## Typography 17 | 18 | ### Headings 19 | 20 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 21 | - Weights: 400, 700 22 | 23 | ### Body 24 | 25 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 26 | - Weights: 400 27 | 28 | ## Icons 29 | 30 | For the social icons, you can use a font icon library. Some suggestions can be found below: 31 | 32 | - [Font Awesome](https://fontawesome.com/) 33 | - [IcoMoon](https://icomoon.io/) 34 | - [Ionicons](https://ionicons.com/) -------------------------------------------------------------------------------- /huddle-simple-landing/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans|Poppins:400,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-image: url('./images/bg-desktop.svg'); 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | background-color: hsl(257, 40%, 49%); 12 | color: #fff; 13 | display: flex; 14 | font-family: 'Open sans', sans-serif; 15 | font-size: 1.4em; 16 | align-items: center; 17 | justify-content: center; 18 | min-height: 100vh; 19 | } 20 | 21 | h1 { 22 | font-family: 'Poppins', sans-serif; 23 | } 24 | 25 | p { 26 | opacity: 0.8; 27 | } 28 | 29 | img { 30 | max-width: 100%; 31 | } 32 | 33 | .container { 34 | margin: auto; 35 | max-width: 100%; 36 | width: 1200px; 37 | } 38 | 39 | .flex { 40 | display: flex; 41 | margin: 100px 0; 42 | } 43 | 44 | .flex > div:first-child { 45 | flex: 0.6; 46 | margin-right: 20px; 47 | } 48 | 49 | .flex > div:last-child { 50 | flex: 0.4; 51 | margin-left: 20px; 52 | } 53 | 54 | button { 55 | background-color: #fff; 56 | border-radius: 50px; 57 | border: none; 58 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 59 | color: hsl(257, 40%, 49%); 60 | font-size: 24px; 61 | padding: 20px 80px; 62 | } 63 | 64 | .social-links { 65 | display: flex; 66 | justify-content: flex-end; 67 | padding: 0; 68 | list-style-type: none; 69 | } 70 | 71 | .social-links a { 72 | border-radius: 50%; 73 | border: 2px solid #fff; 74 | color: #fff; 75 | display: inline-flex; 76 | align-items: center; 77 | justify-content: center; 78 | margin-left: 20px; 79 | height: 50px; 80 | width: 50px; 81 | text-decoration: none; 82 | } 83 | 84 | @media screen and (max-width: 768px) { 85 | .flex { 86 | flex-direction: column; 87 | margin: 50px 0; 88 | } 89 | 90 | .flex > div:first-child { 91 | flex: 1; 92 | margin-right: 0; 93 | } 94 | 95 | .flex > div:last-child { 96 | flex: 1; 97 | margin-left: 0; 98 | text-align: center; 99 | } 100 | 101 | .social-links { 102 | justify-content: center; 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Main Page of Frontend Mentor Projects 7 | 8 | 12 | 13 | 14 | 15 |
16 |

Frontend Mentor Challenges

17 | 18 |

Projects

19 | 20 |
21 | 22 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /insure-landing-page/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /insure-landing-page/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Insure landing page 2 | 3 | ![Design preview for the Insure landing page coding challenge](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenge, you need a basic understanding of HTML and CSS.** 12 | 13 | ## The challenge 14 | 15 | Your challenge is to build out this landing page and get it looking as close to the design as possible. 16 | 17 | You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. 18 | 19 | Your users should be able to: 20 | 21 | - View the optimal layout for the site depending on their device's screen size 22 | - See hover states for all interactive elements on the page 23 | 24 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. 25 | 26 | ## Where to find everything 27 | 28 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 29 | 30 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 31 | 32 | If you would like the Sketch file in order to inspect the design in more detail it is available to [purchase here](https://bmc.xyz/l/u5vxN0WiS). 33 | 34 | You will find all the required assets in the `/images` folder. The assets are already optimized. 35 | 36 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 37 | 38 | ## Building your project 39 | 40 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 41 | 42 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 43 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [ZEIT Now](http://bit.ly/fem-zeit). We've got more information about deploying your project with ZEIT below. 44 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles. 45 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 46 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 47 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. 48 | 7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](http://bit.ly/fem-sizzy). It's a great browser that makes it easy to view your site across multiple devices. 49 | 50 | ## Deploying your project 51 | 52 | As mentioned above, there are a number of ways to host your project for free. We recommend using [ZEIT Now](http://bit.ly/fem-zeit) as it's an amazing service and extremely simple to get set up with. If you'd like to use ZEIT, here are some steps to follow to get started: 53 | 54 | 1. [Sign up to ZEIT Now](http://bit.ly/fem-zeit-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [ZEIT Now for GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) integration. 55 | 2. Connect your project to ZEIT Now from the ["Create a new project" page](https://zeit.co/new), using the "New Project From GitHub" button and selecting the project you want to deploy. 56 | 3. Once connected, every time you `git push`, ZEIT Now will create a new [deployment](https://zeit.co/docs/v2/platform/deployments) and the deployment URL will be shown on your [ZEIT Dashboard](https://zeit.co/dashboard). You will also receive an email for each deployment with the URL. 57 | 58 | ## Sharing your solution 59 | 60 | There are multiple places you can share your solution: 61 | 62 | 1. Submit it on the platform so that other users will see your solution on the site. Other users will be able to give you feedback, which could help improve your code for the next project. 63 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 64 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 65 | 66 | ## Giving feedback 67 | 68 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 69 | 70 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 71 | 72 | **Have fun building!** 🚀 73 | -------------------------------------------------------------------------------- /insure-landing-page/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/design/active-states.jpg -------------------------------------------------------------------------------- /insure-landing-page/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/design/desktop-design.jpg -------------------------------------------------------------------------------- /insure-landing-page/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/design/desktop-preview.jpg -------------------------------------------------------------------------------- /insure-landing-page/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/design/mobile-design.jpg -------------------------------------------------------------------------------- /insure-landing-page/design/mobile-nav-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/design/mobile-nav-design.jpg -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-footer-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-footer-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-how-we-work-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-how-we-work-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-intro-left-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-intro-left-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-intro-right-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-intro-right-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/bg-pattern-mobile-nav.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/images/favicon-32x32.png -------------------------------------------------------------------------------- /insure-landing-page/images/icon-affordable-prices.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-facebook.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-instagram.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-people-first.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-pinterest.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-snappy-process.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/images/image-intro-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/images/image-intro-desktop.jpg -------------------------------------------------------------------------------- /insure-landing-page/images/image-intro-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/insure-landing-page/images/image-intro-mobile.jpg -------------------------------------------------------------------------------- /insure-landing-page/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /insure-landing-page/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.getElementById('hamburger'); 2 | const menu = document.getElementById('menu'); 3 | 4 | hamburger.addEventListener('click', () => { 5 | hamburger.classList.toggle('show'); 6 | menu.classList.toggle('show'); 7 | }); 8 | -------------------------------------------------------------------------------- /insure-landing-page/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Dark Violet: hsl(256, 26%, 20%) 15 | - Grayish Blue: hsl(216, 30%, 68%) 16 | 17 | ### Neutral 18 | 19 | - Very Dark Violet: hsl(270, 9%, 17%) 20 | - Dark Grayish Violet: hsl(273, 4%, 51%) 21 | - Very Light Gray: hsl(0, 0%, 98%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size: 16px 28 | 29 | ### Headings 30 | 31 | - Family: [DM Serif Display](https://fonts.google.com/specimen/DM+Serif+Display) 32 | - Weights: 400 33 | 34 | ### Body 35 | 36 | - Family: [Karla](https://fonts.google.com/specimen/Karla) 37 | - Weights: 400, 700 38 | 39 | ## Icons 40 | 41 | You can use either use the social icons provided or load in a font icon library. Some library suggestions can be found below: 42 | 43 | - [Font Awesome](https://fontawesome.com) 44 | - [IcoMoon](https://icomoon.io) 45 | - [Ionicons](https://ionicons.com) -------------------------------------------------------------------------------- /ping-coming-soon-page-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/ping-coming-soon-page-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/desktop-hover-error-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/ping-coming-soon-page-master/design/desktop-hover-error-states.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/ping-coming-soon-page-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/ping-coming-soon-page-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/mobile-error-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/ping-coming-soon-page-master/design/mobile-error-state.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/ping-coming-soon-page-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /ping-coming-soon-page-master/images/illustration-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/ping-coming-soon-page-master/images/illustration-dashboard.png -------------------------------------------------------------------------------- /ping-coming-soon-page-master/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ping-coming-soon-page-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | Frontend Mentor | Ping coming soon page 16 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 |

28 | We are launching 29 | soon! 30 |

31 |

Subscribe and get notified

32 | 33 |
34 |
35 | 41 | Error 42 |
43 | 44 |
45 | 46 | illustration 51 | 52 | 74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /ping-coming-soon-page-master/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form'); 2 | 3 | form.addEventListener('submit', e => { 4 | e.preventDefault(); 5 | 6 | // check for email validation 7 | const email = form['email']; 8 | const emailValue = email.value; 9 | const small = form.querySelector('small'); 10 | 11 | if (!emailValue) { 12 | // say it's empty 13 | email.classList.add('error'); 14 | small.innerText = 'Email field cannot be blank!'; 15 | small.style.display = 'inline-block'; 16 | } else if (!isValidEmail(emailValue)) { 17 | // say it's invalid 18 | email.classList.add('error'); 19 | small.innerText = 'Email is invalid!'; 20 | small.style.display = 'inline-block'; 21 | } else { 22 | // submit it 23 | email.classList.remove('error'); 24 | small.innerText = ''; 25 | small.style.display = 'none'; 26 | } 27 | }); 28 | 29 | function isValidEmail(email) { 30 | var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 31 | return re.test(String(email).toLowerCase()); 32 | } 33 | -------------------------------------------------------------------------------- /ping-coming-soon-page-master/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Blue: hsl(223, 87%, 63%) 15 | 16 | ### Secondary 17 | 18 | - Pale Blue: hsl(223, 100%, 88%) 19 | - Light Red: hsl(354, 100%, 66%) 20 | 21 | ### Neutral 22 | 23 | - Gray: hsl(0, 0%, 59%) 24 | - Very Dark Blue: hsl(209, 33%, 12%) 25 | 26 | ## Typography 27 | 28 | ### Body Copy 29 | 30 | - Font size: 20px 31 | 32 | ### Fonts 33 | 34 | - Family: [Libre Franklin](https://fonts.google.com/specimen/Libre+Franklin) 35 | - Weights: 300, 600, 700 36 | 37 | ## Icons 38 | 39 | For the social icons, you can use a font icon library. Some suggestions can be found below: 40 | 41 | - [Font Awesome](https://fontawesome.com) 42 | - [IcoMoon](https://icomoon.io) 43 | - [Ionicons](https://ionicons.com) -------------------------------------------------------------------------------- /ping-coming-soon-page-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Libre+Franklin:300,600,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Libre Franklin', sans-serif; 9 | } 10 | 11 | main { 12 | max-width: 650px; 13 | margin: 60px auto; 14 | padding: 20px; 15 | text-align: center; 16 | } 17 | 18 | h1 { 19 | color: hsl(0, 0%, 59%); 20 | font-weight: 300; 21 | font-size: 50px; 22 | margin-bottom: 10px; 23 | } 24 | 25 | h1 strong { 26 | color: hsl(209, 33%, 12%); 27 | } 28 | 29 | h2 { 30 | color: hsl(209, 33%, 12%); 31 | font-weight: 300; 32 | } 33 | 34 | form { 35 | display: flex; 36 | align-items: flex-start; 37 | margin-top: 50px; 38 | text-align: left; 39 | } 40 | 41 | .form-left { 42 | flex: 0.7; 43 | } 44 | 45 | input { 46 | border: 1px solid hsl(223, 100%, 88%); 47 | border-radius: 50px; 48 | font-family: 'Libre Franklin', sans-serif; 49 | font-size: 16px; 50 | padding: 20px 25px; 51 | margin-bottom: 15px; 52 | width: 100%; 53 | } 54 | 55 | input::placeholder { 56 | color: hsl(223, 100%, 88%); 57 | } 58 | 59 | input.error { 60 | border-color: hsl(354, 100%, 66%); 61 | } 62 | 63 | input.error::placeholder { 64 | color: hsl(354, 100%, 66%); 65 | } 66 | 67 | form small { 68 | color: hsl(354, 100%, 66%); 69 | display: none; 70 | font-style: italic; 71 | z-index: 100; 72 | margin: 0 20px 40px; 73 | } 74 | 75 | button { 76 | background-color: hsl(223, 87%, 63%); 77 | border: none; 78 | border-radius: 50px; 79 | box-shadow: 0 5px 5px hsl(223, 100%, 88%); 80 | color: #fff; 81 | cursor: pointer; 82 | font-family: 'Libre Franklin', sans-serif; 83 | font-size: 16px; 84 | font-weight: 600; 85 | padding: 20px 0; 86 | margin-left: 20px; 87 | flex: 0.3; 88 | } 89 | 90 | button:hover { 91 | opacity: 0.8; 92 | } 93 | 94 | .illustration { 95 | max-width: 100%; 96 | margin: 60px 0; 97 | } 98 | 99 | .social-list { 100 | display: flex; 101 | align-items: center; 102 | justify-content: center; 103 | padding: 0; 104 | list-style-type: none; 105 | } 106 | 107 | .social-list li { 108 | margin: 10px; 109 | } 110 | 111 | .social-list li a { 112 | border: 1px solid hsl(0, 7%, 89%); 113 | border-radius: 50%; 114 | color: hsl(223, 87%, 63%); 115 | display: inline-flex; 116 | align-items: center; 117 | justify-content: center; 118 | font-size: 18px; 119 | height: 40px; 120 | width: 40px; 121 | text-decoration: none; 122 | } 123 | 124 | .social-list li a:hover { 125 | background-color: hsl(223, 87%, 63%); 126 | border-color: hsl(223, 87%, 63%); 127 | color: #fff; 128 | } 129 | 130 | footer p { 131 | color: hsl(0, 0%, 59%); 132 | } 133 | 134 | @media screen and (max-width: 650px) { 135 | form { 136 | flex-direction: column; 137 | text-align: center; 138 | } 139 | 140 | .form-left { 141 | width: 100%; 142 | } 143 | 144 | button { 145 | margin-left: 0; 146 | width: 100%; 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /pricing-toggle-component/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /pricing-toggle-component/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/pricing-toggle-component/design/active-states.jpg -------------------------------------------------------------------------------- /pricing-toggle-component/design/desktop-design-annually.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/pricing-toggle-component/design/desktop-design-annually.jpg -------------------------------------------------------------------------------- /pricing-toggle-component/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/pricing-toggle-component/design/desktop-design.jpg -------------------------------------------------------------------------------- /pricing-toggle-component/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/pricing-toggle-component/design/desktop-preview.jpg -------------------------------------------------------------------------------- /pricing-toggle-component/design/mobile-design-annually.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/pricing-toggle-component/design/mobile-design-annually.jpg -------------------------------------------------------------------------------- /pricing-toggle-component/design/mobile-design-monthly.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/pricing-toggle-component/design/mobile-design-monthly.jpg -------------------------------------------------------------------------------- /pricing-toggle-component/images/bg-bottom.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pricing-toggle-component/images/bg-top.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /pricing-toggle-component/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/pricing-toggle-component/images/favicon-32x32.png -------------------------------------------------------------------------------- /pricing-toggle-component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | Frontend Mentor | Prices Component 16 | 17 | 18 | 19 | 20 | 21 |
22 |

Our Pricing

23 | 24 |
25 | Annually 26 | 27 | 28 | 31 | 32 | Monthly 33 |
34 | 35 |
36 |
37 |

Basic

38 |

39 | 40 | $19.99 41 | 42 | 43 | $199.99 44 | 45 |

46 |
    47 |
  • 500 GB Storage
    • 48 |
  • 2 Users Allowed
    • 49 |
  • Send up to 3 GB
    • 50 |
51 | 52 |
53 | 54 |
55 |

Professional

56 |

57 | 58 | $24.99 59 | 60 | 61 | $249.99 62 | 63 |

64 |
    65 |
  • 1 TB Storage
    • 66 |
  • 5 Users Allowed
    • 67 |
  • Send up to 10 GB
    • 68 |
69 | 70 |
71 | 72 |
73 |

Master

74 |

75 | 76 | $39.99 77 | 78 | 79 | $399.99 80 | 81 |

82 |
    83 |
  • 2 TB Storage
    • 84 |
  • 10 Users Allowed
    • 85 |
  • Send up to 20 GB
    • 86 |
87 | 88 |
89 |
90 |
91 | 92 | 93 | -------------------------------------------------------------------------------- /pricing-toggle-component/script.js: -------------------------------------------------------------------------------- 1 | const toggle = document.getElementById('toggle'); 2 | const flexy = document.getElementById('flexy'); 3 | 4 | toggle.addEventListener('change', e => { 5 | flexy.classList.toggle('show-monthly'); 6 | }); 7 | -------------------------------------------------------------------------------- /pricing-toggle-component/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Linear Gradient: hsl(236, 72%, 79%) to hsl(237, 63%, 64%) 15 | 16 | ### Neutral 17 | 18 | - Very Light Grayish Blue: hsl(240, 78%, 98%) 19 | - Light Grayish Blue: hsl(234, 14%, 74%) 20 | - Grayish Blue: hsl(233, 13%, 49%) 21 | - Dark Grayish Blue: hsl(232, 13%, 33%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size: 15px 28 | 29 | ### Font 30 | 31 | - Family: [Montserrat](https://fonts.google.com/specimen/Montserrat) 32 | - Weight: 700 33 | -------------------------------------------------------------------------------- /pricing-toggle-component/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: hsl(240, 78%, 98%); 9 | color: hsl(232, 13%, 33%); 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | font-family: 'Montserrat', sans-serif; 14 | text-align: center; 15 | min-height: 100vh; 16 | } 17 | 18 | body::before { 19 | content: ''; 20 | background-image: url('./images/bg-top.svg'); 21 | background-repeat: no-repeat; 22 | background-position: top right; 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | height: 100%; 27 | width: 100%; 28 | z-index: -1; 29 | } 30 | 31 | body::after { 32 | content: ''; 33 | background-image: url('./images/bg-bottom.svg'); 34 | background-repeat: no-repeat; 35 | background-position: bottom left; 36 | position: absolute; 37 | bottom: 0; 38 | left: 0; 39 | height: 100%; 40 | width: 100%; 41 | z-index: -1; 42 | } 43 | 44 | .container { 45 | margin: auto; 46 | max-width: 100%; 47 | width: 1200px; 48 | } 49 | 50 | .flex { 51 | display: flex; 52 | align-items: center; 53 | justify-content: center; 54 | } 55 | 56 | h1 { 57 | color: hsl(233, 13%, 49%); 58 | } 59 | 60 | .toggle-container { 61 | color: hsl(234, 14%, 74%); 62 | margin-bottom: 40px; 63 | } 64 | 65 | .price-box { 66 | background-color: #fff; 67 | border-radius: 10px; 68 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 69 | color: hsl(233, 13%, 49%); 70 | padding: 30px; 71 | margin: 10px; 72 | } 73 | 74 | .price-box.price-box-premium { 75 | background-image: linear-gradient( 76 | to right, 77 | hsl(236, 72%, 79%), 78 | hsl(237, 63%, 64%) 79 | ); 80 | color: #fff; 81 | 82 | transform: scale(1.15); 83 | } 84 | 85 | .price-box.price-box-premium > * { 86 | /* Number provided by Theo 🎉 */ 87 | transform: scale(0.869); 88 | } 89 | 90 | .price-box h4 { 91 | margin: 0; 92 | } 93 | 94 | .price-box p { 95 | color: hsl(232, 13%, 33%); 96 | font-size: 4em; 97 | margin: 15px 0; 98 | width: 250px; 99 | } 100 | 101 | .price-box .monthly { 102 | display: none; 103 | } 104 | 105 | .show-monthly .price-box .monthly { 106 | display: block; 107 | } 108 | 109 | .show-monthly .price-box .annually { 110 | display: none; 111 | } 112 | 113 | .price-box ul { 114 | border-top: 1px solid hsl(234, 14%, 74%); 115 | padding: 0; 116 | list-style-type: none; 117 | } 118 | 119 | .price-box ul li { 120 | border-bottom: 1px solid hsl(234, 14%, 74%); 121 | font-size: 14px; 122 | padding: 15px 0; 123 | } 124 | 125 | .price-box button { 126 | background-image: linear-gradient( 127 | to right, 128 | hsl(236, 72%, 79%), 129 | hsl(237, 63%, 64%) 130 | ); 131 | border: none; 132 | border-radius: 5px; 133 | color: #fff; 134 | font-family: 'Montserrat', sans-serif; 135 | letter-spacing: 2px; 136 | padding: 15px; 137 | margin-top: 10px; 138 | width: 100%; 139 | text-transform: uppercase; 140 | } 141 | 142 | .price-box.price-box-premium button { 143 | background-image: none; 144 | background-color: #fff; 145 | color: hsl(237, 63%, 64%); 146 | } 147 | 148 | .price-box.price-box-premium ul, 149 | .price-box.price-box-premium ul li { 150 | border-color: #f0f0f0; 151 | } 152 | .price-box.price-box-premium p { 153 | color: #fff; 154 | } 155 | 156 | /* Pill toggle */ 157 | .toggle-container { 158 | display: flex; 159 | align-items: center; 160 | justify-content: center; 161 | } 162 | 163 | .toggle-container label { 164 | background-image: linear-gradient( 165 | to right, 166 | hsl(236, 72%, 79%), 167 | hsl(237, 63%, 64%) 168 | ); 169 | border-radius: 50px; 170 | cursor: pointer; 171 | display: inline-block; 172 | margin: 0 10px; 173 | position: relative; 174 | height: 30px; 175 | width: 60px; 176 | } 177 | 178 | .toggle-container label .ball { 179 | background-color: #fff; 180 | border-radius: 50%; 181 | position: absolute; 182 | top: 2.5px; 183 | left: 2.5px; 184 | height: 25px; 185 | width: 25px; 186 | transition: transform 0.4s ease; 187 | } 188 | 189 | .toggle-container input { 190 | position: absolute; 191 | left: -9999px; 192 | } 193 | 194 | .toggle-container input:checked + label .ball { 195 | transform: translateX(30px); 196 | } 197 | 198 | @media screen and (max-width: 930px) { 199 | .flex { 200 | flex-direction: column; 201 | } 202 | 203 | .price-box.price-box-premium { 204 | transform: scale(1); 205 | } 206 | 207 | .price-box.price-box-premium > * { 208 | transform: scale(1); 209 | } 210 | } 211 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const projects = [ 2 | { 3 | name: 'four-card-feature-section-master', 4 | youtube: 5 | 'https://www.youtube.com/watch?v=PcSUEo0P0GU&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=2&t=0s' 6 | }, 7 | { 8 | name: 'base-apparel-coming-soon-master', 9 | youtube: 10 | 'https://www.youtube.com/watch?v=8A7-0gsbHA0&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=3&t=0s' 11 | }, 12 | { 13 | name: 'signup-form-master', 14 | youtube: 15 | 'https://www.youtube.com/watch?v=bFOuUypjkSM&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=4&t=0s' 16 | }, 17 | { 18 | name: 'single-price-grid-component-master', 19 | youtube: 20 | 'https://www.youtube.com/watch?v=pbsvhVPFHX0&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=5&t=0s' 21 | }, 22 | { 23 | name: 'ping-coming-soon-page-master', 24 | youtube: 25 | 'https://www.youtube.com/watch?v=kvsmBV19Sz0&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=6&t=0s' 26 | }, 27 | { 28 | name: 'huddle-landing-page', 29 | youtube: 30 | 'https://www.youtube.com/watch?v=wnb-BfjR-oo&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=7&t=0s' 31 | }, 32 | { 33 | name: 'huddle-simple-landing', 34 | youtube: 35 | 'https://www.youtube.com/watch?v=ObrYwPRyeqc&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=8&t=0s' 36 | }, 37 | { 38 | name: 'fylo-landing-page', 39 | youtube: 40 | 'https://www.youtube.com/watch?v=a9-Ro9rc7E4&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=9&t=0s' 41 | }, 42 | { 43 | name: 'insure-landing-page', 44 | youtube: 45 | 'https://www.youtube.com/watch?v=9HVKR_hK0nY&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=10&t=0s' 46 | }, 47 | { 48 | name: 'pricing-toggle-component', 49 | youtube: 50 | 'https://www.youtube.com/watch?v=NBkD-O7f4Bs&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=11&t=0s' 51 | }, 52 | { 53 | name: 'tracking-info', 54 | youtube: 55 | 'https://www.youtube.com/watch?v=71HM728Mul4&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=11&t=0s' 56 | }, 57 | { 58 | name: 'clipboard-landing-page', 59 | youtube: 60 | 'https://www.youtube.com/watch?v=aZeKU7xoT0w&list=PLgBH1CvjOA63Xvt0BaeQ7zL4KXX96Wbgp&index=11&t=0s' 61 | } 62 | ]; 63 | 64 | const list = document.getElementById('list'); 65 | 66 | projects.forEach(({ name, youtube }, i) => { 67 | const listItem = document.createElement('li'); 68 | 69 | listItem.innerHTML = ` 70 | 71 | ${name} 72 |

${i + 1}. ${formatProjectName(name)}

73 | 74 | 75 |
76 | 77 | 78 | 79 | 80 | 81 | 82 |
83 | `; 84 | 85 | list.appendChild(listItem); 86 | }); 87 | 88 | function formatProjectName(name) { 89 | return name 90 | .split('-') 91 | .map(word => word[0].toUpperCase() + word.slice(1)) 92 | .join(' '); 93 | } 94 | -------------------------------------------------------------------------------- /signup-form-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /signup-form-master/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/signup-form-master/design/active-states.jpg -------------------------------------------------------------------------------- /signup-form-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/signup-form-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /signup-form-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/signup-form-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /signup-form-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/signup-form-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /signup-form-master/images/bg-intro-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/signup-form-master/images/bg-intro-desktop.png -------------------------------------------------------------------------------- /signup-form-master/images/bg-intro-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/signup-form-master/images/bg-intro-mobile.png -------------------------------------------------------------------------------- /signup-form-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/signup-form-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /signup-form-master/images/icon-error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /signup-form-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | Frontend Mentor | Intro component with sign up form 16 | 17 | 18 | 19 | 20 |
21 |
22 |

23 | Learn to code by 24 |
25 | watching others 26 |

27 |

28 | See how experienced developers solve problems in real-time. Watching 29 | scripted tutorials is great, but understanding how developers think is 30 | invaluable. 31 |

32 |
33 |
34 |
35 |

36 | Try it free 7 days 37 | then $20/mo. thereafter 38 |

39 |
40 | 41 |
42 |
43 | 44 | error-icon 45 | 46 |
47 |
48 | 49 | error-icon 50 | 51 |
52 |
53 | 54 | error-icon 55 | 56 |
57 |
58 | 59 | error-icon 60 | 61 |
62 | 63 | 64 | 65 | By clicking the button, you are agreeing to our 66 | Terms and Services 67 | 68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /signup-form-master/script.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('form'); 2 | 3 | form.addEventListener('submit', e => { 4 | e.preventDefault(); 5 | 6 | const firstName = form['firstname'].value; 7 | const lastName = form['lastname'].value; 8 | const email = form['email'].value; 9 | const password = form['password'].value; 10 | 11 | if (firstName === '') { 12 | addErrorTo('firstname', 'First Name is required'); 13 | } else { 14 | removeErrorFrom('firstname'); 15 | } 16 | 17 | if (lastName === '') { 18 | addErrorTo('lastname', 'Last Name is required'); 19 | } else { 20 | removeErrorFrom('lastname'); 21 | } 22 | 23 | if (email === '') { 24 | addErrorTo('email', 'Email is required'); 25 | } else if (!isValid(email)) { 26 | addErrorTo('email', 'Email is not valid'); 27 | } else { 28 | removeErrorFrom('email'); 29 | } 30 | 31 | if (password === '') { 32 | addErrorTo('password', 'Password is required'); 33 | } else { 34 | removeErrorFrom('password'); 35 | } 36 | }); 37 | 38 | function addErrorTo(field, message) { 39 | const formControl = form[field].parentNode; 40 | formControl.classList.add('error'); 41 | 42 | const small = formControl.querySelector('small'); 43 | small.innerText = message; 44 | } 45 | 46 | function removeErrorFrom(field) { 47 | const formControl = form[field].parentNode; 48 | formControl.classList.remove('error'); 49 | } 50 | 51 | function isValid(email) { 52 | var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 53 | return re.test(String(email).toLowerCase()); 54 | } 55 | -------------------------------------------------------------------------------- /signup-form-master/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Red: hsl(0, 100%, 74%) 15 | - Green: hsl(154, 59%, 51%) 16 | 17 | ### Accent 18 | 19 | - Blue: hsl(248, 32%, 49%) 20 | 21 | ### Neutral 22 | 23 | - Dark Blue: hsl(249, 10%, 26%) 24 | - Grayish Blue: hsl(246, 25%, 77%) 25 | 26 | ## Typography 27 | 28 | ### Body Copy 29 | 30 | - Font size: 16px 31 | 32 | ### Font 33 | 34 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 35 | - Weights: 400, 500, 600, 700 36 | -------------------------------------------------------------------------------- /signup-form-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: hsl(0, 100%, 74%); 9 | background-image: url('./images/bg-intro-desktop.png'); 10 | color: #fff; 11 | font-family: 'Poppins', sans-serif; 12 | } 13 | 14 | .container { 15 | display: flex; 16 | align-items: center; 17 | justify-content: center; 18 | flex-wrap: wrap; 19 | max-width: 1200px; 20 | margin: 0 auto; 21 | min-height: 100vh; 22 | } 23 | 24 | .container > div { 25 | flex: 1; 26 | padding: 0 20px; 27 | } 28 | 29 | h1 { 30 | font-size: 40px; 31 | line-height: 50px; 32 | } 33 | 34 | p { 35 | font-size: 15px; 36 | opacity: 0.8; 37 | } 38 | 39 | .box { 40 | background-color: #fff; 41 | border-radius: 5px; 42 | box-shadow: 0 6px rgba(0, 0, 0, 0.2); 43 | padding: 30px; 44 | margin-bottom: 20px; 45 | text-align: center; 46 | } 47 | 48 | .box p { 49 | margin: 0; 50 | } 51 | 52 | .box-blue { 53 | background-color: hsl(248, 32%, 49%); 54 | padding: 20px; 55 | } 56 | 57 | .form-control { 58 | position: relative; 59 | margin-bottom: 30px; 60 | } 61 | 62 | .form-control small { 63 | color: hsl(0, 100%, 74%); 64 | font-weight: 600; 65 | position: absolute; 66 | bottom: -24px; 67 | right: 0; 68 | opacity: 0; 69 | text-align: right; 70 | } 71 | 72 | input { 73 | border-radius: 5px; 74 | border: 1.3px solid hsl(246, 25%, 77%); 75 | font-family: 'Poppins', sans-serif; 76 | font-size: 14px; 77 | font-weight: 500; 78 | padding: 15px 25px; 79 | display: block; 80 | width: 100%; 81 | } 82 | 83 | .form-control.error input { 84 | border-color: hsl(0, 100%, 74%); 85 | color: hsl(0, 100%, 74%); 86 | } 87 | 88 | .form-control.error input::placeholder { 89 | color: hsl(0, 100%, 74%); 90 | } 91 | 92 | input:focus { 93 | border: 1.3px solid hsl(248, 32%, 49%); 94 | outline: none; 95 | } 96 | 97 | .form-control img { 98 | opacity: 0; 99 | position: absolute; 100 | top: 50%; 101 | right: 15px; 102 | transform: translateY(-50%); 103 | height: 20px; 104 | } 105 | 106 | .form-control.error img { 107 | opacity: 1; 108 | } 109 | 110 | button { 111 | background-color: hsl(154, 59%, 51%); 112 | border-radius: 5px; 113 | border: 1px solid hsl(154, 59%, 45%); 114 | box-shadow: 0 2px hsl(154, 59%, 45%); 115 | color: #fff; 116 | cursor: pointer; 117 | display: block; 118 | font-family: 'Poppins', sans-serif; 119 | font-size: 14px; 120 | font-weight: 500; 121 | padding: 15px 25px; 122 | letter-spacing: 1px; 123 | text-transform: uppercase; 124 | width: 100%; 125 | } 126 | 127 | button:focus { 128 | outline: none; 129 | } 130 | 131 | button:active { 132 | box-shadow: 0 0 hsl(154, 59%, 45%); 133 | transform: translateY(2px); 134 | } 135 | 136 | .form-control small { 137 | opacity: 0; 138 | } 139 | 140 | .form-control.error small { 141 | opacity: 1; 142 | } 143 | 144 | small { 145 | display: block; 146 | color: #bbb; 147 | font-size: 11px; 148 | font-weight: 500; 149 | margin-top: 15px; 150 | } 151 | 152 | small a { 153 | color: hsl(0, 100%, 74%); 154 | font-weight: 600; 155 | text-decoration: none; 156 | } 157 | 158 | @media screen and (max-width: 768px) { 159 | h1 { 160 | text-align: center; 161 | } 162 | 163 | p { 164 | text-align: center; 165 | } 166 | 167 | .container { 168 | flex-direction: column; 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /single-price-grid-component-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /single-price-grid-component-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Single Price Grid Component 2 | 3 | ![Design preview for the Single Price Grid Component coding challenge](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenge, you need a basic understanding of HTML and CSS.** 12 | 13 | ## The challenge 14 | 15 | Your users should be able to: 16 | 17 | - View the optimal layout for the component depending on their device's screen size 18 | - See a hover state on desktop for the Sign Up call-to-action 19 | 20 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. 21 | 22 | ## Where to find everything 23 | 24 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 25 | 26 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 27 | 28 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 29 | 30 | You will find all the required assets in the `/images` folder. The assets are already optimized. 31 | 32 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 33 | 34 | ## Building your project 35 | 36 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 37 | 38 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 39 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [ZEIT Now](http://bit.ly/fem-zeit). We've got more information about deploying your project with ZEIT below. 40 | 3. Look through the designs to start planning out how you'll tackle the project. This step is crucial to help you think ahead for CSS classes that you could create to make reusable styles. 41 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 42 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 43 | 6. Start adding styles to the top of the page and work down. Only move on to the next section once you're happy you've completed the area you're working on. 44 | 7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](http://bit.ly/fem-sizzy). It's a great browser that makes it easy to view your site across multiple devices. 45 | 46 | ## Deploying your project 47 | 48 | As mentioned above, there are a number of ways to host your project for free. We recommend using [ZEIT Now](http://bit.ly/fem-zeit) as it's an amazing service and extremely simple to get set up with. If you'd like to use ZEIT, here are some steps to follow to get started: 49 | 50 | 1. [Sign up to ZEIT Now](http://bit.ly/fem-zeit-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [ZEIT Now for GitHub](https://zeit.co/docs/v2/git-integrations/zeit-now-for-github) integration. 51 | 2. Connect your project to ZEIT Now from the ["Create a new project" page](https://zeit.co/new), using the "New Project From GitHub" button and selecting the project you want to deploy. 52 | 3. Once connected, every time you `git push`, ZEIT Now will create a new [deployment](https://zeit.co/docs/v2/platform/deployments) and the deployment URL will be shown on your [ZEIT Dashboard](https://zeit.co/dashboard). You will also receive an email for each deployment with the URL. 53 | 54 | ## Sharing your solution 55 | 56 | There are multiple places you can share your solution: 57 | 58 | 1. Submit it on the platform so that other users will see your solution on the site. Other users will be able to give you feedback, which could help improve your code for the next project. 59 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 60 | 3. Tweet [@frontendmentor](https://twitter.com/frontendmentor) and mention **@frontendmentor** including the repo and live URLs in the tweet. We'd love to take a look at what you've built and help share it around. 61 | 62 | ## Giving feedback 63 | 64 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 65 | 66 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 67 | 68 | **Have fun building!** 🚀 69 | -------------------------------------------------------------------------------- /single-price-grid-component-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/single-price-grid-component-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /single-price-grid-component-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/single-price-grid-component-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /single-price-grid-component-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/single-price-grid-component-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /single-price-grid-component-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/single-price-grid-component-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /single-price-grid-component-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | Frontend Mentor | Single Price Grid Component 16 | 17 | 18 | 19 | 20 |
21 |
22 |

23 | Join our community 24 |

25 | 26 |

27 | 30-day, hassle-free money back guarantee 28 |

29 |

30 | Gain access to our full library of tutorials along with expert code 31 | reviews. 32 |

33 |

34 | Perfect for any developers who are serious about honing their skills. 35 |

36 |
37 | 38 |
39 |
40 |

41 | Monthly Subscription 42 |

43 | 44 |

45 | $29 46 | per month 47 |

48 | 49 |

50 | Full access for less than $1 a day 51 |

52 | 53 | 56 |
57 | 58 |
59 |

60 | Why Us 61 |

62 | 63 |
    64 |
  • Tutorials by industry experts
    • 65 |
  • Peer & expert code review
    • 66 |
  • Coding exercises
    • 67 |
  • Access to our GitHub repos
    • 68 |
  • Community forum
    • 69 |
  • Flashcard decks
    • 70 |
  • New videos every week
    • 71 |
72 |
73 |
74 |
75 | 76 | 77 | -------------------------------------------------------------------------------- /single-price-grid-component-master/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Cyan: hsl(179, 62%, 43%) 15 | - Bright Yellow: hsl(71, 73%, 54%) 16 | 17 | ### Neutral 18 | 19 | - Light Gray: hsl(204, 43%, 93%) 20 | - Grayish Blue: hsl(218, 22%, 67%) 21 | 22 | ## Typography 23 | 24 | ### Body Copy 25 | 26 | - Font size: 16px 27 | 28 | ### Font 29 | 30 | - Family: [Karla](https://fonts.google.com/specimen/Karla) 31 | - Weights: 400, 700 32 | -------------------------------------------------------------------------------- /single-price-grid-component-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Karla:400,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: hsl(204, 43%, 93%); 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | font-family: 'Karla', sans-serif; 13 | padding: 20px; 14 | margin: 0; 15 | min-height: 100vh; 16 | } 17 | 18 | main { 19 | background-color: #fff; 20 | border-radius: 10px; 21 | box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.05); 22 | max-width: 800px; 23 | margin: auto; 24 | overflow: hidden; 25 | width: 800px; 26 | } 27 | 28 | section { 29 | padding: 35px; 30 | } 31 | 32 | .greyish-blue { 33 | background-color: hsl(179, 47%, 52%); 34 | color: #fff; 35 | } 36 | 37 | .cyan { 38 | background-color: hsl(179, 62%, 43%); 39 | color: #fff; 40 | } 41 | 42 | .row { 43 | display: flex; 44 | } 45 | 46 | .row > section { 47 | flex: 1; 48 | } 49 | 50 | h1 { 51 | color: hsl(179, 62%, 43%); 52 | font-size: 34px; 53 | } 54 | 55 | .yellow-text { 56 | color: hsl(71, 73%, 54%); 57 | } 58 | 59 | p { 60 | font-size: 18px; 61 | } 62 | 63 | p.light-black { 64 | color: #999; 65 | margin: 7px; 66 | } 67 | 68 | p.faded { 69 | color: hsl(179, 43%, 75%); 70 | display: flex; 71 | align-items: center; 72 | /* LEE-UM WANTS A DIRTY HACK... ADD IT HERE! */ 73 | } 74 | 75 | p.faded span { 76 | color: #fff; 77 | font-size: 50px; 78 | margin-right: 10px; 79 | } 80 | 81 | button { 82 | background-color: hsl(71, 73%, 54%); 83 | border-radius: 5px; 84 | border: none; 85 | box-shadow: 0 5px 10px 10px rgba(0, 0, 0, 0.05); 86 | color: #fff; 87 | font-family: 'Karla', sans-serif; 88 | font-size: 18px; 89 | font-weight: 700; 90 | padding: 20px 0; 91 | margin-top: 15px; 92 | width: 100%; 93 | } 94 | 95 | ul { 96 | list-style-type: none; 97 | padding: 0; 98 | opacity: 0.7; 99 | } 100 | 101 | ul li { 102 | line-height: 28px; 103 | } 104 | 105 | @media screen and (max-width: 600px) { 106 | .row { 107 | flex-direction: column; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Poppins:300,500&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: #fefefe; 9 | font-family: 'Poppins', sans-serif; 10 | margin-bottom: 50px; 11 | } 12 | 13 | .container { 14 | width: 1200px; 15 | margin: auto; 16 | max-width: 100%; 17 | } 18 | 19 | h1 { 20 | text-align: center; 21 | } 22 | 23 | h2 { 24 | position: relative; 25 | } 26 | 27 | h2::after { 28 | content: ''; 29 | background-color: #000; 30 | border-radius: 10px; 31 | position: absolute; 32 | bottom: -5px; 33 | left: 0; 34 | height: 4px; 35 | width: 70px; 36 | } 37 | 38 | ul { 39 | display: flex; 40 | flex-wrap: wrap; 41 | justify-content: center; 42 | list-style-type: none; 43 | padding: 0; 44 | } 45 | 46 | ul li { 47 | background-color: #fff; 48 | box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.15); 49 | margin: 20px; 50 | width: 350px; 51 | } 52 | 53 | ul li a { 54 | color: #000; 55 | text-decoration: none; 56 | } 57 | 58 | ul li img { 59 | display: block; 60 | object-fit: cover; 61 | margin-bottom: 15px; 62 | transition: transform 0.3s ease; 63 | height: 200px; 64 | width: 350px; 65 | } 66 | 67 | ul li p { 68 | font-weight: bold; 69 | padding: 0 15px; 70 | } 71 | 72 | .links-container { 73 | padding: 15px; 74 | margin-top: 40px; 75 | } 76 | 77 | .links-container a { 78 | color: #fff; 79 | display: inline-flex; 80 | align-items: center; 81 | justify-content: center; 82 | font-size: 18px; 83 | text-decoration: none; 84 | margin-right: 5px; 85 | height: 35px; 86 | width: 35px; 87 | transition: transform 0.3s ease; 88 | } 89 | 90 | .links-container a.blue { 91 | background-color: #34a0e9; 92 | } 93 | 94 | .links-container a.youtube { 95 | background-color: #ea0000; 96 | } 97 | 98 | .links-container a:hover { 99 | transform: scale(1.2); 100 | } 101 | 102 | footer { 103 | background-color: #222; 104 | color: #fff; 105 | font-size: 18px; 106 | position: fixed; 107 | bottom: 0; 108 | left: 0; 109 | padding: 10px; 110 | width: 100%; 111 | text-align: center; 112 | } 113 | 114 | footer a { 115 | color: #fff; 116 | } 117 | 118 | footer i { 119 | color: red; 120 | } 121 | -------------------------------------------------------------------------------- /tracking-info/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /tracking-info/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /tracking-info/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/tracking-info/design/active-states.jpg -------------------------------------------------------------------------------- /tracking-info/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/tracking-info/design/desktop-design.jpg -------------------------------------------------------------------------------- /tracking-info/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/tracking-info/design/desktop-preview.jpg -------------------------------------------------------------------------------- /tracking-info/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/tracking-info/design/mobile-design.jpg -------------------------------------------------------------------------------- /tracking-info/design/mobile-navigation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/tracking-info/design/mobile-navigation.jpg -------------------------------------------------------------------------------- /tracking-info/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/florinpop17/frontend-mentor-challenges/4add9a6b5d469d6c7f874e17253c898e77018957/tracking-info/images/favicon-32x32.png -------------------------------------------------------------------------------- /tracking-info/images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tracking-info/images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tracking-info/images/illustration-devices.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tracking-info/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tracking-info/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | 15 | Frontend Mentor | Project tracking intro component 16 | 17 | 18 | 19 | 20 | 21 | 46 | 47 |
48 |
49 |
50 |

51 | New 52 | Monograph Dashboard 53 |

54 |

55 | Powerful insights into your team 56 |

57 |

58 | Project planning and time tracking for agile teams 59 |

60 | 61 |
62 | 65 | 66 |

67 | to see a live preview 68 |

69 |
70 |
71 | 72 |
73 | devices 78 |
79 |
80 |
81 | 82 | 83 | -------------------------------------------------------------------------------- /tracking-info/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.getElementById('hamburger'); 2 | const { body } = document; 3 | 4 | hamburger.addEventListener('click', e => { 5 | body.classList.toggle('show-nav'); 6 | }); 7 | -------------------------------------------------------------------------------- /tracking-info/style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Red: hsl(0, 100%, 68%) 15 | 16 | ### Neutral 17 | 18 | - Very Dark Blue: hsl(230, 29%, 20%) 19 | - Dark Grayish Blue: hsl(230, 11%, 40%) 20 | - Grayish Blue: hsl(231, 7%, 65%) 21 | - Light Grayish Blue: hsl(207, 33%, 95%) 22 | 23 | ## Typography 24 | 25 | ### Body Copy 26 | 27 | - Font size: 18px 28 | 29 | ### Headings, Call-to-actions, Navigation 30 | 31 | - Family: [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed) 32 | - Weights: 400, 700 33 | 34 | ### Body 35 | 36 | - Family: [Barlow](https://fonts.google.com/specimen/Barlow) 37 | - Weights: 400 38 | -------------------------------------------------------------------------------- /tracking-info/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Barlow|Barlow+Condensed:400,700&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | :root { 8 | --red: hsl(0, 100%, 68%); 9 | --very-dark-blue: hsl(230, 29%, 20%); 10 | --dark-grayish-blue: hsl(230, 11%, 40%); 11 | --grayish-blue: hsl(231, 7%, 65%); 12 | --light-grayish-blue: hsl(207, 33%, 95%); 13 | } 14 | 15 | body { 16 | background-color: #fff; 17 | color: var(--very-dark-blue); 18 | font-family: 'Barlow', sans-serif; 19 | font-size: 1.2em; 20 | overflow-x: hidden; 21 | } 22 | 23 | body::after { 24 | background-color: var(--light-grayish-blue); 25 | border-bottom-left-radius: 100px; 26 | content: ''; 27 | position: absolute; 28 | top: 0; 29 | right: 0; 30 | height: 50vh; 31 | width: 50vw; 32 | z-index: -1; 33 | } 34 | 35 | h1, 36 | h3, 37 | button, 38 | nav a { 39 | font-family: 'Barlow Condensed', sans-serif; 40 | text-transform: uppercase; 41 | } 42 | 43 | h1 { 44 | font-size: 5em; 45 | margin: 0; 46 | line-height: 1; 47 | } 48 | 49 | h3 { 50 | color: var(--grayish-blue); 51 | font-size: 1.2em; 52 | font-weight: 400; 53 | letter-spacing: 4px; 54 | } 55 | 56 | h3 span { 57 | background-color: var(--very-dark-blue); 58 | border-radius: 50px; 59 | color: #fff; 60 | padding: 5px 15px; 61 | margin-right: 10px; 62 | } 63 | 64 | img { 65 | max-width: 100%; 66 | } 67 | 68 | p { 69 | color: var(--dark-grayish-blue); 70 | font-size: 1.4em; 71 | } 72 | 73 | .btn { 74 | background-color: var(--red); 75 | border: 0; 76 | border-radius: 5px; 77 | color: #fff; 78 | font-size: 1.2em; 79 | padding: 15px 40px; 80 | margin-right: 20px; 81 | letter-spacing: 2px; 82 | } 83 | 84 | .container { 85 | display: flex; 86 | align-items: center; 87 | justify-content: space-between; 88 | padding: 0 20px; 89 | margin: 0 auto; 90 | max-width: 100%; 91 | width: 1200px; 92 | } 93 | 94 | .container > div { 95 | flex: 0.8; 96 | } 97 | 98 | .container > div:first-child { 99 | flex: 1.2; 100 | } 101 | 102 | .flex { 103 | display: flex; 104 | align-items: center; 105 | margin-top: 100px; 106 | } 107 | 108 | nav { 109 | margin: 40px 0; 110 | } 111 | 112 | .hamburger { 113 | display: none; 114 | } 115 | 116 | ul { 117 | display: flex; 118 | padding: 0; 119 | list-style-type: none; 120 | } 121 | 122 | ul li { 123 | margin-left: 40px; 124 | } 125 | 126 | ul li.unicorn { 127 | position: relative; 128 | margin-left: 80px; 129 | } 130 | 131 | ul li.unicorn::before { 132 | border-radius: 50%; 133 | background-color: var(--grayish-blue); 134 | content: ''; 135 | position: absolute; 136 | top: 50%; 137 | left: 0; 138 | transform: translate(-40px, -50%); 139 | opacity: 0.5; 140 | height: 8px; 141 | width: 8px; 142 | } 143 | 144 | ul li a { 145 | color: var(--very-dark-blue); 146 | font-weight: 700; 147 | text-decoration: none; 148 | } 149 | 150 | ul li.unicorn a { 151 | color: var(--grayish-blue); 152 | } 153 | 154 | main { 155 | display: flex; 156 | align-items: center; 157 | height: calc(100vh - 250px); 158 | } 159 | 160 | .illustration { 161 | transform: scale(2.2) translateX(25%); 162 | } 163 | 164 | @media screen and (max-width: 768px) { 165 | body { 166 | font-size: 1em; 167 | } 168 | 169 | h1 { 170 | font-size: 4em; 171 | } 172 | 173 | .hamburger { 174 | background-color: transparent; 175 | cursor: pointer; 176 | border: none; 177 | display: block; 178 | position: relative; 179 | z-index: 99; 180 | } 181 | 182 | .hamburger:hover { 183 | transform: scale(1.2); 184 | } 185 | 186 | .hamburger:focus { 187 | outline: none; 188 | } 189 | 190 | .icon-close { 191 | display: none; 192 | } 193 | 194 | .show-nav .icon-close { 195 | display: block; 196 | } 197 | 198 | .show-nav .icon-hamburger { 199 | display: none; 200 | } 201 | 202 | ul { 203 | background-color: #fff; 204 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); 205 | flex-direction: column; 206 | position: fixed; 207 | top: 70px; 208 | left: 20px; 209 | width: calc(100% - 40px); 210 | transform: translateX(120%); 211 | z-index: 100; 212 | transition: transform 0.4s ease; 213 | } 214 | 215 | .show-nav ul { 216 | transform: translateX(0); 217 | } 218 | 219 | ul li { 220 | margin: 20px 30px; 221 | text-align: center; 222 | } 223 | 224 | ul li.unicorn { 225 | margin: 40px 30px 20px; 226 | } 227 | 228 | ul li.unicorn::before { 229 | border-radius: 0; 230 | top: 0; 231 | left: 0; 232 | transform: translate(0, -25px); 233 | height: 1px; 234 | width: 100%; 235 | } 236 | 237 | ul li a { 238 | font-size: 1.5em; 239 | } 240 | 241 | .mobile-reverse { 242 | flex-direction: column-reverse; 243 | } 244 | 245 | .flex { 246 | margin-top: 50px; 247 | } 248 | 249 | .illustration { 250 | transform: scale(1) translateX(0%); 251 | margin: 0 0 50px; 252 | } 253 | } 254 | --------------------------------------------------------------------------------