├── frontEndMentors ├── base-apparel-coming-soon-master │ ├── .gitignore │ ├── images │ │ ├── hero-mobile.jpg │ │ ├── favicon-32x32.png │ │ ├── hero-desktop.jpg │ │ ├── icon-arrow.svg │ │ ├── icon-error.svg │ │ ├── bg-pattern-desktop.svg │ │ └── logo.svg │ ├── design │ │ ├── active-states.jpg │ │ ├── desktop-design.jpg │ │ ├── mobile-design.jpg │ │ └── desktop-preview.jpg │ ├── style-guide.md │ ├── script.js │ ├── index.html │ ├── style.css │ └── README.md ├── fylo-landing-page-with-two-column-layout-master │ ├── .gitignore │ ├── design │ │ ├── mobile-design.jpg │ │ ├── desktop-design.jpg │ │ └── desktop-preview.jpg │ ├── images │ │ ├── favicon-32x32.png │ │ ├── avatar-testimonial.jpg │ │ ├── icon-quotes.svg │ │ ├── icon-email.svg │ │ ├── bg-curve-mobile.svg │ │ ├── bg-curve-desktop.svg │ │ ├── icon-phone.svg │ │ ├── icon-arrow.svg │ │ ├── logo.svg │ │ └── logo1.svg │ ├── style-guide.md │ ├── index.html │ ├── style.css │ └── README.md ├── huddle-landing-page-with-single-introductory-section-master │ ├── .gitignore │ ├── design │ │ ├── mobile-design.jpg │ │ ├── desktop-design.jpg │ │ └── desktop-preview.jpg │ ├── images │ │ ├── favicon-32x32.png │ │ ├── bg-mobile.svg │ │ ├── bg-desktop.svg │ │ ├── logo.svg │ │ └── illustration-mockups.svg │ ├── style-guide.md │ ├── index.html │ ├── style.css │ └── README.md └── todo-app │ ├── images │ ├── bg-mobile-dark.jpg │ ├── favicon-32x32.png │ ├── bg-desktop-dark.jpg │ ├── bg-desktop-light.jpg │ ├── bg-mobile-light.jpg │ ├── icon-check.svg │ ├── icon-cross.svg │ ├── icon-moon.svg │ └── icon-sun.svg │ ├── design │ ├── desktop-preview.jpg │ ├── active-states-dark.jpg │ ├── active-states-light.jpg │ ├── desktop-design-dark.jpg │ ├── mobile-design-dark.jpg │ ├── mobile-design-light.jpg │ └── desktop-design-light.jpg │ ├── .gitignore │ ├── style-guide.md │ ├── index.html │ ├── style.css │ ├── README.md │ └── script.js ├── MontyHall ├── door.png ├── supercar.png ├── 158047.svg ├── style.css ├── index.html └── supercar.svg ├── Meditation_app ├── med.jpg ├── photo.jpg ├── script.js ├── index.html └── style.css ├── Tribute-Page ├── gandhi.jpg ├── index.html └── style.css ├── README.md ├── Single div window ├── index.html └── style.css ├── 404 Animation ├── index.html └── style.css ├── Background Generator ├── index.html ├── script.js └── style.css ├── Animated heart ├── index.html └── style.css ├── Keyboard ├── script.js ├── style.css └── index.html ├── Infinite Scroll ├── style.css ├── index.html └── script.js ├── Breaking-bad-Rv └── index.html ├── Blender-Animated ├── index.html └── style.css ├── Kick buttowski └── index.html ├── handlebars ├── index.html ├── style.css └── script.js ├── Nokia-3310 ├── index.html └── style.css ├── CSS Meme ├── index.html └── style.css ├── Glassmorphism ├── style.css └── index.html └── Animated icons └── index.html /frontEndMentors/base-apparel-coming-soon-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /MontyHall/door.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/MontyHall/door.png -------------------------------------------------------------------------------- /Meditation_app/med.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/Meditation_app/med.jpg -------------------------------------------------------------------------------- /MontyHall/supercar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/MontyHall/supercar.png -------------------------------------------------------------------------------- /Tribute-Page/gandhi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/Tribute-Page/gandhi.jpg -------------------------------------------------------------------------------- /Meditation_app/photo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/Meditation_app/photo.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Front-end 2 | Mini projects using HTML, CSS and Javascript\ 3 | You can most of them on [Codepen](https://codepen.io/Jayasree_0708) 4 | -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/bg-mobile-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/images/bg-mobile-dark.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/images/favicon-32x32.png -------------------------------------------------------------------------------- /frontEndMentors/todo-app/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/design/desktop-preview.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/bg-desktop-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/images/bg-desktop-dark.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/bg-desktop-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/images/bg-desktop-light.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/bg-mobile-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/images/bg-mobile-light.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/design/active-states-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/design/active-states-dark.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/design/active-states-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/design/active-states-light.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/design/desktop-design-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/design/desktop-design-dark.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/design/mobile-design-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/design/mobile-design-dark.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/design/mobile-design-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/design/mobile-design-light.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/design/desktop-design-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/todo-app/design/desktop-design-light.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/icon-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/images/hero-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/base-apparel-coming-soon-master/images/hero-mobile.jpg -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/base-apparel-coming-soon-master/design/active-states.jpg -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/base-apparel-coming-soon-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/base-apparel-coming-soon-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/base-apparel-coming-soon-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/images/hero-desktop.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/base-apparel-coming-soon-master/images/hero-desktop.jpg -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/base-apparel-coming-soon-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Single div window/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Window 5 | 6 | 7 | 8 |
9 | 10 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/fylo-landing-page-with-two-column-layout-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/fylo-landing-page-with-two-column-layout-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/fylo-landing-page-with-two-column-layout-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/avatar-testimonial.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/avatar-testimonial.jpg -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/huddle-landing-page-with-single-introductory-section-master/design/mobile-design.jpg -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/huddle-landing-page-with-single-introductory-section-master/images/favicon-32x32.png -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/huddle-landing-page-with-single-introductory-section-master/design/desktop-design.jpg -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jayasree-Kurmannagari/Front-end/HEAD/frontEndMentors/huddle-landing-page-with-single-introductory-section-master/design/desktop-preview.jpg -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/icon-cross.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/icon-quotes.svg: -------------------------------------------------------------------------------- 1 | “ -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/icon-email.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/icon-moon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Meditation_app/script.js: -------------------------------------------------------------------------------- 1 | const play = document.querySelector(".play"); 2 | const pause = document.querySelector(".pause"); 3 | play.addEventListener('click',(e)=>{ 4 | play.style.display = "none"; 5 | pause.style.display = "flex"; 6 | }); 7 | pause.addEventListener('click',(e)=>{ 8 | play.style.display = "flex"; 9 | pause.style.display = "none"; 10 | }); 11 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/bg-curve-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/bg-curve-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/icon-phone.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/images/icon-error.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/todo-app/.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /frontEndMentors/todo-app/images/icon-sun.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/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 | -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/images/bg-pattern-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /404 Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 404 Page 6 | 7 | 8 | 9 | 10 |
11 |
12 |
13 |
14 |
F
15 |
I
16 |
L
17 |
E
18 |
N
19 |
O
20 |
T
21 |
F
22 |
O
23 |
U
24 |
N
25 |
D
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-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 | - Violet: hsl(257, 40%, 49%) 15 | 16 | ## Typography 17 | 18 | ### Headings 19 | 20 | - Family: [Poppins](https://fonts.google.com/specimen/Poppins) 21 | - Weights: 400, 700 22 | 23 | ### Body 24 | 25 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 26 | - Weights: 400 27 | 28 | ## Icons 29 | 30 | For the social icons, you can use a font icon library. Some suggestions can be found below: 31 | 32 | - [Font Awesome](https://fontawesome.com/) 33 | - [IcoMoon](https://icomoon.io/) 34 | - [Ionicons](https://ionicons.com/) -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/icon-arrow.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-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 | - Very Dark Blue: hsl(243, 87%, 12%) 15 | - Desaturated Blue: hsl(238, 22%, 44%) 16 | 17 | ### Accent 18 | 19 | - Bright Blue: hsl(224, 93%, 58%) 20 | - Moderate Cyan: hsl(170, 45%, 43%) 21 | 22 | ### Neutral 23 | 24 | - Light Grayish Blue: hsl(240, 75%, 98%) 25 | - Light Gray: hsl(0, 0%, 75%) 26 | 27 | ## Typography 28 | 29 | ### Headings, Call-to-actions, Header Navigation 30 | 31 | - Family: [Raleway](https://fonts.google.com/specimen/Raleway) 32 | - Weights: 400, 700 33 | 34 | ### Body 35 | 36 | - Family: [Open Sans](https://fonts.google.com/specimen/Open+Sans) 37 | - Weights: 400 -------------------------------------------------------------------------------- /Tribute-Page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | Gandhi 16 |
17 |
18 |

All Hail

19 |
20 |

Mhandas

21 |

Karamchand

22 |

Gandhi

23 |
24 |
25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Background Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Gradient Generator 7 | 8 | 9 | 10 | 11 | 12 |
13 |

Background gradient generator

14 |
15 |
16 | 17 | 18 | 19 |
20 | 21 |

22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Animated heart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Animated heart 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 19 |
20 |
21 |
22 |
F
23 |
-
24 |
P
25 |
P
26 | 27 |
28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/script.js: -------------------------------------------------------------------------------- 1 | const email = document.getElementById('email'); 2 | const error = document.getElementById('errorMsg'); 3 | const errorIcon = document.getElementById('errorIcon'); 4 | const form = document.getElementById('input-form'); 5 | const body = document.getElementById('body'); 6 | 7 | form.addEventListener('submit', e => { 8 | e.preventDefault(); 9 | const emailValue = email.value; 10 | if (!validateEmail(emailValue)) { 11 | error.style.display = 'block'; 12 | errorIcon.style.display = 'block'; 13 | 14 | } else { 15 | body.classList.add('body'); 16 | body.innerHTML = "Thank you for subscribing !!!"; 17 | confetti(); 18 | } 19 | }) 20 | 21 | 22 | function validateEmail(email) { 23 | 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,}))$/; 24 | return re.test(String(email).toLowerCase()); 25 | } -------------------------------------------------------------------------------- /Keyboard/script.js: -------------------------------------------------------------------------------- 1 | function H() { 2 | var x = document.getElementById('text'); 3 | x.value = x.value + "H"; 4 | } 5 | 6 | function E() { 7 | var x = document.getElementById('text'); 8 | x.value = x.value + "E"; 9 | } 10 | 11 | function L() { 12 | var x = document.getElementById('text'); 13 | x.value = x.value + "L"; 14 | } 15 | 16 | function O() { 17 | var x = document.getElementById('text'); 18 | x.value = x.value + "O"; 19 | } 20 | 21 | function W() { 22 | var x = document.getElementById('text'); 23 | x.value = x.value + "W"; 24 | } 25 | 26 | function R() { 27 | var x = document.getElementById('text'); 28 | x.value = x.value + "R"; 29 | } 30 | 31 | function D() { 32 | var x = document.getElementById('text'); 33 | x.value = x.value + "D"; 34 | } 35 | 36 | function space() { 37 | var x = document.getElementById('text'); 38 | x.value = x.value + " "; 39 | } 40 | 41 | function erase() { 42 | var x = document.getElementById('text'); 43 | x.value = x.value.slice(0, x.value.length - 1); 44 | } -------------------------------------------------------------------------------- /Meditation_app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Meditation APP 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Lorem Ipsum

15 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo fugit explicabo nostrum dicta magnam repudiandae hic fugiat? Quae ad dolorem, similique totam praesentium, tenetur delectus amet repellat voluptate, alias officiis.

