├── .gitignore ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── _config.yml ├── 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 ├── main.js ├── style-guide.md └── style.css ├── coding-bootcamp-testimonials-slider-master ├── .gitignore ├── README.md ├── design │ ├── desktop-design-slide-1.jpg │ ├── desktop-design-slide-2.jpg │ ├── desktop-preview.jpg │ ├── mobile-design-slide-1.jpg │ └── mobile-design-slide-2.jpg ├── images │ ├── favicon-32x32.png │ ├── icon-next.svg │ ├── icon-prev.svg │ ├── image-john.jpg │ ├── image-tanya.jpg │ ├── pattern-bg.svg │ ├── pattern-curve.svg │ └── pattern-quotes.svg ├── index.html ├── main.js ├── 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 ├── huddle-landing-page-with-alternating-feature-blocks-master ├── .gitignore ├── README.md ├── css │ └── style.css ├── 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 ├── scss │ └── style.scss └── style-guide.md ├── img ├── close.svg ├── eye.svg ├── github.svg └── youtube.svg ├── index.html ├── intro-component-with-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 ├── main.js ├── style-guide.md └── style.css ├── main.js ├── 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 ├── main.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 /.gitignore: -------------------------------------------------------------------------------- 1 | .netlify -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Web Cifar 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-challenge 2 | 3 | **📺 YouTube Playlist: [open](https://www.youtube.com/playlist?list=PLRv_Gd5w9e7liRWZfoXX1MgNztk2HPMVp)** 4 | 5 | Here is the all challenges from frontend mentor that was taken by web cifar. Hope you will find it helpful. 6 | If you find it helpful, don't forget to give it a star ⭐ 7 | 8 | 9 | --- 10 | 11 | ### Made with ❤️ by [Shaif Arfan](https://www.instagram.com/shaifarfan08/) 12 | 13 | Like my works and want to support me? 14 | 15 | Buy Me A Coffee 16 | 17 | --- 18 | 19 | 20 | ## Other projects 21 | 22 | 📚 [All Web Cifar Project Tutorials](https://github.com/ShaifArfan/wc-project-tutorials) 23 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-midnight -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Base Apparel coming soon page 2 | 3 | ![Design preview for the Base Apparel coming soon 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, CSS and JavaScript.** 12 | 13 | ## The challenge 14 | 15 | Your challenge is to build out this coming soon 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 | - Receive an error message when the `form` is submitted if: 24 | - The `input` field is empty 25 | - The email address is not formatted correctly 26 | 27 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. 28 | 29 | ## Where to find everything 30 | 31 | 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. 32 | 33 | 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. 34 | 35 | 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/Pn38ZJp61). 36 | 37 | You will find all the required assets in the `/images` folder. The assets are already optimized. 38 | 39 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 40 | 41 | ## Building your project 42 | 43 | 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: 44 | 45 | 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/). 46 | 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. 47 | 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. 48 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 49 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 50 | 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. 51 | 52 | ## Deploying your project 53 | 54 | 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: 55 | 56 | 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. 57 | 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. 58 | 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. 59 | 60 | ## Sharing your solution 61 | 62 | There are multiple places you can share your solution: 63 | 64 | 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. 65 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 66 | 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. 67 | 68 | ## Giving feedback 69 | 70 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 71 | 72 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 73 | 74 | **Have fun building!** 🚀 75 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/base-apparel-coming-soon-master/design/active-states.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/base-apparel-coming-soon-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/base-apparel-coming-soon-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/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/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/base-apparel-coming-soon-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/hero-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/base-apparel-coming-soon-master/images/hero-desktop.jpg -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/images/hero-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/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 | 8 | 9 | 10 | Frontend Mentor | Base Apparel coming soon page 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |

We're
coming
soon

19 |

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

21 |
22 | 23 | 24 | 25 | 26 |

Please provide a valid email

27 |
28 |
29 |
30 |
31 | 32 | 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /base-apparel-coming-soon-master/main.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('.container form'); 2 | const email = document.querySelector('.container form input[type=email]'); 3 | 4 | form.addEventListener('submit', (e) => { 5 | e.preventDefault(); 6 | let emailValue = email.value; 7 | console.log(email.value); 8 | if (validateEmail(emailValue)) { 9 | form.classList.remove('error'); 10 | } else { 11 | form.classList.add('error'); 12 | } 13 | }); 14 | function validateEmail (email) { 15 | 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,}))$/; 16 | return re.test(String(email).toLowerCase()); 17 | } 18 | -------------------------------------------------------------------------------- /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/css2?family=Josefin+Sans:wght@300;400;600&display=swap'); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | font-family: 'Josefin Sans', sans-serif; 9 | font-size: 16px; 10 | } 11 | header { 12 | position: absolute; 13 | height: auto; 14 | width: 100%; 15 | padding: 30px; 16 | } 17 | header img { 18 | width: 150px; 19 | } 20 | .container { 21 | padding-top: 100px; 22 | min-height: 100vh; 23 | width: 100%; 24 | display: flex; 25 | flex-direction: column-reverse; 26 | justify-content: flex-end; 27 | align-items: center; 28 | background-image: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%)); 29 | padding-bottom: 50px; 30 | } 31 | .container .left { 32 | width: 100%; 33 | padding: 50px 30px 0 30px; 34 | } 35 | .container .right { 36 | width: 100%; 37 | height: 300px; 38 | background-image: url(./images/hero-mobile.jpg); 39 | background-size: cover; 40 | } 41 | .container .right img { 42 | width: 100%; 43 | height: 100%; 44 | } 45 | .container .left h1 { 46 | letter-spacing: .5rem; 47 | text-align: center; 48 | font-size: 3.2rem; 49 | font-weight: 200; 50 | text-transform: uppercase; 51 | color: hsl(0, 36%, 70%); 52 | line-height: 3.5rem; 53 | } 54 | .container .left h1 span { 55 | color: hsl(0, 6%, 24%); 56 | font-weight: 700; 57 | } 58 | .container .left p { 59 | max-width: 450px; 60 | text-align: center; 61 | color: hsl(0, 36%, 70%); 62 | font-size: .9rem; 63 | line-height: 1.5rem; 64 | margin: 20px auto 40px auto; 65 | } 66 | .container form { 67 | position: relative; 68 | display: block; 69 | height: 50px; 70 | width: 100%; 71 | max-width: 400px; 72 | margin: 0 auto; 73 | } 74 | .container form input { 75 | position: absolute; 76 | width: 100%; 77 | outline: none; 78 | border: 1px solid hsl(0, 36%, 70%); 79 | height: 100%; 80 | border-radius: 50px; 81 | padding-left: 30px; 82 | font-family: 'Josefin Sans', sans-serif; 83 | font-size: 1.1rem; 84 | } 85 | .container form label { 86 | visibility: hidden; 87 | position: absolute; 88 | } 89 | .container form button { 90 | cursor: pointer; 91 | position: absolute; 92 | right: 0; 93 | border: none; 94 | outline: none; 95 | color: white; 96 | width: 70px; 97 | height: 100%; 98 | border-radius: 50px; 99 | background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%)); 100 | box-shadow: 0px 0px 18px 1px #f4aaab82; 101 | transition: .3s ease box-shadow; 102 | } 103 | .container form button:hover { 104 | background-image: linear-gradient(135deg, hsl(0, 80%, 86%), hsla(0, 52%, 80%, 0.781)); 105 | box-shadow: 0px 0px 13px 2px #f4aaabbf; 106 | } 107 | .container form input::placeholder { 108 | color: hsl(0, 36%, 70%); 109 | font-family: 'Josefin Sans', sans-serif; 110 | font-size: 1.1rem; 111 | opacity: .8; 112 | } 113 | .container form .error-icon { 114 | display: inline-block; 115 | position: absolute; 116 | right: 85px; 117 | top: 24%; 118 | display: none; 119 | } 120 | .container form .error-text { 121 | position: absolute; 122 | left: 30px; 123 | top: 40px; 124 | font-size: 1rem; 125 | display: none; 126 | } 127 | .container form.error .error-icon, 128 | .container form.error .error-text { 129 | display: block; 130 | } 131 | .container form.error input { 132 | border: 2px solid hsl(0, 93%, 68%); 133 | } 134 | 135 | footer { 136 | padding: 10px 0; 137 | background-color: black; 138 | color: white; 139 | text-align: center; 140 | font-size: .8rem; 141 | line-height: 1.2rem; 142 | } 143 | footer a { 144 | color: aqua; 145 | text-decoration: none; 146 | } 147 | 148 | @media only screen and (min-width: 768px) { 149 | header { 150 | padding-left: 10%; 151 | } 152 | .container { 153 | padding-top: 0; 154 | flex-direction: row; 155 | padding-bottom: 0; 156 | } 157 | .container .right { 158 | width: 80%; 159 | height: 100vh; 160 | background-image: url(./images/hero-desktop.jpg); 161 | } 162 | .container .left { 163 | padding-top: 28vh; 164 | width: 100%; 165 | height: 100vh; 166 | padding-left: 10%; 167 | background-image: url(./images/bg-pattern-desktop.svg); 168 | background-size: cover; 169 | background-position: center; 170 | } 171 | .container .left h1 { 172 | text-align: left; 173 | font-size: 5rem; 174 | line-height: 5.5rem; 175 | } 176 | .container .left p { 177 | margin-left: 0; 178 | text-align: left; 179 | font-size: 1.1rem; 180 | } 181 | .container form { 182 | margin-left: 0; 183 | } 184 | .container form button { 185 | width: 80px; 186 | } 187 | } 188 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Coding Bootcamp Testimonials Slider 2 | 3 | ![Design preview for the Coding Bootcamp Testimonials Slider 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, CSS and JavaScript.** 12 | 13 | ## The challenge 14 | 15 | Your challenge is to build out this testimonial slider 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 component depending on their device's screen size 22 | - Navigate the slider using either their mouse/trackpad or keyboard 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 buy from the challenge page on the platform. 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 [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel 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](https://bit.ly/fm-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 [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started: 53 | 54 | 1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration. 55 | 2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy. 56 | 3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/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. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that. 63 | 2. Share your solution page 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 | 74 | ## Community Sponsors 75 | 76 | A massive thank you to our community sponsors! 77 | 78 | - [Vercel](https://bit.ly/fem-vercel) offers an amazing website hosting service, which is super simple to set up. Just connect your GitHub account, point to a repo and your site will be deployed. Perfect for your website and frontend hosting needs - especially since it's free to get started! 79 | - [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites! 80 | - [Dracula PRO](https://bit.ly/fem-dracula) is a beautiful dark theme to help keep you focused and productive while you code. The theme isn't just for your editor either. You can also apply it to your most-used apps like your terminal and even Slack! 81 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/design/desktop-design-slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/design/desktop-design-slide-1.jpg -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/design/desktop-design-slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/design/desktop-design-slide-2.jpg -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/design/mobile-design-slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/design/mobile-design-slide-1.jpg -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/design/mobile-design-slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/design/mobile-design-slide-2.jpg -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/icon-next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/icon-prev.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/image-john.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/images/image-john.jpg -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/image-tanya.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/coding-bootcamp-testimonials-slider-master/images/image-tanya.jpg -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/pattern-bg.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/pattern-curve.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/images/pattern-quotes.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Frontend Mentor | Coding Bootcamp Testimonials Slider 10 | 11 | 12 | 13 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |

24 | “ I’ve been interested in coding for a while but never taken the jump, until now. 25 | I couldn’t recommend this course enough. I’m now in the job of my dreams and so 26 | excited about the future. ” 27 |

28 |

Tanya Sinclair 29 | UX Engineer

30 |
31 |
32 | img 33 |
34 |
35 |
36 |
37 |

38 | “ If you want to lay the best foundation possible I’d recommend taking this course. 39 | The depth the instructors go into is incredible. I now feel so confident about 40 | starting up as a professional developer. ” 41 |

42 |

John Tarkpor 43 | Junior Front-end Developer

44 |
45 |
46 | img 47 |
48 |
49 |
50 | 51 | 52 |
53 |
54 |
55 | 56 |
57 | Challenge by Frontend Mentor. 58 | Coded by Your Name Here. 59 |
60 | 61 | 62 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/main.js: -------------------------------------------------------------------------------- 1 | const next = document.querySelector('.next'); 2 | const prev = document.querySelector('.prev'); 3 | const slides = document.querySelectorAll('.slide'); 4 | 5 | let index = 0; 6 | display(index); 7 | function display (index) { 8 | slides.forEach((slide) => { 9 | slide.style.display = 'none'; 10 | }); 11 | slides[index].style.display = 'flex'; 12 | } 13 | 14 | function nextSlide () { 15 | index++; 16 | if (index > slides.length - 1) { 17 | index = 0; 18 | } 19 | display(index); 20 | } 21 | function prevSlide () { 22 | index--; 23 | if (index < 0) { 24 | index = slides.length - 1; 25 | } 26 | display(index); 27 | } 28 | 29 | next.addEventListener('click', nextSlide); 30 | prev.addEventListener('click', prevSlide); 31 | -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-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 | - Dark Blue: hsl(240, 38%, 20%) 15 | - Grayish Blue: hsl(240, 18%, 77%) 16 | 17 | ## Typography 18 | 19 | ### Body Copy 20 | 21 | - Font size: 32px 22 | 23 | ### Font 24 | 25 | - Family: [Inter](https://fonts.google.com/specimen/Inter) 26 | - Weights: 300, 500, 700 -------------------------------------------------------------------------------- /coding-bootcamp-testimonials-slider-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500;700&display=swap'); 2 | html { 3 | font-family: 'Inter', sans-serif; 4 | font-size: 32px; 5 | } 6 | * { 7 | margin: 0; 8 | padding: 0; 9 | box-sizing: border-box; 10 | } 11 | .container { 12 | min-height: 100vh; 13 | width: 100%; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | padding: 30px; 18 | background-image: url(./images/pattern-curve.svg); 19 | background-position: center bottom; 20 | background-size: contain; 21 | background-repeat: no-repeat; 22 | } 23 | .slider { 24 | display: block; 25 | height: 100%; 26 | width: 100%; 27 | max-width: 850px; 28 | margin: 0 auto; 29 | position: relative; 30 | } 31 | .slide { 32 | width: 100%; 33 | display: flex; 34 | flex-direction: column-reverse; 35 | justify-content: center; 36 | align-items: center; 37 | text-align: center; 38 | } 39 | .slide-img { 40 | width: 100%; 41 | margin: 0 auto; 42 | height: 100%; 43 | padding: 40px; 44 | background-image: url(./images/pattern-bg.svg); 45 | background-position: center; 46 | background-repeat: no-repeat; 47 | background-size: contain; 48 | } 49 | .slide-text { 50 | padding-top: 30px; 51 | display: flex; 52 | align-items: center; 53 | justify-content: center; 54 | flex-direction: column; 55 | background-image: url(./images/pattern-quotes.svg); 56 | background-repeat: no-repeat; 57 | background-size: 80px; 58 | background-position: top center; 59 | } 60 | .testimonial-text { 61 | font-weight: 300; 62 | font-size: .7rem; 63 | line-height: 1rem; 64 | color: hsl(240, 38%, 20%); 65 | } 66 | .author-text { 67 | margin-top: 20px; 68 | color: hsl(240, 38%, 20%); 69 | font-size: .5rem; 70 | font-weight: 700; 71 | } 72 | .author-text span { 73 | color: hsl(240, 18%, 77%); 74 | font-weight: 500; 75 | display: block; 76 | } 77 | .slide-img img { 78 | height: 100%; 79 | width: 300px; 80 | } 81 | .prev, 82 | .next { 83 | display: inline-block; 84 | width: 50%; 85 | height: 100%; 86 | position: absolute; 87 | cursor: pointer; 88 | } 89 | .prev:hover, 90 | .next:hover { 91 | background-color: antiquewhite; 92 | } 93 | .buttons { 94 | position: absolute; 95 | left: 50%; 96 | transform: translateX(-50%); 97 | top: 315px; 98 | width: 90px; 99 | height: 45px; 100 | box-shadow: -20px 12px 20px 0px hsla(240, 18%, 77%, 0.52); 101 | border-radius: 50px; 102 | background-color: white; 103 | overflow: hidden; 104 | } 105 | .prev { 106 | left: 0; 107 | } 108 | .next { 109 | right: 0; 110 | } 111 | .next::after, 112 | .prev::after { 113 | content: ''; 114 | position: absolute; 115 | height: 100%; 116 | width: 100%; 117 | background-repeat: no-repeat; 118 | background-position: center; 119 | background-size: auto; 120 | } 121 | .next::after { 122 | background-image: url(./images/icon-next.svg); 123 | } 124 | .prev::after { 125 | background-image: url(./images/icon-prev.svg); 126 | } 127 | @media only screen and (min-width: 768px) { 128 | .slide { 129 | flex-direction: row; 130 | text-align: left; 131 | } 132 | .slide-text { 133 | background-position: 10% top; 134 | background-size: 100px; 135 | align-items: flex-start; 136 | } 137 | .slide-img { 138 | margin-left: -100px; 139 | z-index: -1; 140 | } 141 | .slide-img img { 142 | width: 400px; 143 | } 144 | .buttons { 145 | top: 415px; 146 | transform: translate(0); 147 | left: calc(100% - 400px); 148 | } 149 | } 150 | @media only screen and (max-width: 400px) { 151 | .slide-img img { 152 | width: 200px; 153 | } 154 | .slide-img { 155 | padding: 10px; 156 | } 157 | .buttons { 158 | top: 180px; 159 | } 160 | } 161 | -------------------------------------------------------------------------------- /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 | 48 | ## Deploying your project 49 | 50 | 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: 51 | 52 | 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. 53 | 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. 54 | 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. 55 | 56 | ## Sharing your solution 57 | 58 | There are multiple places you can share your solution: 59 | 60 | 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. 61 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 62 | 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. 63 | 64 | ## Giving feedback 65 | 66 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 67 | 68 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 69 | 70 | **Have fun building!** 🚀 71 | -------------------------------------------------------------------------------- /four-card-feature-section-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/four-card-feature-section-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /four-card-feature-section-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/four-card-feature-section-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /four-card-feature-section-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/four-card-feature-section-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /four-card-feature-section-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/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 | 7 | 8 | 9 | Frontend Mentor | Four card feature section 10 | 11 | 12 | 16 | 17 | 18 |
19 |

Reliable, efficient delivery

20 |

Powered by Technology

21 | 22 |

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

24 |
25 |
26 |
27 |
28 |

Supervisor

29 |

Monitors activity to identify project roadblocks

30 | 31 |
32 |
33 |
34 |
35 |

Team Builder

36 |

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

37 | 38 |
39 | 40 |
41 |

Karma

42 |

Regularly evaluates our talent to ensure quality

43 | 44 |
45 |
46 |
47 |
48 |

Calculator

49 |

Uses data from past projects to provide better delivery estimates

50 | 51 |
52 |
53 |
54 | 60 | 61 | -------------------------------------------------------------------------------- /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/css2?family=Poppins:wght@200;400;600&display=swap'); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | font-family: 'Poppins', sans-serif; 9 | font-size: 15px; 10 | padding: 0 30px; 11 | } 12 | header { 13 | text-align: center; 14 | padding: 70px 0px 50px 0; 15 | } 16 | header h1 { 17 | font-size: 1.5rem; 18 | font-weight: 200; 19 | color: hsl(234, 12%, 34%); 20 | } 21 | header h2 { 22 | font-weight: 700; 23 | font-size: 1.5rem; 24 | color: hsl(234, 12%, 34%); 25 | margin-bottom: 1.5rem; 26 | } 27 | header p { 28 | font-weight: 400; 29 | font-size: 1rem; 30 | color: hsl(229, 6%, 66%); 31 | max-width: 500px; 32 | margin: 0 auto; 33 | } 34 | .cards { 35 | display: flex; 36 | flex-direction: column; 37 | align-items: center; 38 | justify-content: center; 39 | margin-bottom: 80px; 40 | } 41 | .card { 42 | box-shadow: 2px 8px 14px 0px hsla(229, 6%, 66%, 0.6); 43 | border-radius: 8px; 44 | padding: 30px; 45 | margin: 2rem 0; 46 | max-width: 400px; 47 | } 48 | .card.aqua { 49 | border-top: 5px solid hsl(180, 62%, 55%); 50 | margin: 0; 51 | } 52 | .card.red { 53 | border-top: 5px solid hsl(0, 78%, 62%); 54 | } 55 | .card.orange { 56 | border-top: 5px solid hsl(34, 97%, 64%); 57 | } 58 | .card.blue { 59 | border-top: 5px solid hsl(212, 86%, 64%); 60 | margin: 0; 61 | } 62 | 63 | .card img { 64 | display: block; 65 | margin-left: auto; 66 | margin-top: 30px; 67 | } 68 | .card h2 { 69 | color: hsl(234, 12%, 34%); 70 | font-size: 1.5rem; 71 | } 72 | .card p { 73 | font-size: 1rem; 74 | color: hsl(229, 6%, 66%); 75 | } 76 | 77 | @media only screen and (min-width: 1200px) { 78 | body { 79 | font-size: 18px; 80 | } 81 | header h1, 82 | header h2 { 83 | font-size: 2em; 84 | } 85 | header p { 86 | font-size: 1.1rem; 87 | } 88 | .cards { 89 | flex-direction: row; 90 | } 91 | .card { 92 | margin: 2rem; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/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 [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel 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](https://bit.ly/fm-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 [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started: 40 | 41 | 1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration. 42 | 2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy. 43 | 3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/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. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that. 50 | 2. Share your solution page 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 | 61 | ## Community Sponsors 62 | 63 | A massive thank you to our community sponsors! 64 | 65 | - [Vercel](https://bit.ly/fem-vercel) offers an amazing website hosting service, which is super simple to set up. Just connect your GitHub account, point to a repo and your site will be deployed. Perfect for your website and frontend hosting needs - especially since it's free to get started! 66 | - [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites! 67 | - [Qualified](https://bit.ly/fem-qualified) helps companies assess engineers with realistic code tests and pair-programming interviews. Their assessments test on-the-job skills as opposed to algorithmic puzzles which leads to a much better recruitment process for everyone involved. 68 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/css/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@600&display=swap"); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | -webkit-box-sizing: border-box; 6 | box-sizing: border-box; 7 | } 8 | 9 | h1, h2, h3 { 10 | font-family: 'Poppins', sans-serif; 11 | } 12 | 13 | body { 14 | font-family: 'Open Sans',sans-serif; 15 | font-size: 18px; 16 | } 17 | 18 | img { 19 | height: 100%; 20 | width: 100%; 21 | } 22 | 23 | .container { 24 | max-width: 1080px; 25 | margin: 0 auto; 26 | padding: 0 30px; 27 | } 28 | 29 | a { 30 | text-decoration: none; 31 | color: black; 32 | } 33 | 34 | .cta { 35 | padding: 10px 45px; 36 | border-radius: 50px; 37 | background-color: #ff52bf; 38 | color: white; 39 | font-weight: 700; 40 | -webkit-box-shadow: -2px 2px 20px 0px #0000001f; 41 | box-shadow: -2px 2px 20px 0px #0000001f; 42 | font-size: .9rem; 43 | } 44 | 45 | #header { 46 | width: 100%; 47 | min-height: 100vh; 48 | padding: 100px 0; 49 | display: block; 50 | background-image: url(../images/bg-hero-mobile.svg); 51 | background-position: center top; 52 | background-size: cover; 53 | background-repeat: no-repeat; 54 | background-color: #ebfbff; 55 | } 56 | 57 | #header .container { 58 | min-height: calc(100vh - 200px); 59 | display: -webkit-box; 60 | display: -ms-flexbox; 61 | display: flex; 62 | -webkit-box-align: center; 63 | -ms-flex-align: center; 64 | align-items: center; 65 | -webkit-box-pack: center; 66 | -ms-flex-pack: center; 67 | justify-content: center; 68 | -webkit-box-orient: vertical; 69 | -webkit-box-direction: normal; 70 | -ms-flex-direction: column; 71 | flex-direction: column; 72 | text-align: center; 73 | } 74 | 75 | #header .container .nav { 76 | position: absolute; 77 | top: 0; 78 | width: 100%; 79 | max-width: 1080px; 80 | margin: 0 auto; 81 | padding: 30px; 82 | display: -webkit-box; 83 | display: -ms-flexbox; 84 | display: flex; 85 | -webkit-box-align: center; 86 | -ms-flex-align: center; 87 | align-items: center; 88 | -webkit-box-pack: justify; 89 | -ms-flex-pack: justify; 90 | justify-content: space-between; 91 | } 92 | 93 | #header .container .nav .logo { 94 | width: 120px; 95 | } 96 | 97 | #header .container .nav .cta-header { 98 | background-color: white; 99 | color: black; 100 | } 101 | 102 | #header .container .hero { 103 | width: 100%; 104 | height: 100%; 105 | display: -webkit-box; 106 | display: -ms-flexbox; 107 | display: flex; 108 | -webkit-box-align: center; 109 | -ms-flex-align: center; 110 | align-items: center; 111 | -webkit-box-pack: center; 112 | -ms-flex-pack: center; 113 | justify-content: center; 114 | -webkit-box-orient: vertical; 115 | -webkit-box-direction: normal; 116 | -ms-flex-direction: column; 117 | flex-direction: column; 118 | } 119 | 120 | #header .container .hero .hero-info h1 { 121 | font-size: 1.8rem; 122 | font-weight: 600; 123 | margin-bottom: 1.3rem; 124 | } 125 | 126 | #header .container .hero .hero-info p { 127 | font-size: 1.1rem; 128 | font-weight: 400; 129 | margin-bottom: 50px; 130 | } 131 | 132 | #header .container .hero .hero-info .cta-hero { 133 | padding: 15px 50px; 134 | font-size: 1rem; 135 | } 136 | 137 | #header .container .hero .hero-img img { 138 | max-width: 600px; 139 | margin-top: 40px; 140 | -o-object-fit: contain; 141 | object-fit: contain; 142 | } 143 | 144 | #cards { 145 | padding: 100px 0; 146 | } 147 | 148 | #cards .container .card-item { 149 | padding: 50px 30px; 150 | -webkit-box-shadow: -2px 2px 20px 0px #00000013; 151 | box-shadow: -2px 2px 20px 0px #00000013; 152 | margin-bottom: 50px; 153 | border-radius: 10px; 154 | text-align: center; 155 | display: -webkit-box; 156 | display: -ms-flexbox; 157 | display: flex; 158 | -webkit-box-orient: vertical; 159 | -webkit-box-direction: reverse; 160 | -ms-flex-direction: column-reverse; 161 | flex-direction: column-reverse; 162 | } 163 | 164 | #cards .container .card-item .card-info { 165 | margin-top: 30px; 166 | } 167 | 168 | #cards .container .card-item .card-info h3 { 169 | font-size: 1.3rem; 170 | margin-bottom: 20px; 171 | } 172 | 173 | #cards .container .card-item .card-info p { 174 | font-size: .9rem; 175 | font-weight: 400; 176 | line-height: 1.5rem; 177 | color: #808d99; 178 | } 179 | 180 | #cta-card { 181 | display: -webkit-box; 182 | display: -ms-flexbox; 183 | display: flex; 184 | padding: 50px 0; 185 | margin-bottom: -100px; 186 | } 187 | 188 | #cta-card .container .card { 189 | width: 100%; 190 | padding: 30px; 191 | text-align: center; 192 | -webkit-box-shadow: -2px 2px 20px 0px #00000013; 193 | box-shadow: -2px 2px 20px 0px #00000013; 194 | background-color: white; 195 | border-radius: 10px; 196 | } 197 | 198 | #cta-card .container .card h2 { 199 | font-size: 1.3rem; 200 | margin-bottom: 30px; 201 | } 202 | 203 | #footer { 204 | background-color: #00252e; 205 | color: white; 206 | padding: 100px 0 30px 0; 207 | } 208 | 209 | #footer .container { 210 | width: 100%; 211 | display: -webkit-box; 212 | display: -ms-flexbox; 213 | display: flex; 214 | -webkit-box-orient: vertical; 215 | -webkit-box-direction: normal; 216 | -ms-flex-direction: column; 217 | flex-direction: column; 218 | } 219 | 220 | #footer .container .footer-info { 221 | display: -webkit-box; 222 | display: -ms-flexbox; 223 | display: flex; 224 | -webkit-box-orient: vertical; 225 | -webkit-box-direction: normal; 226 | -ms-flex-direction: column; 227 | flex-direction: column; 228 | -webkit-box-pack: start; 229 | -ms-flex-pack: start; 230 | justify-content: flex-start; 231 | } 232 | 233 | #footer .container .footer-info .footer-1 { 234 | margin-top: 30px; 235 | } 236 | 237 | #footer .container .footer-info .footer-1 ul { 238 | list-style: none; 239 | } 240 | 241 | #footer .container .footer-info .footer-1 ul li { 242 | margin-top: 25px; 243 | } 244 | 245 | #footer .container .footer-info .footer-1 ul li .logo { 246 | width: 200px; 247 | } 248 | 249 | #footer .container .footer-info .footer-1 ul li .contact { 250 | display: -webkit-box; 251 | display: -ms-flexbox; 252 | display: flex; 253 | -webkit-box-align: start; 254 | -ms-flex-align: start; 255 | align-items: start; 256 | -webkit-box-pack: start; 257 | -ms-flex-pack: start; 258 | justify-content: start; 259 | } 260 | 261 | #footer .container .footer-info .footer-1 ul li .contact img { 262 | margin-top: 10px; 263 | width: 15px; 264 | } 265 | 266 | #footer .container .footer-info .footer-1 ul li .contact p { 267 | font-size: 1.2rem; 268 | margin-left: 20px; 269 | -webkit-box-flex: 1; 270 | -ms-flex: 1; 271 | flex: 1; 272 | } 273 | 274 | #footer .container .footer-info .footer-2 ul, #footer .container .footer-info .footer-3 ul { 275 | list-style: none; 276 | } 277 | 278 | #footer .container .footer-info .footer-2 ul li, #footer .container .footer-info .footer-3 ul li { 279 | margin-top: 18px; 280 | } 281 | 282 | #footer .container .footer-info .footer-2 ul li a, #footer .container .footer-info .footer-3 ul li a { 283 | text-decoration: none; 284 | font-size: 1.2rem; 285 | color: white; 286 | } 287 | 288 | #footer .container .footer-info .footer-4 { 289 | margin-top: 80px; 290 | text-align: center; 291 | font-size: 40px; 292 | } 293 | 294 | #footer .container .footer-copyright { 295 | margin-top: 20px; 296 | text-align: center; 297 | font-size: .8rem; 298 | } 299 | 300 | @media only screen and (min-width: 768px) { 301 | #cards .container .card-item { 302 | -webkit-box-orient: horizontal; 303 | -webkit-box-direction: normal; 304 | -ms-flex-direction: row; 305 | flex-direction: row; 306 | padding: 50px 100px; 307 | -webkit-box-pack: center; 308 | -ms-flex-pack: center; 309 | justify-content: center; 310 | -webkit-box-align: center; 311 | -ms-flex-align: center; 312 | align-items: center; 313 | text-align: left; 314 | } 315 | #cards .container .card-item .card-info { 316 | margin-right: 50px; 317 | } 318 | #cards .container .card-item .card-info h3 { 319 | font-size: 1.7rem; 320 | } 321 | #cards .container .card-item .card-info p { 322 | font-size: 1rem; 323 | } 324 | #cards .container .card-item:nth-child(even) { 325 | -webkit-box-orient: horizontal; 326 | -webkit-box-direction: reverse; 327 | -ms-flex-direction: row-reverse; 328 | flex-direction: row-reverse; 329 | } 330 | #cards .container .card-item:nth-child(even) .card-info { 331 | margin-left: 50px; 332 | } 333 | #cta-card .container .card { 334 | padding: 50px; 335 | } 336 | #cta-card .container .card h2 { 337 | font-size: 2rem; 338 | margin-bottom: 50px; 339 | } 340 | #cta-card .container .card a { 341 | display: inline-block; 342 | padding: 20px 60px; 343 | font-size: 1.2rem; 344 | } 345 | #footer .container .footer-info { 346 | -webkit-box-orient: horizontal; 347 | -webkit-box-direction: normal; 348 | -ms-flex-direction: row; 349 | flex-direction: row; 350 | } 351 | #footer .container .footer-info .footer-1, 352 | #footer .container .footer-info .footer-2, 353 | #footer .container .footer-info .footer-3, 354 | #footer .container .footer-info .footer-4 { 355 | -webkit-box-flex: 1; 356 | -ms-flex: 1; 357 | flex: 1; 358 | margin-left: 50px; 359 | } 360 | #footer .container .footer-info .footer-1 { 361 | -webkit-box-flex: 2.5; 362 | -ms-flex: 2.5; 363 | flex: 2.5; 364 | margin: 0; 365 | } 366 | #footer .container .footer-info .footer-2, 367 | #footer .container .footer-info .footer-3, 368 | #footer .container .footer-info .footer-4 { 369 | margin-top: 70px; 370 | } 371 | #footer .container .footer-copyright { 372 | text-align: right; 373 | } 374 | } 375 | 376 | @media only screen and (min-width: 1000px) { 377 | #header { 378 | background-image: url(../images/bg-hero-desktop.svg); 379 | background-position: center; 380 | background-size: cover; 381 | } 382 | #header .container .hero { 383 | -webkit-box-orient: horizontal; 384 | -webkit-box-direction: normal; 385 | -ms-flex-direction: row; 386 | flex-direction: row; 387 | text-align: left; 388 | } 389 | #header .container .hero .hero-img { 390 | -webkit-box-flex: 3; 391 | -ms-flex: 3; 392 | flex: 3; 393 | } 394 | #header .container .hero .hero-info { 395 | -webkit-box-flex: 2; 396 | -ms-flex: 2; 397 | flex: 2; 398 | margin-right: 50px; 399 | } 400 | #header .container .hero .hero-info h1 { 401 | font-size: 2.2rem; 402 | } 403 | } 404 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/huddle-landing-page-with-alternating-feature-blocks-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/huddle-landing-page-with-alternating-feature-blocks-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/huddle-landing-page-with-alternating-feature-blocks-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/bg-hero-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/bg-hero-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/huddle-landing-page-with-alternating-feature-blocks-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/icon-location.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/illustration-grow-together.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/illustration-mockups.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/logo-white.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Frontend Mentor | Huddle landing page with alternating feature blocks 12 | 13 | 14 | 15 | 25 | 26 | 27 | 28 | 45 |
46 |
47 |
48 |
49 |

Grow Together

50 |

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

52 |
53 |
img
54 |
55 |
56 |
57 |

Flowing Conversations

58 |

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

60 |
61 |
img
62 |
63 |
64 |
65 |

Your Users

66 |

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

68 |
69 |
img
70 |
71 |
72 |
73 |
74 |
75 |
76 |

Ready To Build Your Community?

77 | Get Started For Free 78 |
79 |
80 |
81 | 135 | 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-master/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Poppins:wght@600&display=swap'); 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | // variables 9 | $Pink: hsl(322, 100%, 66%); 10 | $VeryPaleCyan: hsl(193, 100%, 96%); 11 | $VeryDarkCyan: hsl(192, 100%, 9%); 12 | $GrayishBlue: hsl(208, 11%, 55%); 13 | 14 | h1,h2,h3{ 15 | font-family: 'Poppins', sans-serif; 16 | } 17 | body{ 18 | font-family: 'Open Sans',sans-serif; 19 | font-size: 18px; 20 | } 21 | img{ 22 | height: 100%; 23 | width: 100%; 24 | } 25 | .container{ 26 | max-width: 1080px; 27 | margin: 0 auto; 28 | padding: 0 30px; 29 | } 30 | a{ 31 | text-decoration: none; 32 | color: black; 33 | } 34 | .cta{ 35 | padding: 10px 45px; 36 | border-radius: 50px; 37 | background-color: $Pink; 38 | color: white; 39 | font-weight: 700; 40 | box-shadow: -2px 2px 20px 0px #0000001f; 41 | font-size: .9rem; 42 | } 43 | #header{ 44 | width: 100%; 45 | min-height: 100vh; 46 | padding: 100px 0; 47 | display: block; 48 | background-image: url(../images/bg-hero-mobile.svg); 49 | background-position: center top; 50 | background-size: cover; 51 | background-repeat: no-repeat; 52 | background-color: $VeryPaleCyan; 53 | .container{ 54 | min-height: calc(100vh - 200px); 55 | display: flex; 56 | align-items: center; 57 | justify-content: center; 58 | flex-direction: column; 59 | text-align: center; 60 | .nav{ 61 | position: absolute; 62 | top: 0; 63 | width: 100%; 64 | max-width: 1080px; 65 | margin: 0 auto; 66 | padding: 30px; 67 | display: flex; 68 | align-items: center; 69 | justify-content: space-between; 70 | .logo{ 71 | width: 120px; 72 | } 73 | .cta-header{ 74 | background-color: white; 75 | color: black; 76 | } 77 | } 78 | .hero{ 79 | width: 100%; 80 | height: 100%; 81 | display: flex; 82 | align-items: center; 83 | justify-content: center; 84 | flex-direction: column; 85 | .hero-info{ 86 | h1{ 87 | font-size: 1.8rem; 88 | font-weight: 600; 89 | margin-bottom: 1.3rem; 90 | } 91 | p{ 92 | font-size: 1.1rem; 93 | font-weight: 400; 94 | margin-bottom: 50px; 95 | } 96 | .cta-hero{ 97 | padding: 15px 50px; 98 | font-size: 1rem; 99 | } 100 | 101 | } 102 | .hero-img{ 103 | img{ 104 | max-width: 600px; 105 | margin-top: 40px; 106 | object-fit: contain; 107 | } 108 | } 109 | } 110 | } 111 | } 112 | #cards{ 113 | padding: 100px 0; 114 | .container{ 115 | .card-item{ 116 | padding: 50px 30px ; 117 | box-shadow: -2px 2px 20px 0px #00000013; 118 | margin-bottom: 50px; 119 | border-radius: 10px; 120 | text-align: center; 121 | display: flex; 122 | flex-direction: column-reverse; 123 | .card-info{ 124 | margin-top: 30px; 125 | h3{ 126 | font-size: 1.3rem; 127 | margin-bottom: 20px; 128 | } 129 | p{ 130 | font-size: .9rem; 131 | font-weight: 400; 132 | line-height: 1.5rem; 133 | color: $GrayishBlue; 134 | } 135 | } 136 | } 137 | } 138 | } 139 | #cta-card{ 140 | display: flex; 141 | padding: 50px 0; 142 | margin-bottom: -100px; 143 | .container{ 144 | .card{ 145 | width: 100%; 146 | padding: 30px; 147 | text-align: center; 148 | box-shadow: -2px 2px 20px 0px #00000013; 149 | background-color: white; 150 | border-radius:10px ; 151 | h2{ 152 | font-size: 1.3rem; 153 | margin-bottom: 30px; 154 | } 155 | } 156 | } 157 | } 158 | #footer{ 159 | background-color: $VeryDarkCyan; 160 | color: white; 161 | padding: 100px 0 30px 0; 162 | .container{ 163 | width: 100%; 164 | display: flex; 165 | flex-direction: column; 166 | .footer-info{ 167 | display: flex; 168 | flex-direction: column; 169 | justify-content: flex-start; 170 | .footer-1{ 171 | margin-top: 30px; 172 | ul{ 173 | list-style: none; 174 | li{ 175 | margin-top: 25px; 176 | .logo{ 177 | width: 200px; 178 | } 179 | .contact{ 180 | display: flex; 181 | align-items: start; 182 | justify-content: start; 183 | img{ 184 | margin-top: 10px; 185 | width: 15px; 186 | } 187 | p{ 188 | font-size: 1.2rem; 189 | margin-left: 20px; 190 | flex: 1; 191 | } 192 | } 193 | } 194 | } 195 | } 196 | .footer-2,.footer-3{ 197 | ul{ 198 | list-style: none; 199 | li{ 200 | margin-top: 18px; 201 | a{ 202 | text-decoration: none; 203 | font-size: 1.2rem; 204 | color: white; 205 | } 206 | } 207 | } 208 | } 209 | .footer-4{ 210 | margin-top: 80px; 211 | text-align: center; 212 | font-size: 40px; 213 | } 214 | } 215 | .footer-copyright{ 216 | margin-top: 20px; 217 | text-align: center; 218 | font-size: .8rem; 219 | } 220 | } 221 | } 222 | @media only screen and (min-width: 768px){ 223 | 224 | #cards{ 225 | .container{ 226 | .card-item{ 227 | flex-direction: row; 228 | padding: 50px 100px; 229 | justify-content: center; 230 | align-items: center; 231 | text-align: left; 232 | .card-info{ 233 | margin-right: 50px; 234 | h3{ 235 | font-size: 1.7rem; 236 | } 237 | p{ 238 | font-size: 1rem; 239 | } 240 | } 241 | &:nth-child(even){ 242 | flex-direction: row-reverse; 243 | .card-info{ 244 | margin-left: 50px; 245 | } 246 | } 247 | } 248 | } 249 | } 250 | #cta-card{ 251 | .container{ 252 | .card{ 253 | padding: 50px; 254 | h2{ 255 | font-size: 2rem; 256 | margin-bottom: 50px; 257 | } 258 | a{ 259 | display: inline-block; 260 | padding: 20px 60px; 261 | font-size: 1.2rem; 262 | } 263 | } 264 | } 265 | } 266 | #footer{ 267 | .container{ 268 | .footer-info{ 269 | flex-direction: row; 270 | .footer-1, 271 | .footer-2, 272 | .footer-3, 273 | .footer-4{ 274 | flex: 1; 275 | margin-left: 50px; 276 | } 277 | .footer-1{ 278 | flex: 2.5; 279 | margin: 0; 280 | } 281 | .footer-2, 282 | .footer-3, 283 | .footer-4{ 284 | margin-top: 70px; 285 | } 286 | } 287 | .footer-copyright{ 288 | text-align: right; 289 | } 290 | } 291 | } 292 | } 293 | @media only screen and (min-width: 1000px){ 294 | #header { 295 | background-image: url(../images/bg-hero-desktop.svg); 296 | background-position: center; 297 | background-size: cover; 298 | .container{ 299 | .hero{ 300 | flex-direction: row; 301 | text-align: left; 302 | .hero-img{ 303 | flex: 3; 304 | } 305 | .hero-info{ 306 | flex: 2; 307 | margin-right: 50px; 308 | h1{ 309 | font-size: 2.2rem; 310 | } 311 | } 312 | } 313 | } 314 | } 315 | } -------------------------------------------------------------------------------- /huddle-landing-page-with-alternating-feature-blocks-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 | - 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/) -------------------------------------------------------------------------------- /img/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /img/eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 8 | 10 | 12 | 14 | 16 | 18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /img/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /img/youtube.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Frontend Mentor Challenge | webcifar 9 | 10 | 11 | 12 |
13 |

The Frontend Mentor Challenge

14 |

Coded By Web Cifar

15 |
16 |
17 | 134 |
135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Intro component with sign up form 2 | 3 | ![Design preview for the Intro component with sign up form 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, CSS and JavaScript.** 12 | 13 | ## The challenge 14 | 15 | Your challenge is to build out this introductory component 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 | - Receive an error message when the `form` is submitted if: 24 | - Any `input` field is empty. The message for this error should say *"[Field Name] cannot be empty"* 25 | - The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *"Looks like this is not an email"* 26 | 27 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. 28 | 29 | ## Where to find everything 30 | 31 | 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. 32 | 33 | 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. 34 | 35 | If you would like the Sketch file in order to inspect the design in more detail it is available to [purchase here](). 36 | 37 | You will find all the required assets in the `/images` folder. The assets are already optimized. 38 | 39 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 40 | 41 | ## Building your project 42 | 43 | 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: 44 | 45 | 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/). 46 | 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. 47 | 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. 48 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 49 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 50 | 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. 51 | 52 | ## Deploying your project 53 | 54 | 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: 55 | 56 | 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. 57 | 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. 58 | 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. 59 | 60 | ## Sharing your solution 61 | 62 | There are multiple places you can share your solution: 63 | 64 | 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. 65 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 66 | 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. 67 | 68 | ## Giving feedback 69 | 70 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 71 | 72 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 73 | 74 | **Have fun building!** 🚀 75 | -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/intro-component-with-signup-form-master/design/active-states.jpg -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/intro-component-with-signup-form-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/intro-component-with-signup-form-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/intro-component-with-signup-form-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/images/bg-intro-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/intro-component-with-signup-form-master/images/bg-intro-desktop.png -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/images/bg-intro-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/intro-component-with-signup-form-master/images/bg-intro-mobile.png -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/intro-component-with-signup-form-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/images/icon-error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Frontend Mentor | Intro component with sign up form 10 | 11 | 12 | 16 | 17 | 18 |
19 |
20 |
21 |

Learn to code by
watching others

22 |

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

24 |
25 |
26 |
27 |

Try it free 7 days then $20/mo. thereafter

28 |
29 |
30 |
31 |
32 | 33 | 34 | 35 |

First Name cannot be empty

36 |
37 |
38 | 39 | 40 | 41 |

Last Name cannot be empty

42 |
43 |
44 | 45 | 46 | 47 |

Looks like this is not email

48 |
49 |
50 | 51 | 52 | 53 |

Password cannot be empty

54 |
55 | 56 |

By clicking the button, you are agreeing to our Terms and Services

57 |
58 |
59 | 60 |
61 |
62 |
63 | 64 | 65 | 66 | 67 | 68 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/main.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('.form-container form'); 2 | const inputs = document.querySelectorAll('.form-container input'); 3 | 4 | form.addEventListener('submit', (e) => { 5 | e.preventDefault(); 6 | inputs.forEach((input) => { 7 | // console.log(input.value); 8 | if (!input.value) { 9 | input.parentElement.classList.add('error'); 10 | } else { 11 | input.parentElement.classList.remove('error'); 12 | if (input.type == 'email') { 13 | if (validateEmail(input.value)) { 14 | input.parentElement.classList.remove('error'); 15 | } else { 16 | input.parentElement.classList.add('error'); 17 | } 18 | } 19 | } 20 | }); 21 | }); 22 | 23 | function validateEmail (email) { 24 | 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,}))$/; 25 | return re.test(String(email).toLowerCase()); 26 | } 27 | -------------------------------------------------------------------------------- /intro-component-with-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 | -------------------------------------------------------------------------------- /intro-component-with-signup-form-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | .error-icon, 8 | .error-text { 9 | display: none; 10 | } 11 | html { 12 | font-size: 16px; 13 | font-family: 'Poppins', sans-serif; 14 | } 15 | #intro { 16 | min-height: 100vh; 17 | width: 100%; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | background-image: url(./images/bg-intro-mobile.png); 22 | background-color: hsl(0, 100%, 74%); 23 | padding: 100px 0; 24 | } 25 | .container { 26 | display: flex; 27 | align-items: center; 28 | justify-content: space-between; 29 | flex-direction: column; 30 | text-align: center; 31 | padding: 0 30px; 32 | max-width: 1300px; 33 | margin: 0 auto; 34 | } 35 | .left-col { 36 | flex: 1; 37 | margin-bottom: 50px; 38 | } 39 | .left-col h1 { 40 | color: white; 41 | font-size: 2.5rem; 42 | line-height: 3rem; 43 | margin-bottom: 2rem; 44 | } 45 | .left-col p { 46 | color: white; 47 | font-size: 1.3rem; 48 | line-height: 1.9rem; 49 | /* max-width: 500px; */ 50 | } 51 | .right-col { 52 | flex: 1; 53 | } 54 | .right-col .top-card { 55 | background-color: hsl(248, 32%, 49%); 56 | color: white; 57 | padding: 15px 90px; 58 | /* border-bottom: 5px solid hsla(249, 10%, 26%, 0.466); */ 59 | border-radius: 15px; 60 | box-shadow: 0 7px hsla(249, 10%, 26%, 0.404); 61 | margin-bottom: 30px; 62 | } 63 | .right-col .top-card p { 64 | font-size: 1.3rem; 65 | line-height: 2.2rem; 66 | } 67 | .right-col .top-card p span { 68 | font-weight: 700; 69 | } 70 | .right-col .form-container { 71 | background-color: white; 72 | padding: 30px; 73 | border-radius: 15px; 74 | box-shadow: 0 8px hsla(249, 10%, 26%, 0.404); 75 | } 76 | .field-group { 77 | position: relative; 78 | margin-bottom: 25px; 79 | } 80 | .right-col label { 81 | display: none; 82 | } 83 | .right-col input, 84 | .right-col button[type = submit] { 85 | width: 100%; 86 | height: 60px; 87 | margin-bottom: 5px; 88 | border-radius: 10px; 89 | border: 1.3px solid hsl(246, 25%, 77%); 90 | padding-left: 20px; 91 | outline: none; 92 | color: hsl(249, 10%, 26%); 93 | font-family: 'Poppins', sans-serif; 94 | font-size: 1.1rem; 95 | font-weight: 600; 96 | } 97 | .right-col input:focus { 98 | border: 1.5px solid hsl(249, 10%, 26%); 99 | } 100 | .right-col input::placeholder { 101 | color: hsla(249, 10%, 26%, 0.678); 102 | font-family: 'Poppins', sans-serif; 103 | font-size: 1.1rem; 104 | font-weight: 600; 105 | } 106 | .right-col button[type = submit] { 107 | cursor: pointer; 108 | background-color: hsl(154, 59%, 51%); 109 | box-shadow: 0px 4px hsl(154, 56%, 44%); 110 | color: white; 111 | font-weight: 500; 112 | font-size: 1.3rem; 113 | text-transform: uppercase; 114 | letter-spacing: 2px; 115 | margin-bottom: 0; 116 | border: none; 117 | } 118 | .right-col button[type = submit]:hover { 119 | background-color: hsl(154, 73%, 65%); 120 | } 121 | .right-col .form-footer { 122 | margin-top: 10px; 123 | color: hsl(246, 25%, 77%); 124 | } 125 | .right-col .form-footer span { 126 | color: hsl(0, 100%, 74%); 127 | font-weight: 700; 128 | } 129 | .error-text { 130 | text-align: right; 131 | bottom: 0; 132 | right: 0; 133 | font-size: .8rem; 134 | font-style: italic; 135 | color: hsl(0, 100%, 74%); 136 | font-weight: 500; 137 | } 138 | .error-icon { 139 | position: absolute; 140 | top: 0; 141 | right: 20px; 142 | top: 28%; 143 | } 144 | .field-group.error .error-text, 145 | .field-group.error .error-icon { 146 | display: block; 147 | } 148 | .field-group.error input { 149 | border: 2px solid hsl(0, 100%, 74%); 150 | } 151 | @media only screen and (min-width: 1000px) { 152 | #intro { 153 | background-image: url(./images/bg-intro-desktop.png); 154 | } 155 | .container { 156 | flex-direction: row; 157 | } 158 | .left-col { 159 | text-align: left; 160 | padding-right: 50px; 161 | } 162 | .left-col h1 { 163 | font-size: 3rem; 164 | line-height: 3.5rem; 165 | } 166 | .left-col p { 167 | font-size: 1.1rem; 168 | } 169 | .right-col { 170 | max-width: 500px; 171 | } 172 | .right-col .top-card p { 173 | font-size: 1.1rem; 174 | } 175 | .right-col .top-card { 176 | padding: 20px; 177 | } 178 | .right-col .form-container { 179 | padding: 40px; 180 | } 181 | .right-col input::placeholder, 182 | .right-col input { 183 | font-size: 1.05rem; 184 | height: 60px; 185 | } 186 | .right-col .form-footer { 187 | margin-top: 20px; 188 | font-size: .7rem; 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const lists = document.querySelectorAll('.list ul li'); 2 | lists.forEach((list) => { 3 | list.addEventListener('click', (e) => { 4 | lists.forEach((list) => { 5 | list.classList.remove('active'); 6 | }); 7 | if (e.target.classList.contains('close')) { 8 | list.querySelector('.close').addEventListener('click', () => { 9 | list.classList.remove('active'); 10 | }); 11 | } else { 12 | list.classList.add('active'); 13 | let buttons = list.querySelector('.buttons'); 14 | } 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /ping-coming-soon-page-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /ping-coming-soon-page-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Ping coming soon page 2 | 3 | ![Design preview for the Ping coming soon 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, CSS and JavaScript.** 12 | 13 | ## The challenge 14 | 15 | Your challenge is to build out this Coming Soon 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 | - Submit their email address using an `input` field 24 | - Receive an error message when the `form` is submitted if: 25 | - The `input` field is empty. The message for this error should say *"Whoops! It looks like you forgot to add your email"* 26 | - The email address is not formatted correctly (i.e. a correct email address should have this structure: `name@host.tld`). The message for this error should say *"Please provide a valid email address"* 27 | 28 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. 29 | 30 | ## Where to find everything 31 | 32 | 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. 33 | 34 | 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. 35 | 36 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 37 | 38 | You will find all the required assets in the `/images` folder. The assets are already optimized. 39 | 40 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 41 | 42 | ## Building your project 43 | 44 | 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: 45 | 46 | 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/). 47 | 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 [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel below. 48 | 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. 49 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 50 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 51 | 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. 52 | 7. If you'd like to try making your project fully responsive, we'd recommend checking out [Sizzy](https://bit.ly/fm-sizzy). It's a great browser that makes it easy to view your site across multiple devices. 53 | 54 | ## Deploying your project 55 | 56 | As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started: 57 | 58 | 1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration. 59 | 2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy. 60 | 3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL. 61 | 62 | ## Sharing your solution 63 | 64 | There are multiple places you can share your solution: 65 | 66 | 1. Submit it on the platform so that other users will see your solution on the site. Here's our ["Complete guide to submitting solutions"](https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248) to help you do that. 67 | 2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 68 | 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. 69 | 70 | ## Giving feedback 71 | 72 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 73 | 74 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 75 | 76 | **Have fun building!** 🚀 77 | 78 | ## Community Sponsors 79 | 80 | A massive thank you to our community sponsors! 81 | 82 | - [Vercel](https://bit.ly/fem-vercel) offers an amazing website hosting service, which is super simple to set up. Just connect your GitHub account, point to a repo and your site will be deployed. Perfect for your website and frontend hosting needs - especially since it's free to get started! 83 | - [Sizzy](https://bit.ly/fm-sizzy) is an extremely useful browser designed specifically to improve a developer's workflow when building websites. You can fire up multiple device emulators and run them all in sync while building out your web pages. Perfect for helping build fully responsive websites! 84 | - [Qualified](https://bit.ly/fem-qualified) helps companies assess engineers with realistic code tests and pair-programming interviews. Their assessments test on-the-job skills as opposed to algorithmic puzzles which leads to a much better recruitment process for everyone involved. 85 | -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/ping-coming-soon-page-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/desktop-hover-error-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/ping-coming-soon-page-master/design/desktop-hover-error-states.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/ping-coming-soon-page-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/ping-coming-soon-page-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/design/mobile-error-state.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/ping-coming-soon-page-master/design/mobile-error-state.jpg -------------------------------------------------------------------------------- /ping-coming-soon-page-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/ping-coming-soon-page-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /ping-coming-soon-page-master/images/illustration-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/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 | 9 | Frontend Mentor | Ping coming soon page 10 | 11 | 12 | 16 | 17 | 18 | 19 |
20 | 21 |

We are launching soon!

22 |

Subscribe and get notified

23 |
24 | 25 | 26 |
27 | hero-img 28 |
29 | 30 | 31 | 32 |
33 |

© Copyright Ping. All rights reserved.

34 |
35 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /ping-coming-soon-page-master/main.js: -------------------------------------------------------------------------------- 1 | const msg = 'Please provide a valid email address'; 2 | const form = document.querySelector('form'); 3 | const button = form.querySelector('[type="submit"]'); 4 | 5 | const error = document.createElement('p'); 6 | error.classList.add('error_text'); 7 | error.textContent = msg; 8 | 9 | function checkEmail (e) { 10 | e.preventDefault(); 11 | const email = e.target.querySelector('[type="email"]').value; 12 | if (!validateEmail(email)) { 13 | form.classList.add('error'); 14 | form.insertBefore(error, button); 15 | } else { 16 | form.removeChild(error); 17 | form.classList.remove('error'); 18 | } 19 | } 20 | function validateEmail (email) { 21 | const 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,}))$/; 22 | return re.test(String(email).toLowerCase()); 23 | } 24 | form.addEventListener('submit', checkEmail); 25 | -------------------------------------------------------------------------------- /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/css2?family=Libre+Franklin:wght@300;600;700&display=swap'); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | body { 8 | font-family: 'Libre Franklin', sans-serif; 9 | font-size: 20px; 10 | } 11 | .container { 12 | min-height: 100vh; 13 | width: 100%; 14 | padding: 30px; 15 | padding-top: 100px; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | flex-direction: column; 20 | text-align: center; 21 | } 22 | img { 23 | height: 100%; 24 | width: 100%; 25 | } 26 | .logo { 27 | width: 80px; 28 | margin-bottom: 50px; 29 | } 30 | .heading { 31 | font-size: 2rem; 32 | font-weight: 500; 33 | color: hsl(0, 0%, 59%); 34 | margin-bottom: 20px; 35 | } 36 | .heading span { 37 | font-weight: 700; 38 | color: hsl(209, 33%, 12%); 39 | } 40 | .sub-heading { 41 | font-size: .95rem; 42 | color: hsl(209, 33%, 12%); 43 | margin-bottom: 30px; 44 | } 45 | 46 | form { 47 | padding: 20px; 48 | display: flex; 49 | align-items: center; 50 | justify-content: center; 51 | flex-direction: column; 52 | width: 100%; 53 | position: relative; 54 | } 55 | form.error input[type="email"] { 56 | border-color: hsl(354, 100%, 66%); 57 | margin-bottom: 30px; 58 | } 59 | form .error_text { 60 | position: absolute; 61 | top: 70px; 62 | font-size: .95rem; 63 | margin-top: 10px; 64 | color: hsl(354, 100%, 66%); 65 | font-weight: 500; 66 | font-style: italic; 67 | } 68 | form input[type="email"] { 69 | height: 50px; 70 | width: 100%; 71 | border-radius: 50px; 72 | padding-left: 20px; 73 | border: 2px solid hsl(223, 100%, 88%); 74 | font-size: 1rem; 75 | color: black; 76 | outline: none; 77 | } 78 | form input[type="email"]::placeholder { 79 | color: hsl(223, 100%, 88%); 80 | font-family: 'Libre Franklin', sans-serif; 81 | } 82 | 83 | form button[type="submit"] { 84 | background-color: hsl(223, 87%, 63%); 85 | width: 100%; 86 | height: 50px; 87 | border: none; 88 | border-radius: 50px; 89 | margin-top: 20px; 90 | color: white; 91 | font-size: 1rem; 92 | font-family: 'Libre Franklin', sans-serif; 93 | letter-spacing: 1.1px; 94 | box-shadow: 0px 0px 20px hsla(223, 87%, 63%, 0.32); 95 | cursor: pointer; 96 | outline: none; 97 | } 98 | .icons { 99 | margin-top: 100px; 100 | } 101 | 102 | .icons img { 103 | width: 30px; 104 | margin: 0 5px; 105 | } 106 | .copyright { 107 | font-size: .8rem; 108 | margin-top: 5px; 109 | color: hsl(0, 0%, 59%); 110 | } 111 | 112 | @media only screen and (min-width: 768px) { 113 | form { 114 | flex-direction: row; 115 | max-width: 700px; 116 | margin-bottom: 50px; 117 | } 118 | form button[type='submit'] { 119 | margin: 0; 120 | width: 40%; 121 | margin-left: 20px; 122 | } 123 | form.error input[type="email"] { 124 | margin-bottom: 0; 125 | } 126 | form .error_text { 127 | left: 30px; 128 | } 129 | .hero-img { 130 | max-width: 700px; 131 | margin: 0 auto; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /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 [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel 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 | 45 | ## Deploying your project 46 | 47 | As mentioned above, there are a number of ways to host your project for free. We recommend using [Vercel](https://bit.ly/fem-vercel) as it's an amazing service and extremely simple to get set up with. If you'd like to use Vercel, here are some steps to follow to get started: 48 | 49 | 1. [Sign up to Vercel](https://bit.ly/fem-vercel-signup) and go through the onboarding flow, ensuring your GitHub account is connected by using their [Vercel for GitHub](https://vercel.com/docs/v2/git-integrations/vercel-for-github) integration. 50 | 2. Connect your project to Vercel from the ["Import project" page](https://vercel.com/import), using the "From Git Repository" button and selecting the project you want to deploy. 51 | 3. Once connected, every time you `git push`, Vercel will create a new [deployment](https://vercel.com/docs/v2/platform/deployments) and the deployment URL will be shown on your [Dashboard](https://vercel.com/dashboard). You will also receive an email for each deployment with the URL. 52 | 53 | ## Sharing your solution 54 | 55 | There are multiple places you can share your solution: 56 | 57 | 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. 58 | 2. Share your repository and live URL in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 59 | 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. 60 | 61 | ## Giving feedback 62 | 63 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 64 | 65 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 66 | 67 | **Have fun building!** 🚀 68 | -------------------------------------------------------------------------------- /single-price-grid-component-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/single-price-grid-component-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /single-price-grid-component-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/single-price-grid-component-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /single-price-grid-component-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/single-price-grid-component-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /single-price-grid-component-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ShaifArfan/frontend-mentor-challenge/86a22f810259adbab6f29501a42ebac2d7a47706/single-price-grid-component-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /single-price-grid-component-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Frontend Mentor | Single Price Grid Component 10 | 11 | 12 | 16 | 17 | 18 |
19 |
20 |
21 |

Join our community

22 |

30-day, hassle-free money back guarantee

23 |

Gain access to our full library of tutorials along with expert code reviews. 24 | Perfect for any developers who are serious about honing their skills.

25 |
26 |
27 |

Monthly Subscription

28 |

$29 per month

29 |

Full access for less than $1 a day

30 | Sign Up 31 |
32 |
33 |

Why Us

34 |

Tutorials by industry experts
35 | Peer & expert code review
36 | Coding exercises
37 | Access to our GitHub repos
38 | Community forum
39 | Flashcard decks
40 | New videos every week

41 |
42 |
43 |
44 | 50 | 51 | -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /single-price-grid-component-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Karla:wght@400;700&display=swap'); 2 | html { 3 | font-size: 16px; 4 | font-family: 'karla', sans-serif; 5 | } 6 | * { 7 | padding: 0; 8 | margin: 0; 9 | box-sizing: border-box; 10 | } 11 | section { 12 | min-height: 100vh; 13 | width: 100%; 14 | display: flex; 15 | align-items: center; 16 | justify-content: center; 17 | background-color: hsl(204, 43%, 93%); 18 | padding: 100px 30px; 19 | } 20 | .container { 21 | display: grid; 22 | grid-template-columns: 100%; 23 | max-width: 550px; 24 | margin: 0 auto; 25 | border-radius: 8px; 26 | overflow: hidden; 27 | box-shadow: 0px 0px 14px 1px #00000024; 28 | } 29 | .item { 30 | padding: 30px; 31 | } 32 | .item-1 { 33 | background-color: white; 34 | } 35 | .item-1 h2 { 36 | color: hsl(179, 62%, 43%); 37 | font-weight: 700; 38 | font-size: 1.3rem; 39 | margin-bottom: 15px; 40 | } 41 | .item-1 h3 { 42 | color: hsl(71, 73%, 54%); 43 | font-size: 1rem; 44 | margin-bottom: 15px; 45 | } 46 | .item-1 p { 47 | color: hsl(218, 22%, 67%); 48 | font-size: 1rem; 49 | line-height: 1.5rem; 50 | } 51 | .item-2 { 52 | background-color: hsl(179, 62%, 43%); 53 | } 54 | .item-2 h3 { 55 | color: white; 56 | font-weight: 400; 57 | font-size: 1.rem; 58 | margin-bottom: 15px; 59 | } 60 | .item-2 p { 61 | color: hsl(204, 43%, 93%); 62 | font-size: 1rem; 63 | font-weight: 400; 64 | margin-bottom: 10px; 65 | } 66 | .item-2 p span { 67 | font-size: 2.5rem; 68 | font-weight: 600; 69 | } 70 | .item-2 a { 71 | text-align: center; 72 | width: 100%; 73 | padding: 15px; 74 | border-radius: 8px; 75 | display: inline-block; 76 | background-color: hsl(71, 73%, 54%); 77 | color: white; 78 | text-decoration: none; 79 | font-size: 1.2rem; 80 | margin-top: 30px; 81 | font-weight: 700; 82 | box-shadow: 0px 4px 10px 1px #00000033; 83 | } 84 | .item-3 { 85 | background-color: #4abebd; 86 | } 87 | .item-3 h3 { 88 | color: white; 89 | font-weight: 400; 90 | font-size: 1.3rem; 91 | margin-bottom: 15px; 92 | } 93 | .item-3 p { 94 | color: hsl(204, 43%, 93%); 95 | line-height: 1.5rem; 96 | } 97 | 98 | @media only screen and (min-width: 768px) { 99 | .container { 100 | grid-template-columns: 1fr 1fr; 101 | } 102 | .container .item-1 { 103 | grid-area: 1 / 1 / 2 / 3; 104 | } 105 | .container .item-2, 106 | .container .item-3 { 107 | grid-row: 2; 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); 2 | * { 3 | padding: 0; 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | ::selection { 8 | background-color: black; 9 | color: white; 10 | } 11 | body { 12 | font-family: 'Open Sans', sans-serif; 13 | min-height: 100vh; 14 | padding-bottom: 100px; 15 | background-color: #131417; 16 | color: #ffffff; 17 | outline: none; 18 | } 19 | header { 20 | padding: 50px 30px 50px 30px; 21 | text-align: center; 22 | } 23 | header h1 { 24 | font-family: 'Open Sans', sans-serif; 25 | font-weight: 400; 26 | font-size: 30px; 27 | } 28 | header h2 { 29 | margin-top: 10px; 30 | font-weight: 400; 31 | font-size: 20px; 32 | } 33 | header a { 34 | color: aqua; 35 | text-decoration: underline; 36 | } 37 | .list { 38 | max-width: 600px; 39 | margin: 0 auto; 40 | text-align: left; 41 | box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2); 42 | } 43 | .list ul { 44 | list-style: none; 45 | width: 100%; 46 | } 47 | .list ul li { 48 | position: relative; 49 | cursor: pointer; 50 | width: 100%; 51 | height: auto; 52 | padding: 20px 25px; 53 | background-color: #1e1f26; 54 | transition: .3s ease background-color; 55 | margin-bottom: 1px; 56 | overflow: hidden; 57 | } 58 | .list ul li:hover { 59 | background-color: #22232b; 60 | } 61 | .list ul li h1 { 62 | line-height: 40px; 63 | color: rgba(255, 255, 255, 0.76); 64 | text-decoration: none; 65 | font-weight: 400; 66 | font-size: 22px; 67 | } 68 | .list .buttons { 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | flex-direction: row; 73 | flex-wrap: wrap; 74 | height: 0; 75 | transition: .3s ease height; 76 | visibility: hidden; 77 | } 78 | .list ul li .buttons a { 79 | display: flex; 80 | align-items: center; 81 | justify-content: center; 82 | flex-direction: row; 83 | flex-wrap: no-wrap; 84 | padding: 5px 10px; 85 | margin: 5px 3px; 86 | background-color: #2d2f35; 87 | border-radius: 8px; 88 | font-size: 18px; 89 | color: rgba(255, 255, 255, 0.712); 90 | text-decoration: none; 91 | transition-delay: .1s; 92 | transition: .5s ease; 93 | transition-property: opacity, margin-top, background-color; 94 | opacity: 0; 95 | } 96 | .list ul li .buttons a img { 97 | display: inline-block; 98 | height: 25px; 99 | width: 25px; 100 | padding-right: 5px; 101 | } 102 | .list ul li .buttons a p { 103 | display: inline-block; 104 | } 105 | .list ul li a:hover { 106 | background-color: black; 107 | } 108 | .list li .close { 109 | visibility: hidden; 110 | position: absolute; 111 | top: 10px; 112 | right: 10px; 113 | height: 25px; 114 | width: 25px; 115 | cursor: pointer; 116 | } 117 | .list li.active { 118 | cursor: auto; 119 | } 120 | .list li.active img { 121 | visibility: visible; 122 | } 123 | .list li.active .buttons { 124 | visibility: visible; 125 | height: 60px; 126 | } 127 | .list li.active .buttons a { 128 | animation: button-animation .5s ease forwards; 129 | } 130 | .list li.active .buttons a:nth-child(1) { 131 | animation-delay: .1s; 132 | } 133 | .list li.active .buttons a:nth-child(2) { 134 | animation-delay: .15s; 135 | } 136 | .list li.active .buttons a:nth-child(3) { 137 | animation-delay: .2s; 138 | } 139 | @keyframes button-animation { 140 | 0% { 141 | opacity: 0; 142 | transform: translateY(40px); 143 | } 144 | 100% { 145 | opacity: 1; 146 | transform: translateY(0px); 147 | } 148 | } 149 | @media only screen and (max-width: 550px) { 150 | .list li.active .buttons { 151 | height: 80px; 152 | justify-content: flex-start; 153 | } 154 | .list ul li h1 { 155 | font-size: 18px; 156 | letter-spacing: 2px; 157 | } 158 | header h1 { 159 | font-size: 22px; 160 | } 161 | } 162 | @media only screen and (min-width: 768px) { 163 | header h1 { 164 | font-size: 40px; 165 | } 166 | } 167 | --------------------------------------------------------------------------------