├── 3d social media icons └── index.html ├── Animated profile card ├── index.html ├── profile.png ├── src │ ├── index.html │ ├── profile.png │ └── style.css └── style.css ├── Contact manager app ├── index.html ├── script.js └── style.css ├── Password generator system ├── index.html ├── script.js └── style.css ├── Readme.md ├── Responsive login form ├── Images │ ├── bg.svg │ └── logo.png ├── icons │ ├── email.svg │ └── password lock.svg ├── index.html └── style.css ├── Responsive sticky navbar ├── index.html ├── script.js └── style.css ├── Search bar animation └── index.html ├── Slideshow ├── 1.jpg ├── 2.jpg ├── 3.jpg ├── index.html ├── script.js └── style.css ├── Swiper cards ├── 1.jfif ├── 2.jfif ├── 3.jfif ├── 4.jfif ├── index.html └── style.css └── Todo-app ├── index.html ├── script.js ├── style.css ├── to-do-list.svg └── to-do-list2.svg /3d social media icons/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 3d social media icon 9 | 139 | 140 | 141 | 142 | 143 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | -------------------------------------------------------------------------------- /Animated profile card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 |

Sumit Harijan

22 | codingsumit 23 |

Frontend developer 👨‍💻

24 |
25 | 26 | 32 | 33 |
34 |
Skills
35 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Animated profile card/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Animated profile card/profile.png -------------------------------------------------------------------------------- /Animated profile card/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 | 20 |
21 |

Sumit Harijan

22 | codingsumit 23 |

Frontend developer 👨‍💻