16 |
17 |
18 |
19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Infinite Scroll/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: whitesmoke; 9 | font-family: 'Roboto Slab', serif; 10 | } 11 | 12 | h1 { 13 | text-align: center; 14 | margin: 3rem 0; 15 | text-transform: uppercase; 16 | letter-spacing: 5px; 17 | } 18 | 19 | .image-container { 20 | margin: 10px 5%; 21 | columns: 4; 22 | column-gap: 1.8rem; 23 | } 24 | 25 | img { 26 | width: 100%; 27 | margin-bottom: 1.8rem; 28 | border-radius: 7px; 29 | transition: 0.4s transform ease-in-out; 30 | box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, .3); 31 | } 32 | 33 | img:hover { 34 | transform: scale(1.02); 35 | } 36 | 37 | @media only screen and (max-width:1000px) { 38 | .image-container { 39 | columns: 3; 40 | } 41 | } 42 | 43 | @media only screen and (max-width:768px) { 44 | .image-container { 45 | columns: 2; 46 | } 47 | } 48 | 49 | @media only screen and (max-width:500px) { 50 | .image-container { 51 | columns: 1; 52 | } 53 | } 54 | 55 | #loading { 56 | opacity: 0; 57 | } 58 | 59 | #loading.show { 60 | opacity: 1; 61 | } -------------------------------------------------------------------------------- /frontEndMentors/todo-app/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 | - Bright Blue: hsl(220, 98%, 61%) 15 | - Check Background: linear-gradient hsl(192, 100%, 67%) to hsl(280, 87%, 65%) 16 | 17 | ### Neutral 18 | 19 | ### Light Theme 20 | 21 | - Very Light Gray: hsl(0, 0%, 98%) 22 | - Very Light Grayish Blue: hsl(236, 33%, 92%) 23 | - Light Grayish Blue: hsl(233, 11%, 84%) 24 | - Dark Grayish Blue: hsl(236, 9%, 61%) 25 | - Very Dark Grayish Blue: hsl(235, 19%, 35%) 26 | 27 | ### Dark Theme 28 | 29 | - Very Dark Blue: hsl(235, 21%, 11%) 30 | - Very Dark Desaturated Blue: hsl(235, 24%, 19%) 31 | - Light Grayish Blue: hsl(234, 39%, 85%) 32 | - Light Grayish Blue (hover): hsl(236, 33%, 92%) 33 | - Dark Grayish Blue: hsl(234, 11%, 52%) 34 | - Very Dark Grayish Blue: hsl(233, 14%, 35%) 35 | - Very Dark Grayish Blue: hsl(237, 14%, 26%) 36 | 37 | ## Typography 38 | 39 | ### Body Copy 40 | 41 | - Font size: 18px 42 | 43 | ### Font 44 | 45 | - Family: [Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans) 46 | - Weights: 400, 700 47 | -------------------------------------------------------------------------------- /Breaking-bad-Rv/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 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 | -------------------------------------------------------------------------------- /Background Generator/script.js: -------------------------------------------------------------------------------- 1 | var css = document.querySelector('p'); 2 | var angle = document.querySelector(".angle"); 3 | var color1 = document.querySelector('.color1'); 4 | var color2 = document.querySelector('.color2'); 5 | var button = document.querySelector('button'); 6 | var body = document.getElementById('gradient'); 7 | 8 | function setGradient() { 9 | body.style.background = "linear-gradient(" + 10 | angle.value + "deg," + 11 | color1.value + "," + 12 | color2.value + ")"; 13 | console.log(color1.value); 14 | css.textContent = body.style.background + ';'; 15 | } 16 | color1.addEventListener("input", setGradient); 17 | 18 | color2.addEventListener("input", setGradient); 19 | 20 | angle.addEventListener("input", setGradient); 21 | 22 | function random() { 23 | var hexValues = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']; 24 | 25 | function generate(val) { 26 | for (let i = 0; i < 6; i++) { 27 | var randomNum = Math.floor(Math.random() * 14); 28 | val += hexValues[randomNum]; 29 | } 30 | return val 31 | } 32 | color1.value = generate('#'); 33 | color2.value = generate("#"); 34 | angle.value = Math.floor(Math.random() * 360); 35 | setGradient() 36 | 37 | } 38 | 39 | button.onclick = random; -------------------------------------------------------------------------------- /Background Generator/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Merienda+One&display=swap'); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | min-height: 100vh; 11 | background: linear-gradient(90deg, #ffc0cb, #0a869c); 12 | } 13 | 14 | h1 { 15 | text-align: center; 16 | text-transform: uppercase; 17 | font-family: 'Merienda One', cursive; 18 | letter-spacing: 0.1em; 19 | line-height: 60px; 20 | padding: 3em 0; 21 | } 22 | 23 | .colors { 24 | width: 100%; 25 | height: 2em; 26 | display: flex; 27 | justify-content: center; 28 | align-items: center; 29 | margin-bottom: 1em; 30 | } 31 | 32 | input { 33 | width: 3em; 34 | height: 2em; 35 | background: transparent; 36 | margin: 0.5em; 37 | cursor: pointer; 38 | } 39 | 40 | button { 41 | text-align: center; 42 | display: block; 43 | margin: 3em auto; 44 | margin-bottom: 2em; 45 | padding: 0.5em 1.6em; 46 | background: #ccc; 47 | border: none; 48 | border-radius: 50px; 49 | color: #000; 50 | cursor: pointer; 51 | box-shadow: 0px 10px 13px -7px #000000, 7px 5px 15px 5px rgba(0, 0, 0, 0); 52 | } 53 | 54 | button:active { 55 | transform: scale(0.9); 56 | } 57 | 58 | p { 59 | padding: 0.5em; 60 | text-align: center; 61 | font-family: 'Fira Sans', sans-serif; 62 | } -------------------------------------------------------------------------------- /Single div window/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-height: 100vh; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | background: #ccc; 7 | } 8 | 9 | div { 10 | position: relative; 11 | width: 90vmin; 12 | height: 90vmin; 13 | border-left: 3vmin groove #fff; 14 | border-right: 3vmin groove #fff; 15 | border-bottom: 2vmin groove #fff; 16 | border-top: 2vmin groove #fff; 17 | background: linear-gradient(-70deg, #98cce1 30%, #b3deef 30% 40%, #98cce1 40% 45%, #b3deef 45% 70%, #98cce1 70%); 18 | box-shadow: inset 1.25vmin 1.25vmin 0 0.25vmin #ccc, inset -1.25vmin 0 0 0.25vmin #ccc, inset 2.25vmin 2.25vmin 0 0.15vmin #494b4a, inset -2.25vmin 2.25vmin 0 0.15vmin #494b4a; 19 | z-index: 10000; 20 | } 21 | 22 | div:after { 23 | content: ""; 24 | width: 85vmin; 25 | overflow: hidden; 26 | height: 65vmin; 27 | position: absolute; 28 | top: 20%; 29 | left: 3%; 30 | border-top: 5vmin solid #fff; 31 | border-bottom: 2vmin solid #fff; 32 | box-shadow: inset 0em -0.15em 0 0 gray, 0 -0.15em 0 0 gray, inset 0 0.15em 10px 0 #494b4a, 0 0 10px 0; 33 | } 34 | 35 | div:before { 36 | content: ""; 37 | width: 25vmin; 38 | height: 88vmin; 39 | position: absolute; 40 | top: 3%; 41 | left: 30%; 42 | border-left: 3vmin solid #fff; 43 | border-right: 3vmin solid #fff; 44 | z-index: 100; 45 | box-shadow: inset 3px 0px 10px 0px #494b4a, 3px 0px 10px 0 #494b4a, -3px 0 10px 0 gray, inset -3px 0 10px gray; 46 | } 47 | -------------------------------------------------------------------------------- /Infinite Scroll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

Scroll & Scroll

16 |
17 |
18 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /frontEndMentors/todo-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Todo app 9 | 10 | 11 |
12 |
13 |
14 |

TODO

15 | moon 16 |
17 |
18 | 19 | 20 |
21 |
22 |
23 |
24 | 26 |
27 |
28 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Blender-Animated/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Start Whippi'n

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 | -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Frontend Mentor | Huddle landing page with single introductory section 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |
21 |
22 | 23 |
24 |
25 |

Build The Community Your Fans Will Love

26 |

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

27 | 28 |
29 |
30 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /Kick buttowski/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Kick Buttowski 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

kick

15 |

buttowski

16 |

The suburban daredevil

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 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /handlebars/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Musicon 9 | 10 | 11 | 29 | 30 | 31 | 32 |
33 |

Musicon