24 |
25 | 26 | 32 | 33 |
34 |
Skills
35 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Animated profile card/src/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Animated profile card/src/profile.png -------------------------------------------------------------------------------- /Animated profile card/src/style.css: -------------------------------------------------------------------------------- 1 | /* center card and basic styling for body */ 2 | body { 3 | margin: 0; 4 | font-family: tahoma; 5 | height: 100vh; 6 | background: #f5f5f5; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | /* styling for card */ 13 | .card { 14 | padding: 30px 0 55px; 15 | margin-bottom: 30px; 16 | background-color: #f5f5f5; 17 | text-align: center; 18 | overflow: hidden; 19 | position: relative; 20 | box-shadow: 20px 20px 42px #d0d0d0, -20px -20px 42px #ffffff; 21 | width: 20rem; 22 | } 23 | 24 | /* porfile image section */ 25 | /* css for profile image and fluid effect */ 26 | 27 | /* 1.2 styling for fluid and circle effect on profile */ 28 | .card .profile { 29 | display: inline-block; 30 | height: 130px; 31 | width: 130px; 32 | z-index: 1; 33 | position: relative; 34 | border-radius: 20%; 35 | } 36 | 37 | /* profile fluid effect */ 38 | .card .profile::before { 39 | content: ""; 40 | width: 100%; 41 | height: 0; 42 | border-radius: 50%; 43 | background-color: #1f1b1b; 44 | position: absolute; 45 | bottom: 135%; 46 | right: 0; 47 | left: 0; 48 | opacity: 0.9; 49 | transform: scale(3); 50 | transition: all 0.3s linear 0s; 51 | } 52 | 53 | /* show fluid effect on card hover */ 54 | .card:hover .profile::before { 55 | height: 100%; 56 | } 57 | 58 | /* circle border effect on profile */ 59 | .card .profile::after { 60 | content: ""; 61 | width: 100%; 62 | height: 100%; 63 | border-radius: 50%; 64 | background-color: #1f1b1b; 65 | position: absolute; 66 | top: 0; 67 | left: 0%; 68 | z-index: -1; 69 | } 70 | 71 | /* 1.1 styling form card profile imag */ 72 | .card .profile img { 73 | width: 100%; 74 | height: auto; 75 | border-radius: 50%; 76 | transform: scale(1); 77 | transition: all 0.9s ease 0s; 78 | } 79 | 80 | /* transform img on card hover */ 81 | .card:hover .profile img { 82 | box-shadow: 0 0 0 14px #f7f5ec; 83 | transform: scale(0.7); 84 | } 85 | 86 | /* porfile image section */ 87 | /* marin content section */ 88 | /* 2.1 */ 89 | .card .main-content { 90 | margin-bottom: -19px; 91 | } 92 | 93 | /* 2.2 styling title */ 94 | .card .main-content .title { 95 | display: block; 96 | font-size: 15px; 97 | color: #1f1b1b; 98 | text-transform: capitalize; 99 | margin: 5px 37px 0; 100 | } 101 | 102 | /* 2.3 styling name */ 103 | .card .main-content .name { 104 | padding: 0; 105 | margin: 8px; 106 | text-transform: uppercase; 107 | } 108 | 109 | /* marin content section */ 110 | /* social media section */ 111 | /* 3.1 css for social */ 112 | .card .social { 113 | width: 100%; 114 | padding: 0; 115 | margin: 0; 116 | background-color: #1f1f1b; 117 | position: absolute; 118 | /* 3.5 */ 119 | bottom: -100px; 120 | left: 0; 121 | transition: all 0.5s ease 0s; 122 | } 123 | 124 | /* 3.5 */ 125 | .card:hover .social { 126 | bottom: 0; 127 | } 128 | 129 | /* 3.2 make all social icons in a row */ 130 | .card .social li { 131 | display: inline-block; 132 | } 133 | 134 | /* 3.3 css for social media anchors */ 135 | .card .social li a { 136 | display: block; 137 | padding: 10px; 138 | font-size: 17px; 139 | color: #fff; 140 | transition: all 0.3s ease 0s; 141 | text-decoration: none; 142 | } 143 | 144 | /* 3.4 change color , bgcolor on hover */ 145 | .card .social li a:hover { 146 | color: #3e3b44; 147 | background-color: #f7f5ec; 148 | transition: 0.5s; 149 | } 150 | 151 | /* skill section */ 152 | /* 4.1 left all text , padding */ 153 | .skills { 154 | text-align: left; 155 | padding: 15px; 156 | } 157 | 158 | /* 4.2 remove default list-style-type */ 159 | .skills ul { 160 | list-style-type: none; 161 | margin: 0; 162 | padding: 0; 163 | } 164 | 165 | /* 4.3 css for skills all li */ 166 | .skills ul li { 167 | border: 1px solid #1f1b1b; 168 | border-radius: 2px; 169 | display: inline-block; 170 | font-size: 12px; 171 | margin: 0 7px 7px 0; 172 | padding: 7px; 173 | } 174 | 175 | /* 4.4 change color and bgcolor on hover */ 176 | .skills ul li:hover { 177 | background-color: #1f1b1b; 178 | color: #fff; 179 | cursor: pointer; 180 | transition: 0.5s; 181 | } 182 | 183 | -------------------------------------------------------------------------------- /Animated profile card/style.css: -------------------------------------------------------------------------------- 1 | /* center card */ 2 | body { 3 | margin: 0; 4 | font-family: tahoma; 5 | height: 100vh; 6 | background: #f5f5f5; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | /* styling for card */ 13 | .card { 14 | padding: 30px 0 55px; 15 | margin-bottom: 30px; 16 | background-color: #f5f5f5; 17 | text-align: center; 18 | overflow: hidden; 19 | position: relative; 20 | box-shadow: 20px 20px 42px #d0d0d0, -20px -20px 42px #ffffff; 21 | width: 20rem; 22 | } 23 | 24 | /* porfile image section */ 25 | /* css for profile image and fluid effect */ 26 | 27 | /* 1.2 */ 28 | .card .picture { 29 | display: inline-block; 30 | height: 130px; 31 | width: 130px; 32 | z-index: 1; 33 | position: relative; 34 | border-radius: 20%; 35 | } 36 | 37 | .card .picture::before { 38 | content: ""; 39 | width: 100%; 40 | height: 0; 41 | border-radius: 50%; 42 | background-color: #1f1b1b; 43 | position: absolute; 44 | bottom: 135%; 45 | right: 0; 46 | left: 0; 47 | opacity: 0.9; 48 | transform: scale(3); 49 | transition: all 0.3s linear 0s; 50 | } 51 | 52 | .card:hover .picture::before { 53 | height: 100%; 54 | } 55 | 56 | .card .picture::after { 57 | content: ""; 58 | width: 100%; 59 | height: 100%; 60 | border-radius: 50%; 61 | background-color: #1f1b1b; 62 | position: absolute; 63 | top: 0; 64 | left: 0%; 65 | z-index: -1; 66 | } 67 | 68 | /* 1.1 */ 69 | .card .picture img { 70 | width: 100%; 71 | height: auto; 72 | border-radius: 50%; 73 | transform: scale(1); 74 | transition: all 0.9s ease 0s; 75 | } 76 | .card:hover .picture img { 77 | box-shadow: 0 0 0 14px #f7f5ec; 78 | transform: scale(0.7); 79 | } 80 | 81 | /* porfile image section */ 82 | /* marin content section */ 83 | /* 2.1 */ 84 | .card .main-content { 85 | margin-bottom: -19px; 86 | } 87 | 88 | /* 2.2 */ 89 | .card .main-content .title { 90 | display: block; 91 | font-size: 15px; 92 | color: #1f1b1b; 93 | text-transform: capitalize; 94 | margin: 5px 37px 0; 95 | } 96 | 97 | /* 2.3 */ 98 | .card .main-content .name { 99 | padding: 0; 100 | margin: 8px; 101 | text-transform: uppercase; 102 | } 103 | 104 | /* marin content section */ 105 | /* social media section */ 106 | /* 3.1 */ 107 | .card .social { 108 | width: 100%; 109 | padding: 0; 110 | margin: 0; 111 | background-color: #1f1f1b; 112 | position: absolute; 113 | /* 3.5 */ 114 | bottom: -100px; 115 | left: 0; 116 | transition: all 0.5s ease 0s; 117 | } 118 | 119 | /* 3.5 */ 120 | .card:hover .social { 121 | bottom: 0; 122 | } 123 | 124 | /* 3.2 */ 125 | .card .social li { 126 | display: inline-block; 127 | } 128 | 129 | /* 3.3 */ 130 | .card .social li a { 131 | display: block; 132 | padding: 10px; 133 | font-size: 17px; 134 | color: #fff; 135 | transition: all 0.3s ease 0s; 136 | text-decoration: none; 137 | } 138 | 139 | /* 3.4 */ 140 | .card .social li a:hover { 141 | color: #3e3b44; 142 | background-color: #f7f5ec; 143 | transition: 0.5s; 144 | } 145 | 146 | /* skill section */ 147 | /* 4.1 */ 148 | .skills { 149 | text-align: left; 150 | padding: 15px; 151 | } 152 | 153 | /* 4.2 */ 154 | .skills ul { 155 | list-style-type: none; 156 | margin: 0; 157 | padding: 0; 158 | } 159 | 160 | /* 4.3 */ 161 | .skills ul li { 162 | border: 1px solid #1f1b1b; 163 | border-radius: 2px; 164 | display: inline-block; 165 | font-size: 12px; 166 | margin: 0 7px 7px 0; 167 | padding: 7px; 168 | } 169 | 170 | /* 4.4 */ 171 | .skills ul li:hover { 172 | background-color: #1f1b1b; 173 | color: #fff; 174 | cursor: pointer; 175 | transition: 0.5s; 176 | } 177 | -------------------------------------------------------------------------------- /Contact manager app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Document 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | 24 | 25 |
26 | 30 | 31 |
32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 |
42 |
43 |
44 | 45 | 46 | 47 | 48 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /Contact manager app/script.js: -------------------------------------------------------------------------------- 1 | // object for storing a contacts in array for localstorage 2 | let contacts = []; 3 | 4 | /* console.log(contacts); */ 5 | 6 | function renderContact(contact) { 7 | /* set item to localStorage to store data */ 8 | localStorage.setItem("contacts", JSON.stringify(contacts)); 9 | 10 | // selecting the list where we will appending a all node items 11 | const list = document.querySelector(".Contact_list"); 12 | 13 | const item = document.querySelector(`[data-key='${contact.id}']`); 14 | 15 | if (contact.deleted) { 16 | // remove the item from the DOM 17 | item.remove(); 18 | return; 19 | } 20 | 21 | // creating new element article 22 | const node = document.createElement("article"); 23 | node.setAttribute("class", "person"); // setting attribute class:"person" 24 | node.setAttribute("data-key", contact.id); 25 | // adding a image name and dob in article element 26 | // we can access the contactObject items with contactObject.objectitem because we rendered a contactObject in renderContact function as a parameter 27 | node.innerHTML = ` 28 | 29 |
30 |

${contact.name}

31 |

${contact.email}

32 |

${contact.contactnumber}

33 |
34 | 39 | `; 40 | // appending a node in list 41 | list.append(node); 42 | } 43 | 44 | const list = document.querySelector(".Contact_list"); 45 | list.addEventListener("click", (event) => { 46 | if (event.target.classList.contains("js-delete-contact")) { 47 | const itemKey = event.target.parentElement.dataset.key; 48 | deleteContact(itemKey); 49 | } 50 | }); 51 | 52 | function deleteContact(key) { 53 | // find the corresponding contactObject in the contacts array 54 | const index = contacts.findIndex((item) => item.id === Number(key)); 55 | // Create a new object with properties of the current contactobject item 56 | // and a `deleted` property which is set to true 57 | const UpdatedContactObject = { 58 | deleted: true, 59 | ...contacts[index], 60 | }; 61 | // remove the contactobject item from the array by filtering it out 62 | contacts = contacts.filter((item) => item.id !== Number(key)); 63 | renderContact(UpdatedContactObject); 64 | } 65 | 66 | // function for adding todo 67 | function addContact(name, email, imageurl, contactnumber, id) { 68 | const contactObject = { 69 | name: document.getElementById("fullName").value, 70 | email: document.getElementById("myEmail").value, 71 | imageurl: document.getElementById("imgurl").value, 72 | contactnumber: document.getElementById("myTel").value, 73 | id: Date.now(), 74 | }; 75 | 76 | // push a contactObject in todoItems array for store a data as a array in localstorage 77 | contacts.push(contactObject); 78 | /* console.log(todoItems); */ 79 | // rendering contactObject in renderContact function as a prameter 80 | renderContact(contactObject); 81 | } 82 | 83 | // add a event listner submit to the form 84 | const form = document.querySelector(".js-form"); 85 | form.addEventListener("submit", (event) => { 86 | event.preventDefault(); 87 | // when the form is submitted addTodo function is called 88 | addContact(); 89 | form.reset(); 90 | }); 91 | 92 | // adding a add event listner when content is loaded and showing stored data array on the screen 93 | document.addEventListener("DOMContentLoaded", () => { 94 | const ref = localStorage.getItem("contacts"); 95 | if (ref) { 96 | contacts = JSON.parse(ref); 97 | contacts.forEach((t) => { 98 | renderContact(t); 99 | }); 100 | } 101 | }); 102 | 103 | 104 | -------------------------------------------------------------------------------- /Contact manager app/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | box-sizing: border-box; 3 | } 4 | 5 | *, 6 | *::before, 7 | *::after { 8 | box-sizing: inherit; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | 13 | :root { 14 | --bg-color: #eef0f4; 15 | --color: #333; 16 | --togglebg: #333; 17 | --contactIconColor: crimson; 18 | --inputTextColor: #111; 19 | --deleteIconColor: #111; 20 | --filter: drop-shadow(-8px -8px 12px #ffffff) 21 | drop-shadow(8px 8px 12px #c3c5c8); 22 | --roundcolor: #eef0f4; 23 | --toggleslider: #111; 24 | --togglesliderColor: #111; 25 | } 26 | 27 | body { 28 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 29 | Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 30 | line-height: 1.4; 31 | background: var(--bg-color); 32 | } 33 | 34 | .container { 35 | margin: 0 auto; 36 | padding-left: 10px; 37 | padding-right: 10px; 38 | color: var(--color); 39 | margin-top: 5vh; 40 | margin-bottom: 5vh; 41 | display: flex; 42 | flex-direction: row; 43 | } 44 | 45 | .ListContainer { 46 | width: 50%; 47 | margin: 56px 30px 0 51px; 48 | max-width: 500px; 49 | border-radius: 0.25rem; 50 | padding: 1.5rem 2rem; 51 | border-radius: 16px; 52 | background: var(--bg-color); 53 | border: 12px solid var(--bg-color); 54 | filter: var(--filter); 55 | } 56 | 57 | .person { 58 | display: flex; 59 | /* justify-content: space-between; */ 60 | column-gap: 0.75rem; 61 | margin-bottom: 1.5rem; 62 | align-items: center; 63 | } 64 | 65 | .person img { 66 | width: 75px; 67 | height: 75px; 68 | object-fit: cover; 69 | border-radius: 50%; 70 | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 71 | } 72 | 73 | .contactdetail { 74 | margin-right: 5rem; 75 | } 76 | 77 | .contactIcon { 78 | margin: 0 10px 0 5px; 79 | font-size: 14px; 80 | color: var(--contactIconColor); 81 | } 82 | 83 | .person h4 { 84 | margin-bottom: 0.35rem; 85 | } 86 | 87 | .person p { 88 | margin-bottom: 0; 89 | } 90 | 91 | .delete-contact { 92 | border: none; 93 | background-color: transparent; 94 | outline: none; 95 | cursor: pointer; 96 | float: right; 97 | display: block; 98 | position: absolute; 99 | right: 10%; 100 | } 101 | 102 | .delete-contact svg { 103 | width: 30px; 104 | height: 30px; 105 | pointer-events: none; 106 | fill: var(--deleteIconColor); 107 | } 108 | 109 | form { 110 | width: 50%; 111 | left: 50%; 112 | margin-top: 15%; 113 | margin-left: 7%; 114 | position: fixed; 115 | } 116 | 117 | .name, 118 | .number, 119 | .email, 120 | .img { 121 | display: flex; 122 | justify-content: space-evenly; 123 | margin-right: 30%; 124 | align-items: center; 125 | margin-bottom: 30px; 126 | background: var(--bg-color); 127 | border: 5px solid var(--bg-color); 128 | filter: var(--filter); 129 | } 130 | 131 | input[type="text"], 132 | input[type="email"], 133 | input[type="url"], 134 | input[type="tel"] { 135 | width: 240px; 136 | background: transparent; 137 | border: none; 138 | font-family: "Roboto", sans-serif; 139 | font-size: 16px; 140 | font-weight: 200px; 141 | padding: 10px 0; 142 | transition: border 0.5s; 143 | outline: none; 144 | color: var(--inputTextColor); 145 | font-weight: bold; 146 | } 147 | 148 | .submitbtn { 149 | display: none; 150 | } 151 | -------------------------------------------------------------------------------- /Password generator system/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Neumorphism Password generator 9 | 10 | 88 | 89 | 90 | 91 | 92 | 116 | 117 |
118 |

Password Generator

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 |
144 |
145 | 148 | 151 |
152 |
153 | 154 | 155 | 156 | 183 | 184 | 185 | -------------------------------------------------------------------------------- /Password generator system/script.js: -------------------------------------------------------------------------------- 1 | // Functions for generating random number lowercase uppercase letters , symbols 2 | 3 | /* Math.random method genrate a random floating-point numbers 4 | Math.floor() function returns the largest integer less than or equal to a given number. 5 | For generating a random uppercase lowercase text random numbers symbols we use Charcode 6 | http://stevehardie.com/2009/09/character-code-list-char-code/ */ 7 | 8 | function getRandomLower() { 9 | return String.fromCharCode(Math.floor(Math.random() * 26) + 97); 10 | } 11 | 12 | function getRandomUpper() { 13 | return String.fromCharCode(Math.floor(Math.random() * 26) + 65); 14 | } 15 | 16 | function getRandomNumber() { 17 | return +String.fromCharCode(Math.floor(Math.random() * 10) + 48); 18 | } 19 | 20 | function getRandomSymbol() { 21 | const symbols = "!@#$%^&*(){}[]=<>/,."; 22 | return symbols[Math.floor(Math.random() * symbols.length)]; 23 | } 24 | 25 | // adding a all functions into a object called randomFunc 26 | const randomFunc = { 27 | lower: getRandomLower, 28 | upper: getRandomUpper, 29 | number: getRandomNumber, 30 | symbol: getRandomSymbol, 31 | }; 32 | 33 | // adding a click event listner to generate button 34 | const generate = document.getElementById("generateBtn"); 35 | generate.addEventListener("click", () => { 36 | const length = document.getElementById("Passwordlength").value; 37 | const hasUpper = document.getElementById("uppercase").checked; 38 | const hasLower = document.getElementById("lowercase").checked; 39 | const hasNumber = document.getElementById("numbers").checked; 40 | const hasSymbol = document.getElementById("symbols").checked; 41 | const result = document.getElementById("PasswordResult"); 42 | result.innerText = generatePassword( 43 | hasLower, 44 | hasUpper, 45 | hasNumber, 46 | hasSymbol, 47 | length 48 | ); 49 | // console.log(hasLower, hasUpper, hasNumber, hasSymbol); 50 | }); 51 | 52 | // function for generating random password 53 | function generatePassword(lower, upper, number, symbol, length) { 54 | let generatedPassword = ""; 55 | const typesCount = lower + upper + number + symbol; 56 | // filter out unchecked types 57 | const typesArr = [{ lower }, { upper }, { number }, { symbol }].filter( 58 | (item) => Object.values(item)[0] 59 | ); 60 | // console.log(typesArr); 61 | 62 | // creating a loop for calling generator function for each type 63 | for (let i = 0; i < length; i += typesCount) { 64 | typesArr.forEach((type) => { 65 | const funcName = Object.keys(type)[0]; 66 | generatedPassword += randomFunc[funcName](); 67 | }); 68 | } 69 | 70 | // slicing password from 0 to length 71 | const finalPassword = generatedPassword.slice(0, length); 72 | return finalPassword; 73 | } 74 | 75 | // copy to clipboard 76 | let button = document.getElementById("clipboardBtn"); 77 | // add click event listner on button 78 | button.addEventListener("click", (e) => { 79 | e.preventDefault(); 80 | // execute command for copy text by selecting textarea text with id 81 | document.execCommand( 82 | "copy", 83 | false, 84 | document.getElementById("PasswordResult").select() 85 | ); 86 | }); 87 | 88 | -------------------------------------------------------------------------------- /Password generator system/style.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css?family=Muli&display=swap"); 2 | 3 | [data-theme="light"] { 4 | --bg-color: #eef0f4; 5 | --color: #333; 6 | --togglebg: #333; 7 | --roundcolor: #eef0f4; 8 | --toggleslider: #111; 9 | --togglesliderColor: #111; 10 | --filter1: drop-shadow(-8px -8px 12px #ffffff) 11 | drop-shadow(8px 8px 12px #c3c5c8); 12 | --filter2: drop-shadow(-4px -4px 6px #ffffff) drop-shadow(4px 4px 6px #c3c5c8); 13 | --filter3: drop-shadow(-2px -2px 3px #ffffff) drop-shadow(2px 2px 3px #c3c5c8); 14 | } 15 | 16 | [data-theme="dark"] { 17 | --bg-color: #333; 18 | --color: #ccc; 19 | --roundcolor: #333; 20 | --toggleslider: #eef0f4; 21 | --togglesliderColor: #fff; 22 | --filter1: drop-shadow(-8px -8px 12px #16151508) 23 | drop-shadow(8px 8px 12px #13111178); 24 | --filter2: drop-shadow(-4px -4px 6px #16151508) 25 | drop-shadow(4px 4px 6px #13111178); 26 | --filter3: drop-shadow(-2px -2px 3px #16151508) 27 | drop-shadow(2px 2px 3px #13111178); 28 | } 29 | 30 | * { 31 | box-sizing: border-box; 32 | margin: 0; 33 | padding: 0; 34 | } 35 | 36 | body { 37 | background-color: var(--bg-color); 38 | color: var(--color); 39 | font-family: "Muli", sans-serif; 40 | } 41 | 42 | p { 43 | margin: 5px 0; 44 | } 45 | 46 | h2 { 47 | margin: 10px 0 20px; 48 | text-align: center; 49 | } 50 | 51 | input[type="checkbox"] { 52 | margin-right: 0; 53 | } 54 | 55 | .container { 56 | padding: 20px; 57 | width: 350px; 58 | max-width: 100%; 59 | background: var(--bg-color); 60 | border: 12px solid var(--bg-color); 61 | filter: var(--filter1); 62 | margin: auto; 63 | } 64 | 65 | .result-container { 66 | background-color: var(--bg-color); 67 | border: 12px solid var(--bg-color); 68 | filter: var(--filter2); 69 | display: flex; 70 | justify-content: flex-start; 71 | align-items: center; 72 | position: relative; 73 | font-size: 18px; 74 | letter-spacing: 1px; 75 | height: 60px; 76 | width: 100%; 77 | margin-bottom: 35px; 78 | } 79 | 80 | textarea { 81 | background: none; 82 | border: none; 83 | color: var(--color); 84 | font-size: 20px; 85 | margin-top: auto; 86 | outline: none; 87 | resize: none; 88 | } 89 | 90 | .result-container .btn { 91 | font-size: 20px; 92 | position: absolute; 93 | top: 5px; 94 | right: 5px; 95 | height: 40px; 96 | width: 40px; 97 | } 98 | 99 | .buttons { 100 | display: flex; 101 | } 102 | 103 | .btn { 104 | width: 50%; 105 | border: none; 106 | color: var(--color); 107 | cursor: pointer; 108 | font-size: 16px; 109 | padding: 8px 12px; 110 | margin: 14px 5px 7px 5px; 111 | background-color: var(--bg-color); 112 | filter: var(--filter2); 113 | } 114 | 115 | .btn:hover { 116 | filter: var(--filter3); 117 | transition: 0.3s ease-in-out; 118 | } 119 | 120 | .setting { 121 | display: flex; 122 | justify-content: space-between; 123 | align-items: center; 124 | margin: 15px 0; 125 | } 126 | 127 | @media screen and (max-width: 400px) { 128 | .result-container { 129 | font-size: 14px; 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # FRONTEND PROJECTS 2 | 3 | Projects are added frequently! ⚡ 4 | 5 | Enjoy! 6 | 7 | If you like this repo, be sure to ⭐ it. 8 | 9 | ## [All projects link](https://frontendprojects.netlify.app/) 10 | 11 | ## [Tutorial link](https://codingbatch.gumroad.com/l/frontendprojects) 12 | 13 | | # | Project | Live Demo | tutorial 14 | | --- | ------------------------------------------------ | -------------------- | ------------- | 15 | | 01 | [3d social media icon](https://github.com/smthari/Frontend-Projects/tree/master/3d%20social%20media%20icons)| [Live Demo](https://3d-social-media-icons.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects)| 16 | | 02 | [Profile Card](https://github.com/smthari/Frontend-Projects/tree/master/Animated%20profile%20card)| [Live Demo](https://profile-card-animation.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) | 17 | | 03 | [Sticky Navbar](https://github.com/smthari/Frontend-Projects/tree/master/Responsive%20sticky%20navbar)| [Live Demo](https://responsive-sticky-navbar.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 18 | | 04 | [Search Bar](https://github.com/smthari/Frontend-Projects/tree/master/Search%20bar%20animation)| [Live Demo](https://animated-searchbar.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 19 | | 05 | [Slideshow](https://github.com/smthari/Frontend-Projects/tree/master/Slideshow)| [Live Demo](https://slideshow-animation.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 20 | | 06 | [Login Page](https://github.com/smthari/Frontend-Projects/tree/master/Responsive%20login%20form)| [Live Demo](https://responsive-login-page.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 21 | | 07 | [Contact Manager App](https://github.com/smthari/Frontend-Projects/tree/master/Contact%20manager%20app)| [Live Demo](https://contact-manager-javascript.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 22 | | 08 | [Password Generator](https://github.com/smthari/Frontend-Projects/tree/master/Password%20generator%20system)| [Live Demo](https://password-generator-system.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 23 | | 09 | [Swiper Cards](https://github.com/smthari/Frontend-Projects/tree/master/Swiper%20cards)| [Live Demo](https://swiper-card.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 24 | | 10 | [Todo App](https://github.com/smthari/Frontend-Projects/tree/master/Todo-app)| [Live Demo](https://responsive-todoapp.netlify.app/)| [Tutorial](https://codingbatch.gumroad.com/l/frontendprojects) 25 | -------------------------------------------------------------------------------- /Responsive login form/Images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Responsive login form/Images/logo.png -------------------------------------------------------------------------------- /Responsive login form/icons/email.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Responsive login form/icons/password lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Responsive login form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Login form 9 | 10 | 11 | 12 | 13 |
14 |
15 |

Sign Into Account

16 | 17 |
18 |
19 | 20 | 21 |
22 |
23 | 24 | 25 |
26 |
27 | 28 | Keep Me Logged In 29 |
30 | 31 | Forgot Password 32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Responsive login form/style.css: -------------------------------------------------------------------------------- 1 | @import url("http://fonts.cdnfonts.com/css/sansation"); 2 | @import url("https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;700&display=swap"); 3 | 4 | * { 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | .contact-container { 11 | background-image: url(images/bg.svg); 12 | background-size: cover; 13 | height: 100vh; 14 | } 15 | 16 | .right { 17 | position: absolute; 18 | width: 360px; 19 | left: 60%; 20 | height: 580px; 21 | top: calc(50% - 580px / 2); 22 | background: #ffffff; 23 | border-radius: 25px; 24 | text-align: center; 25 | } 26 | 27 | .title { 28 | font-family: Sansation; 29 | font-style: normal; 30 | font-weight: bold; 31 | font-size: 25px; 32 | line-height: 145px; 33 | align-items: center; 34 | font-family: "Sansation", sans-serif; 35 | color: #5754dd; 36 | } 37 | 38 | .logo { 39 | width: 120px; 40 | height: 120px; 41 | margin-top: -40px; 42 | } 43 | 44 | input[type="email"], 45 | input[type="password"] { 46 | border: none; 47 | outline: none; 48 | background: none; 49 | font-size: 20px; 50 | color: #85b6ff; 51 | padding: 20px 10px 20px 5px; 52 | border: 2px solid #568aee; 53 | width: 280px; 54 | height: 45px; 55 | margin: 15px; 56 | border-radius: 25px; 57 | box-sizing: border-box; 58 | text-align: center; 59 | overflow: hidden; 60 | font-family: "Scheherazade New", serif; 61 | } 62 | 63 | input[type="checkbox"] { 64 | vertical-align: middle; 65 | margin-right: 3px; 66 | margin-bottom: 3px; 67 | font-weight: bold; 68 | height: 18px; 69 | width: 18px; 70 | } 71 | 72 | ::placeholder { 73 | color: #85b6ff; 74 | font-size: 18px; 75 | } 76 | 77 | .icon { 78 | position: absolute; 79 | padding: 24px 32px; 80 | height: 75px; 81 | width: 90px; 82 | } 83 | 84 | .keepme { 85 | margin: 15px; 86 | color: #71a1bd; 87 | font-family: "Scheherazade New", serif; 88 | font-weight: bold; 89 | } 90 | 91 | button { 92 | width: 260px; 93 | height: 45px; 94 | left: 1273px; 95 | top: 780px; 96 | font-family: "Sansation", sans-serif; 97 | font-style: normal; 98 | font-weight: bold; 99 | font-size: 20px; 100 | line-height: 28px; 101 | cursor: pointer; 102 | color: #ffffff; 103 | border: none; 104 | background: rgba(135, 113, 224, 0.89); 105 | border-radius: 25px; 106 | } 107 | 108 | .link { 109 | text-align: center; 110 | display: block; 111 | margin: 18px; 112 | color: #71a1bd; 113 | font-family: "Scheherazade New", serif; 114 | font-weight: bold; 115 | text-decoration: none; 116 | } 117 | 118 | @media only screen and (max-width: 700px) { 119 | .contact-container { 120 | background: linear-gradient(138.56deg, #318adc 23.44%, #88183a 89.5%); 121 | } 122 | .right { 123 | left: calc(68% - 500px / 2); 124 | } 125 | } 126 | -------------------------------------------------------------------------------- /Responsive sticky navbar/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | live 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 16 | 21 | 22 | 50 |
51 |
52 | 53 |
54 |
55 | 56 |
57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 | 65 |
66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /Responsive sticky navbar/script.js: -------------------------------------------------------------------------------- 1 | window.onscroll = function () { 2 | scrollFunction(); 3 | }; 4 | function scrollFunction() { 5 | document.getElementById("navbar").style.background = "#fff"; 6 | } 7 | 8 | const navToggle = document.querySelector(".nav-toggle"); 9 | const navLinks = document.querySelectorAll(".nav__link"); 10 | 11 | navToggle.addEventListener("click", () => { 12 | document.body.classList.toggle("nav-open"); 13 | }); 14 | 15 | navLinks.forEach((link) => { 16 | link.addEventListener("click", () => { 17 | document.body.classList.remove("nav-open"); 18 | }); 19 | }); 20 | 21 | 22 | -------------------------------------------------------------------------------- /Responsive sticky navbar/style.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | margin: 0; 13 | font-family: "Source Sans Pro", sans-serif; 14 | line-height: 1.6; 15 | overflow-x: hidden; 16 | background: var(--bg-color); 17 | } 18 | 19 | [data-theme="light"] { 20 | --bg-color: #fff; 21 | --primary-bg: #8c43ff; 22 | --color: #333; 23 | --togglebg: #d4e7d5; 24 | --toggleslider: #fff; 25 | --roundcolor: #fff; 26 | --svgcolor: #111; 27 | } 28 | 29 | [data-theme="dark"] { 30 | --bg-color: #333333; 31 | --primary-bg: #333; 32 | --bg-color: #333333; 33 | --color: #e9dcdc; 34 | --togglebg: #333; 35 | --toggleslider: #e9dcdc; 36 | --roundcolor: #333; 37 | --svgcolor: #fff; 38 | } 39 | 40 | .nav { 41 | height: 5rem; 42 | width: 100%; 43 | display: block; 44 | justify-content: flex-start; 45 | z-index: 10; 46 | font-weight: 300; 47 | /* transition: 0.2s ease-in-out; */ 48 | /* transition: transform 400ms ease-in-out; */ 49 | position: fixed; 50 | } 51 | 52 | .nav__list { 53 | /* list-style: none; 54 | display: flex; 55 | justify-content: flex-end; 56 | margin-left: 55vh; 57 | margin-top: -49px; 58 | padding: 0vh 4vw; */ 59 | list-style: none; 60 | display: flex; 61 | justify-content: flex-end; 62 | /* margin-left: 55vh; */ 63 | margin-top: -49px; 64 | /* margin: auto; */ 65 | padding: 0vh 4vw; 66 | } 67 | 68 | .nav__link { 69 | color: inherit; 70 | text-decoration: none; 71 | margin-right: 50px; 72 | position: relative; 73 | font-family: "Raleway", sans-serif; 74 | padding: 16px 0; 75 | margin: 0 12px; 76 | letter-spacing: 1px; 77 | line-height: 16px; 78 | font-weight: 700; 79 | transition: color 0.1s, background-color 0.1s, padding 0.2s ease-in; 80 | color: #111; 81 | } 82 | 83 | .nav-toggle { 84 | display: none; 85 | } 86 | 87 | .nav__link::before { 88 | content: ""; 89 | display: block; 90 | position: absolute; 91 | bottom: 3px; 92 | left: 0; 93 | height: 3px; 94 | width: 100%; 95 | background-color: #000; 96 | transform-origin: right top; 97 | transform: scale(0, 1); 98 | transition: color 0.1s, transform 0.2s ease-out; 99 | } 100 | 101 | .nav__link:active::before { 102 | background-color: #000; 103 | } 104 | 105 | .nav__link:hover::before, 106 | .nav__link:focus::before { 107 | transform-origin: left top; 108 | transform: scale(1, 1); 109 | } 110 | 111 | .logo { 112 | padding: 3vh 5vw; 113 | text-align: center; 114 | display: flex; 115 | align-items: center; 116 | color: rgb(22, 8, 8); 117 | text-transform: uppercase; 118 | width: 25rem; 119 | font-family: "Raleway", sans-serif; 120 | font-weight: 800; 121 | /* margin-top: 7px;*/ 122 | } 123 | 124 | .smalllogo { 125 | display: none; 126 | } 127 | 128 | a { 129 | text-decoration: none; 130 | color: #111; 131 | } 132 | 133 | @media (max-width: 800px) { 134 | .nav { 135 | display: flex; 136 | justify-content: center; 137 | position: fixed; 138 | top: 0; 139 | bottom: 0; 140 | left: 0; 141 | right: 0; 142 | z-index: 100; 143 | transform: translateX(100%); 144 | transition: transform 400ms cubic-bezier(0.51, 0.6, 0.54, 0.59); 145 | height: 100vh; 146 | } 147 | 148 | .nav__list { 149 | list-style: none; 150 | display: flex; 151 | height: 100%; 152 | flex-direction: column; 153 | justify-content: space-evenly; 154 | text-align: center; 155 | margin: 0; 156 | padding: 135px; 157 | background-color: #111; 158 | width: 100%; 159 | } 160 | 161 | .logo { 162 | display: none; 163 | } 164 | .smalllogo { 165 | padding: 4.7vh 8vw; 166 | text-align: center; 167 | display: flex; 168 | align-items: center; 169 | color: #111; 170 | text-transform: uppercase; 171 | font-family: "Raleway", sans-serif; 172 | font-weight: 800; 173 | } 174 | 175 | .logolink { 176 | text-decoration: none; 177 | color: #111; 178 | } 179 | 180 | .nav-toggle { 181 | display: block; 182 | padding: 2.3em; 183 | background: transparent; 184 | border: 0; 185 | cursor: pointer; 186 | position: absolute; 187 | right: 0.5rem; 188 | top: 1.1rem; 189 | /* left: 29rem; */ 190 | z-index: 1000; 191 | outline: none; 192 | } 193 | 194 | .nav__link { 195 | margin: 0; 196 | color: #fff; 197 | } 198 | 199 | .nav-open { 200 | overflow: hidden; 201 | } 202 | 203 | .nav-open .nav { 204 | transform: translateX(0); 205 | width: 100vw; 206 | } 207 | 208 | .nav-open .logo { 209 | display: none; 210 | } 211 | 212 | .nav-open .hamburger { 213 | transform: rotate(0.625turn); 214 | background-color: #fff; 215 | } 216 | 217 | .nav-open .hamburger::before { 218 | transform: rotate(90deg) translateX(-6px); 219 | background-color: #fff; 220 | } 221 | 222 | .nav-open .hamburger::after { 223 | opacity: 0; 224 | } 225 | 226 | .hamburger { 227 | display: block; 228 | position: relative; 229 | } 230 | 231 | .hamburger, 232 | .hamburger::before, 233 | .hamburger::after { 234 | background-color: #111; 235 | width: 2em; 236 | height: 3px; 237 | border-radius: 1em; 238 | transition: transform 250ms ease-in-out; 239 | } 240 | 241 | .hamburger::before, 242 | .hamburger::after { 243 | content: ""; 244 | position: absolute; 245 | left: 0; 246 | right: 0; 247 | } 248 | 249 | .hamburger::before { 250 | top: 6px; 251 | } 252 | 253 | .hamburger::after { 254 | bottom: 6px; 255 | } 256 | 257 | .nav__item { 258 | color: #fff; 259 | } 260 | 261 | .nav__link::before { 262 | content: ""; 263 | display: block; 264 | position: absolute; 265 | bottom: 3px; 266 | left: 0; 267 | height: 3px; 268 | width: 100%; 269 | background-color: #fff; 270 | transform-origin: right top; 271 | transform: scale(0, 1); 272 | transition: color 0.1s, transform 0.2s ease-out; 273 | } 274 | 275 | .nav__link:active::before { 276 | background-color: #fff; 277 | } 278 | 279 | .nav__link:hover::before, 280 | .nav__link:focus::before { 281 | transform-origin: left top; 282 | transform: scale(1, 1); 283 | } 284 | } 285 | 286 | section { 287 | width: 100%; 288 | display: flex; 289 | margin: auto; 290 | align-items: center; 291 | min-height: 110vh; 292 | } 293 | 294 | .one { 295 | background-color: #fff; 296 | } 297 | 298 | .two { 299 | background-color: rgb(190, 183, 170); 300 | } 301 | 302 | .three { 303 | background-color: rgb(63, 118, 238); 304 | } 305 | 306 | .four { 307 | background-color: rgb(221, 22, 88); 308 | } 309 | 310 | .five { 311 | background-color: rgb(163, 114, 8); 312 | } 313 | -------------------------------------------------------------------------------- /Search bar animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 149 | 150 | 151 | 152 | 153 | 154 |
155 | 156 | 157 | -------------------------------------------------------------------------------- /Slideshow/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Slideshow/1.jpg -------------------------------------------------------------------------------- /Slideshow/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Slideshow/2.jpg -------------------------------------------------------------------------------- /Slideshow/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Slideshow/3.jpg -------------------------------------------------------------------------------- /Slideshow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Static Template 9 | 10 | 11 | 12 | 13 |
14 |
15 |
1 / 3
16 | 17 |
Caption Text
18 |
19 | 20 |
21 |
2 / 3
22 | 23 |
Caption Two
24 |
25 | 26 |
27 |
3 / 3
28 | 29 |
Caption Three
30 |
31 | 32 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Slideshow/script.js: -------------------------------------------------------------------------------- 1 | var slideIndex = 1; 2 | showSlides(slideIndex); 3 | 4 | function changeSlide(n) { 5 | showSlides((slideIndex += n)); 6 | // console.log(showSlides(slideIndex)) 7 | // console.log(slideIndex) 8 | } 9 | 10 | // we have to pass n as an parameter in function 11 | // we'll get the value of n by calling function and passing slideIndex as an argument 12 | function showSlides(n) { 13 | var i; 14 | var slides = document.getElementsByClassName("mySlides"); 15 | console.log(typeof slides + " " + slides.length); 16 | 17 | // let's write condition to loop a slideshow 18 | // when n is greater then slides.length then value of slideIndex should be 1 19 | if (n > slides.length) { 20 | slideIndex = 1; 21 | } 22 | // when n is less then 1 then value of slideIndex should be equal to slides.length 23 | if (n < 1) { 24 | slideIndex = slides.length; 25 | } 26 | 27 | /* hiding all images by default using display none */ 28 | for (i = 0; i < slides.length; i++) { 29 | slides[i].style.display = "none"; 30 | // console.log(slides[i]) 31 | } 32 | 33 | slides[slideIndex - 1].style.display = "block"; 34 | // console.log(`slide index ${slideIndex - 1}`); 35 | } 36 | 37 | document.addEventListener("contextmenu", (event) => event.preventDefault()); 38 | document.onkeydown = function (e) { 39 | // disable F12 key 40 | if (e.keyCode == 123) { 41 | return false; 42 | } 43 | 44 | // disable I key 45 | if (e.ctrlKey && e.shiftKey && e.keyCode == 73) { 46 | return false; 47 | } 48 | 49 | // disable J key 50 | if (e.ctrlKey && e.shiftKey && e.keyCode == 74) { 51 | return false; 52 | } 53 | 54 | // disable U key 55 | if (e.ctrlKey && e.keyCode == 85) { 56 | return false; 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /Slideshow/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | font-family: Verdana, sans-serif; 7 | margin: 0; 8 | background: rgb(25, 93, 106); 9 | background: radial-gradient( 10 | circle, 11 | rgba(25, 93, 106, 1) 38%, 12 | rgba(35, 35, 62, 1) 91% 13 | ); 14 | margin-top: 4%; 15 | } 16 | 17 | img { 18 | vertical-align: middle; 19 | } 20 | 21 | /* Slideshow container */ 22 | .slideshow-container { 23 | max-width: 800px; 24 | position: relative; 25 | margin: auto; 26 | } 27 | 28 | /* Caption text */ 29 | .text { 30 | color: #f2f2f2; 31 | background: linear-gradient(270deg, rgb(33 59 119) 0%, rgb(28 102 44) 100%); 32 | max-width: inherit; 33 | font-size: 15px; 34 | padding: 8px 12px; 35 | position: relative; 36 | bottom: 8px; 37 | width: 100%; 38 | text-align: center; 39 | } 40 | 41 | /* Number text (1/3 etc) */ 42 | .numbertext { 43 | background: linear-gradient(270deg, rgb(33 59 119) 0%, rgb(28 102 44) 100%); 44 | max-width: max-content; 45 | color: #f2f2f2; 46 | font-size: 12px; 47 | padding: 8px 12px; 48 | position: absolute; 49 | top: 0; 50 | } 51 | 52 | /* Next & previous buttons */ 53 | .prev, 54 | .next { 55 | cursor: pointer; 56 | position: absolute; 57 | top: 50%; 58 | border: 1px solid #ccc; 59 | background-color: #4f7d8b5e; 60 | width: auto; 61 | margin-left: -100px; 62 | padding: 16px; 63 | margin-top: -22px; 64 | color: white; 65 | font-weight: bold; 66 | font-size: 18px; 67 | transition: 0.6s ease; 68 | border-radius: 0 3px 3px 0; 69 | user-select: none; 70 | } 71 | 72 | /* Position the "next button" to the right */ 73 | .next { 74 | right: 0; 75 | margin-right: -100px; 76 | border-radius: 3px 0 0 3px; 77 | } 78 | 79 | /* On hover, add a black background color with a little bit see-through */ 80 | .prev:hover, 81 | .next:hover { 82 | background-color: rgba(0, 0, 0, 0.8); 83 | } 84 | 85 | .tilt-in-top-1 { 86 | animation: tilt-in-top-1 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 87 | } 88 | 89 | @keyframes tilt-in-top-1 { 90 | 0% { 91 | transform: rotateY(30deg) translateY(-300px) skewY(-30deg); 92 | opacity: 0; 93 | } 94 | 95 | 100% { 96 | transform: rotateY(0deg) translateY(0) skewY(0deg); 97 | opacity: 1; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /Swiper cards/1.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Swiper cards/1.jfif -------------------------------------------------------------------------------- /Swiper cards/2.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Swiper cards/2.jfif -------------------------------------------------------------------------------- /Swiper cards/3.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Swiper cards/3.jfif -------------------------------------------------------------------------------- /Swiper cards/4.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/smthari/Frontend-Projects/cc023526f166bc47daf6cc33b8ed6735b24483d9/Swiper cards/4.jfif -------------------------------------------------------------------------------- /Swiper cards/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 10 | 81 | 82 | 83 | 84 | 85 |
86 | 87 |
88 | 89 |
90 |
91 | 92 |
93 |
94 | Ronne Galle
95 | Project Manager 96 |
97 |

98 | “ Nam libero tempore, cum soluta nobis est eligendi optio 99 | cumque nihil impedit quo minus id quod maxime placeat ” 100 |

101 |
102 |
103 |
104 | 105 |
106 |
107 | 108 |
109 |
110 | Ronne Galle
111 | Project Manager 112 |
113 |

114 | “ Nam libero tempore, cum soluta nobis est eligendi optio 115 | cumque nihil impedit quo minus id quod maxime placeat ” 116 |

117 |
118 |
119 |
120 | 121 |
122 |
123 | 124 |
125 |
126 | Ronne Galle
127 | Project Manager 128 |
129 |

130 | “ Nam libero tempore, cum soluta nobis est eligendi optio 131 | cumque nihil impedit quo minus id quod maxime placeat ” 132 |

133 |
134 |
135 |
136 | 137 |
138 |
139 | 140 |
141 |
142 | Ronne Galle
143 | Project Manager 144 |
145 |

146 | “ Nam libero tempore, cum soluta nobis est eligendi optio 147 | cumque nihil impedit quo minus id quod maxime placeat ” 148 |

149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 | 157 | 192 | 193 | 194 | -------------------------------------------------------------------------------- /Swiper cards/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | height: 100vh; 9 | background-color: #111; 10 | } 11 | 12 | .swiper { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | 17 | .slide-card { 18 | background: linear-gradient(90deg, 19 | rgba(157, 168, 238, 1) 0%, 20 | rgba(205, 227, 241, 1) 39%, 21 | rgba(255, 255, 255, 1) 99%); 22 | box-shadow: 6px 7px 8px -7px #8a93fb; 23 | margin: 0 40px; 24 | padding: 45px 63px; 25 | border-radius: 20px; 26 | border: 0; 27 | cursor: grab; 28 | } 29 | 30 | .slide-card .slide-card-img-top { 31 | max-width: 100px; 32 | border-radius: 50%; 33 | margin: 15px auto 0; 34 | box-shadow: 0 8px 20px -4px #8a86e8; 35 | width: 100px; 36 | height: 100px; 37 | } 38 | 39 | .slide-card h5 { 40 | color: #3345c6; 41 | font-size: 21px; 42 | margin: 15px 0; 43 | } 44 | 45 | .slide-card h5 span { 46 | font-size: 18px; 47 | color: #111; 48 | } 49 | 50 | .slide-card p { 51 | font-size: 18px; 52 | color: #000; 53 | padding-bottom: 15px; 54 | } 55 | 56 | .swiper-slide { 57 | text-align: center; 58 | font-size: 18px; 59 | display: -webkit-box; 60 | display: -ms-flexbox; 61 | display: -webkit-flex; 62 | display: flex; 63 | align-items: center; 64 | } 65 | 66 | /* transform active card */ 67 | /* .swiper-slide.swiper-slide-active { 68 | transform: scale(1.2); 69 | } */ -------------------------------------------------------------------------------- /Todo-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Scratch JS Todo list learn by concept clear 9 | 10 | 11 | 16 | 17 | 18 | 19 | 20 | 37 |
38 | 39 |
40 |

My Todo

41 | 42 |

43 | Type in the below field 👇 and press enter to add your todo in the list 44 |

45 |
46 |
47 | 48 |
49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /Todo-app/script.js: -------------------------------------------------------------------------------- 1 | /* Add a todo/ */ 2 | 3 | // creating a empty array 4 | let demoarray = []; 5 | 6 | // function for rendering the todo items 7 | function renderTodo(todo) { 8 | localStorage.setItem("demoarray", JSON.stringify(demoarray)); 9 | 10 | // select unorder list using class 11 | const list = document.querySelector(".todo-list"); 12 | const item = document.querySelector(`[data-key='${todo.id}']`); 13 | 14 | if (todo.deleted) { 15 | item.remove(); 16 | return; 17 | } 18 | 19 | // check if checked is true add done class effect otherwise as it is 20 | const isChecked = todo.checked ? "done" : ""; 21 | // create a new list 22 | const newlist = document.createElement("li"); 23 | // set attribute to new list 24 | newlist.setAttribute("class", `todo-item ${isChecked}`); 25 | newlist.setAttribute("data-key", todo.id); 26 | newlist.innerHTML = ` 27 | 28 | 29 | ${todo.x} 30 | 36 | `; 37 | 38 | if (item) { 39 | list.replaceChild(newlist, item); 40 | } else { 41 | list.append(newlist); 42 | } 43 | 44 | /* // disabled this after fixing a selection bug 45 | list.append(newlist); */ 46 | } 47 | 48 | // function for adding a todo 49 | function myFunction(x) { 50 | // creating a object 51 | const todoobject = { 52 | x, 53 | checked: false, 54 | id: Date.now(), 55 | }; 56 | 57 | // push new todo into a demoarray object 58 | demoarray.push(todoobject); 59 | 60 | renderTodo(todoobject); 61 | console.log(demoarray); 62 | 63 | /* disabled this because updated it show in list */ 64 | /* // print demoarray in console 65 | console.log(demoarray); */ 66 | } 67 | 68 | function toggleDone(b) { 69 | const index = demoarray.findIndex((myitem) => myitem.id === Number(b)); 70 | demoarray[index].checked = !demoarray[index].checked; 71 | renderTodo(demoarray[index]); 72 | } 73 | 74 | function deleteTodo(c) { 75 | const index = demoarray.findIndex((myitem) => myitem.id === Number(c)); 76 | const emptytodo = { 77 | deleted: true, 78 | ...demoarray[index], 79 | }; 80 | demoarray = demoarray.filter((myitem) => myitem.id !== Number(c)); 81 | renderTodo(emptytodo); 82 | } 83 | 84 | // select form 85 | const form = document.querySelector(".formselect"); 86 | 87 | // add a event listner submit on form 88 | form.addEventListener("submit", (event) => { 89 | event.preventDefault(); 90 | 91 | // select input 92 | const input = document.querySelector(".inputselect"); 93 | 94 | // remove whitespace of input vlaue using trim method 95 | const text = input.value.trim(); 96 | 97 | // statement condition for printing a input value 98 | if (text !== "") { 99 | // call a function for adding a new todo value 100 | myFunction(text); 101 | // after submit input value will be become blank "" 102 | input.value = ""; 103 | } 104 | }); 105 | 106 | // select entire list 107 | const list = document.querySelector(".js-todo-list"); 108 | list.addEventListener("click", (event) => { 109 | if (event.target.classList.contains("js-tick")) { 110 | const itemKey = event.target.parentElement.dataset.key; 111 | toggleDone(itemKey); 112 | } 113 | 114 | if (event.target.classList.contains("js-delete-todo")) { 115 | const itemKey = event.target.parentElement.dataset.key; 116 | deleteTodo(itemKey); 117 | } 118 | }); 119 | 120 | document.addEventListener("DOMContentLoaded", () => { 121 | const ref = localStorage.getItem("demoarray"); 122 | if (ref) { 123 | demoarray = JSON.parse(ref); 124 | demoarray.forEach((t) => { 125 | renderTodo(t); 126 | }); 127 | } 128 | }); 129 | 130 | const toggleSwitch = document.querySelector( 131 | '.theme-switch input[type="checkbox"]' 132 | ); 133 | const currentTheme = localStorage.getItem("theme"); 134 | 135 | if (currentTheme) { 136 | document.documentElement.setAttribute("data-theme", currentTheme); 137 | 138 | if (currentTheme === "dark") { 139 | toggleSwitch.checked = true; 140 | } 141 | } 142 | 143 | function switchTheme(e) { 144 | if (e.target.checked) { 145 | document.documentElement.setAttribute("data-theme", "dark"); 146 | localStorage.setItem("theme", "dark"); 147 | } else { 148 | document.documentElement.setAttribute("data-theme", "light"); 149 | localStorage.setItem("theme", "light"); 150 | } 151 | } 152 | 153 | toggleSwitch.addEventListener("change", switchTheme, false); 154 | 155 | -------------------------------------------------------------------------------- /Todo-app/style.css: -------------------------------------------------------------------------------- 1 | [data-theme="light"] { 2 | --bg-color: #fff; 3 | --color: #333; 4 | --togglebg: #d4e7d5; 5 | --toggleslider: #fff; 6 | --roundcolor: #fff; 7 | --svgcolor: #111; 8 | } 9 | 10 | [data-theme="dark"] { 11 | --bg-color: #333333; 12 | --color: #e9dcdc; 13 | --togglebg: #333; 14 | --toggleslider: #e9dcdc; 15 | --roundcolor: #333; 16 | --svgcolor: #fff; 17 | } 18 | 19 | *, 20 | *::before, 21 | *::after { 22 | box-sizing: border-box; 23 | margin: 0; 24 | padding: 0; 25 | } 26 | 27 | body { 28 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 29 | Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 30 | line-height: 1.4; 31 | background-color: var(--bg-color); 32 | transition: all 0.5s; 33 | } 34 | 35 | /* toggle */ 36 | 37 | nav { 38 | display: flex; 39 | justify-content: flex-end; 40 | padding: 20px 24px; 41 | } 42 | 43 | .btn { 44 | position: absolute; 45 | left: 2rem; 46 | margin-top: 0.3rem; 47 | } 48 | 49 | .theme-switch-wrapper { 50 | display: flex; 51 | align-items: center; 52 | } 53 | 54 | .theme-switch-wrapper em { 55 | margin-left: 10px; 56 | font-size: 1rem; 57 | } 58 | 59 | .theme-switch { 60 | display: inline-block; 61 | height: 34px; 62 | position: relative; 63 | width: 60px; 64 | } 65 | 66 | .theme-switch input { 67 | display: none; 68 | } 69 | 70 | .slider { 71 | background-color: var(--togglebg); 72 | bottom: 0; 73 | cursor: pointer; 74 | left: 0; 75 | position: absolute; 76 | right: 0; 77 | top: 0; 78 | transition: 0.4s; 79 | } 80 | 81 | .slider:before { 82 | background-color: var(--roundcolor); 83 | bottom: 4px; 84 | content: ""; 85 | height: 26px; 86 | left: 4px; 87 | position: absolute; 88 | transition: 0.4s; 89 | width: 26px; 90 | } 91 | 92 | input:checked + .slider { 93 | background-color: var(--toggleslider); 94 | } 95 | 96 | input:checked + .slider:before { 97 | transform: translateX(26px); 98 | } 99 | 100 | .slider.round { 101 | border-radius: 34px; 102 | } 103 | 104 | .slider.round:before { 105 | border-radius: 50%; 106 | } 107 | 108 | em { 109 | color: var(--color); 110 | } 111 | 112 | .container { 113 | width: 100%; 114 | max-width: 700px; 115 | margin: 0 auto; 116 | padding-left: 10px; 117 | padding-right: 10px; 118 | color: var(--color); 119 | margin: auto; 120 | padding-top: 4rem; 121 | } 122 | 123 | .app-title { 124 | text-align: center; 125 | margin-bottom: 20px; 126 | font-size: 80px; 127 | } 128 | 129 | svg { 130 | width: 64px; 131 | height: 64px; 132 | } 133 | 134 | .todo-list { 135 | list-style: none; 136 | margin-bottom: 20px; 137 | } 138 | 139 | .todo-item { 140 | margin-bottom: 10px; 141 | width: 100%; 142 | display: flex; 143 | align-items: center; 144 | justify-content: space-between; 145 | } 146 | 147 | .todo-item span { 148 | flex-grow: 1; 149 | margin-left: 10px; 150 | margin-right: 10px; 151 | font-size: 22px; 152 | } 153 | 154 | .done span { 155 | text-decoration: line-through; 156 | user-select: none; 157 | } 158 | 159 | input[type="checkbox"] { 160 | display: none; 161 | } 162 | input:focus { 163 | outline: none; 164 | background-color: #d4e7d5; 165 | } 166 | 167 | .tick { 168 | width: 30px; 169 | height: 30px; 170 | border: 3px solid var(--color); 171 | border-radius: 50%; 172 | display: inline-flex; 173 | justify-content: center; 174 | align-items: center; 175 | cursor: pointer; 176 | } 177 | 178 | .tick::before { 179 | content: "✔️"; 180 | font-size: 20px; 181 | display: none; 182 | } 183 | 184 | .done .tick::before { 185 | display: inline; 186 | } 187 | 188 | .delete-todo { 189 | border: none; 190 | background-color: transparent; 191 | outline: none; 192 | cursor: pointer; 193 | } 194 | 195 | .delete-todo svg { 196 | width: 30px; 197 | height: 30px; 198 | pointer-events: none; 199 | } 200 | 201 | form { 202 | width: 100%; 203 | display: flex; 204 | justify-content: space-between; 205 | margin-bottom: 2rem; 206 | } 207 | 208 | input[type="text"] { 209 | width: 100%; 210 | padding: 10px; 211 | border-radius: 4px; 212 | border: 3px solid #333; 213 | } 214 | 215 | /* Add this below all the other styles */ 216 | 217 | .empty-state { 218 | flex-direction: column; 219 | align-items: center; 220 | justify-content: center; 221 | display: none; 222 | } 223 | 224 | .checklist-icon { 225 | margin-bottom: 20px; 226 | } 227 | 228 | .empty-state__title, 229 | .empty-state__description { 230 | /* margin-bottom: 20px; */ 231 | font-size: 25px; 232 | text-align: center; 233 | margin: 2rem; 234 | width: 25rem; 235 | } 236 | 237 | /* Add this below the other styles */ 238 | .todo-list:empty { 239 | display: none; 240 | } 241 | 242 | .todo-list:empty + .empty-state { 243 | display: flex; 244 | } 245 | 246 | @media (max-width: 608px) { 247 | .container { 248 | width: 90%; 249 | margin: auto; 250 | } 251 | .app-title { 252 | font-size: 3rem; 253 | } 254 | .empty-state__title, 255 | .empty-state__description { 256 | font-size: 1.5rem; 257 | width: 18rem; 258 | } 259 | /* .btn { 260 | position: absolute; 261 | right: -1rem; 262 | } */ 263 | em { 264 | display: none; 265 | } 266 | } 267 | -------------------------------------------------------------------------------- /Todo-app/to-do-list.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 12 | 13 | 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 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Todo-app/to-do-list2.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 12 | 13 | 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 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | --------------------------------------------------------------------------------