34 |
35 | 36 |
37 |
38 |
39 |
40 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Nokia-3310/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Nokia 3310 8 | 9 | 10 | 11 | 12 |
13 |
NOKIA 14 | 15 |
16 |
C
17 |
18 |
19 |
20 |
21 |
22 |
1
23 |
2
24 |
3
25 |
26 |
27 |
4
28 |
5
29 |
6
30 |
31 |
32 |
7
33 |
8
34 |
9
35 |
36 |
37 |
*
38 |
0
39 |
#
40 |
41 |
42 |
43 | 44 | 45 | -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/images/bg-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Infinite Scroll/script.js: -------------------------------------------------------------------------------- 1 | const imageContainer = document.getElementById('imageContainer'); 2 | const APIkey = ""; 3 | const query = 'Food and Drink' 4 | const count = 30; 5 | const APIaddr = `https://api.unsplash.com/photos/random/?client_id=${APIkey}&query=${query}&count=${count}`; 6 | let allPhotos = []; 7 | const loading = document.getElementById("loading"); 8 | 9 | 10 | function setAttributes(element, attributes) { 11 | for (const key in attributes) { 12 | element.setAttribute(key, attributes[key]); 13 | } 14 | } 15 | 16 | function displayPhotos() { 17 | allPhotos.forEach((photo) => { 18 | const item = document.createElement('a'); 19 | setAttributes(item, { 20 | href: photo.links.html, 21 | target: "_blank", 22 | }); 23 | const img = document.createElement('img'); 24 | setAttributes(img, { 25 | src: photo.urls.regular, 26 | alt: photo.alt_description, 27 | title: photo.alt_description, 28 | }); 29 | item.appendChild(img); 30 | imageContainer.appendChild(item); 31 | }); 32 | loading.classList.remove('show'); 33 | }; 34 | 35 | 36 | async function getPhotos() { 37 | try { 38 | const response = await fetch(APIaddr); 39 | allPhotos = await response.json(); 40 | displayPhotos(); 41 | } catch (error) { 42 | // Error message 43 | console.log('Error'); 44 | } 45 | } 46 | 47 | window.onload = getPhotos(); 48 | 49 | 50 | window.addEventListener('scroll', () => { 51 | const { scrollTop, scrollHeight, clientHeight } = document.documentElement; 52 | if (clientHeight + scrollTop >= scrollHeight - 5) { 53 | showLoading(); 54 | } 55 | }); 56 | 57 | function showLoading() { 58 | loading.classList.add('show'); 59 | setTimeout(getPhotos, 1000); 60 | } 61 | -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Frontend Mentor | Base Apparel coming soon page 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |
24 | hero-image 25 |

We're coming soon

26 |

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

27 |
28 | 29 | error 30 | 33 |

Please provide a valid email

34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Meditation_app/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin:0; 3 | padding:0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | background-image: url("https://images.pexels.com/photos/4915606/pexels-photo-4915606.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500"); 8 | background-repeat: no-repeat; 9 | background-position: center; 10 | background-size: cover; 11 | min-height:100vh; 12 | } 13 | .container h2{ 14 | color:#fff; 15 | font-size:2rem; 16 | padding:2rem; 17 | padding-bottom:0rem; 18 | margin:0rem 1rem 1rem 2rem; 19 | } 20 | .container p{ 21 | color:#fff; 22 | padding:0 2rem; 23 | margin:0rem 1rem 1rem 2rem; 24 | } 25 | .controls{ 26 | width: 100%; 27 | height:50vh; 28 | display: flex; 29 | align-items: center; 30 | justify-content: center; 31 | } 32 | .control{ 33 | width:7rem; 34 | height:7rem; 35 | display: flex; 36 | justify-content: center; 37 | align-items: center; 38 | /* padding:2rem; */ 39 | box-shadow:20px 20px 50px rgba(0,0,0,0.5); 40 | border-radius: 50%; 41 | position: relative; 42 | transition: all 0.4s ease-in-out; 43 | /* animation: pulse 6s ease-in-out infinite; */ 44 | } 45 | .control:before{ 46 | position: absolute; 47 | content:""; 48 | width:100%; 49 | height:100%; 50 | border-radius:50%; 51 | backdrop-filter: blur(2px); 52 | border:3px solid #f5f5f5; 53 | /* filter: blur(10px); */ 54 | } 55 | .control:after{ 56 | position: absolute; 57 | content:""; 58 | width:100%; 59 | height:100%; 60 | border-radius: 50%; 61 | border:5px solid #f5f5f5; 62 | filter: blur(10px); 63 | } 64 | .control i{ 65 | font-size:3rem; 66 | cursor:pointer; 67 | z-index:100; 68 | color:rgba(250,250,250,0.7); 69 | } 70 | .control:active{ 71 | transition: all 0.2s ease-in-out; 72 | transform:scale(0.9); 73 | } 74 | @keyframes pulse{ 75 | 50%{ 76 | transform:scale(0.8); 77 | } 78 | } 79 | .pause{ 80 | display: none; 81 | } -------------------------------------------------------------------------------- /Tribute-Page/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@1&display=swap'); 2 | * { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | .container-1 { 9 | min-height: 100vh; 10 | background-color: #000; 11 | display: flex; 12 | width: 100%; 13 | } 14 | 15 | .img-container { 16 | display: flex; 17 | align-items: center; 18 | width: 40vw; 19 | height: 100vh; 20 | } 21 | 22 | .main-img { 23 | width: 20em; 24 | height: 25em; 25 | margin-left: 30%; 26 | } 27 | 28 | .content { 29 | width: 60vw; 30 | height: 70vh; 31 | margin-top: 9em; 32 | overflow: hidden; 33 | margin-left: 4em; 34 | } 35 | 36 | .start-content { 37 | display: flex; 38 | } 39 | 40 | .start { 41 | color: #fff; 42 | position: relative; 43 | left: 23%; 44 | font-size: 2em; 45 | font-family: 'Libre Baskerville', serif; 46 | width: 5em; 47 | z-index: 1; 48 | } 49 | 50 | .start:before, 51 | .start:after { 52 | content: ""; 53 | position: relative; 54 | height: 1px; 55 | background-color: #fff; 56 | display: inline-block; 57 | vertical-align: middle; 58 | width: 100%; 59 | } 60 | 61 | .start:before { 62 | right: 0.5em; 63 | margin-left: -100%; 64 | } 65 | 66 | .start:after { 67 | left: 0.5em; 68 | margin-right: -100%; 69 | } 70 | 71 | .name { 72 | margin-top: 2em; 73 | } 74 | 75 | .name p { 76 | color: #fff; 77 | font-size: 5em; 78 | text-transform: uppercase; 79 | line-height: 1.25em; 80 | text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7) 81 | } 82 | 83 | @media only screen and (max-width:900px) { 84 | .main-img { 85 | margin-left: 5%; 86 | width: 15em; 87 | height: 20em; 88 | } 89 | .start { 90 | font-size: 1.5em; 91 | } 92 | .name p { 93 | font-size: 2em; 94 | } 95 | .content { 96 | margin-top: 12em; 97 | } 98 | .container-1 { 99 | height: 70vh; 100 | } 101 | } -------------------------------------------------------------------------------- /handlebars/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | color: #fff; 3 | } 4 | 5 | body { 6 | font-family: Helvetica, sans-serif; 7 | background: url("https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/musicon_bg.png") no-repeat center center fixed; 8 | background-size: cover; 9 | } 10 | 11 | a { 12 | text-decoration: none; 13 | } 14 | 15 | footer { 16 | width: 100%; 17 | text-align: center; 18 | bottom: 0; 19 | position: static; 20 | } 21 | 22 | header { 23 | padding-top: 3%; 24 | min-height: 70px; 25 | } 26 | 27 | header h1 { 28 | margin: 0 2em; 29 | } 30 | 31 | #showcase { 32 | margin-top: 5%; 33 | margin-bottom: 15%; 34 | } 35 | 36 | .instrument { 37 | width: 80%; 38 | display: flex; 39 | overflow: auto; 40 | opacity: 0.9; 41 | background-color: #fff; 42 | padding: 2% 0; 43 | margin: 5% auto; 44 | border-radius: 10px; 45 | } 46 | 47 | .image { 48 | display: inline-block; 49 | margin: 0 1em; 50 | border-radius: 10px; 51 | max-width: 250px; 52 | } 53 | 54 | .details { 55 | display: flex; 56 | flex-direction: column; 57 | justify-content: center; 58 | margin: -1% auto; 59 | padding: 2%; 60 | } 61 | 62 | .name, 63 | .description, 64 | .price, 65 | del { 66 | color: #000000; 67 | text-align: left; 68 | } 69 | 70 | .description, 71 | .price { 72 | margin-top: 0; 73 | } 74 | 75 | .description { 76 | height: max-content; 77 | font-size: 1.2em; 78 | overflow: auto; 79 | } 80 | 81 | .price { 82 | margin: 0; 83 | font-size: 16px; 84 | font-weight: bold; 85 | } 86 | 87 | .sale { 88 | margin-top: 0; 89 | margin-bottom: 0; 90 | color: #fa4359; 91 | font-size: 16px; 92 | font-weight: bold; 93 | text-align: left; 94 | } 95 | 96 | @media only screen and (max-width:400px) { 97 | .instrument { 98 | flex-wrap: wrap; 99 | justify-content: center; 100 | } 101 | .image { 102 | width: 100%; 103 | } 104 | .details { 105 | align-items: center; 106 | } 107 | } -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/images/logo1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/images/bg-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /handlebars/script.js: -------------------------------------------------------------------------------- 1 | const context = { 2 | instruments: [{ 3 | image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/electronic-keyboard.png', 4 | name: 'Electronic Keyboard', 5 | description: 'A piano welcomed to the 21th century. Pianists celebrate the compact form factor and the diversity of synthesized rhythms all in one masterful musical machine.', 6 | price: '$1,999.00', 7 | sale: '$1,699.89' 8 | }, 9 | { 10 | image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/electric-guitar.png', 11 | name: 'Electric Guitar', 12 | description: 'Join the legends of the \'50s and \'60s when the marriage of guitar and electricity created the most influential instrument of a generation. Note: picks sold separately.', 13 | price: '$599.99' 14 | }, 15 | { 16 | image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/bass-guitar.png', 17 | name: 'Bass Guitar', 18 | description: 'Experience the embodiment of funkadelic frequencies that is the bass guitar. Let the deep low notes of the bass guitar resonate with heartbeats everywhere.', 19 | price: '$624.99' 20 | }, 21 | { 22 | image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/drum-kit.png', 23 | name: 'Drum Kit', 24 | description: 'Ever thought, "one instrument isn\'t enough?" Find an answer in the drum kit. Coordinate a collections of drums and cymbals to dictate the rhythm of musical masterpiece.', 25 | price: '$649.00', 26 | sale: '$349.00' 27 | }, 28 | { 29 | image: 'https://s3.amazonaws.com/codecademy-content/courses/learn-handlebars/musicon/violin.png', 30 | name: 'Violin', 31 | description: 'A versatile that is suited for any and all occasions. Those wearing tuxedos can strum together a classic. Others who prefer overalls can call it a fiddle and play some folk songs.', 32 | price: '$245.00' 33 | } 34 | ] 35 | 36 | }; 37 | const templateElement = document.getElementById('templateHB'); 38 | const templateSource = templateElement.innerHTML; 39 | const template = Handlebars.compile(templateSource); 40 | const compiledHTML = template(context); 41 | document.getElementById('information').innerHTML = compiledHTML; -------------------------------------------------------------------------------- /CSS Meme/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CSS Meme 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
Trying to fix the last bug at 2:30 AM
16 |
17 |
18 |

Come on

19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |

Just one bug

32 |

Almost there

33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |

Yes!!!

47 |

I made it

48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |

Oh crap!!

58 |
59 |
60 |

99 new bugs

61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: hsl(257, 40%, 49%); 11 | background-image: url('./images/bg-desktop.svg'); 12 | background-repeat: no-repeat; 13 | background-size: cover; 14 | display: flex; 15 | justify-content: center; 16 | flex-direction: column; 17 | min-height: 100vh; 18 | font-family: 'Open Sans', sans-serif 19 | } 20 | 21 | .logo { 22 | width: 12em; 23 | margin: 2em; 24 | } 25 | 26 | .container { 27 | display: flex; 28 | width: 90%; 29 | align-items: center; 30 | height: auto; 31 | margin-top: 3.75rem; 32 | } 33 | 34 | .img-container { 35 | width: 60%; 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | 41 | .img-container img { 42 | width: 80%; 43 | text-align: center; 44 | } 45 | 46 | .text-container { 47 | width: 40%; 48 | height: 100%; 49 | } 50 | 51 | h2 { 52 | color: white; 53 | margin: 1em 2em 0.75em 0; 54 | font-family: 'Poppins', sans-serif; 55 | line-height: 1.2em; 56 | font-size: 2em; 57 | } 58 | 59 | p { 60 | color: white; 61 | font-family: 'Poppins', sans-serif; 62 | margin-bottom: 0.75em; 63 | margin-right: 2em; 64 | } 65 | 66 | button { 67 | padding: 0.75em 2em; 68 | border-radius: 50px; 69 | font-family: 'Poppins', sans-serif; 70 | cursor: pointer; 71 | border: none; 72 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5); 73 | color: hsl(257, 40%, 49%); 74 | } 75 | 76 | button:hover { 77 | background-color: white; 78 | } 79 | 80 | footer { 81 | width: 95%; 82 | text-align: right; 83 | display: block; 84 | } 85 | 86 | i { 87 | font-size: 1em; 88 | color: white; 89 | padding: 0.5em; 90 | margin: 0.5em; 91 | text-align: center; 92 | width: 2em; 93 | height: 2em; 94 | border-radius: 50%; 95 | border: 1px solid white; 96 | cursor: pointer; 97 | } 98 | 99 | @media only screen and (max-width:768px) { 100 | body { 101 | background-image: url('./images/bg-mobile.svg'); 102 | } 103 | .container { 104 | flex-direction: column; 105 | width: 100%; 106 | margin-top: 0; 107 | } 108 | .img-container { 109 | width: 100%; 110 | } 111 | .text-container { 112 | width: 80%; 113 | text-align: center; 114 | } 115 | h2 { 116 | font-size: 1.5em; 117 | } 118 | p { 119 | margin-right: 0; 120 | } 121 | footer { 122 | width: 100%; 123 | text-align: center; 124 | } 125 | } -------------------------------------------------------------------------------- /MontyHall/158047.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 7 | 8 | Created by potrace 1.15, written by Peter Selinger 2001-2017 9 | 10 | 12 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Keyboard/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: #352020; 9 | min-height: 100vh; 10 | } 11 | 12 | .result { 13 | display: flex; 14 | justify-content: center; 15 | width: 100vw; 16 | align-items: center; 17 | height: 40vh; 18 | } 19 | 20 | textarea { 21 | background-color: #352020; 22 | box-shadow: inset 26px 26px 52px #1e1212, inset -26px -26px 52px #4c2e2e; 23 | border: none; 24 | resize: none; 25 | width: 60vw; 26 | height: 20vh; 27 | font-size: 20px; 28 | color: #ccc; 29 | font-family: 'Balsamiq Sans', cursive; 30 | text-align: center; 31 | } 32 | 33 | .keyboard { 34 | width: 90vw; 35 | display: flex; 36 | justify-content: center; 37 | align-self: center; 38 | margin: 0 auto; 39 | padding: 5vmin; 40 | border-radius: 50px; 41 | box-shadow: -2vmin 2vmin 1vmin #1e1212, 2vmin -1vmin 1vmin #4c2e2e; 42 | ; 43 | } 44 | 45 | .letters { 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | } 50 | 51 | .key { 52 | margin: 1vmin; 53 | padding: 1vmin 2vmin; 54 | border-radius: 1vmin; 55 | box-shadow: 0.75vmin 0.75vmin 0.8vmin #1e1212, -0.75vmin -0.75vmin 1vmin #4c2e2e; 56 | cursor: pointer; 57 | } 58 | 59 | span { 60 | width: auto; 61 | display: inline-block; 62 | } 63 | 64 | .key:active { 65 | box-shadow: inset 0.75vmin 0.75vmin 0.8vmin #1e1212, inset -0.75vmin -0.75vmin 1vmin #4c2e2e; 66 | } 67 | 68 | .key:active span { 69 | transform: scale(0.98); 70 | } 71 | 72 | .row2 .key { 73 | padding: 1vmin 2.87vmin; 74 | margin: 1.5vmin; 75 | } 76 | 77 | .row3 .key { 78 | margin: 1vmin 1.65vmin; 79 | padding: 1.25vmin 3vmin; 80 | } 81 | 82 | .row4 .key { 83 | margin: 1vmin 1.65vmin; 84 | padding: 1.25vmin 2.95vmin; 85 | } 86 | 87 | .row5 .key { 88 | margin: 1vmin 1.65vmin; 89 | padding: 1.25vmin 3.1vmin; 90 | } 91 | 92 | .row6 .key { 93 | margin: 1vmin 1.65vmin; 94 | padding: 1vmin 3.1vmin; 95 | } 96 | 97 | .tab { 98 | padding: 1vmin 3vmin !important; 99 | } 100 | 101 | .shift { 102 | padding: 1vmin 7.25vmin !important; 103 | } 104 | 105 | .spacebar { 106 | padding: 1vmin 25vmin !important; 107 | } 108 | 109 | .arrow { 110 | padding: 0 2.8vmin !important; 111 | margin: 0 0 !important; 112 | } 113 | 114 | span, 115 | p { 116 | color: #ccc; 117 | } -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap'); 2 | * { 3 | box-sizing: border-box; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | body { 9 | background: linear-gradient(135deg, hsl(0, 0%, 100%), hsl(0, 100%, 98%)) 10 | } 11 | 12 | .container { 13 | display: flex; 14 | min-height: 100vh; 15 | } 16 | 17 | .text-container { 18 | width: 60%; 19 | font-family: 'Josefin Sans', sans-serif; 20 | background-image: url(./images/bg-pattern-desktop.svg); 21 | background-position: center; 22 | background-repeat: no-repeat; 23 | background-size: cover; 24 | } 25 | 26 | .inner-container { 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | height: 60%; 31 | } 32 | 33 | .logo { 34 | margin: 5em 10% 0 10%; 35 | margin-bottom: 5em; 36 | } 37 | 38 | .mobile-img { 39 | width: 100%; 40 | margin-top: -2em; 41 | margin-bottom: 4em; 42 | display: none; 43 | } 44 | 45 | h1 { 46 | margin: 0 10%; 47 | text-transform: uppercase; 48 | width: 7em; 49 | letter-spacing: 0.3em; 50 | margin-bottom: 1em; 51 | font-size: 2.5em; 52 | } 53 | 54 | h1 span { 55 | color: hsl(0, 36%, 70%); 56 | font-weight: 300; 57 | } 58 | 59 | p { 60 | margin: 0 10%; 61 | color: hsl(0, 36%, 70%); 62 | line-height: 1.5em; 63 | margin-bottom: 1.5em; 64 | } 65 | 66 | .input-form { 67 | margin: 0 10%; 68 | position: relative; 69 | } 70 | 71 | input { 72 | padding: 1em; 73 | border-radius: 50px; 74 | width: 100%; 75 | border: 1px solid hsl(0, 80%, 86%); 76 | position: relative; 77 | outline: none; 78 | } 79 | 80 | button { 81 | position: absolute; 82 | top: 1px; 83 | right: 0.3px; 84 | padding: 0.8em 2em; 85 | border-radius: 50px; 86 | background: linear-gradient(135deg, hsl(0, 80%, 86%), hsl(0, 74%, 74%)); 87 | border: none; 88 | cursor: pointer; 89 | } 90 | 91 | button:hover { 92 | box-shadow: 0px 0px 5px hsl(0, 74%, 74%); 93 | } 94 | 95 | input:focus { 96 | border: 1px solid hsl(0, 74%, 74%); 97 | } 98 | 99 | button:active { 100 | transform: scale(0.95); 101 | } 102 | 103 | .error { 104 | position: absolute; 105 | top: 0.75em; 106 | right: 5em; 107 | display: none; 108 | } 109 | 110 | #errorMsg { 111 | color: hsl(0, 93%, 68%); 112 | margin-top: 0.75em; 113 | margin-left: 1em; 114 | display: none; 115 | } 116 | 117 | .image-container { 118 | background: url('./images/hero-desktop.jpg'); 119 | background-repeat: no-repeat; 120 | background-size: cover; 121 | width: 40%; 122 | } 123 | 124 | .body { 125 | display: flex; 126 | align-items: center; 127 | justify-content: center; 128 | text-align: center; 129 | min-height: 100vh; 130 | font-size: 30px; 131 | color: hsl(0, 36%, 70%); 132 | text-transform: uppercase; 133 | } 134 | 135 | @media only screen and (max-width:600px) { 136 | .logo { 137 | margin: 2em 5% 4em 5%; 138 | } 139 | .inner-container { 140 | height: auto; 141 | } 142 | .image-container { 143 | display: none; 144 | } 145 | .mobile-img { 146 | display: block; 147 | } 148 | .text-container { 149 | width: 100%; 150 | } 151 | h1, 152 | p { 153 | text-align: center; 154 | } 155 | h1 { 156 | margin: 0 auto; 157 | margin-bottom: 1em; 158 | } 159 | input { 160 | margin-bottom: 5em; 161 | } 162 | } -------------------------------------------------------------------------------- /MontyHall/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap'); 2 | @import url('https://fonts.googleapis.com/css2?family=McLaren&display=swap'); 3 | * { 4 | margin: 0; 5 | padding: 0%; 6 | box-sizing: border-box; 7 | } 8 | 9 | body { 10 | background-color: #ffffff; 11 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23000000' fill-opacity='0.06'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E"); 12 | min-height: 100vh; 13 | display: flex; 14 | align-items: center; 15 | justify-content: center; 16 | flex-direction: column; 17 | } 18 | 19 | header { 20 | height: 20vh; 21 | font-family: 'Bangers', cursive; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | font-size: 30px; 26 | text-align: center; 27 | } 28 | 29 | @media screen and (max-width:700px) { 30 | header { 31 | margin-top: 20px; 32 | font-size: 20px; 33 | text-align: center; 34 | } 35 | } 36 | 37 | .rule-title { 38 | font-size: 30px; 39 | text-align: center; 40 | margin-bottom: 20px; 41 | } 42 | 43 | .rules { 44 | border-spacing: 0 15px; 45 | margin-bottom: 30px; 46 | } 47 | 48 | .rule-number { 49 | padding-right: 20px; 50 | padding-left: 20px; 51 | font-size: 20px; 52 | } 53 | 54 | .rule { 55 | font-size: 18px; 56 | line-height: 25px; 57 | padding-right: 10px; 58 | } 59 | 60 | .instructions { 61 | height: 15vh; 62 | display: flex; 63 | justify-content: center; 64 | align-items: center; 65 | font-size: 30px; 66 | font-family: 'McLaren', cursive; 67 | margin: 30px 0; 68 | } 69 | 70 | .door-row { 71 | text-align: center; 72 | margin-top: 40px; 73 | } 74 | 75 | .door { 76 | width: 200px; 77 | height: 350px; 78 | margin: 10px 40px; 79 | margin-bottom: 40px; 80 | cursor: pointer; 81 | border: 10px solid #000; 82 | } 83 | 84 | .buttons { 85 | width: 300px; 86 | height: 50px; 87 | display: flex; 88 | justify-content: center; 89 | align-items: center; 90 | } 91 | 92 | button { 93 | padding: 10px 40px; 94 | background-color: #000; 95 | border: none; 96 | border-radius: 50px; 97 | color: gray; 98 | cursor: pointer; 99 | margin: 0 20px; 100 | font-size: 18px; 101 | box-shadow: 0px 10px 13px -7px #000000, 7px 5px 15px 5px rgba(0, 0, 0, 0); 102 | } 103 | 104 | button:active { 105 | transform: scale(0.9); 106 | } 107 | 108 | .container2 p, 109 | .container3 p, 110 | .container4 p, 111 | .container5 p { 112 | font-size: 18px; 113 | line-height: 40px; 114 | text-align: center; 115 | } 116 | 117 | .container2 p:first-child, 118 | .container3 p:first-child, 119 | .container4 p:first-child, 120 | .container5 p:first-child { 121 | font-family: 'Bangers', cursive; 122 | letter-spacing: 2px; 123 | text-transform: uppercase; 124 | font-size: 40px; 125 | margin-bottom: 30px; 126 | } 127 | 128 | .links { 129 | width: 100vw; 130 | height: 10vw; 131 | text-align: center; 132 | margin: 40px 0; 133 | } 134 | 135 | .container2 a, 136 | .container3 a, 137 | .container4 a, 138 | .container5 a { 139 | color: gray; 140 | background-color: #000; 141 | text-decoration: none; 142 | padding: 10px 20px; 143 | border-radius: 20px; 144 | margin: 0 10px; 145 | box-shadow: 0px 10px 13px -7px #000000, 7px 5px 15px 5px rgba(0, 0, 0, 0); 146 | } 147 | 148 | .container2 a:hover, 149 | .container3 a:hover, 150 | .container4 a:hover, 151 | .container5 a:hover { 152 | font-size: 18px; 153 | } -------------------------------------------------------------------------------- /frontEndMentors/base-apparel-coming-soon-master/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Animated heart/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | height: 100%; 4 | margin: -2px; 5 | padding: -2px; 6 | } 7 | 8 | .container { 9 | width: 700px; 10 | height: 500px; 11 | } 12 | 13 | .logo { 14 | margin: 0; 15 | position: absolute; 16 | height: 95px; 17 | top: 65%; 18 | } 19 | 20 | img { 21 | width: 13%; 22 | margin: 0; 23 | padding: 0; 24 | animation-name: move; 25 | animation-duration: 3s; 26 | animation-fill-mode: forwards; 27 | } 28 | 29 | @keyframes move { 30 | 100% { 31 | transition: transform 3s ease-in; 32 | transform: translate(300%); 33 | } 34 | } 35 | 36 | .heart { 37 | position: absolute; 38 | width: 10px; 39 | height: 10px; 40 | background-color: transparent; 41 | top: 63%; 42 | left: 53%; 43 | animation-name: heart; 44 | animation-duration: 5s; 45 | /*animation-fill-mode:forwards;*/ 46 | animation-iteration-count: infinite; 47 | animation-delay: 4s; 48 | } 49 | 50 | .heart::after { 51 | position: absolute; 52 | width: 10px; 53 | content: ""; 54 | height: 10px; 55 | left: 5px; 56 | background-color: transparent; 57 | border-radius: 50%; 58 | animation-name: heart1; 59 | animation-duration: 5s; 60 | /* animation-fill-mode:forwards;*/ 61 | animation-iteration-count: infinite; 62 | animation-delay: 4s; 63 | } 64 | 65 | .heart::before { 66 | position: absolute; 67 | width: 10px; 68 | content: ""; 69 | height: 10px; 70 | background-color: transparent; 71 | top: -5px; 72 | border-radius: 50%; 73 | left: 0px; 74 | animation-name: heart1; 75 | animation-duration: 3s; 76 | /*animation-fill-mode:forwards;*/ 77 | animation-iteration-count: infinite; 78 | animation-delay: 4s; 79 | } 80 | 81 | 82 | /*@keyframes heart{ 83 | 0%{ 84 | background-color:purple; 85 | } 86 | 50%{ 87 | background-color:purple; 88 | transition: transform 1s linear; 89 | transform:scale(2) translate(100%,-100%); 90 | animation-timing-function:cubic-bezier(.19,.21,.77,.75); 91 | } 92 | 75%{ 93 | background-color:purple; 94 | /*transition: transform 1s linear;*/ 95 | 96 | 97 | /* transform:scale(3) rotate(-23deg) translateY(-200%); 98 | animation-timing-function:cubic-bezier(.19,.21,.77,.75); 99 | } 100 | 100%{ 101 | background-color:purple; 102 | /*transition: transform 1s linear;*/ 103 | 104 | 105 | /* transform:scale(6) translate(-100%,-200%) rotate(-45deg); 106 | animation-timing-function:cubic-bezier(.19,.21,.77,.75); 107 | } 108 | }*/ 109 | 110 | @keyframes heart1 { 111 | 0% { 112 | background-color: purple; 113 | } 114 | 100% { 115 | background-color: purple; 116 | } 117 | } 118 | 119 | @keyframes heart { 120 | 0% { 121 | opacity: 0; 122 | background-color: purple; 123 | } 124 | 100% { 125 | background-color: purple; 126 | transition: transform 4s; 127 | transform: rotate(-45deg) scale(6) translate(150%, -150%); 128 | opacity: 1; 129 | } 130 | } 131 | 132 | .alphabets { 133 | display: inline-block; 134 | font-family: 'Fredericka the Great', cursive; 135 | } 136 | 137 | .f, 138 | .dash, 139 | .p, 140 | .P { 141 | animation-name: letters; 142 | animation-duration: 1s; 143 | animation-delay: 6s; 144 | animation-iteration-count: infinite; 145 | opacity: 0; 146 | } 147 | 148 | .f { 149 | position: absolute; 150 | top: 30%; 151 | left: 25%; 152 | font-size: 550%; 153 | } 154 | 155 | .dash { 156 | position: absolute; 157 | font-size: 550%; 158 | top: 29%; 159 | left: 35%; 160 | } 161 | 162 | .p { 163 | position: absolute; 164 | top: 30%; 165 | left: 39%; 166 | font-size: 550%; 167 | } 168 | 169 | .P { 170 | position: absolute; 171 | top: 30%; 172 | left: 61%; 173 | font-size: 550%; 174 | } 175 | 176 | @keyframes letters { 177 | 0% { 178 | opacity: 1; 179 | transition: transform 1s linear; 180 | transform: scale(0.5); 181 | } 182 | 100% { 183 | transition: transform 2s linear; 184 | transform: scale(1); 185 | opacity: 1; 186 | } 187 | } 188 | 189 | @media and (max-width:500px) { 190 | .f, 191 | .p, 192 | .P, 193 | .dash { 194 | margin: 0px, 30px; 195 | } 196 | } -------------------------------------------------------------------------------- /MontyHall/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | MontyHall 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |

welcome to Montyhall game

17 |
18 |

Instructions

19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
1.Below, there are 3 doors. Behind one door,there is a car and behind the others,goats
2.Your goal is to pick a door behind which there is a car
3.When you select a door,the computer reveals another door which has a goat
4.Now,You can either switch to another closed door or go with your initial choice
5.Play Wisely and win a car
41 |
42 |
Please Select a door
43 |
You selected door1
44 |
You selected door2
45 |
You selected door3
46 |
47 |

Ok, I'm opening a door

48 |

Do you want to switch?

49 |
50 | 51 | 52 |
53 |
54 |
55 | 56 |
57 | door 58 | door 59 | door 60 | 61 |
62 |
63 |
64 |

Congratulations!!!!!

65 |

You made the right choice by switching

66 |

By switching, you increased your probability of winning to 0.67

67 |
68 | Know more 69 | Play again 70 |
71 |
72 |
73 |

You Lost!!!

74 |

The chances of you winning was 67% since you switched,yet you still lost

75 |

Play again to redefine your luck

76 |
77 | Know more 78 | Play again 79 |
80 |
81 |
82 |

Congratulations!!!!!

83 |

You are a very lucky person

84 |

The probability of you winning was only 0.33 because you didn't switch,yet you still won

85 |
86 | Know more 87 | Play again 88 |
89 |
90 |
91 |

You Lost!!!!

92 |

Since you didn't switch, your chances of winning was only 33%

93 |

Play again to redefine your luck

94 |
95 | Know more 96 | Play again 97 |
98 |
99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /Glassmorphism/style.css: -------------------------------------------------------------------------------- 1 | <<<<<<< HEAD 2 | *{ 3 | margin:0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | body{ 8 | min-height:100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | .wrapper{ 14 | width:100%; 15 | height:100%; 16 | min-height: 100vh; 17 | position: relative; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | flex-wrap: wrap; 22 | background-image: url("https://images.pexels.com/photos/3503629/pexels-photo-3503629.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); 23 | background-repeat: no-repeat; 24 | background-position: center; 25 | background-size: cover; 26 | } 27 | .wrapper .box{ 28 | position: relative; 29 | width:280px; 30 | height:400px; 31 | box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 32 | border-radius:15px; 33 | margin:30px; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | border-top:1px solid rgba(255,255,255,0.5); 38 | border-left:1px solid rgba(255,255,255,0.5); 39 | backdrop-filter: blur(5px); 40 | transform-style: preserve-3d; 41 | transform: perspective(800px) 42 | } 43 | h2{ 44 | color:#f5f5f5; 45 | font-size:2.5rem; 46 | text-align: center; 47 | font-family: 'Acme', sans-serif; 48 | } 49 | p{ 50 | color:#ccc; 51 | margin:20px 10px; 52 | font-family: 'Fira Code', monospace; 53 | } 54 | ul{ 55 | list-style: none; 56 | width:100%; 57 | display: flex; 58 | justify-content: space-evenly; 59 | margin:30px 0; 60 | padding:10px; 61 | /* box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 62 | backdrop-filter: blur(45px); 63 | border-radius:5px; 64 | transform-style:preserve-3d ; 65 | perspective: 500px; 66 | transform:translateZ(20px); */ 67 | } 68 | 69 | li{ 70 | cursor: pointer; 71 | /* transform-style:preserve-3d ; 72 | perspective: 500px; */ 73 | width:30px; 74 | height:30px; 75 | } 76 | i{ 77 | color:#ccc; 78 | font-size: 1.5rem; 79 | transition: all 0.3s ease; 80 | } 81 | li:hover .fa-twitter{ 82 | transform:translate3d(0,-10px,20px); 83 | color:#00acee; 84 | } 85 | li:hover .fa-github{ 86 | transform:translate3d(0,-10px,20px); 87 | color:gray; 88 | } 89 | li:hover .fa-linkedin-in{ 90 | transform:translate3d(0,-10px,20px); 91 | color:#077099; 92 | } 93 | ======= 94 | *{ 95 | margin:0; 96 | padding:0; 97 | box-sizing: border-box; 98 | } 99 | body{ 100 | min-height:100vh; 101 | display: flex; 102 | justify-content: center; 103 | align-items: center; 104 | } 105 | .wrapper{ 106 | width:100%; 107 | height:100%; 108 | min-height: 100vh; 109 | position: relative; 110 | display: flex; 111 | justify-content: center; 112 | align-items: center; 113 | flex-wrap: wrap; 114 | background-image: url("https://images.pexels.com/photos/3503629/pexels-photo-3503629.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"); 115 | background-repeat: no-repeat; 116 | background-position: center; 117 | background-size: cover; 118 | } 119 | .wrapper .box{ 120 | position: relative; 121 | width:280px; 122 | height:400px; 123 | box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 124 | border-radius:15px; 125 | margin:30px; 126 | display: flex; 127 | justify-content: center; 128 | align-items: center; 129 | border-top:1px solid rgba(255,255,255,0.5); 130 | border-left:1px solid rgba(255,255,255,0.5); 131 | backdrop-filter: blur(5px); 132 | transform-style: preserve-3d; 133 | transform: perspective(800px) 134 | } 135 | h2{ 136 | color:#f5f5f5; 137 | font-size:2.5rem; 138 | text-align: center; 139 | font-family: 'Acme', sans-serif; 140 | } 141 | p{ 142 | color:#ccc; 143 | margin:20px 10px; 144 | font-family: 'Fira Code', monospace; 145 | } 146 | ul{ 147 | list-style: none; 148 | width:100%; 149 | display: flex; 150 | justify-content: space-evenly; 151 | margin:30px 0; 152 | padding:10px; 153 | /* box-shadow: 20px 20px 50px rgba(0,0,0,0.5); 154 | backdrop-filter: blur(45px); 155 | border-radius:5px; 156 | transform-style:preserve-3d ; 157 | perspective: 500px; 158 | transform:translateZ(20px); */ 159 | } 160 | 161 | li{ 162 | cursor: pointer; 163 | /* transform-style:preserve-3d ; 164 | perspective: 500px; */ 165 | width:30px; 166 | height:30px; 167 | } 168 | i{ 169 | color:#ccc; 170 | font-size: 1.5rem; 171 | transition: all 0.3s ease; 172 | } 173 | li:hover .fa-twitter{ 174 | transform:translate3d(0,-10px,20px); 175 | color:#00acee; 176 | } 177 | li:hover .fa-github{ 178 | transform:translate3d(0,-10px,20px); 179 | color:gray; 180 | } 181 | li:hover .fa-linkedin-in{ 182 | transform:translate3d(0,-10px,20px); 183 | color:#077099; 184 | } 185 | >>>>>>> fccb138c1a97f110c80a7e0d17f387f8fdd04843 186 | -------------------------------------------------------------------------------- /MontyHall/supercar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 20 | 31 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /Animated icons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 61 |
62 |
63 |
    64 |
  • 65 | 66 |
    • 67 |
    • 68 |
    • 69 |
    • 70 |
    • 71 |
72 |
73 |
74 |
    75 |
  • 76 | 77 |
    • 78 |
  • 79 | 80 |
    • 81 |
  • 82 | 83 |
    • 84 |
  • 85 | 86 |
    • 87 |
  • 88 | 89 |
    • 90 |
91 |
92 |
93 |
94 |

Facebook

95 |
96 |
97 |

Whatsapp

98 |
99 |
100 |

Twitter

101 |
102 |
103 |

Github

104 |
105 |
106 |

Youtube

107 |
108 |
109 |
110 | 111 | 112 |
113 | 114 | 115 | 116 |
117 | 118 | 119 | 120 |
121 | 122 | 123 | 124 |
125 | 126 | 127 | 128 |
129 | 130 |
131 |
132 |
    133 |
    • 134 |
    • 135 |
    • 136 |
    • 137 |
    • 138 |
139 |
140 | 141 | 142 | 143 | -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Frontend Mentor | Fylo landing page with two column layout 12 | 13 | 14 | 15 | 16 | 17 |
18 | 26 |
27 |
28 |
29 |

All your files in one secure location, accessible anywhere

30 |

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

31 |
32 | 33 | 34 |
35 |
36 |
illustration-1
37 |
38 |
39 |
40 |

Stay productive, wherever you are

41 |

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

42 |

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

43 | See how Fylo works 44 | arrow 45 |
46 | quotes 47 |

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

48 |
49 | avatar 50 |
51 |

Kyle Burton

52 |

Founder & CEO, Huddle

53 |
54 |
55 |
56 |
57 |
illustration-2
58 |
59 |
60 |
61 |

Get early access today

62 |

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

63 |
64 |
65 | 66 | 67 |
68 |
69 |
70 |
71 | 72 |
73 |
    74 |
  • 75 | 76 | phone 77 | 78 | 79 | Phone: +1-543-123-4567 80 | 81 |
    • 82 |
  • 83 | 84 | email 85 | 86 | 87 | example@fylo.com 88 | 89 |
    • 90 |
91 |
    92 |
  • About Us
    • 93 |
  • Jobs
    • 94 |
  • Press
    • 95 |
  • Blog
    • 96 |
97 |
    98 |
  • Contact Us
    • 99 |
  • Terms
    • 100 |
  • Privacy
    • 101 |
102 |
    103 |
  • 104 |
    • 105 |
  • 106 |
    • 107 |
    • 108 |
109 |
110 |
111 |
112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /Nokia-3310/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | min-height: 100vh; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | } 13 | 14 | .container { 15 | position: relative; 16 | width: 150px; 17 | height: 300px; 18 | background: rgba(68, 63, 88); 19 | border-radius: 50px 50px 50px 50px/300px 300px 300px 300px; 20 | box-shadow: inset 4px 0px 0 #ccc, inset -4px 0 0 #ccc; 21 | } 22 | 23 | .container:before { 24 | position: absolute; 25 | top: -10px; 26 | left: 17px; 27 | width: 115px; 28 | height: 100px; 29 | z-index: -1; 30 | background: rgb(68, 63, 88); 31 | content: ""; 32 | border-radius: 25px/20px; 33 | } 34 | 35 | .container:after { 36 | position: absolute; 37 | bottom: -10px; 38 | left: 22px; 39 | width: 105px; 40 | height: 100px; 41 | background: rgb(68, 63, 88); 42 | content: ""; 43 | border-radius: 25px/20px; 44 | } 45 | 46 | .screen { 47 | width: 120px; 48 | height: 190px; 49 | left: 15px; 50 | top: -3px; 51 | background: #ccc; 52 | position: absolute; 53 | border-radius: 25% 25% 50% 50%/40% 40% 40% 40%; 54 | overflow: hidden; 55 | } 56 | 57 | .screen:before { 58 | position: absolute; 59 | width: 110px; 60 | height: 160px; 61 | content: ""; 62 | top: 5px; 63 | left: 5px; 64 | background: rgb(68, 63, 88); 65 | border-radius: 25% 25% 50% 50%/40% 40% 40% 40%; 66 | } 67 | 68 | .screen span { 69 | position: absolute; 70 | top: 25%; 71 | left: 35%; 72 | font-size: 10px; 73 | color: #ccc; 74 | } 75 | 76 | .image { 77 | position: absolute; 78 | top: 35%; 79 | border-radius: 5px 5px 10px 10px/20px; 80 | left: 8%; 81 | } 82 | 83 | .middle-btn { 84 | position: absolute; 85 | width: 35px; 86 | height: 10px; 87 | bottom: 26px; 88 | background: #ccc; 89 | left: 43px; 90 | border-radius: 50%; 91 | } 92 | 93 | .middle-btn:before { 94 | position: absolute; 95 | width: 40px; 96 | height: 15px; 97 | content: ""; 98 | border-radius: 50%; 99 | box-shadow: inset 5px 5px 0px 0px rgba(204, 204, 204, 0.75), inset -5px -5px 0 0 rgba(204, 204, 204, 0.75); 100 | } 101 | 102 | .middle-btn:after { 103 | position: absolute; 104 | width: 20px; 105 | left: 8px; 106 | top: -2px; 107 | height: 5px; 108 | content: ""; 109 | border-radius: 2px 2px 2px 2px; 110 | border-bottom: 2px solid #11899a; 111 | } 112 | 113 | .call-btn { 114 | position: absolute; 115 | width: 25px; 116 | height: 20px; 117 | border: 1px solid #000; 118 | bottom: 12px; 119 | left: 10px; 120 | text-align: center; 121 | font-size: 10px; 122 | border-radius: 5px; 123 | transform: rotate(30deg) skew(-15deg); 124 | } 125 | 126 | .chevrons { 127 | position: absolute; 128 | width: 40px; 129 | height: 20px; 130 | border: 1px solid #000; 131 | bottom: 15px; 132 | right: 0px; 133 | border-radius: 5px 10px 10px 10px; 134 | transform: rotate(-45deg) skew(15deg); 135 | } 136 | 137 | .chevrons:after { 138 | position: absolute; 139 | width: 10px; 140 | height: 10px; 141 | content: "<"; 142 | font-size: 10px; 143 | left: 5px; 144 | } 145 | 146 | .chevrons:before { 147 | position: absolute; 148 | width: 10px; 149 | height: 10px; 150 | content: ">"; 151 | font-size: 10px; 152 | right: 5px; 153 | } 154 | 155 | .buttons { 156 | display: flex; 157 | flex-direction: column; 158 | position: relative; 159 | top: 55%; 160 | left: 0%; 161 | width: 150px; 162 | height: 120px; 163 | z-index: 1; 164 | } 165 | 166 | .button-row1, 167 | .button-row2, 168 | .button-row3, 169 | .button-row4 { 170 | position: absolute; 171 | display: flex; 172 | } 173 | 174 | .button-row1 { 175 | top: 5%; 176 | } 177 | 178 | .btns { 179 | margin: 0 20px; 180 | font-size: 15px; 181 | position: absolute; 182 | background: #ccc; 183 | } 184 | 185 | .btn-1, 186 | .btn-7, 187 | .btn-4, 188 | .btn-10 { 189 | width: 30px; 190 | height: 20px; 191 | top: 10px; 192 | border: 1px solid #000; 193 | border-radius: 50%; 194 | text-align: center; 195 | transform: rotate(30deg) 196 | } 197 | 198 | .btn-2, 199 | .btn-5, 200 | .btn-8, 201 | .btn-0 { 202 | width: 30px; 203 | height: 20px; 204 | top: 20px; 205 | left: 43px; 206 | border: 1px solid #000; 207 | border-radius: 50%; 208 | text-align: center; 209 | } 210 | 211 | .btn-3, 212 | .btn-6, 213 | .btn-9, 214 | .btn-12 { 215 | width: 30px; 216 | height: 20px; 217 | top: 10px; 218 | left: 83px; 219 | border: 1px solid #000; 220 | border-radius: 50%; 221 | text-align: center; 222 | transform: rotate(-30deg); 223 | } 224 | 225 | .btn-7 { 226 | top: 5px; 227 | } 228 | 229 | .btn-8 { 230 | top: 12px; 231 | } 232 | 233 | .btn-9 { 234 | top: 5px; 235 | } 236 | 237 | .btn-10 { 238 | top: 0px; 239 | left: 5px; 240 | } 241 | 242 | .btn-0 { 243 | top: 3px; 244 | left: 44px; 245 | } 246 | 247 | .btn-12 { 248 | top: -2px; 249 | left: 80px; 250 | } 251 | 252 | .button-row2 { 253 | top: 30%; 254 | } 255 | 256 | .button-row3 { 257 | top: 60%; 258 | } 259 | 260 | .button-row4 { 261 | top: 90%; 262 | } -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap'); 2 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"); 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: "Open Sans", sans-serif; 9 | margin: 0; 10 | } 11 | 12 | .container { 13 | padding: 30px; 14 | display: flex; 15 | align-items: center; 16 | } 17 | 18 | .container>div { 19 | flex: 1; 20 | } 21 | 22 | .first { 23 | margin-right: 20px; 24 | } 25 | 26 | .second { 27 | margin-left: 20px; 28 | } 29 | 30 | img { 31 | max-width: 100%; 32 | } 33 | 34 | li { 35 | list-style: none; 36 | } 37 | 38 | h1, 39 | h3 { 40 | font-family: "Raleway", sans-serif; 41 | } 42 | 43 | input { 44 | border: 1px solid hsl(238, 22%, 44%); 45 | border-radius: 5px; 46 | padding: 0.5em 2em; 47 | padding-left: 1em; 48 | } 49 | 50 | button { 51 | background: hsl(224, 93%, 58%); 52 | border: 1px solid hsl(238, 22%, 44%); 53 | color: #fff; 54 | font-family: "Raleway", sans-serif; 55 | padding: 0.5em 2em; 56 | border-radius: 5px; 57 | font-weight: 700; 58 | width: max-content; 59 | } 60 | 61 | nav { 62 | display: flex; 63 | justify-content: space-between; 64 | width: 100%; 65 | align-items: center; 66 | } 67 | 68 | .nav-bar { 69 | padding: 0; 70 | justify-content: flex-end; 71 | display: flex; 72 | } 73 | 74 | .nav-bar li { 75 | margin-left: 1em; 76 | } 77 | 78 | .nav-bar li a { 79 | text-decoration: none; 80 | color: hsl(243, 87%, 12%); 81 | } 82 | 83 | .container2 { 84 | margin-top: 3em; 85 | } 86 | 87 | .text-container1 h1 { 88 | line-height: 1.5em; 89 | } 90 | 91 | .input-form { 92 | display: flex; 93 | } 94 | 95 | .input-form button { 96 | margin-left: 1em; 97 | } 98 | 99 | .container3 { 100 | background-color: #f8f8fe; 101 | margin-top: 10em; 102 | position: relative; 103 | } 104 | 105 | .container3:before { 106 | content: ""; 107 | position: absolute; 108 | background-image: url(./images/bg-curve-desktop.svg); 109 | background-repeat: no-repeat; 110 | background-size: cover; 111 | width: 100%; 112 | height: 20%; 113 | top: -6em; 114 | left: 0; 115 | } 116 | 117 | .container3 a { 118 | color: #3da08f; 119 | } 120 | 121 | .card { 122 | background-color: #fff; 123 | margin-top: 3em; 124 | margin-bottom: 5em; 125 | padding: 1.5em; 126 | width: 60%; 127 | height: 50%; 128 | border-radius: 10px; 129 | box-shadow: 5px 5px 5px #ccc, -5px -5px 5px #ccc; 130 | } 131 | 132 | .card>*, 133 | .name-details p { 134 | margin: 0; 135 | } 136 | 137 | .details { 138 | display: flex; 139 | align-items: center; 140 | margin-top: 1em; 141 | } 142 | 143 | .details img { 144 | width: 5em; 145 | height: 5em; 146 | border-radius: 50%; 147 | margin-right: 1em; 148 | } 149 | 150 | .name-details p:first-child { 151 | font-weight: 1000; 152 | } 153 | 154 | .container4 { 155 | background-color: hsl(238, 22%, 44%); 156 | color: #fff; 157 | justify-content: space-evenly; 158 | } 159 | 160 | .form { 161 | flex-direction: column; 162 | display: flex; 163 | margin-left: 13em; 164 | } 165 | 166 | .form button { 167 | margin-top: 1em; 168 | } 169 | 170 | .form input { 171 | width: max-content; 172 | } 173 | 174 | .container5 { 175 | background-color: hsl(243, 87%, 12%); 176 | padding: 30px; 177 | color: #fff; 178 | } 179 | 180 | @media only screen and (max-width:400px) { 181 | .card { 182 | width: 100%; 183 | } 184 | } 185 | 186 | .columns>* { 187 | padding: 0; 188 | } 189 | 190 | .columns { 191 | display: flex; 192 | justify-content: space-between; 193 | } 194 | 195 | .columns>* li { 196 | padding: 10px; 197 | } 198 | 199 | .column-4 { 200 | display: flex; 201 | align-items: center; 202 | justify-content: center; 203 | margin-right: 3em; 204 | } 205 | 206 | .column-4 li { 207 | border: 1px solid #fff; 208 | border-radius: 50%; 209 | width: 2em; 210 | height: 2em; 211 | text-align: center; 212 | margin: 0.5em; 213 | padding: 0.25em 0.5em; 214 | } 215 | 216 | @media only screen and (max-width: 768px) { 217 | .container { 218 | text-align: center; 219 | } 220 | .first { 221 | margin: 0; 222 | margin-top: 3em; 223 | } 224 | .second { 225 | margin: 0; 226 | margin-bottom: 3em; 227 | } 228 | nav img { 229 | width: 30%; 230 | height: 50%; 231 | } 232 | .container2, 233 | .container3 { 234 | flex-direction: column-reverse; 235 | } 236 | .container3::before { 237 | background-image: url('./images/bg-curve-mobile.svg'); 238 | background-position: center; 239 | background-size: contain; 240 | top: -8em; 241 | } 242 | .container4, 243 | .columns { 244 | flex-direction: column; 245 | } 246 | .input-form { 247 | flex-wrap: wrap; 248 | } 249 | .input-form input, 250 | .form input { 251 | width: 100%; 252 | } 253 | .input-form button, 254 | .form button { 255 | width: 100%; 256 | margin-left: 0; 257 | margin-top: 1em; 258 | } 259 | .card { 260 | margin: 3em auto; 261 | text-align: initial; 262 | } 263 | .text-container3 { 264 | margin-top: 0; 265 | } 266 | .column-4 { 267 | margin-bottom: 2em; 268 | margin-right: 0; 269 | } 270 | } -------------------------------------------------------------------------------- /frontEndMentors/fylo-landing-page-with-two-column-layout-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Fylo landing page with two column layout 2 | 3 | ![Design preview for the Fylo landing page with two column layout challenge](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenge, you need a basic understanding of HTML and CSS.** 12 | 13 | ## Where to find everything 14 | 15 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 16 | 17 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 18 | 19 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 20 | 21 | You will find all the required assets in the `/images` folder. The assets are already optimized. 22 | 23 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 24 | 25 | ## Building your project 26 | 27 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 28 | 29 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 30 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [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 | - [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! 66 | - [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into! 67 | - [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! 68 | -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Huddle landing page with single introductory section 2 | 3 | ![Design preview for the Huddle landing page with single introductory section](./design/desktop-preview.jpg) 4 | 5 | ## Welcome! 👋 6 | 7 | Thanks for checking out this front-end coding challenge. 8 | 9 | [Frontend Mentor](https://www.frontendmentor.io) challenges allow you to improve your skills in a real-life workflow. 10 | 11 | **To do this challenge, you need a basic understanding of HTML and CSS.** 12 | 13 | ## Where to find everything 14 | 15 | Your task is to build out the project to the designs inside the `/design` folder. You will find both a mobile and a desktop version of the design to work to. 16 | 17 | The designs are in JPG static format. This will mean that you'll need to use your best judgment for styles such as `font-size`, `padding` and `margin`. This should help train your eye to perceive differences in spacings and sizes. 18 | 19 | If you would like the Sketch file in order to see sizes etc, it is available to download from the challenge page. 20 | 21 | You will find all the required assets in the `/images` folder. The assets are already optimized. 22 | 23 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 24 | 25 | ## Building your project 26 | 27 | Feel free to use any workflow that you feel comfortable with. Below is a suggested process, but do not feel like you need to follow these steps: 28 | 29 | 1. Initialize your project as a public repository on [GitHub](https://github.com/). This will make it easier to share your code with the community if you need some help. If you're not sure how to do this, [have a read through of this Try Git resource](https://try.github.io/). 30 | 2. Configure your repository to publish your code to a URL. This will also be useful if you need some help during a challenge as you can share the URL for your project with your repo URL. There are a number of ways to do this, but we recommend using [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 | - [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! 66 | - [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into! 67 | - [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! 68 | -------------------------------------------------------------------------------- /frontEndMentors/todo-app/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&display=swap'); 2 | *{ 3 | margin:0; 4 | padding:0; 5 | box-sizing: border-box; 6 | } 7 | .dark{ 8 | background-color: hsl(235, 21%, 11%); 9 | } 10 | .header{ 11 | height:40vh; 12 | background-position: center; 13 | background-size: cover; 14 | max-height:300px; 15 | } 16 | .light-mode{ 17 | background-image: url("./images/bg-desktop-light.jpg"); 18 | } 19 | .dark-mode{ 20 | background-image: url("./images/bg-desktop-dark.jpg"); 21 | } 22 | .main{ 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | padding: 0 0 20px 0; 27 | } 28 | .heading{ 29 | display: flex; 30 | justify-content:space-between; 31 | padding: 50px 0 25px 0; 32 | width:25em; 33 | } 34 | .heading p{ 35 | font-family: 'Josefin Sans', sans-serif; 36 | font-size: 2em; 37 | letter-spacing: 0.25em; 38 | padding:10px 0px 0 0; 39 | color:#fff; 40 | } 41 | .mode{ 42 | padding:10px 0; 43 | cursor: pointer; 44 | } 45 | form{ 46 | display: flex; 47 | align-items:center; 48 | position: relative; 49 | } 50 | .create{ 51 | font-family: 'Josefin Sans', sans-serif; 52 | padding:1.1em 0 0.9em 0.5em; 53 | font-size: 1.25em; 54 | width:20em; 55 | height:1.9em; 56 | border-radius:5px; 57 | border:1px solid rgb(196, 195, 195); 58 | outline-color: #fff; 59 | line-height: 1.9em; 60 | vertical-align: middle; 61 | } 62 | .create:focus{ 63 | outline:#ccc; 64 | } 65 | .dark-form{ 66 | background-color:hsl(237, 14%, 26%); 67 | border:1px solid hsl(233, 14%, 35%); 68 | outline-color:hsl(237, 14%, 26%); 69 | color:#f5f5f5; 70 | } 71 | .dark-form:focus{ 72 | outline:hsl(237, 14%, 26%); 73 | } 74 | .fa-plus{ 75 | position: absolute; 76 | z-index:100; 77 | font-size: 1.25em; 78 | padding:0.5em 0.75em; 79 | color:rgb(190, 190, 190); 80 | cursor: pointer; 81 | right:0; 82 | } 83 | .fa-plus:hover{ 84 | color:black; 85 | } 86 | 87 | input::placeholder{ 88 | color:rgb(190, 190, 190); 89 | } 90 | 91 | .todo-container{ 92 | display: flex; 93 | justify-content: center; 94 | margin-top:-3em; 95 | min-height: 30%; 96 | max-height:17em; 97 | height:17em; 98 | } 99 | .todo-list{ 100 | list-style: none; 101 | min-width:30%; 102 | width:20em; 103 | font-size: 1.25em; 104 | overflow-y:auto; 105 | } 106 | .todo:first-child{ 107 | border-radius: 5px 5px 0 0; 108 | border:0.5px solid rgb(190, 190, 190); 109 | } 110 | 111 | .todo{ 112 | display:flex ; 113 | padding:10px; 114 | background-color:#fff; 115 | border-bottom-style: dashed; 116 | align-items: center; 117 | justify-content: center; 118 | border: 0.5px solid rgb(190, 190, 190); 119 | border-top: none; 120 | position: relative; 121 | } 122 | .dark-todo:first-child{ 123 | border:0.5px solid hsl(235, 21%, 11%); 124 | } 125 | .dark-todo{ 126 | background-color: hsl(237, 14%, 26%); 127 | border:0.5px solid hsl(235, 21%, 11%); 128 | color:#f5f5f5; 129 | } 130 | .todo li{ 131 | flex:1; 132 | padding:0 10px; 133 | font-family: 'Josefin Sans', sans-serif; 134 | } 135 | .fa-trash{ 136 | pointer-events: none; 137 | } 138 | .trash-btn,.complete-btn{ 139 | border:none; 140 | background-color: #fff; 141 | cursor: pointer; 142 | font-size: 0.9em; 143 | padding:0.25em 0.25em 0 0; 144 | color:rgb(105, 105, 105); 145 | outline:none; 146 | } 147 | .dark-button{ 148 | background-color: hsl(237, 14%, 26%); 149 | color:#ccc; 150 | } 151 | .trash-btn:hover,.complete-btn:hover{ 152 | color:black; 153 | } 154 | .dark-button:hover{ 155 | color:#f5f5f5; 156 | } 157 | .hide{ 158 | background:linear-gradient( hsl(192, 100%, 67%) , hsl(280, 87%, 65%)); 159 | width:18px; 160 | height:18px; 161 | border-radius: 50%; 162 | text-align: center; 163 | margin-right:0.25em; 164 | } 165 | .check-btn{ 166 | position:absolute; 167 | left:0; 168 | border-radius: 50%; 169 | width:20px; 170 | height:20px; 171 | background:linear-gradient( hsl(192, 100%, 67%) , hsl(280, 87%, 65%)); 172 | text-align: center; 173 | margin:10px; 174 | outline: none; 175 | cursor: pointer; 176 | } 177 | .check-img{ 178 | padding:1px 0 7px 3px; 179 | } 180 | .completed{ 181 | text-decoration: line-through; 182 | color:rgb(185, 183, 183); 183 | } 184 | .footer{ 185 | display: flex; 186 | justify-content: center; 187 | align-items: center; 188 | } 189 | .group{ 190 | display: flex; 191 | } 192 | .group li{ 193 | padding:5px; 194 | } 195 | .footer-list{ 196 | list-style: none; 197 | display: flex; 198 | min-width: 30%; 199 | width:20em; 200 | background: #fff; 201 | padding: 5px; 202 | align-items: center; 203 | justify-content: space-between; 204 | font-size: 1.25em; 205 | border:0.5px solid gray; 206 | border-radius: 0 0 5px 5px; 207 | } 208 | .footer ul li{ 209 | font-family: 'Josefin Sans', sans-serif; 210 | font-size:0.65em; 211 | cursor: pointer; 212 | } 213 | .count{ 214 | pointer-events: none; 215 | } 216 | .active{ 217 | color: hsl(220, 98%, 61%); 218 | } 219 | .dark-footer{ 220 | background: hsl(237, 14%, 26%); 221 | border: hsl(235, 21%, 11%); 222 | color:#f5f5f5; 223 | } 224 | 225 | @media only screen and (max-width:500px){ 226 | .header{ 227 | height: 30vh; 228 | } 229 | .light-mode{ 230 | background-image: url('./images/bg-mobile-light.jpg'); 231 | } 232 | .dark-mode{ 233 | background-image: url('./images/bg-mobile-dark.jpg'); 234 | } 235 | .heading{ 236 | width:19em; 237 | } 238 | .todo-list,.create{ 239 | width:15em; 240 | } 241 | .todo-container{ 242 | margin-top:-0.5em; 243 | } 244 | .footer-list{ 245 | width:15em; 246 | } 247 | .group{ 248 | padding: 0 1em; 249 | } 250 | } -------------------------------------------------------------------------------- /404 Animation/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | position: relative; 3 | } 4 | 5 | .first-four { 6 | width: 200px; 7 | height: 25px; 8 | background-color: black; 9 | border-radius: 20px; 10 | position: absolute; 11 | top: 300px; 12 | left: 130px; 13 | animation-name: first-four; 14 | animation-duration: 3s; 15 | } 16 | 17 | @keyframes first-four { 18 | 0% { 19 | left: 0px; 20 | width: 100px; 21 | height: 100px; 22 | border-radius: 50%; 23 | } 24 | } 25 | 26 | .first-four::after { 27 | content: " "; 28 | width: 200px; 29 | height: 25px; 30 | background-color: black; 31 | border-radius: 20px; 32 | position: absolute; 33 | left: -25px; 34 | top: -68px; 35 | transform: rotate(-45deg); 36 | animation-name: after-first; 37 | animation-duration: 3s; 38 | } 39 | 40 | @keyframes after-first { 41 | 0% { 42 | top: -600px; 43 | } 44 | } 45 | 46 | .first-four::before { 47 | content: " "; 48 | width: 200px; 49 | height: 25px; 50 | background-color: black; 51 | border-radius: 20px; 52 | position: absolute; 53 | left: 38px; 54 | top: -40px; 55 | transform: rotate(90deg); 56 | animation-name: before-four; 57 | animation-duration: 3s; 58 | } 59 | 60 | @keyframes before-four { 61 | 0% { 62 | top: 600px; 63 | } 64 | } 65 | 66 | 67 | /*Second four*/ 68 | 69 | .second-four { 70 | width: 200px; 71 | height: 25px; 72 | background-color: black; 73 | border-radius: 20px; 74 | position: absolute; 75 | top: 300px; 76 | left: 540px; 77 | animation-name: first-four; 78 | animation-duration: 3s; 79 | } 80 | 81 | @keyframes first-four { 82 | 0% { 83 | left: 0px; 84 | width: 100px; 85 | height: 100px; 86 | border-radius: 50%; 87 | } 88 | } 89 | 90 | .second-four::after { 91 | content: " "; 92 | width: 200px; 93 | height: 25px; 94 | background-color: black; 95 | border-radius: 20px; 96 | position: absolute; 97 | left: -25px; 98 | top: -68px; 99 | transform: rotate(-45deg); 100 | animation-name: after-first; 101 | animation-duration: 3s; 102 | } 103 | 104 | @keyframes after-first { 105 | 0% { 106 | top: -600px; 107 | } 108 | } 109 | 110 | .second-four::before { 111 | content: " "; 112 | width: 200px; 113 | height: 25px; 114 | background-color: black; 115 | border-radius: 20px; 116 | position: absolute; 117 | left: 38px; 118 | top: -40px; 119 | transform: rotate(90deg); 120 | animation-name: before-four; 121 | animation-duration: 3s; 122 | } 123 | 124 | @keyframes before-four { 125 | 0% { 126 | top: 600px; 127 | } 128 | } 129 | 130 | .circle { 131 | width: 170px; 132 | height: 200px; 133 | background-color: gray; 134 | border-radius: 50%; 135 | position: absolute; 136 | left: 350px; 137 | top: 165px; 138 | animation-name: increase; 139 | animation-duration: 3s; 140 | } 141 | 142 | @keyframes increase { 143 | 0% { 144 | width: 0px; 145 | height: 0px; 146 | } 147 | } 148 | 149 | .circle::before { 150 | content: ""; 151 | width: 170px; 152 | height: 100px; 153 | background-color: transparent; 154 | border-radius: 300px 300px 0px 0px; 155 | position: absolute; 156 | left: 0px; 157 | top: 0px; 158 | animation-name: clip; 159 | animation-duration: 7s; 160 | animation-fill-mode: forwards; 161 | animation-delay: 4s; 162 | } 163 | 164 | @keyframes clip { 165 | 0% { 166 | background-color: white; 167 | clip-path: polygon(53% 85%, 73% 72%, 85% 87%, 100% 74%, 100% 100%, 50% 100%, 0 100%, 0 75%, 21% 90%, 38% 67%); 168 | } 169 | 100% { 170 | background-color: white; 171 | } 172 | } 173 | 174 | .alphabets { 175 | display: inline-block; 176 | } 177 | 178 | .f, 179 | .i, 180 | .l, 181 | .e, 182 | .n, 183 | .o, 184 | .T, 185 | .F, 186 | .O, 187 | .u, 188 | .N, 189 | .d { 190 | position: absolute; 191 | top: 50px; 192 | color: transparent; 193 | font-size: 80px; 194 | animation-name: letter; 195 | animation-duration: 3s; 196 | animation-fill-mode: forwards; 197 | } 198 | 199 | .f { 200 | /*position:absolute; 201 | top:50px; 202 | color:white;*/ 203 | left: 80px; 204 | /*font-size:80px; 205 | animation-name:letter; 206 | animation-duration:3s; 207 | animation-fill-mode:forwards;*/ 208 | animation-delay: 7s; 209 | } 210 | 211 | .i { 212 | /* position:absolute; 213 | top:50px; 214 | color:white*/ 215 | left: 135px; 216 | /*font-size:80px; 217 | animation-name:letter; 218 | animation-duration:3s; 219 | animation-fill-mode:forwards;*/ 220 | animation-delay: 8s; 221 | } 222 | 223 | .l { 224 | /*position:absolute; 225 | top:50px; 226 | color:white; 227 | font-size:80px; 228 | animation-name:letter; 229 | animation-duration:3s; 230 | animation-fill-mode:forwards;*/ 231 | animation-delay: 9s; 232 | left: 165px; 233 | } 234 | 235 | .e { 236 | /*position:absolute; 237 | top:50px; 238 | color:white; 239 | 240 | font-size:80px; 241 | animation-name:letter; 242 | animation-duration:3s; 243 | animation-fill-mode:forwards;*/ 244 | animation-delay: 10s; 245 | left: 220px; 246 | } 247 | 248 | .n { 249 | animation-delay: 11s; 250 | left: 340px; 251 | } 252 | 253 | .o { 254 | animation-delay: 12s; 255 | left: 400px; 256 | } 257 | 258 | .T { 259 | animation-delay: 13s; 260 | left: 460px; 261 | } 262 | 263 | .F { 264 | animation-delay: 14s; 265 | left: 560px; 266 | } 267 | 268 | .O { 269 | animation-delay: 15s; 270 | left: 610px; 271 | } 272 | 273 | .u { 274 | animation-delay: 16s; 275 | left: 670px; 276 | } 277 | 278 | .N { 279 | animation-delay: 17s; 280 | left: 735px; 281 | } 282 | 283 | .d { 284 | animation-delay: 18s; 285 | left: 800px; 286 | } 287 | 288 | @keyframes letter { 289 | 0% { 290 | font-size: 0px; 291 | top: 300px; 292 | left: 400px; 293 | } 294 | 50% { 295 | color: black; 296 | font-size: 60px; 297 | top: 50px; 298 | } 299 | 100% { 300 | color: black; 301 | } 302 | } -------------------------------------------------------------------------------- /frontEndMentors/todo-app/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Todo app 2 | 3 | ![Design preview for the Todo app 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 good understanding of HTML, CSS and JavaScript.** 12 | 13 | ## The challenge 14 | 15 | Your challenge is to build out this todo app 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 app depending on their device's screen size 22 | - See hover states for all interactive elements on the page 23 | - Add new todos to the list 24 | - Mark todos as complete 25 | - Delete todos from the list 26 | - Filter by all/active/complete todos 27 | - Clear all completed todos 28 | - Toggle light and dark mode 29 | - **Bonus**: Drag and drop to reorder items on the list 30 | 31 | Want some support on the challenge? [Join our Slack community](https://www.frontendmentor.io/slack) and ask questions in the **#help** channel. 32 | 33 | ## Where to find everything 34 | 35 | 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. 36 | 37 | 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. 38 | 39 | If you would like the design files (we provide Sketch & Figma versions) in order to inspect the design in more detail you can [subscribe as a PRO member](https://www.frontendmentor.io/pro). 40 | 41 | You will find all the required assets in the `/images` folder. The assets are already optimized. 42 | 43 | There is also a `style-guide.md` file, which contains the information you'll need, such as color palette and fonts. 44 | 45 | ## Building your project 46 | 47 | 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: 48 | 49 | 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/). 50 | 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. 51 | 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. 52 | 4. Before adding any styles, structure your content with HTML. Writing your HTML first can help focus your attention on creating well-structured content. 53 | 5. Write out the base styles for your project, including general content styles, such as `font-family` and `font-size`. 54 | 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. 55 | 56 | ## Deploying your project 57 | 58 | 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: 59 | 60 | 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. 61 | 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. 62 | 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. 63 | 64 | ## Sharing your solution 65 | 66 | There are multiple places you can share your solution: 67 | 68 | 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. 69 | 2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 70 | 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. 71 | 72 | ## Giving feedback 73 | 74 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 75 | 76 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 77 | 78 | **Have fun building!** 🚀 79 | 80 | ## Community Sponsors 81 | 82 | A massive thank you to our community sponsors! 83 | 84 | - [Zero to Mastery](https://bit.ly/fem-ztm) is an incredible learning resource for all things web development. Led by Andrei Neagoie, the courses are really high-quality content and cover a wide range of in-demand skills. 85 | - [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into! 86 | - [Triplebyte](http://bit.ly/fem-triplebyte) is a really nice offering if you're looking for a new role. It's a free service that lets you take a confidential quiz. Based on your results companies will pitch you for their vacant roles! 87 | -------------------------------------------------------------------------------- /frontEndMentors/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 [Vercel](https://bit.ly/fem-vercel). We've got more information about deploying your project with Vercel 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 | 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. 52 | 53 | ## Deploying your project 54 | 55 | 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: 56 | 57 | 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. 58 | 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. 59 | 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. 60 | 61 | ## Sharing your solution 62 | 63 | There are multiple places you can share your solution: 64 | 65 | 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. 66 | 2. Share your solution page in the **#finished-projects** channel of the [Slack community](https://www.frontendmentor.io/slack). 67 | 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. 68 | 69 | ## Giving feedback 70 | 71 | Feedback is always welcome, so if you have any to give on this challenge please email hi[at]frontendmentor[dot]io. 72 | 73 | This challenge is completely free. Please share it with anyone who will find it useful for practice. 74 | 75 | **Have fun building!** 🚀 76 | 77 | ## Community Sponsors 78 | 79 | A massive thank you to our community sponsors! 80 | 81 | - [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! 82 | - [Diversify Tech](https://bit.ly/fem-diversify-tech) is an amazing resource for underrepresented people in tech. The site features job listings for anyone seeking new opportunities. The resource section is also full of useful links to dive into! 83 | - [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! 84 | -------------------------------------------------------------------------------- /CSS Meme/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | min-height: 100vh; 9 | display: flex; 10 | justify-content: center; 11 | align-items: center; 12 | } 13 | 14 | .container { 15 | width: 90vmin; 16 | height: 80vmin; 17 | border: 0.5vmin solid #000; 18 | background-color: gray; 19 | } 20 | 21 | header { 22 | height: 20vmin; 23 | display: flex; 24 | align-items: center; 25 | justify-content: center; 26 | border-bottom: 3px solid #000; 27 | font-size: 4.5vmin; 28 | background-color: skyblue; 29 | } 30 | 31 | .boxex { 32 | position: relative; 33 | display: flex; 34 | flex-wrap: wrap; 35 | height: 60vmin; 36 | border-bottom: 2px solid #000; 37 | } 38 | 39 | .box { 40 | background-color: skyblue; 41 | position: absolute; 42 | width: 45vmin; 43 | height: 30vmin; 44 | } 45 | 46 | .box-1 { 47 | top: 0; 48 | left: 0; 49 | clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 100% 27%, 36% 100%); 50 | } 51 | 52 | .box-1 p { 53 | position: absolute; 54 | margin-top: 5vmin; 55 | margin-left: 3vmin; 56 | font-size: 3vmin; 57 | } 58 | 59 | .stick-figure { 60 | position: relative; 61 | width: 10vmin; 62 | height: 20vmin; 63 | transform: rotate(52deg); 64 | top: 4.5vmin; 65 | left: 23vmin; 66 | } 67 | 68 | .head { 69 | position: absolute; 70 | width: 5vmin; 71 | height: 5vmin; 72 | border-radius: 50%; 73 | border: 2px solid #000; 74 | top: 2vmin; 75 | left: 2vmin; 76 | } 77 | 78 | .body { 79 | position: absolute; 80 | height: 7vmin; 81 | width: 0; 82 | border: 1px solid #000; 83 | top: 7vmin; 84 | left: 5vmin; 85 | transform: rotate(-7deg); 86 | } 87 | 88 | .hands { 89 | position: absolute; 90 | width: 5vmin; 91 | height: 5vmin; 92 | top: 7vmin; 93 | left: 5vmin; 94 | } 95 | 96 | .hand-1 { 97 | position: absolute; 98 | width: 0; 99 | height: 6.5vmin; 100 | border: 1px solid #000; 101 | transform: rotate(60deg); 102 | left: 3vmin; 103 | top: -2vmin; 104 | } 105 | 106 | .hand-2 { 107 | position: absolute; 108 | width: 0; 109 | height: 6vmin; 110 | border: 1px solid #000; 111 | transform: rotate(-90deg); 112 | left: 3vmin; 113 | top: 0.5vmin; 114 | } 115 | 116 | .legs { 117 | position: absolute; 118 | width: 6vmin; 119 | height: 2vmin; 120 | border: 2px solid #000; 121 | top: 13vmin; 122 | left: 5.5vmin; 123 | transform: skew(-20deg); 124 | border-right: none; 125 | border-radius: 5px 0px 0px 10px; 126 | } 127 | 128 | .box-2 { 129 | right: 0; 130 | border-right: none; 131 | border-left: 3px solid #000; 132 | } 133 | 134 | .box-3 { 135 | bottom: 0; 136 | border-bottom: none; 137 | border-top: 3px solid #000; 138 | } 139 | 140 | .box-4 { 141 | bottom: 0; 142 | right: 0; 143 | border-top: 3px solid #000; 144 | border-left: 3px solid #000; 145 | } 146 | 147 | .triangle { 148 | position: absolute; 149 | width: 0; 150 | height: 0; 151 | border-bottom: 25vmin solid gray; 152 | border-left: 40vmin solid transparent; 153 | bottom: 0; 154 | right: 0; 155 | } 156 | 157 | .box-2 .stick-figure { 158 | top: 2vmin; 159 | left: 17vmin; 160 | transform: rotate(58deg); 161 | } 162 | 163 | .box-2 p, 164 | .box-3 p, 165 | .box-4 p { 166 | position: absolute; 167 | padding: 2vmin; 168 | font-size: 3vmin; 169 | } 170 | 171 | .first { 172 | top: 0vmin; 173 | } 174 | 175 | .second { 176 | top: 4vmin; 177 | } 178 | 179 | .mountain { 180 | position: absolute; 181 | width: 20vmin; 182 | height: 0vmin; 183 | bottom: 0; 184 | left: 19vmin; 185 | border-bottom: 8vmin solid gray; 186 | border-left: 6vmin solid transparent; 187 | border-right: 6vmin solid transparent; 188 | } 189 | 190 | .mountain:before { 191 | width: 8.9vmin; 192 | height: 6vmin; 193 | position: absolute; 194 | content: ""; 195 | border-radius: 50%; 196 | top: -2vmin; 197 | left: -0.3vmin; 198 | background-color: gray; 199 | } 200 | 201 | .stick-figure-1 { 202 | position: absolute; 203 | width: 7vmin; 204 | height: 15vmin; 205 | top: 5vmin; 206 | right: 13vmin; 207 | } 208 | 209 | .head-1 { 210 | position: absolute; 211 | width: 5vmin; 212 | height: 5vmin; 213 | border-radius: 50%; 214 | border: 2px solid #000; 215 | left: 1.2vmin; 216 | top: 2vmin; 217 | } 218 | 219 | .body-1 { 220 | position: absolute; 221 | width: 0; 222 | height: 6vmin; 223 | border: 1px solid #000; 224 | top: 7vmin; 225 | left: 3.5vmin; 226 | } 227 | 228 | .hands-1 { 229 | position: absolute; 230 | width: 3vmin; 231 | height: 3vmin; 232 | border-right: 2px solid #000; 233 | border-bottom: 2px solid #000; 234 | top: 7vmin; 235 | left: 2vmin; 236 | transform: rotate(45deg); 237 | } 238 | 239 | .legs-1 { 240 | position: absolute; 241 | width: 3vmin; 242 | height: 3vmin; 243 | top: 13vmin; 244 | left: 2vmin; 245 | transform: rotate(45deg); 246 | border: 2px solid #000; 247 | border-bottom: none; 248 | border-right: none; 249 | } 250 | 251 | .traingle-1 { 252 | position: absolute; 253 | width: 0; 254 | height: 0; 255 | border-bottom: 30vmin solid gray; 256 | border-left: 25vmin solid transparent; 257 | bottom: 0; 258 | right: 0; 259 | } 260 | 261 | .mountain-1 { 262 | position: absolute; 263 | width: 0vmin; 264 | height: 0; 265 | border-bottom: 10vmin solid gray; 266 | border-left: 10vmin solid transparent; 267 | border-right: 10vmin solid transparent; 268 | top: 19.5vmin; 269 | left: 8vmin; 270 | } 271 | 272 | .stick-fig { 273 | width: 5vmin; 274 | height: 7vmin; 275 | position: absolute; 276 | top: 12.5vmin; 277 | left: 15.5vmin; 278 | } 279 | 280 | .head-2 { 281 | width: 3vmin; 282 | height: 3vmin; 283 | position: absolute; 284 | border-radius: 50%; 285 | border: 1px solid #000; 286 | left: 1vmin; 287 | transform: skew(15deg); 288 | } 289 | 290 | .body-2 { 291 | width: 0; 292 | height: 4vmin; 293 | position: absolute; 294 | border-right: 1px solid #000; 295 | top: 3vmin; 296 | left: 2.5vmin; 297 | } 298 | 299 | .hands-2 { 300 | width: 1.5vmin; 301 | height: 1vmin; 302 | position: absolute; 303 | border: solid #000 1px; 304 | right: 1.5vmin; 305 | top: 4vmin; 306 | transform: rotate(45deg); 307 | border-top: none; 308 | border-left: none; 309 | } 310 | 311 | .traingle-1 p { 312 | position: absolute; 313 | right: 3vmin; 314 | top: 12vmin; 315 | font-size: 2.5vmin; 316 | } -------------------------------------------------------------------------------- /Keyboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |
19 |
20 |
21 |
esc
22 |
f1
23 |
f2
24 |
f3
25 |
f4
26 |
f5
27 |
f6
28 |
f7
29 |
f8
30 |
f9
31 |
f10
32 |
f11
33 |
f12
34 |
scroll
35 |
pause
36 |
insert
37 |
delete
38 |
39 |
40 |
41 |
~
42 |
1
43 |
2
44 |
3
45 |
4
46 |
5
47 |
6
48 |
7
49 |
8
50 |
9
51 |
0
52 |
-
53 |
=
54 |
backspace
55 |
home
56 |
57 |
58 |
59 |
60 |
tab
61 |
Q
62 |
W
63 |
E
64 |
R
65 |
T
66 |
Y
67 |
U
68 |
I
69 |
O
70 |
P
71 |
[
72 |
]
73 |
\
74 |
pg up
75 |
76 |
77 |
78 |
79 |
caps lock
80 |
A
81 |
S
82 |
D
83 |
F
84 |
G
85 |
H
86 |
J
87 |
K
88 |
L
89 |
;
90 |
'
91 |
enter
92 |
pg dn
93 | 94 |
95 |
96 |
97 |
98 |
shift
99 |
Z
100 |
X
101 |
C
102 |
V
103 |
B
104 |
N
105 |
M
106 |
,
107 |
.
108 |
/
109 |
shift
110 |
end
111 | 112 |
113 |
114 |
115 |
116 |
ctrl
117 |
fn
118 |
119 |
alt
120 |
121 |
alt
122 |
123 |
ctrl
124 |
125 |
126 | 127 |

128 | 129 |

130 |
131 |
132 |
133 |
134 |
135 |
136 | 137 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /frontEndMentors/todo-app/script.js: -------------------------------------------------------------------------------- 1 | const button = document.querySelector(".form-button"); 2 | const input = document.querySelector(".create"); 3 | const todoList = document.querySelector(".todo-list"); 4 | const toDolist = document.querySelectorAll('.todo-list'); 5 | const form = document.querySelector(".form"); 6 | const filterOption = document.querySelector(".filter-todo"); 7 | const count = document.querySelector('.count'); 8 | const refresh = document.querySelector('.refresh'); 9 | const mode = document.querySelector('.mode'); 10 | const list = document.querySelector('.footer-list'); 11 | let darkMode = false; 12 | let total = 0; 13 | var btns = document.querySelectorAll(".btn"); 14 | Array.from(btns).forEach(item => { 15 | item.addEventListener("click", () => { 16 | var selected = document.getElementsByClassName("active"); 17 | selected[0].className = selected[0].className.replace(" active", ""); 18 | item.className += " active"; 19 | }); 20 | }); 21 | form.addEventListener("submit", addTodo); 22 | button.addEventListener("click", addTodo); 23 | todoList.addEventListener("click", deleteCheck); 24 | filterOption.addEventListener("click", filterTodo); 25 | refresh.addEventListener("click",clear); 26 | mode.addEventListener("click",change); 27 | 28 | 29 | function addTodo(event) { 30 | event.preventDefault(); 31 | if (!input.value) { 32 | alert("Enter a to-do"); 33 | return; 34 | } 35 | //New Div TODO 36 | const todoDiv = document.createElement("div"); 37 | todoDiv.classList.add("todo"); 38 | todoDiv.classList.add('draggable'); 39 | todoDiv.setAttribute('draggable',true); 40 | 41 | //Circle button 42 | const completedButton = document.createElement("div"); 43 | completedButton.innerHTML = ''; 44 | completedButton.classList.add("complete-btn"); 45 | todoDiv.appendChild(completedButton); 46 | var check = false; 47 | var firstTime = true; 48 | //New LI 49 | const newTodo = document.createElement("li"); 50 | newTodo.innerText = input.value; 51 | newTodo.classList.add("todo-item"); 52 | todoDiv.appendChild(newTodo); 53 | 54 | 55 | //Trash button 56 | const trashButton = document.createElement("button"); 57 | trashButton.innerHTML = ''; 58 | trashButton.classList.add("trash-btn"); 59 | todoDiv.appendChild(trashButton); 60 | todoList.appendChild(todoDiv); 61 | input.value = ""; 62 | total++; 63 | count.innerHTML = `${total} items left`; 64 | if(darkMode){ 65 | todoDiv.classList.add('dark-todo'); 66 | completedButton.classList.add('dark-button'); 67 | trashButton.classList.add('dark-button'); 68 | } 69 | else{ 70 | todoDiv.classList.remove('dark-todo'); 71 | completedButton.classList.remove('dark-button'); 72 | trashButton.classList.remove('dark-button'); 73 | } 74 | //Drag 75 | const draggables = todoList.childNodes; 76 | for(let i=1;i{ 78 | draggables[i].classList.add('dragging'); 79 | }); 80 | draggables[i].addEventListener('dragend',()=>{ 81 | draggables[i].classList.remove('dragging'); 82 | }); 83 | } 84 | toDolist.forEach(todolist => { 85 | todolist.addEventListener('dragover', e => { 86 | e.preventDefault() 87 | const afterElement = getDragAfterElement(todolist, e.clientY) 88 | const draggable = document.querySelector('.dragging') 89 | if (afterElement == null) { 90 | todolist.appendChild(draggable) 91 | } else { 92 | todolist.insertBefore(draggable, afterElement) 93 | } 94 | }) 95 | }) 96 | 97 | function getDragAfterElement(todolist, y) { 98 | const draggableElements = [...todolist.querySelectorAll('.draggable:not(.dragging)')] 99 | console.log(draggableElements); 100 | return draggableElements.reduce((closest, child) => { 101 | const box = child.getBoundingClientRect() 102 | const offset = y - box.top - box.height / 2 103 | if (offset < 0 && offset > closest.offset) { 104 | return { offset: offset, element: child } 105 | } else { 106 | return closest 107 | } 108 | }, { offset: Number.NEGATIVE_INFINITY }).element 109 | } 110 | 111 | //Todo completed function 112 | completedButton.addEventListener("click", () => { 113 | if (!check || firstTime) { 114 | completedButton.classList.add("hide"); 115 | todoDiv.classList.add("completed"); 116 | completedButton.innerHTML = ""; 117 | const image = document.createElement("img"); 118 | image.setAttribute("src", "./images/icon-check.svg"); 119 | image.classList.add("check-img"); 120 | completedButton.appendChild(image); 121 | total--; 122 | count.innerHTML = `${total} items left`; 123 | check = true; 124 | firstTime = false; 125 | } else { 126 | completedButton.classList.remove("hide"); 127 | todoDiv.classList.remove("completed"); 128 | completedButton.innerHTML = ''; 129 | total++; 130 | count.innerHTML = `${total} items left`; 131 | check = false; 132 | } 133 | }); 134 | } 135 | 136 | function deleteCheck(e) { 137 | const item = e.target; 138 | if (item.classList[0] === "trash-btn") { 139 | const todo = item.parentElement; 140 | console.log(todo); 141 | todo.remove(); 142 | total--; 143 | count.innerHTML = `${total} items left`; 144 | } 145 | } 146 | 147 | function filterTodo(e) { 148 | const todos = todoList.childNodes; 149 | console.log(todos); 150 | for (let i = 1; i < todos.length; i++) { 151 | switch (e.target.innerText) { 152 | case "All": 153 | todos[i].style.display = "flex"; 154 | break; 155 | case "Active": 156 | if(todos[i].classList.contains("completed")) 157 | todos[i].style.display='none'; 158 | else todos[i].style.display = 'flex'; 159 | break; 160 | case "Completed": 161 | if (todos[i].classList.contains("completed")) 162 | todos[i].style.display = "flex"; 163 | else todos[i].style.display = "none"; 164 | } 165 | } 166 | } 167 | 168 | function clear(e){ 169 | const todos = todoList.childNodes; 170 | for(let i = 1; i < todos.length; i++){ 171 | console.log(todos[i]); 172 | if (todos[i].classList.contains("completed")){ 173 | todos[i].remove(); 174 | } 175 | } 176 | } 177 | 178 | function change(e){ 179 | const header = document.querySelector('.header'); 180 | const todos = todoList.childNodes; 181 | if(!darkMode){ 182 | darkMode = true; 183 | document.getElementsByTagName('body')[0].classList.add('dark'); 184 | mode.setAttribute('src','./images/icon-sun.svg'); 185 | header.classList.add('dark-mode'); 186 | input.classList.add('dark-form'); 187 | for(let i=1; i 3 | 4 | 5 | 6 | 7 | Glassmorphism 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |
18 |
19 |

Box 1

20 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?

21 |
    22 |
    • 23 |
    • 24 |
    • 25 |
26 |
27 |
28 |
29 |
30 |

Box 2

31 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?

32 |
    33 |
    • 34 |
    • 35 |
    • 36 |
37 |
38 |
39 |
40 |
41 |

Box 3

42 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?

43 |
    44 |
    • 45 |
    • 46 |
    • 47 |
48 |
49 |
50 |
51 | 52 | 61 | 62 | ======= 63 | 64 | 65 | 66 | 67 | 68 | Glassmorphism 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |
78 |
79 |
80 |

Box 1

81 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?

82 |
    83 |
    • 84 |
    • 85 |
    • 86 |
87 |
88 |
89 |
90 |
91 |

Box 2

92 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?

93 |
    94 |
    • 95 |
    • 96 |
    • 97 |
98 |
99 |
100 |
101 |
102 |

Box 3

103 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. A sunt rem magni quasi tempore alias nostrum mollitia delectus cupiditate hic unde minima quis officiis, quidem quae quisquam, aperiam porro fugiat?

104 |
    105 |
    • 106 |
    • 107 |
    • 108 |
109 |
110 |
111 |
112 | 113 | 122 | 123 | >>>>>>> fccb138c1a97f110c80a7e0d17f387f8fdd04843 124 | -------------------------------------------------------------------------------- /Blender-Animated/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | min-height: 100vh; 9 | justify-content: center; 10 | align-items: center; 11 | display: flex; 12 | } 13 | 14 | .container { 15 | position: relative; 16 | width: 300px; 17 | height: 300px; 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | } 22 | 23 | .upper { 24 | width: 150px; 25 | height: 60px; 26 | position: absolute; 27 | background: skyblue; 28 | z-index: 1; 29 | top: 40px; 30 | left: 60px; 31 | border-radius: 50px; 32 | } 33 | 34 | .stand { 35 | width: 150px; 36 | height: 120px; 37 | background: skyblue; 38 | position: relative; 39 | } 40 | 41 | .stand:before { 42 | position: absolute; 43 | content: ""; 44 | bottom: -10px; 45 | width: 150px; 46 | height: 10px; 47 | background: skyblue; 48 | left: 0px; 49 | border-radius: 0 10px 10px 10px; 50 | } 51 | 52 | .stand:after { 53 | position: absolute; 54 | content: ""; 55 | width: 150px; 56 | height: 120px; 57 | right: -20%; 58 | background: white; 59 | border-radius: 0px 0px 0px 50px; 60 | } 61 | 62 | .bottom { 63 | width: 175px; 64 | height: 15px; 65 | background: #5071d9; 66 | position: absolute; 67 | top: 220px; 68 | border-radius: 20px; 69 | } 70 | 71 | .circle { 72 | position: absolute; 73 | width: 25px; 74 | height: 25px; 75 | background: #6687e7; 76 | border: 3px solid #5071d9; 77 | box-shadow: 0 0 0 4px #6687e7; 78 | top: 15px; 79 | left: 20px; 80 | border-radius: 50%; 81 | } 82 | 83 | .verticle { 84 | position: absolute; 85 | width: 50px; 86 | height: 80px; 87 | background: skyblue; 88 | right: 0px; 89 | border-radius: 50px 50px 40px 40px; 90 | } 91 | 92 | .verticle:before { 93 | position: absolute; 94 | content: ""; 95 | width: 30px; 96 | height: 20px; 97 | z-index: -100; 98 | background: #5071d9; 99 | bottom: -10px; 100 | left: 10px; 101 | border-radius: 0 0 7px 7px; 102 | } 103 | 104 | .screw { 105 | position: absolute; 106 | width: 10px; 107 | height: 10px; 108 | background: #5071d9; 109 | bottom: -20px; 110 | left: 20px; 111 | } 112 | 113 | .screw:before { 114 | position: absolute; 115 | content: ""; 116 | width: 20px; 117 | height: 10px; 118 | background: #5071d9; 119 | top: 10px; 120 | left: -5px; 121 | border-radius: 50px; 122 | } 123 | 124 | .rotating { 125 | position: absolute; 126 | width: 50px; 127 | height: 55px; 128 | top: 148px; 129 | left: 160px; 130 | border-radius: 50%; 131 | border: 3px solid #5071d9; 132 | } 133 | 134 | @keyframes rotate { 135 | 100% { 136 | transition: transform 0.2s ease; 137 | transform: rotateY(360deg); 138 | } 139 | } 140 | 141 | .rotating:before { 142 | position: absolute; 143 | content: ""; 144 | width: 20px; 145 | height: 45px; 146 | top: -1px; 147 | left: 10px; 148 | border: 3px solid #5071d9; 149 | border-radius: 50%; 150 | } 151 | 152 | .cup { 153 | position: absolute; 154 | width: 90px; 155 | height: 40px; 156 | background: rgba(135, 206, 250, 0.4); 157 | top: 170px; 158 | left: 140px; 159 | border-radius: 0px 0px 50px 50px; 160 | } 161 | 162 | .cup:after { 163 | position: absolute; 164 | content: ""; 165 | width: 100px; 166 | height: 5px; 167 | top: -9px; 168 | left: -7px; 169 | border-radius: 50px; 170 | border: 2px solid skyblue; 171 | } 172 | 173 | .face, 174 | .face1 { 175 | position: absolute; 176 | width: 50px; 177 | height: 50px; 178 | right: 20px; 179 | top: 5px; 180 | display: block; 181 | } 182 | 183 | .face1 { 184 | display: none; 185 | } 186 | 187 | .eyes { 188 | position: absolute; 189 | width: 50px; 190 | top: 10px; 191 | height: 15px; 192 | animation: eyes 1s infinite; 193 | } 194 | 195 | .eyes1 { 196 | position: absolute; 197 | width: 50px; 198 | top: 10px; 199 | height: 15px; 200 | } 201 | 202 | @keyframes eyes { 203 | 0%, 204 | 100% { 205 | transform: scale(1, .05); 206 | } 207 | 5%, 208 | 95% { 209 | transform: scale(1, 1); 210 | } 211 | } 212 | 213 | .right-eye, 214 | .left-eye { 215 | position: absolute; 216 | width: 10px; 217 | height: 15px; 218 | left: 7px; 219 | background: black; 220 | border-radius: 50%; 221 | } 222 | 223 | .left-eye { 224 | left: 33px; 225 | } 226 | 227 | .right-eye1, 228 | .left-eye1 { 229 | position: absolute; 230 | height: 10px; 231 | left: 7px; 232 | } 233 | 234 | .left-eye1 { 235 | left: 30px; 236 | } 237 | 238 | .right-eye:before, 239 | .left-eye:before, 240 | .right-eye1::before, 241 | .left-eye1::before { 242 | position: absolute; 243 | content: ""; 244 | top: -4px; 245 | left: -3px; 246 | width: 15px; 247 | height: 10px; 248 | border-radius: 50%; 249 | box-shadow: 0px -3px 0 -1px #6687e7; 250 | } 251 | 252 | .right-eye1:after, 253 | .left-eye1:after { 254 | position: absolute; 255 | content: ">"; 256 | height: 7px; 257 | top: -3px; 258 | left: 0; 259 | transform: rotate(0deg); 260 | } 261 | 262 | .left-eye1:after { 263 | content: "<"; 264 | } 265 | 266 | .nose, 267 | .nose1 { 268 | position: absolute; 269 | width: 10px; 270 | height: 7px; 271 | background: #6687e7; 272 | top: 25px; 273 | left: 20px; 274 | border-radius: 50px; 275 | } 276 | 277 | .nose1 { 278 | top: 22px; 279 | } 280 | 281 | .mouth { 282 | position: absolute; 283 | width: 30px; 284 | height: 13px; 285 | background: #cb2a48; 286 | top: 35px; 287 | left: 10px; 288 | overflow: hidden; 289 | border-radius: 0px 0px 10px 10px; 290 | } 291 | 292 | .mouth:before { 293 | position: absolute; 294 | content: ""; 295 | width: 15px; 296 | height: 10px; 297 | left: 7px; 298 | top: 7px; 299 | border-radius: 5px; 300 | background: #e24269; 301 | } 302 | 303 | .mouth1 { 304 | position: absolute; 305 | width: 40px; 306 | height: 15px; 307 | top: 23px; 308 | left: 5px; 309 | border-bottom: 2px solid black; 310 | border-radius: 50%; 311 | z-index: 1; 312 | } 313 | 314 | .mouth1:before { 315 | position: absolute; 316 | width: 10px; 317 | height: 12px; 318 | background: #cb2a48; 319 | content: ""; 320 | right: -2px; 321 | top: 10px; 322 | transform: rotate(-15deg) skew(10deg); 323 | border-radius: 0px 0px 10px 10px; 324 | } 325 | 326 | .btn { 327 | position: absolute; 328 | bottom: 15px; 329 | padding: 5px 20px; 330 | cursor: pointer; 331 | border-radius: 50px; 332 | border: 2px solid #5071d9; 333 | background: linear-gradient(135deg, #5071d9 50%, white 50%); 334 | background-size: 200% 100%; 335 | background-position: right bottom; 336 | transition: all .5s ease-out; 337 | z-index: 1; 338 | } 339 | 340 | .btn:hover { 341 | background-position: left bottom; 342 | color: #fff; 343 | } 344 | 345 | .btn:hover~.rotating { 346 | animation: rotate 0.4s forwards infinite; 347 | } 348 | 349 | .btn:hover~.rotating:before { 350 | animation: rotate-inner 0.4s forwards infinite; 351 | } 352 | 353 | @keyframes rotate-inner { 354 | 100% { 355 | transition: transform 0.2s ease; 356 | transform: rotateY(-180deg); 357 | } 358 | } 359 | 360 | .container:hover .face { 361 | display: none; 362 | } 363 | 364 | .container:hover .face1 { 365 | display: block; 366 | } 367 | 368 | .container:hover .upper { 369 | transition: transform 0.2s ease; 370 | transform: scale(0.95) translate(4px, 5px); 371 | } 372 | 373 | .container:hover .cup { 374 | animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both infinite; 375 | transform: translate3d(0, 0, 0); 376 | backface-visibility: hidden; 377 | perspective: 1000px; 378 | } 379 | 380 | @keyframes shake { 381 | 10%, 382 | 90% { 383 | transform: translate3d(-3px, 0, 0); 384 | } 385 | 20%, 386 | 80% { 387 | transform: translate3d(4px, 0, 0); 388 | } 389 | 30%, 390 | 50%, 391 | 70% { 392 | transform: translate3d(-8px, 0, 0); 393 | } 394 | 40%, 395 | 60% { 396 | transform: translate3d(8px, 0, 0); 397 | } 398 | } -------------------------------------------------------------------------------- /frontEndMentors/huddle-landing-page-with-single-introductory-section-master/images/illustration-mockups.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------