├── README.md ├── chirp-landing-page ├── Assets │ ├── calendar.svg │ ├── chart.png │ ├── checkmark.svg │ ├── glasses.svg │ ├── hamburger-menu.svg │ ├── hero-image-desktop.png │ ├── hero-image-mobile.png │ ├── like.svg │ ├── logo.svg │ ├── sun.svg │ ├── twitter-black.svg │ ├── twitter-blue.svg │ ├── twitter.svg │ ├── user-1.svg │ ├── user-2.svg │ ├── user-3.svg │ ├── user-4.svg │ ├── user-5.svg │ ├── user-6.svg │ ├── user-7.svg │ ├── user-8.svg │ └── user-9.svg ├── Design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ └── Landing Page - Tablet View.png ├── README.md ├── index.html ├── script.js └── style.css ├── comment-template ├── Assets │ ├── Down.svg │ ├── Up.svg │ ├── User-Avatar-1.svg │ ├── User-Avatar-2.svg │ ├── User-Avatar-3.svg │ ├── User-Avatar-4.svg │ ├── bg-mobile.jpg │ └── bg.jpg ├── Design │ ├── Comment Template - Desktop View.png │ ├── Comment Template - Mobile View.png │ └── Comment Template - Tablet View.png ├── README.md ├── index.html └── style.css ├── commune-waitlist ├── Assets │ ├── atlassian-icon.svg │ ├── behance-icon.svg │ ├── bing-icon.svg │ ├── bitbucket-icon.svg │ ├── dropbox-icon.svg │ ├── hamburger-menu.svg │ ├── illustration.png │ ├── logo.svg │ ├── twitch-icon.svg │ └── twitter-icon.svg ├── Design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ └── Landing Page - Tablet View.png ├── README.md ├── index.html ├── script.js └── style.css ├── fiber-landing-page ├── Assets │ ├── Checkmark.svg │ ├── Hamburger Menu.svg │ ├── Page-Image.png │ ├── SignUp-Image.png │ ├── User-Avatar-2.svg │ ├── User-Avatar-3.svg │ ├── User-Avatar.svg │ ├── allSizes.svg │ ├── code.svg │ ├── hero-Illustration.png │ ├── hide password.svg │ ├── star.svg │ ├── templates-2.jpg │ ├── templates-3.jpg │ ├── templates-4.jpg │ └── time.svg ├── Design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ ├── Sign Up Page - Desktop View.png │ └── Sign Up Page - Mobile View.png ├── README.md ├── index.html ├── script.js ├── signup.html ├── signup.js └── style.css ├── gradie-sign-up ├── Assets │ ├── bg.png │ └── iphone-mockup.png ├── Design │ ├── Sign Up - Desktop View.png │ ├── Sign Up - Mobile View.png │ └── Sign Up - Tablet View.png ├── README.md ├── index.html ├── script.js └── style.css ├── hosterr-waitlist ├── README.md ├── assets │ ├── Hero-Image.png │ ├── blue-shape.svg │ ├── checkmark.svg │ ├── hamburger-menu.svg │ ├── help-avatar.svg │ ├── logo.svg │ ├── pink-shape.svg │ └── purple-shape.svg ├── design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ └── Landing Page - Tablet View.png ├── index.html ├── script.js └── style.css ├── indie-brew ├── README.md ├── assets │ ├── back-arrow.svg │ ├── feed-mockup.png │ ├── hamburger-menu.svg │ ├── logo.svg │ ├── phone-mockup.png │ ├── social-media-icons.png │ └── user-avatars.svg ├── design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ ├── Landing Page - Tablet View.png │ ├── Sign Up - Mobile View.png │ ├── Sign Up - Tablet View.png │ └── Sign up - Desktop View.png ├── index.html ├── script.js ├── signup.html └── style.css ├── javascript30-navbar ├── Assets │ ├── AlternativeTo_Logo.svg │ ├── Capterra_Logo.svg │ ├── Close.svg │ ├── Fiber_Icon.svg │ ├── Gradie_Icon.svg │ ├── Hero_Image.png │ ├── Logo.svg │ ├── Menu.svg │ ├── Netflix_Logo.svg │ ├── Shopify_Logo.svg │ ├── Shopify_Logo_Small.svg │ ├── Spense_Icon.svg │ ├── Spotify_Logo.svg │ └── Walmart_Logo.svg ├── Design │ ├── Landing-Page-Desktop.png │ ├── Landing-Page-Mobile-Menu-Expanded.png │ └── Landing-Page-Mobile.png ├── README.md ├── index.html ├── script.js └── style.css ├── meeet-waitlist-template ├── Assets │ ├── logo.svg │ ├── twitter.svg │ ├── user-avatar-1.svg │ ├── user-avatar-2.svg │ ├── user-avatar-3.svg │ ├── user-avatar-4.svg │ └── user-avatar-5.svg ├── Design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ └── Landing Page - Tablet View.png ├── README.md ├── index.html └── style.css ├── newsletter-popup-template ├── Assets │ ├── Background.png │ ├── Pattern.png │ └── User-Avatar.svg ├── Design │ ├── Newsie Newsletter - Desktop View.png │ ├── Newsie Newsletter - Mobile View.png │ └── Newsie Newsletter - Tablet View.png ├── README.md ├── index.html ├── script.js └── style.css ├── snipper-landing-page ├── Assets │ ├── bg.png │ ├── customizable-image.png │ ├── hamburger-menu.svg │ ├── logo.svg │ ├── search-icon.svg │ └── snipper-image.png ├── Design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ └── Landing Page - Tablet View.png ├── README.md ├── index.html ├── script.js └── style.css ├── spense-landing-page ├── README.md ├── assets │ ├── checkmark.svg │ ├── dribbble.png │ ├── facebook.png │ ├── google.png │ ├── hamburger-menu.svg │ ├── hero-image-desktop.png │ ├── hero-image-mobile.png │ ├── hero-image-tablet.png │ ├── phone-mockup-desktop.png │ ├── phone-mockup-mobile.png │ ├── phone-mockup-tablet.png │ ├── pinterest.png │ ├── reddit.png │ ├── slack.png │ ├── text-editor.png │ ├── twitter.png │ └── youtube.png ├── design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ └── Landing Page - Tablet View.png ├── index.html ├── script.js └── style.css ├── subway-multistep-form-template ├── Assets │ ├── Folder.svg │ ├── Logo.svg │ └── QR Code.svg ├── Design │ ├── Form (Step #1) - Desktop View.png │ ├── Form (Step #1) - Mobile View.png │ ├── Form (Step #1) - Tablet View.png │ ├── Form (Step #2) - Desktop View.png │ ├── Form (Step #2) - Mobile View.png │ ├── Form (Step #2) - Tablet View.png │ ├── Form (Step #3) - Desktop View.png │ ├── Form (Step #3) - Mobile View.png │ ├── Form (Step #3) - Tablet View.png │ ├── Form (Step #4) - Desktop View.png │ ├── Form (Step #4) - Mobile View.png │ └── Form (Step #4) - Tablet View.png ├── README.md ├── index.html ├── multi-step-form-2.html ├── multi-step-form-3.html ├── multi-step-form-4.html └── style.css ├── time-now-template ├── Assets │ ├── Checkmark.svg │ ├── Hamburger Menu.svg │ ├── Logo.svg │ ├── Mockup.png │ ├── Shield.svg │ ├── UA1.png │ ├── UA2.png │ ├── UA3.png │ ├── UA4.png │ ├── UA5.png │ ├── UA6.png │ ├── UA7.png │ └── UA8.png ├── Design │ ├── Landing Page - Desktop View.png │ ├── Landing Page - Mobile View.png │ ├── Landing Page - Tablet View.png │ ├── Pricing Page - Desktop View.png │ ├── Pricing Page - Mobile view.png │ └── Pricing Page - Tablet View.png ├── README.md ├── index.html ├── pricing-script.js ├── pricing-style.css ├── pricing.html ├── script.js └── style.css ├── unifeed-blog-template ├── README.md ├── assets │ ├── article-1.png │ ├── article-2.png │ ├── article-3.png │ ├── hamburger-menu.svg │ ├── logo.svg │ ├── main-article.png │ ├── user-avatar-1.png │ ├── user-avatar-2.png │ ├── user-avatar-3.png │ └── user-avatar-4.png ├── design │ ├── blog-desktop-view.png │ ├── blog-mobile-view.png │ └── blog-tablet-view.png ├── index.html ├── script.js └── style.css └── web-developer-portfolio ├── Design ├── Landing-Page-Desktop-View.png ├── Landing-Page-Mobile-View.png └── Landing-Page-Tablet-View.png ├── README.md ├── images ├── hamburger-menu.svg ├── icons │ ├── github.svg │ ├── linkedin.svg │ └── twitter.svg ├── logo.svg ├── logos │ ├── jp-morgan.svg │ ├── samsung.svg │ ├── tinder.svg │ ├── verizon.svg │ ├── visa.svg │ └── walmart.svg ├── spense.png └── yelpcamp.png ├── index.html ├── script.js └── style.css /README.md: -------------------------------------------------------------------------------- 1 | # Codewell | Solutions 2 | 3 | - [Chirp Landing Page](https://ivobul.github.io/codewell-solutions/chirp-landing-page/) 4 | - [Comment Template](https://ivobul.github.io/codewell-solutions/comment-template/) 5 | - [Commune Waitlist Page](https://ivobul.github.io/codewell-solutions/commune-waitlist/) 6 | - [Fiber Landing Page](https://ivobul.github.io/codewell-solutions/fiber-landing-page/) 7 | - [Gradie Sign Up](https://ivobul.github.io/codewell-solutions/gradie-sign-up/) 8 | - [Hosterr Waitlist Page](https://ivobul.github.io/codewell-solutions/hosterr-waitlist/) 9 | - [IndieBrew Landing Page](https://ivobul.github.io/codewell-solutions/indie-brew/) 10 | - [JavaScript30 Navbar Page](https://ivobul.github.io/codewell-solutions/javascript30-navbar/) 11 | - [Meeet Waitlist Template](https://ivobul.github.io/codewell-solutions/meeet-waitlist-template/) 12 | - [Newsletter Popup Template](https://ivobul.github.io/codewell-solutions/newsletter-popup-template/) 13 | - [Snipper Landing Page](https://ivobul.github.io/codewell-solutions/snipper-landing-page/) 14 | - [Spense Landing Page](https://ivobul.github.io/codewell-solutions/spense-landing-page/) 15 | - [Subway Multistep Form Template](https://ivobul.github.io/codewell-solutions/subway-multistep-form-template/) 16 | - [TimeNow Template](https://ivobul.github.io/codewell-solutions/time-now-template/) 17 | - [Unifeed Blog Template](https://ivobul.github.io/codewell-solutions/unifeed-blog-template/) 18 | - [Web Developer Portfolio](https://ivobul.github.io/codewell-solutions/web-developer-portfolio/) 19 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/calendar.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/chirp-landing-page/Assets/chart.png -------------------------------------------------------------------------------- /chirp-landing-page/Assets/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/glasses.svg: -------------------------------------------------------------------------------- 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 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/hero-image-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/chirp-landing-page/Assets/hero-image-desktop.png -------------------------------------------------------------------------------- /chirp-landing-page/Assets/hero-image-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/chirp-landing-page/Assets/hero-image-mobile.png -------------------------------------------------------------------------------- /chirp-landing-page/Assets/like.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/sun.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | Layer 1 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/twitter-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/twitter-blue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /chirp-landing-page/Assets/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /chirp-landing-page/Design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/chirp-landing-page/Design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /chirp-landing-page/Design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/chirp-landing-page/Design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /chirp-landing-page/Design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/chirp-landing-page/Design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /chirp-landing-page/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Inter 30 | 31 | ### Mobile Navigation Interaction (New) 32 | 33 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 34 | -------------------------------------------------------------------------------- /chirp-landing-page/script.js: -------------------------------------------------------------------------------- 1 | const mobileIconElem = document.querySelector(".page-header__mobile-icon") 2 | const navElem = document.querySelector(".page-header__nav") 3 | 4 | mobileIconElem.addEventListener("click", () => { 5 | if (mobileIconElem.innerText === "menu") { 6 | mobileIconElem.innerText = "close" 7 | } 8 | else { 9 | mobileIconElem.innerText = "menu" 10 | } 11 | 12 | navElem.classList.toggle("active") 13 | }) 14 | -------------------------------------------------------------------------------- /comment-template/Assets/Down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /comment-template/Assets/Up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /comment-template/Assets/bg-mobile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/comment-template/Assets/bg-mobile.jpg -------------------------------------------------------------------------------- /comment-template/Assets/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/comment-template/Assets/bg.jpg -------------------------------------------------------------------------------- /comment-template/Design/Comment Template - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/comment-template/Design/Comment Template - Desktop View.png -------------------------------------------------------------------------------- /comment-template/Design/Comment Template - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/comment-template/Design/Comment Template - Mobile View.png -------------------------------------------------------------------------------- /comment-template/Design/Comment Template - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/comment-template/Design/Comment Template - Tablet View.png -------------------------------------------------------------------------------- /comment-template/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Rubik 30 | -------------------------------------------------------------------------------- /comment-template/style.css: -------------------------------------------------------------------------------- 1 | html, 2 | body, 3 | h1, 4 | h2, 5 | h3, 6 | h4, 7 | h5, 8 | h6, 9 | a, 10 | p, 11 | span, 12 | em, 13 | small, 14 | strong, 15 | sub, 16 | sup, 17 | mark, 18 | del, 19 | ins, 20 | strike, 21 | abbr, 22 | dfn, 23 | blockquote, 24 | q, 25 | cite, 26 | code, 27 | pre, 28 | ol, 29 | ul, 30 | li, 31 | dl, 32 | dt, 33 | dd, 34 | div, 35 | section, 36 | article, 37 | main, 38 | aside, 39 | nav, 40 | header, 41 | hgroup, 42 | footer, 43 | img, 44 | figure, 45 | figcaption, 46 | address, 47 | time, 48 | audio, 49 | video, 50 | canvas, 51 | iframe, 52 | details, 53 | summary, 54 | fieldset, 55 | form, 56 | label, 57 | legend, 58 | table, 59 | caption, 60 | tbody, 61 | tfoot, 62 | thead, 63 | tr, 64 | th, 65 | td { 66 | border: 0; 67 | margin: 0; 68 | padding: 0; 69 | } 70 | 71 | /* Box sizing */ 72 | html { 73 | box-sizing: border-box; 74 | } 75 | 76 | *, 77 | *:before, 78 | *:after { 79 | box-sizing: inherit; 80 | } 81 | 82 | /* Sizing - Height */ 83 | body { 84 | min-height: 100vh; 85 | } 86 | 87 | /* Typography */ 88 | body { 89 | font-size: 1rem; 90 | line-height: 1.5; 91 | } 92 | 93 | * { 94 | font-family: inherit; 95 | font-size: inherit; 96 | line-height: inherit; 97 | } 98 | 99 | a, 100 | a:visited { 101 | color: inherit; 102 | } 103 | 104 | /* Resetting specific element styles */ 105 | ol, 106 | ul { 107 | list-style: none; 108 | } 109 | 110 | img, 111 | video { 112 | max-width: 100%; 113 | } 114 | 115 | img { 116 | border-style: none; 117 | } 118 | 119 | a { 120 | text-decoration: none; 121 | } 122 | 123 | /* Basic rules */ 124 | .page { 125 | background-image: url(Assets/bg.jpg); 126 | background-repeat: no-repeat; 127 | background-size: cover; 128 | font-family: "Rubik", system-ui; 129 | } 130 | 131 | .container { 132 | align-items: center; 133 | display: flex; 134 | justify-content: center; 135 | margin: 0 auto; 136 | max-width: 1440px; 137 | min-height: 100vh; 138 | padding: 80px 110px; 139 | width: 100%; 140 | } 141 | 142 | .sr-only { 143 | height: 1px; 144 | left: -10000px; 145 | overflow: hidden; 146 | position: absolute; 147 | top: auto; 148 | width: 1px; 149 | } 150 | 151 | /* Page element */ 152 | .page-element { 153 | background-color: #ffffff; 154 | border-radius: 8px; 155 | flex-basis: 770px; 156 | min-height: 100px; 157 | padding: 50px 45px; 158 | } 159 | 160 | /* Page element list */ 161 | .page-element__list { 162 | position: relative; 163 | } 164 | 165 | .page-element__list::before { 166 | background-color: #AEAEAE; 167 | content: ""; 168 | height: calc(100% - 60px); 169 | left: 25px; 170 | position: absolute; 171 | top: 60px; 172 | width: 1px; 173 | } 174 | 175 | .page-element__list--margin-top { 176 | margin-top: 40px; 177 | } 178 | 179 | .page-element__list--nested { 180 | margin-left: 50px; 181 | margin-top: 40px; 182 | } 183 | 184 | /* Page element comment */ 185 | .page-element__comment { 186 | display: flex; 187 | flex-wrap: wrap; 188 | gap: 25px; 189 | } 190 | 191 | /* Page element comment letf part */ 192 | .page-element__comment-left { 193 | flex-basis: 49px; 194 | } 195 | 196 | /* Page element comment right part */ 197 | .page-element__comment-right { 198 | flex: 1; 199 | } 200 | 201 | .page-element__comment-right-top, 202 | .page-element__comment-right-main, 203 | .page-element__comment-right-bottom { 204 | display: flex; 205 | flex-wrap: wrap; 206 | } 207 | 208 | /* Page element comment right top part */ 209 | .page-element__comment-right-top { 210 | gap: 12px; 211 | margin-bottom: 10px; 212 | } 213 | 214 | .page-element__comment-right-date { 215 | color: #737373; 216 | } 217 | 218 | /* Page element comment right main part */ 219 | .page-element__comment-right-main { 220 | margin-bottom: 15px; 221 | } 222 | 223 | /* Page element comment right bottom part */ 224 | .page-element__comment-right-bottom { 225 | gap: 18px; 226 | } 227 | 228 | .page-element__comment-right-rating-up, 229 | .page-element__comment-right-rating-down { 230 | cursor: pointer; 231 | } 232 | 233 | .page-element__comment-right-count { 234 | font-weight: bold; 235 | } 236 | 237 | .page-element__comment-right-link { 238 | transition: color .3s; 239 | } 240 | 241 | .page-element__comment-right-link:hover { 242 | color: #7f7f7f; 243 | } 244 | 245 | /* Responsive design */ 246 | @media (max-width: 992px) { 247 | .page { 248 | background-image: url(Assets/bg-mobile.jpg); 249 | } 250 | 251 | .container { 252 | padding: 80px 40px; 253 | } 254 | } 255 | 256 | @media (max-width: 768px) { 257 | .container { 258 | padding: 80px 20px; 259 | } 260 | 261 | .page-element { 262 | font-size: .875rem; 263 | padding: 30px 20px; 264 | } 265 | 266 | .page-element__list::before { 267 | height: calc(100% - 51px); 268 | left: 20px; 269 | top: 51px; 270 | } 271 | 272 | .page-element__comment { 273 | gap: 16px; 274 | } 275 | 276 | .page-element__comment-left { 277 | flex-basis: 40px; 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/atlassian-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/behance-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/bing-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/bitbucket-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/dropbox-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/commune-waitlist/Assets/illustration.png -------------------------------------------------------------------------------- /commune-waitlist/Assets/twitch-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /commune-waitlist/Assets/twitter-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /commune-waitlist/Design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/commune-waitlist/Design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /commune-waitlist/Design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/commune-waitlist/Design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /commune-waitlist/Design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/commune-waitlist/Design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /commune-waitlist/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Nunito+Sans 30 | 31 | ### Mobile Navigation Interaction (New) 32 | 33 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 34 | 35 | ### Form Validation (New) 36 | 37 | Added [JustValidate](https://just-validate.dev/) - a modern form validation library 38 | -------------------------------------------------------------------------------- /commune-waitlist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home | Commune Waitlist 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 19 | menu 20 | 39 |
40 |
41 |
42 |

We are now allowing early-access for users. Learn more.

43 |

Build highly engaged community with no effort.

44 |

Commune offers the tools you need to build a highly engaged community with little to no effort. Simply setup your Commune workspace, and manage everything from members to content from one central dashboard.

45 |
46 | 47 | 48 |
49 |
50 |
51 | 52 |
53 |
54 | 80 |
81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /commune-waitlist/script.js: -------------------------------------------------------------------------------- 1 | const mobileIconElem = document.querySelector(".page-header__mobile-icon") 2 | const navElem = document.querySelector(".page-header__nav") 3 | 4 | mobileIconElem.addEventListener("click", () => { 5 | if (mobileIconElem.innerText === "menu") { 6 | mobileIconElem.innerText = "close" 7 | } 8 | 9 | else { 10 | mobileIconElem.innerText = "menu" 11 | } 12 | 13 | navElem.classList.toggle("active") 14 | }) 15 | 16 | 17 | const validator = new JustValidate(".page-main__form", { 18 | tooltip: { 19 | position: "top", 20 | }, 21 | }) 22 | 23 | validator 24 | .addField("#email", [ 25 | { 26 | rule: "required", 27 | errorMessage: "Email cannot be empty", 28 | }, 29 | { 30 | rule: "email", 31 | errorMessage: "Looks like this is not an email", 32 | }, 33 | ]) 34 | .onSuccess(() => { 35 | document.querySelector(".page-main__form").submit() 36 | }) 37 | -------------------------------------------------------------------------------- /fiber-landing-page/Assets/Checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fiber-landing-page/Assets/Hamburger Menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fiber-landing-page/Assets/Page-Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Assets/Page-Image.png -------------------------------------------------------------------------------- /fiber-landing-page/Assets/SignUp-Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Assets/SignUp-Image.png -------------------------------------------------------------------------------- /fiber-landing-page/Assets/allSizes.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fiber-landing-page/Assets/code.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fiber-landing-page/Assets/hero-Illustration.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Assets/hero-Illustration.png -------------------------------------------------------------------------------- /fiber-landing-page/Assets/hide password.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fiber-landing-page/Assets/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fiber-landing-page/Assets/templates-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Assets/templates-2.jpg -------------------------------------------------------------------------------- /fiber-landing-page/Assets/templates-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Assets/templates-3.jpg -------------------------------------------------------------------------------- /fiber-landing-page/Assets/templates-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Assets/templates-4.jpg -------------------------------------------------------------------------------- /fiber-landing-page/Assets/time.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /fiber-landing-page/Design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /fiber-landing-page/Design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /fiber-landing-page/Design/Sign Up Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Design/Sign Up Page - Desktop View.png -------------------------------------------------------------------------------- /fiber-landing-page/Design/Sign Up Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/fiber-landing-page/Design/Sign Up Page - Mobile View.png -------------------------------------------------------------------------------- /fiber-landing-page/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Inter 30 | 31 | ### ⚠️ Note 32 | 33 | Please note that the testimonial section should be scrollable on Desktop to allow more than 3 testimonials. 34 | 35 | -------------------------------------------------------------------------------- /fiber-landing-page/script.js: -------------------------------------------------------------------------------- 1 | const hamburgerIconElem = document.querySelector(".page-header__mobile-menu") 2 | const mobileNavElem = document.querySelector(".mobile-nav") 3 | const overlayElem = document.querySelector(".overlay") 4 | const closeIconElem = document.querySelector(".mobile-nav__close-icon") 5 | const rootElem = document.querySelector("html") 6 | 7 | hamburgerIconElem.addEventListener("click", () => { 8 | mobileNavElem.classList.add("active") 9 | overlayElem.style.display = "block" 10 | rootElem.style.overflowY = "hidden" 11 | }) 12 | 13 | closeIconElem.addEventListener("click", () => { 14 | mobileNavElem.classList.remove("active") 15 | overlayElem.style.display = "none" 16 | rootElem.style.overflowY = "auto" 17 | }) 18 | 19 | overlayElem.addEventListener("click", () => { 20 | overlayElem.style.display = "none" 21 | mobileNavElem.classList.remove("active") 22 | rootElem.style.overflowY = "auto" 23 | }) 24 | 25 | window.addEventListener("resize", () => { 26 | if (window.innerWidth >= 992) { 27 | rootElem.style.overflowY = "auto" 28 | } 29 | }) -------------------------------------------------------------------------------- /fiber-landing-page/signup.js: -------------------------------------------------------------------------------- 1 | // Show hide password input field 2 | const inpPassword = document.querySelector("#usr-password") 3 | const togglePassword = document.querySelector(".show-hide-password") 4 | 5 | togglePassword.addEventListener("click", () => { 6 | if (inpPassword.type === "password") { 7 | inpPassword.type = "text" 8 | togglePassword.innerText = "visibility_off" 9 | togglePassword.setAttribute("title", "Hide the password") 10 | } 11 | else { 12 | inpPassword.type = "password"; 13 | togglePassword.innerText = "visibility" 14 | togglePassword.setAttribute("title", "Show the password") 15 | } 16 | }) 17 | 18 | // Change slides functionality 19 | let slideIndex = 1; 20 | const indicators = document.querySelectorAll(".signup__right-indicator") 21 | 22 | indicators.forEach((elem, index, arr) => { 23 | elem.addEventListener("click", () => { 24 | currentSlideIndicator(index + 1) 25 | }) 26 | }) 27 | 28 | /* 29 | https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2 30 | */ 31 | function currentSlideIndicator(n) { 32 | changeSlidesIndicators(slideIndex = n); 33 | } 34 | 35 | function changeSlidesIndicators(n) { 36 | const slides = document.getElementsByClassName("signup__right-box-item") 37 | const indicators = document.getElementsByClassName("signup__right-indicator") 38 | 39 | if (n > slides.length) { 40 | slideIndex = 1 41 | } 42 | 43 | if (n < 1) { 44 | slideIndex = slides.length 45 | } 46 | 47 | for (let i = 0; i < slides.length; i++) { 48 | slides[i].style.display = "none" 49 | } 50 | 51 | for (let i = 0; i < indicators.length; i++) { 52 | indicators[i].style.backgroundColor = "#A587FF" 53 | } 54 | 55 | slides[slideIndex - 1].style.display = "block" 56 | indicators[slideIndex - 1].style.backgroundColor = "#FFFFFF" 57 | } -------------------------------------------------------------------------------- /gradie-sign-up/Assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/gradie-sign-up/Assets/bg.png -------------------------------------------------------------------------------- /gradie-sign-up/Assets/iphone-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/gradie-sign-up/Assets/iphone-mockup.png -------------------------------------------------------------------------------- /gradie-sign-up/Design/Sign Up - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/gradie-sign-up/Design/Sign Up - Desktop View.png -------------------------------------------------------------------------------- /gradie-sign-up/Design/Sign Up - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/gradie-sign-up/Design/Sign Up - Mobile View.png -------------------------------------------------------------------------------- /gradie-sign-up/Design/Sign Up - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/gradie-sign-up/Design/Sign Up - Tablet View.png -------------------------------------------------------------------------------- /gradie-sign-up/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Roboto 30 | 31 | ### Form Validation (New) 32 | 33 | Added [JustValidate](https://just-validate.dev/) - a modern form validation library 34 | -------------------------------------------------------------------------------- /gradie-sign-up/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sign Up | Gradie 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |

Gradie

18 |

Beautiful gradients in seconds.

19 | 20 |
21 |
22 |

Login

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 | -------------------------------------------------------------------------------- /gradie-sign-up/script.js: -------------------------------------------------------------------------------- 1 | const validator = new JustValidate(".form", { 2 | tooltip: { 3 | position: "top", 4 | }, 5 | }) 6 | 7 | validator 8 | .addField("#email", [ 9 | { 10 | rule: "required", 11 | }, 12 | { 13 | rule: "email", 14 | }, 15 | ]) 16 | .addField("#password", [ 17 | { 18 | rule: "required", 19 | }, 20 | { 21 | rule: "strongPassword", 22 | }, 23 | ]) 24 | .addField("#checkbox", [ 25 | { 26 | rule: "required", 27 | }, 28 | ], 29 | { 30 | tooltip: { 31 | position: "right", 32 | }, 33 | }) 34 | .onSuccess(() => { 35 | document.querySelector(".form").submit(); 36 | }) 37 | -------------------------------------------------------------------------------- /gradie-sign-up/style.css: -------------------------------------------------------------------------------- 1 | /* CSS Reset */ 2 | /* Resetting margins, paddings, and borders */ 3 | html, body, 4 | h1, h2, h3, h4, h5, h6, 5 | a, p, span, 6 | em, small, strong, 7 | sub, sup, 8 | mark, del, ins, strike, 9 | abbr, dfn, 10 | blockquote, q, cite, 11 | code, pre, 12 | ol, ul, li, dl, dt, dd, 13 | div, section, article, 14 | main, aside, nav, 15 | header, hgroup, footer, 16 | img, figure, figcaption, 17 | address, time, 18 | audio, video, 19 | canvas, iframe, 20 | details, summary, 21 | fieldset, form, label, legend, 22 | table, caption, 23 | tbody, tfoot, thead, 24 | tr, th, td { 25 | border: 0; 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | /* Box sizing */ 31 | html { 32 | box-sizing: border-box; 33 | } 34 | 35 | *, *:before, *:after { 36 | box-sizing: inherit; 37 | } 38 | 39 | /* Sizing - Height */ 40 | body { 41 | min-height: 100vh; 42 | } 43 | 44 | /* Typography */ 45 | body { 46 | font-size: 1rem; 47 | line-height: 1.5; 48 | } 49 | 50 | * { 51 | font-family: inherit; 52 | font-size: inherit; 53 | line-height: inherit; 54 | } 55 | 56 | a, 57 | a:visited { 58 | color: inherit; 59 | } 60 | 61 | /* Resetting specific element styles */ 62 | ol, 63 | ul { 64 | list-style: none; 65 | } 66 | 67 | img, 68 | video { 69 | max-width: 100%; 70 | } 71 | 72 | img { 73 | border-style: none; 74 | } 75 | 76 | a { 77 | text-decoration: none; 78 | } 79 | 80 | /* Basic rules */ 81 | .page { 82 | background-image: url(Assets/bg.png); 83 | background-repeat: no-repeat; 84 | background-size: cover; 85 | font-family: 'Roboto', sans-serif; 86 | font-size: 1.125rem; 87 | } 88 | 89 | .container { 90 | align-items: center; 91 | display: flex; 92 | justify-content: center; 93 | min-height: 100vh; 94 | padding: 100px 30px; 95 | } 96 | 97 | /* Page main */ 98 | .page-main { 99 | flex: 1; 100 | } 101 | 102 | /* Page main - App */ 103 | .app { 104 | display: flex; 105 | margin: 0 auto; 106 | max-width: 862px; 107 | width: 100%; 108 | } 109 | 110 | .app__item { 111 | flex: 1; 112 | } 113 | 114 | /* App - hero section */ 115 | .hero { 116 | background-color: #013243; 117 | border-top-left-radius: 10px; 118 | border-bottom-left-radius: 10px; 119 | display: flex; 120 | flex-direction: column; 121 | padding: 40px 40px 0; 122 | text-align: center; 123 | } 124 | 125 | .hero__title { 126 | color: #fff; 127 | font-size: 2rem; 128 | } 129 | 130 | .hero__subtitle { 131 | color: #86bfd3; 132 | margin-top: 5px; 133 | } 134 | 135 | .hero__image { 136 | margin-top: 80px; 137 | } 138 | 139 | /* App - body section */ 140 | .app-body { 141 | background-color: #fff; 142 | border-top-right-radius: 10px; 143 | border-bottom-right-radius: 10px; 144 | border: 1px solid #c1c1c1; 145 | padding: 40px; 146 | } 147 | 148 | .app-body__title { 149 | font-size: 2rem; 150 | } 151 | 152 | /* App - body form */ 153 | .app-body__form { 154 | margin-top: 30px; 155 | } 156 | 157 | .form { 158 | display: flex; 159 | flex-direction: column; 160 | } 161 | 162 | .form__item:not(:last-child) { 163 | margin-bottom: 25px; 164 | } 165 | 166 | .form__item--flex-column { 167 | display: flex; 168 | flex-direction: column; 169 | } 170 | 171 | .form__item--flex-row { 172 | display: flex; 173 | flex-direction: row; 174 | } 175 | 176 | .form__email, 177 | .form__password, 178 | .form__submit { 179 | border-radius: 5px; 180 | height: 60px; 181 | padding: 12px; 182 | } 183 | 184 | .form__email, 185 | .form__password { 186 | border: 1px solid lightgray; 187 | margin-top: 5px; 188 | } 189 | 190 | .form__checkbox { 191 | margin-bottom: 27px; 192 | margin-right: 8px; 193 | } 194 | 195 | .form__submit { 196 | background-color: #013243; 197 | border: 1px solid transparent; 198 | color: #fff; 199 | cursor: pointer; 200 | padding: 14px; 201 | transition: background-color .5s; 202 | } 203 | 204 | .form__submit:hover { 205 | background-color: #335B68; 206 | } 207 | 208 | .form__label-email, 209 | .form__label-password, 210 | .form__submit { 211 | font-weight: 600; 212 | } 213 | 214 | .form__label-checkbox { 215 | padding-right: 10px; 216 | } 217 | 218 | .just-validate-error-field { 219 | border: 2px solid #ff4747; 220 | color: #e53f3f; 221 | outline: none; 222 | } 223 | 224 | .link { 225 | color: #013243; 226 | font-weight: bold; 227 | text-decoration: underline; 228 | } 229 | 230 | @media screen and (max-width: 991px) { 231 | .app { 232 | flex-direction: column; 233 | } 234 | 235 | .app__item { 236 | margin: 0 auto; 237 | max-width: 443px; 238 | width: 100%; 239 | } 240 | 241 | .hero { 242 | border-radius: 10px 10px 0 0; 243 | } 244 | 245 | .app-body { 246 | border-radius: 0 0 10px 10px; 247 | } 248 | } 249 | 250 | @media screen and (max-width: 443px) { 251 | .container { 252 | padding: 0; 253 | } 254 | 255 | .app { 256 | min-height: 100vh; 257 | } 258 | 259 | .hero { 260 | border-radius: 0; 261 | } 262 | 263 | .app-body { 264 | border-radius: 0; 265 | padding: 40px 20px; 266 | } 267 | } 268 | -------------------------------------------------------------------------------- /hosterr-waitlist/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Lato 30 | https://fonts.google.com/specimen/Playfair+Display 31 | 32 | ### Form Validation (New) 33 | 34 | Added [JustValidate](https://just-validate.dev/) - a modern form validation library 35 | 36 | ### Mobile Navigation Interaction (New) 37 | 38 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 39 | -------------------------------------------------------------------------------- /hosterr-waitlist/assets/Hero-Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/hosterr-waitlist/assets/Hero-Image.png -------------------------------------------------------------------------------- /hosterr-waitlist/assets/blue-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /hosterr-waitlist/assets/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /hosterr-waitlist/assets/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /hosterr-waitlist/assets/pink-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /hosterr-waitlist/assets/purple-shape.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /hosterr-waitlist/design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/hosterr-waitlist/design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /hosterr-waitlist/design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/hosterr-waitlist/design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /hosterr-waitlist/design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/hosterr-waitlist/design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /hosterr-waitlist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home | Hosterr Waitlist 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
17 |
18 | 19 | Site logo 20 | Hosterr is hiring! 21 | 22 | close 23 |
24 |
25 | Plans 26 | Find Domain 27 | Why Hosterr 28 | Sign in 29 |
30 |
31 | Join Waitlist 32 |
33 |
34 |
35 |
36 | 37 | Site logo 38 | Hosterr is hiring! 39 | 40 | menu 41 | 42 | 43 | 48 |
49 | Sign in 50 | Join Waitlist 51 |
52 |
53 |
54 |
55 |

Host your website in less than 5 minutes.

56 |

With Hosterr, get your website up and running in no less than 5 minutes with the most competitive pricing packages available online.

57 |
58 | 59 | 60 | 61 |
62 | 63 | No spam, ever. Unsubscribe anytime. 64 |
65 |
66 |
67 |
68 | 69 | 70 | 71 | 72 |
73 |
74 | 88 |
89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /hosterr-waitlist/script.js: -------------------------------------------------------------------------------- 1 | const hamburgerIconElem = document.querySelector(".page-header__hamburger-icon") 2 | const mobileNavElem = document.querySelector(".mobile-nav") 3 | const overlayElem = document.querySelector(".overlay") 4 | const closeIconElem = document.querySelector(".mobile-nav__close-icon") 5 | const rootElem = document.querySelector("html") 6 | 7 | hamburgerIconElem.addEventListener("click", () => { 8 | mobileNavElem.classList.add("active") 9 | overlayElem.style.display = "block" 10 | rootElem.style.overflowY = "hidden" 11 | }) 12 | 13 | closeIconElem.addEventListener("click", () => { 14 | mobileNavElem.classList.remove("active") 15 | overlayElem.style.display = "none" 16 | rootElem.style.overflowY = "auto" 17 | }) 18 | 19 | overlayElem.addEventListener("click", () => { 20 | overlayElem.style.display = "none" 21 | mobileNavElem.classList.remove("active") 22 | rootElem.style.overflowY = "auto" 23 | }) 24 | 25 | window.addEventListener("resize", () => { 26 | if (window.innerWidth >= 1081) { 27 | rootElem.style.overflowY = "auto" 28 | } 29 | }) 30 | 31 | // Form Validation 32 | const validator = new JustValidate(".page-main__form", { 33 | tooltip: { 34 | position: "top", 35 | }, 36 | }) 37 | 38 | validator 39 | .addField("#email", [ 40 | { 41 | rule: "required", 42 | }, 43 | { 44 | rule: "email", 45 | }, 46 | ]) 47 | .onSuccess(() => { 48 | document.querySelector(".page-main__form").submit(); 49 | }) 50 | -------------------------------------------------------------------------------- /indie-brew/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/DM+Sans 30 | 31 | ### Mobile Navigation Interaction (New) 32 | 33 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 34 | -------------------------------------------------------------------------------- /indie-brew/assets/back-arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /indie-brew/assets/feed-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/assets/feed-mockup.png -------------------------------------------------------------------------------- /indie-brew/assets/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /indie-brew/assets/phone-mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/assets/phone-mockup.png -------------------------------------------------------------------------------- /indie-brew/assets/social-media-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/assets/social-media-icons.png -------------------------------------------------------------------------------- /indie-brew/design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /indie-brew/design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /indie-brew/design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /indie-brew/design/Sign Up - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/design/Sign Up - Mobile View.png -------------------------------------------------------------------------------- /indie-brew/design/Sign Up - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/design/Sign Up - Tablet View.png -------------------------------------------------------------------------------- /indie-brew/design/Sign up - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/indie-brew/design/Sign up - Desktop View.png -------------------------------------------------------------------------------- /indie-brew/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home | IndieBrew 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 20 | 23 | 29 |
30 |
31 |
32 |

Your weekly personal feed digest.

33 |

With IndieBrew, get personal feeds from resources all around the web, including Reddit, HackerNews, IndieHackers, and much more.

34 | 35 | Get Started - it's free 36 | 37 |

Join 32,642 IndieBrewers in curating their personal digest.

38 |
39 |
40 | 41 |
42 |
43 |
44 |
45 |
46 |
47 |

Curate your feed from dozens of resources.

48 |

We cover all major platforms where one could want to curate their feed from. Reddit, ProductHunt, IndieHackers, and so much more.

49 | See full list of resources → 50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 |

Access your feed from the comfort of your phone.

61 |

With native apps for both iOS and Android, accessing your curated content has never been easier.

62 | Signup for the waitlist → 63 |
64 |
65 |
66 | 100 |
101 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /indie-brew/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector(".page-header__hamburger"); 2 | const hamburgerIcon = hamburger.querySelector(".material-icons"); 3 | const nav = document.querySelector(".page-header__nav"); 4 | 5 | hamburger.addEventListener("click", () => { 6 | if (hamburgerIcon.innerText === "menu") { 7 | hamburgerIcon.innerText = "close"; 8 | } 9 | else { 10 | hamburgerIcon.innerText = "menu"; 11 | } 12 | 13 | nav.classList.toggle("active"); 14 | }); 15 | -------------------------------------------------------------------------------- /indie-brew/signup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Sign Up | IndieBrew 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 19 | 23 |
24 |
25 | 40 | 62 |
63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Capterra_Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Fiber_Icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Gradie_Icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Hero_Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/javascript30-navbar/Assets/Hero_Image.png -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Netflix_Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Shopify_Logo_Small.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /javascript30-navbar/Assets/Spense_Icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /javascript30-navbar/Design/Landing-Page-Desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/javascript30-navbar/Design/Landing-Page-Desktop.png -------------------------------------------------------------------------------- /javascript30-navbar/Design/Landing-Page-Mobile-Menu-Expanded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/javascript30-navbar/Design/Landing-Page-Mobile-Menu-Expanded.png -------------------------------------------------------------------------------- /javascript30-navbar/Design/Landing-Page-Mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/javascript30-navbar/Design/Landing-Page-Mobile.png -------------------------------------------------------------------------------- /javascript30-navbar/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Wes Bos's Javascript30 28 | 29 | This challenge is best coupled with Day 22 of Wes Bos's [Javascript30](https://javascript30.com) course. 30 | 31 | ### Fonts Used 32 | 33 | https://fonts.google.com/specimen/Inter 34 | 35 | 36 | ### Mobile Navigation Interaction (New) 37 | 38 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 39 | -------------------------------------------------------------------------------- /javascript30-navbar/script.js: -------------------------------------------------------------------------------- 1 | const mobileMenu = document.querySelector(".page-header__mobile-menu") 2 | const mainNavElem = document.querySelector(".page-header__main-nav") 3 | const secondaryNavElem = document.querySelector(".page-header__secondary-nav") 4 | const closeIcon = document.querySelector(".page-header__dropdown-top-icon") 5 | const dropdownElem = document.querySelector(".page-header__dropdown") 6 | const navLink1 = document.querySelector("#main-nav-link-1") 7 | 8 | mobileMenu.addEventListener("click", () => { 9 | mainNavElem.classList.toggle("active-display-flex") 10 | secondaryNavElem.classList.toggle("active-display-flex") 11 | 12 | if (mobileMenu.innerText === "menu") { 13 | mobileMenu.innerText = "close" 14 | } 15 | 16 | else { 17 | mobileMenu.innerText = "menu" 18 | } 19 | }) 20 | 21 | closeIcon.addEventListener("click", () => { 22 | dropdownElem.classList.remove("active-display-block") 23 | }) 24 | 25 | navLink1.addEventListener("click", () => { 26 | dropdownElem.classList.toggle("active-display-block") 27 | }) 28 | -------------------------------------------------------------------------------- /meeet-waitlist-template/Assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /meeet-waitlist-template/Assets/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /meeet-waitlist-template/Design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/meeet-waitlist-template/Design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /meeet-waitlist-template/Design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/meeet-waitlist-template/Design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /meeet-waitlist-template/Design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/meeet-waitlist-template/Design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /meeet-waitlist-template/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Inter 30 | https://fonts.google.com/specimen/Sen 31 | 32 | 33 | -------------------------------------------------------------------------------- /meeet-waitlist-template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home | Meeet Waitlist 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | 17 | Site logo 18 | 19 |
20 |
21 |

Meeet new entrepreneurs

22 |

Meeet is a new social media platform for entrepreneurs to connect and socialize.

23 | Get notified at launch 24 | 29 |
30 | 31 | 32 | 33 | 34 | 35 |
36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /meeet-waitlist-template/style.css: -------------------------------------------------------------------------------- 1 | /* CSS Reset */ 2 | /* Resetting margins, paddings, and borders */ 3 | html, body, 4 | h1, h2, h3, h4, h5, h6, 5 | a, p, span, 6 | em, small, strong, 7 | sub, sup, 8 | mark, del, ins, strike, 9 | abbr, dfn, 10 | blockquote, q, cite, 11 | code, pre, 12 | ol, ul, li, dl, dt, dd, 13 | div, section, article, 14 | main, aside, nav, 15 | header, hgroup, footer, 16 | img, figure, figcaption, 17 | address, time, 18 | audio, video, 19 | canvas, iframe, 20 | details, summary, 21 | fieldset, form, label, legend, 22 | table, caption, 23 | tbody, tfoot, thead, 24 | tr, th, td { 25 | border: 0; 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | /* Box sizing */ 31 | html { 32 | box-sizing: border-box; 33 | } 34 | 35 | *, *:before, *:after { 36 | box-sizing: inherit; 37 | } 38 | 39 | /* Sizing - Height */ 40 | body { 41 | min-height: 100vh; 42 | } 43 | 44 | /* Typography */ 45 | body { 46 | font-size: 1rem; 47 | line-height: 1.5; 48 | } 49 | 50 | * { 51 | font-family: inherit; 52 | font-size: inherit; 53 | line-height: inherit; 54 | } 55 | 56 | a, 57 | a:visited { 58 | color: inherit; 59 | } 60 | 61 | /* Resetting specific element styles */ 62 | ol, 63 | ul { 64 | list-style: none; 65 | } 66 | 67 | img, 68 | video { 69 | max-width: 100%; 70 | } 71 | 72 | img { 73 | border-style: none; 74 | } 75 | 76 | a { 77 | text-decoration: none; 78 | } 79 | 80 | /* Basic rules */ 81 | :root { 82 | --bg-color: #013243; 83 | --color-green: #32F5C8; 84 | --color-deep-green: #0a565b; 85 | --color-gray: #a9bdc6; 86 | } 87 | 88 | .page { 89 | background-color: var(--bg-color); 90 | font-family: 'Inter', sans-serif; 91 | } 92 | 93 | .container { 94 | display: flex; 95 | flex-direction: column; 96 | min-height: 100vh; 97 | padding: 40px 120px 80px; 98 | position: relative; 99 | } 100 | 101 | .page-main { 102 | flex: 1; 103 | } 104 | 105 | .page-main__title { 106 | color: var(--color-green); 107 | font-family: 'Sen', sans-serif; 108 | font-size: 8rem; 109 | margin-top: 60px; 110 | letter-spacing: 5px; 111 | line-height: 1; 112 | text-transform: capitalize; 113 | } 114 | 115 | .page-main__copy { 116 | color: var(--color-gray); 117 | font-size: 1.2rem; 118 | margin-top: 45px; 119 | margin-bottom: 30px; 120 | max-width: 400px; 121 | } 122 | 123 | 124 | .page-main__button { 125 | background-color: var(--color-green); 126 | border-radius: 5px; 127 | color: var(--color-deep-green); 128 | display: inline-block; 129 | font-weight: bold; 130 | padding: 14px 20px; 131 | transition: background-color .3s; 132 | } 133 | 134 | .page-main__button:visited { 135 | color: var(--color-deep-green); 136 | } 137 | 138 | .page-main__button:hover { 139 | background-color: #28c4a0; 140 | } 141 | 142 | .page-main__social { 143 | margin-top: 50px; 144 | } 145 | 146 | .page-main__icon { 147 | margin-right: 10px; 148 | width: 36px; 149 | } 150 | 151 | .page-main__link { 152 | align-items: center; 153 | color: var(--color-gray); 154 | display: flex; 155 | } 156 | 157 | .page-main__link:visited { 158 | color: var(--color-gray); 159 | } 160 | 161 | .user-avatar { 162 | position: absolute; 163 | z-index: -10; 164 | } 165 | 166 | .user-avatar-1 { 167 | right: 100px; 168 | top: 300px; 169 | width: 100px; 170 | } 171 | 172 | .user-avatar-2 { 173 | right: 100px; 174 | top: 45px; 175 | width: 130px; 176 | } 177 | 178 | .user-avatar-3 { 179 | left: 60px; 180 | top: 100px; 181 | width: 110px; 182 | } 183 | 184 | .user-avatar-4 { 185 | bottom: 80px; 186 | right: 150px; 187 | width: 160px; 188 | } 189 | 190 | .user-avatar-5 { 191 | right: 270px; 192 | top: 100px; 193 | width: 100px; 194 | } 195 | 196 | @media (max-width: 1200px) { 197 | .page-main__title { 198 | font-size: 6.5rem; 199 | } 200 | } 201 | 202 | @media (max-width: 991px) { 203 | .container { 204 | padding: 40px 30px 80px; 205 | } 206 | 207 | .page-main__title { 208 | font-size: 5rem; 209 | margin-top: 180px; 210 | } 211 | 212 | .user-avatar-1 { 213 | top: 350px; 214 | } 215 | 216 | .user-avatar-2 { 217 | top: 85px; 218 | } 219 | 220 | .user-avatar-4 { 221 | bottom: 80px; 222 | } 223 | 224 | .user-avatar-5 { 225 | top: 230px; 226 | } 227 | } 228 | 229 | @media (max-width: 767px) { 230 | .page-main__title { 231 | font-size: 4rem; 232 | } 233 | } 234 | 235 | @media (max-width: 575px) { 236 | .container { 237 | padding: 40px 20px 80px; 238 | } 239 | 240 | .page-main__title { 241 | font-size: 3rem; 242 | letter-spacing: 1px; 243 | line-height: 1.5; 244 | margin-top: 130px; 245 | } 246 | 247 | .user-avatar-1 { 248 | display: none; 249 | } 250 | 251 | .user-avatar-2 { 252 | right: 20px; 253 | top: 85px; 254 | width: 120px; 255 | } 256 | 257 | .user-avatar-3 { 258 | left: 20px; 259 | top: 100px; 260 | width: 100px; 261 | } 262 | 263 | .user-avatar-4 { 264 | bottom: 60px; 265 | right: 30px; 266 | width: 140px; 267 | } 268 | 269 | .user-avatar-5 { 270 | display: none; 271 | } 272 | } 273 | 274 | @media (max-width: 376px) { 275 | .page-main__title { 276 | font-size: 2.2rem; 277 | } 278 | } 279 | -------------------------------------------------------------------------------- /newsletter-popup-template/Assets/Background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/newsletter-popup-template/Assets/Background.png -------------------------------------------------------------------------------- /newsletter-popup-template/Assets/Pattern.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/newsletter-popup-template/Assets/Pattern.png -------------------------------------------------------------------------------- /newsletter-popup-template/Design/Newsie Newsletter - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/newsletter-popup-template/Design/Newsie Newsletter - Desktop View.png -------------------------------------------------------------------------------- /newsletter-popup-template/Design/Newsie Newsletter - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/newsletter-popup-template/Design/Newsie Newsletter - Mobile View.png -------------------------------------------------------------------------------- /newsletter-popup-template/Design/Newsie Newsletter - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/newsletter-popup-template/Design/Newsie Newsletter - Tablet View.png -------------------------------------------------------------------------------- /newsletter-popup-template/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | 28 | ### Fonts Used 29 | 30 | https://fonts.google.com/specimen/Work+Sans 31 | 32 | 33 | ### Form Validation (New) 34 | 35 | Added [JustValidate](https://just-validate.dev/) - a modern form validation library 36 | -------------------------------------------------------------------------------- /newsletter-popup-template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home | Newsletter Popup Template 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |

Creating email templates has never been easier.

18 |
19 |
20 |

Receive daily emails on how to best create email templates, completely free.

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

No spam, ever. Unsubscribe anytime.

27 |
28 |
29 | 30 |
31 |

Andrew Vickins

32 |

Newsletter Designer

33 |
34 |
35 | By far one of the best newsletter I've ever subscribed to. It is sent biweekly and I'm always looking forward to their emails. 36 |
37 |
38 |
39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /newsletter-popup-template/script.js: -------------------------------------------------------------------------------- 1 | const validation = new JustValidate(".app__form"); 2 | 3 | validation 4 | .addField("#email", [ 5 | { 6 | rule: "required", 7 | errorMessage: "Email cannot be empty", 8 | }, 9 | { 10 | rule: "email", 11 | errorMessage: "Looks like this is not an email", 12 | }, 13 | ]) 14 | .onSuccess(() => { 15 | document.querySelector(".app__form").submit(); 16 | }); 17 | -------------------------------------------------------------------------------- /newsletter-popup-template/style.css: -------------------------------------------------------------------------------- 1 | /* CSS Reset */ 2 | /* Resetting margins, paddings, and borders */ 3 | html, body, 4 | h1, h2, h3, h4, h5, h6, 5 | a, p, span, 6 | em, small, strong, 7 | sub, sup, 8 | mark, del, ins, strike, 9 | abbr, dfn, 10 | blockquote, q, cite, 11 | code, pre, 12 | ol, ul, li, dl, dt, dd, 13 | div, section, article, 14 | main, aside, nav, 15 | header, hgroup, footer, 16 | img, figure, figcaption, 17 | address, time, 18 | audio, video, 19 | canvas, iframe, 20 | details, summary, 21 | fieldset, form, label, legend, 22 | table, caption, 23 | tbody, tfoot, thead, 24 | tr, th, td { 25 | border: 0; 26 | margin: 0; 27 | padding: 0; 28 | } 29 | 30 | /* Box sizing */ 31 | html { 32 | box-sizing: border-box; 33 | } 34 | 35 | *, *:before, *:after { 36 | box-sizing: inherit; 37 | } 38 | 39 | /* Sizing - Height */ 40 | body { 41 | min-height: 100vh; 42 | } 43 | 44 | /* Typography */ 45 | body { 46 | font-size: 1rem; 47 | line-height: 1.5; 48 | } 49 | 50 | * { 51 | font-family: inherit; 52 | font-size: inherit; 53 | line-height: inherit; 54 | } 55 | 56 | a, 57 | a:visited { 58 | color: inherit; 59 | } 60 | 61 | /* Resetting specific element styles */ 62 | ol, 63 | ul { 64 | list-style: none; 65 | } 66 | 67 | img, 68 | video { 69 | max-width: 100%; 70 | } 71 | 72 | img { 73 | border-style: none; 74 | } 75 | 76 | a { 77 | text-decoration: none; 78 | } 79 | 80 | /* Basic rules */ 81 | .page { 82 | background-image: url(Assets/Background.png); 83 | background-repeat: no-repeat; 84 | background-size: cover; 85 | color: #595959; 86 | font-family: 'Work Sans', sans-serif; 87 | font-size: .875rem; 88 | } 89 | 90 | .container { 91 | align-items: center; 92 | display: flex; 93 | justify-content: center; 94 | min-height: 100vh; 95 | padding: 40px 30px; 96 | } 97 | 98 | .just-validate-error-label { 99 | margin-top: 10px; 100 | margin-left: 8px; 101 | order: 3; 102 | } 103 | 104 | /* Main section */ 105 | .page-main { 106 | flex: 1; 107 | } 108 | 109 | /* App */ 110 | .app { 111 | margin: 0 auto; 112 | max-width: 450px; 113 | } 114 | 115 | /* App header */ 116 | .app__header { 117 | align-items: center; 118 | background-color: #2355F2; 119 | background-image: url(Assets/Pattern.png); 120 | background-repeat: no-repeat; 121 | background-size: cover; 122 | border-top-left-radius: 15px; 123 | border-top-right-radius: 15px; 124 | display: flex; 125 | justify-content: center; 126 | min-height: 230px; 127 | padding: 30px 80px; 128 | } 129 | 130 | .app__title { 131 | color: #fff; 132 | font-size: 1.625rem; 133 | font-weight: 600; 134 | text-align: center; 135 | } 136 | 137 | /* App body */ 138 | .app__body { 139 | background-color: #fff; 140 | border-bottom-left-radius: 15px; 141 | border-bottom-right-radius: 15px; 142 | min-height: 100px; 143 | padding: 30px 20px; 144 | } 145 | 146 | .app__copy { 147 | text-align: center; 148 | } 149 | 150 | /* App form */ 151 | .email, 152 | .submit { 153 | border-radius: 5px; 154 | padding: 14px 10px; 155 | } 156 | 157 | .email { 158 | background-color: #F5F7FA; 159 | border: 1px solid #E6E8F0; 160 | flex: 2; 161 | color: #47494e; 162 | margin-right: 10px; 163 | order: 1; 164 | } 165 | 166 | .submit { 167 | background-color: #2355F2; 168 | border: 1px solid transparent; 169 | color: #fff; 170 | cursor: pointer; 171 | flex: 1; 172 | font-weight: 600; 173 | order: 2; 174 | transition: background-color .3s; 175 | } 176 | 177 | .submit:hover { 178 | background-color: #5f85ec; 179 | } 180 | 181 | .just-validate-error-field { 182 | border: 0; 183 | color: #e53f3f; 184 | outline: 2px solid #ff4747; 185 | } 186 | 187 | .small-text { 188 | color: #6b6b6b; 189 | margin-top: 10px; 190 | } 191 | 192 | /* App profile section */ 193 | .app__stack { 194 | display: flex; 195 | flex-wrap: wrap; 196 | margin-top: 40px; 197 | } 198 | 199 | .app__stack--horizontal-center { 200 | justify-content: center; 201 | } 202 | 203 | .app__stack-title { 204 | color: #000; 205 | font-weight: 600; 206 | } 207 | 208 | .app__stack-subtitle { 209 | font-weight: 400; 210 | } 211 | 212 | .app__avatar { 213 | margin-right: 10px 214 | } 215 | 216 | /* App quote section */ 217 | .app__quote { 218 | display: inline-block; 219 | margin-top: 40px; 220 | text-align: center; 221 | } 222 | 223 | @media screen and (max-width: 767px) { 224 | .container { 225 | padding: 0; 226 | } 227 | 228 | .just-validate-error-label { 229 | bottom: 15px; 230 | order: 2; 231 | position: relative; 232 | } 233 | 234 | .app { 235 | max-width: 100%; 236 | } 237 | 238 | .app__header { 239 | border-top-left-radius: 0; 240 | border-top-right-radius: 0; 241 | min-height: 450px; 242 | padding: 30px 60px; 243 | } 244 | 245 | .app__body { 246 | border-bottom-left-radius: 0; 247 | border-bottom-right-radius: 0; 248 | } 249 | 250 | .email, 251 | .submit { 252 | flex: 100%; 253 | } 254 | 255 | .email { 256 | margin-right: 0; 257 | margin-bottom: 15px; 258 | } 259 | 260 | .submit { 261 | order: 3; 262 | } 263 | } 264 | -------------------------------------------------------------------------------- /snipper-landing-page/Assets/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/snipper-landing-page/Assets/bg.png -------------------------------------------------------------------------------- /snipper-landing-page/Assets/customizable-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/snipper-landing-page/Assets/customizable-image.png -------------------------------------------------------------------------------- /snipper-landing-page/Assets/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /snipper-landing-page/Assets/search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /snipper-landing-page/Assets/snipper-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/snipper-landing-page/Assets/snipper-image.png -------------------------------------------------------------------------------- /snipper-landing-page/Design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/snipper-landing-page/Design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /snipper-landing-page/Design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/snipper-landing-page/Design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /snipper-landing-page/Design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/snipper-landing-page/Design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /snipper-landing-page/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Poppins 30 | 31 | ### Mobile Navigation Interaction (New) 32 | 33 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 34 | -------------------------------------------------------------------------------- /snipper-landing-page/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Home | Snipper 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 |
17 | 20 | 23 | 38 |
39 |
40 |

Gorgeous Code Snippets

41 |

With Snipper, create fully customizable code snippets in a matter of seconds right from your browser. 42 |

43 | Get started - it's free 44 |

No credit card required.

45 |
46 |
47 | 48 |
49 |
50 |
51 |
52 |
53 |

A fully customizable code snippet editor

54 |

Fully customize the color scheme of your code snippet, or use our own premade color schemes. Export your code snippets in JPG, PDF, PNG, or any of the other 10+ common extensions.

55 | Get started - it's free 56 |
57 |
58 | 59 |
60 |
61 |
62 | 73 |
74 | 75 | 76 | 77 | 78 | -------------------------------------------------------------------------------- /snipper-landing-page/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector(".page-header__hamburger"); 2 | const hamburgerIcon = hamburger.querySelector(".material-icons"); 3 | const nav = document.querySelector(".page-header__nav"); 4 | 5 | hamburger.addEventListener("click", () => { 6 | if (hamburgerIcon.innerText === "menu") { 7 | hamburgerIcon.innerText = "close"; 8 | } 9 | else { 10 | hamburgerIcon.innerText = "menu"; 11 | } 12 | 13 | nav.classList.toggle("active"); 14 | }); 15 | -------------------------------------------------------------------------------- /spense-landing-page/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Cabin 30 | 31 | ### Mobile Navigation Interaction (New) 32 | 33 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 34 | -------------------------------------------------------------------------------- /spense-landing-page/assets/checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spense-landing-page/assets/dribbble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/dribbble.png -------------------------------------------------------------------------------- /spense-landing-page/assets/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/facebook.png -------------------------------------------------------------------------------- /spense-landing-page/assets/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/google.png -------------------------------------------------------------------------------- /spense-landing-page/assets/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /spense-landing-page/assets/hero-image-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/hero-image-desktop.png -------------------------------------------------------------------------------- /spense-landing-page/assets/hero-image-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/hero-image-mobile.png -------------------------------------------------------------------------------- /spense-landing-page/assets/hero-image-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/hero-image-tablet.png -------------------------------------------------------------------------------- /spense-landing-page/assets/phone-mockup-desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/phone-mockup-desktop.png -------------------------------------------------------------------------------- /spense-landing-page/assets/phone-mockup-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/phone-mockup-mobile.png -------------------------------------------------------------------------------- /spense-landing-page/assets/phone-mockup-tablet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/phone-mockup-tablet.png -------------------------------------------------------------------------------- /spense-landing-page/assets/pinterest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/pinterest.png -------------------------------------------------------------------------------- /spense-landing-page/assets/reddit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/reddit.png -------------------------------------------------------------------------------- /spense-landing-page/assets/slack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/slack.png -------------------------------------------------------------------------------- /spense-landing-page/assets/text-editor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/text-editor.png -------------------------------------------------------------------------------- /spense-landing-page/assets/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/twitter.png -------------------------------------------------------------------------------- /spense-landing-page/assets/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/assets/youtube.png -------------------------------------------------------------------------------- /spense-landing-page/design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /spense-landing-page/design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /spense-landing-page/design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/spense-landing-page/design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /spense-landing-page/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector(".page-header__hamburger"); 2 | const hamburgerIcon = hamburger.querySelector(".material-icons"); 3 | const mobileNav = document.querySelector(".mobile-nav"); 4 | 5 | hamburger.addEventListener("click", () => { 6 | if (hamburgerIcon.innerText === "menu") { 7 | hamburgerIcon.innerText = "close"; 8 | } 9 | else { 10 | hamburgerIcon.innerText = "menu"; 11 | } 12 | 13 | mobileNav.classList.toggle("active"); 14 | }); 15 | -------------------------------------------------------------------------------- /subway-multistep-form-template/Assets/Folder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #1) - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #1) - Desktop View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #1) - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #1) - Mobile View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #1) - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #1) - Tablet View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #2) - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #2) - Desktop View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #2) - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #2) - Mobile View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #2) - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #2) - Tablet View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #3) - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #3) - Desktop View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #3) - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #3) - Mobile View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #3) - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #3) - Tablet View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #4) - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #4) - Desktop View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #4) - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #4) - Mobile View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/Design/Form (Step #4) - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/subway-multistep-form-template/Design/Form (Step #4) - Tablet View.png -------------------------------------------------------------------------------- /subway-multistep-form-template/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Open+Sans -------------------------------------------------------------------------------- /subway-multistep-form-template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Full Name | Subway MultiStep Form 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 23 |
24 |
25 |
26 |
27 | 1 28 |

Full Name

29 |
30 |
31 | 2 32 |

Personal Information

33 |
34 |
35 | 3 36 |

Identification

37 |
38 |
39 | 4 40 |

Your QR Code

41 |
42 |
43 |
44 |

Using the Subway has never been easier!

45 |

Complete the sign up process and receive a QR code to use the Subway anywhere in the U.S.

46 |
47 |
48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 | 60 | 61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 | 81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /subway-multistep-form-template/multi-step-form-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Personal Info | Subway MultiStep Form 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 23 |
24 |
25 |
26 |
27 | 1 28 |

Full Name

29 |
30 |
31 | 2 32 |

Personal Information

33 |
34 |
35 | 3 36 |

Identification

37 |
38 |
39 | 4 40 |

Your QR Code

41 |
42 |
43 |
44 |

Enter Your Personal Information

45 |

This is used to match what you wrote to confirm your identity. This is required by law.

46 |
47 |
48 |
49 |
50 |
51 | 52 | 53 |
54 |
55 | 56 | 57 |
58 |
59 | 60 | 61 |
62 |
63 |
64 | 65 |
66 |
67 |
68 |
69 | 81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /subway-multistep-form-template/multi-step-form-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Identification | Subway MultiStep Form 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 23 |
24 |
25 |
26 |
27 | 1 28 |

Full Name

29 |
30 |
31 | 2 32 |

Personal Information

33 |
34 |
35 | 3 36 |

Identification

37 |
38 |
39 | 4 40 |

Your QR Code

41 |
42 |
43 |
44 |

Upload identification

45 |

Acceptable forms of identification are ID, Driver's License, or College ID.

46 |
47 |
48 |
49 |
50 |
51 |
52 | 53 | Drag and drop an image of your ID here 54 |
55 | 56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 | 76 |
77 | 78 | 79 | -------------------------------------------------------------------------------- /subway-multistep-form-template/multi-step-form-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | QR Code | Subway MultiStep Form 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 23 |
24 |
25 |
26 |
27 | 1 28 |

Full Name

29 |
30 |
31 | 2 32 |

Personal Information

33 |
34 |
35 | 3 36 |

Identification

37 |
38 |
39 | 4 40 |

Your QR Code

41 |
42 |
43 |
44 |

Here's your QR Code!

45 |

Scan this code the next time you're in the Sunway, you will not need to pay for tickets.

46 |
47 |
48 |
49 |
50 |
51 | 52 |
53 |
54 |
55 |
56 |
57 | 69 |
70 | 71 | 72 | -------------------------------------------------------------------------------- /time-now-template/Assets/Checkmark.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /time-now-template/Assets/Hamburger Menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /time-now-template/Assets/Logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /time-now-template/Assets/Mockup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/Mockup.png -------------------------------------------------------------------------------- /time-now-template/Assets/Shield.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /time-now-template/Assets/UA1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA1.png -------------------------------------------------------------------------------- /time-now-template/Assets/UA2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA2.png -------------------------------------------------------------------------------- /time-now-template/Assets/UA3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA3.png -------------------------------------------------------------------------------- /time-now-template/Assets/UA4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA4.png -------------------------------------------------------------------------------- /time-now-template/Assets/UA5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA5.png -------------------------------------------------------------------------------- /time-now-template/Assets/UA6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA6.png -------------------------------------------------------------------------------- /time-now-template/Assets/UA7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA7.png -------------------------------------------------------------------------------- /time-now-template/Assets/UA8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Assets/UA8.png -------------------------------------------------------------------------------- /time-now-template/Design/Landing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Design/Landing Page - Desktop View.png -------------------------------------------------------------------------------- /time-now-template/Design/Landing Page - Mobile View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Design/Landing Page - Mobile View.png -------------------------------------------------------------------------------- /time-now-template/Design/Landing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Design/Landing Page - Tablet View.png -------------------------------------------------------------------------------- /time-now-template/Design/Pricing Page - Desktop View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Design/Pricing Page - Desktop View.png -------------------------------------------------------------------------------- /time-now-template/Design/Pricing Page - Mobile view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Design/Pricing Page - Mobile view.png -------------------------------------------------------------------------------- /time-now-template/Design/Pricing Page - Tablet View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/time-now-template/Design/Pricing Page - Tablet View.png -------------------------------------------------------------------------------- /time-now-template/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | https://fonts.google.com/specimen/Inter 30 | -------------------------------------------------------------------------------- /time-now-template/pricing-script.js: -------------------------------------------------------------------------------- 1 | const root = document.querySelector(":root") 2 | const toggle = document.querySelector(".pricing-main__plans-toggle-body") 3 | const inp = document.querySelector("input") 4 | const innerCircle = document.querySelector(".inner-circle") 5 | const price = document.querySelectorAll(".price") 6 | let monthlyPrices = [4, 12, 7] 7 | let yearlyPrices = [3, 10, 6] 8 | 9 | const hamburgerIcon = document.querySelector(".pricing-header__mobile-menu") 10 | const mobileNav = document.querySelector(".mobile-nav") 11 | const overlay = document.querySelector(".overlay") 12 | const closeIcon = document.querySelector(".mobile-nav__close-icon") 13 | const html = document.querySelector("html") 14 | 15 | /* Toggle switch functionality */ 16 | window.addEventListener("load", () => { 17 | inp.checked = false 18 | monthlyYearlyPrices() 19 | }) 20 | 21 | toggle.addEventListener("change", () => { 22 | if (!inp.checked) { 23 | monthly() 24 | } else { 25 | yearly() 26 | } 27 | }) 28 | 29 | function monthly() { 30 | innerCircle.classList.replace("inner-circle--end", "inner-circle--start") 31 | root.style.setProperty("--pseudo-before-color", "#252525") 32 | root.style.setProperty("--pseudo-after-color", "#425466") 33 | monthlyYearlyPrices() 34 | } 35 | 36 | function yearly() { 37 | innerCircle.classList.replace("inner-circle--start", "inner-circle--end") 38 | root.style.setProperty("--pseudo-before-color", "#425466") 39 | root.style.setProperty("--pseudo-after-color", "#252525") 40 | monthlyYearlyPrices() 41 | } 42 | 43 | function monthlyYearlyPrices() { 44 | if (!inp.checked) { 45 | price.forEach((item, index) => { 46 | item.innerText = `${monthlyPrices[index]}` 47 | }) 48 | } else { 49 | price.forEach((item, index) => { 50 | item.innerText = `${yearlyPrices[index]}` 51 | }) 52 | } 53 | } 54 | 55 | /* Mobile navigation */ 56 | hamburgerIcon.addEventListener("click", () => { 57 | mobileNav.classList.add("active") 58 | overlay.style.display = "block" 59 | html.style.overflowY = "hidden" 60 | }) 61 | 62 | closeIcon.addEventListener("click", () => { 63 | mobileNav.classList.remove("active") 64 | overlay.style.display = "none" 65 | html.style.overflowY = "auto" 66 | }) 67 | 68 | overlay.addEventListener("click", () => { 69 | overlay.style.display = "none" 70 | mobileNav.classList.remove("active") 71 | html.style.overflowY = "auto" 72 | }) 73 | 74 | window.addEventListener("resize", () => { 75 | if (window.innerWidth >= 992) { 76 | html.style.overflowY = "auto" 77 | } 78 | }) -------------------------------------------------------------------------------- /time-now-template/script.js: -------------------------------------------------------------------------------- 1 | /* Mobile navigation */ 2 | const hamburgerIcon = document.querySelector(".page-header__mobile-menu") 3 | const mobileNav = document.querySelector(".mobile-nav") 4 | const overlay = document.querySelector(".overlay") 5 | const closeIcon = document.querySelector(".mobile-nav__close-icon") 6 | const html = document.querySelector("html") 7 | 8 | hamburgerIcon.addEventListener("click", () => { 9 | mobileNav.classList.add("active") 10 | overlay.style.display = "block" 11 | html.style.overflowY = "hidden" 12 | }) 13 | 14 | closeIcon.addEventListener("click", () => { 15 | mobileNav.classList.remove("active") 16 | overlay.style.display = "none" 17 | html.style.overflowY = "auto" 18 | }) 19 | 20 | overlay.addEventListener("click", () => { 21 | overlay.style.display = "none" 22 | mobileNav.classList.remove("active") 23 | html.style.overflowY = "auto" 24 | }) 25 | 26 | window.addEventListener("resize", () => { 27 | if (window.innerWidth >= 992) { 28 | html.style.overflowY = "auto" 29 | } 30 | }) -------------------------------------------------------------------------------- /unifeed-blog-template/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | 28 | ### Fonts Used 29 | https://fonts.google.com/specimen/Manrope 30 | -------------------------------------------------------------------------------- /unifeed-blog-template/assets/article-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/article-1.png -------------------------------------------------------------------------------- /unifeed-blog-template/assets/article-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/article-2.png -------------------------------------------------------------------------------- /unifeed-blog-template/assets/article-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/article-3.png -------------------------------------------------------------------------------- /unifeed-blog-template/assets/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /unifeed-blog-template/assets/main-article.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/main-article.png -------------------------------------------------------------------------------- /unifeed-blog-template/assets/user-avatar-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/user-avatar-1.png -------------------------------------------------------------------------------- /unifeed-blog-template/assets/user-avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/user-avatar-2.png -------------------------------------------------------------------------------- /unifeed-blog-template/assets/user-avatar-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/user-avatar-3.png -------------------------------------------------------------------------------- /unifeed-blog-template/assets/user-avatar-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/assets/user-avatar-4.png -------------------------------------------------------------------------------- /unifeed-blog-template/design/blog-desktop-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/design/blog-desktop-view.png -------------------------------------------------------------------------------- /unifeed-blog-template/design/blog-mobile-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/design/blog-mobile-view.png -------------------------------------------------------------------------------- /unifeed-blog-template/design/blog-tablet-view.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/unifeed-blog-template/design/blog-tablet-view.png -------------------------------------------------------------------------------- /unifeed-blog-template/script.js: -------------------------------------------------------------------------------- 1 | const hamburger = document.querySelector(".site-header__hamburger"); 2 | const hamburgerIcon = hamburger.querySelector(".material-icons"); 3 | const nav = document.querySelector(".main-nav"); 4 | 5 | hamburger.addEventListener("click", () => { 6 | if (hamburgerIcon.innerText === "menu") { 7 | hamburgerIcon.innerText = "close"; 8 | } 9 | else { 10 | hamburgerIcon.innerText = "menu"; 11 | } 12 | 13 | nav.classList.toggle("active"); 14 | }); 15 | -------------------------------------------------------------------------------- /web-developer-portfolio/Design/Landing-Page-Desktop-View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/web-developer-portfolio/Design/Landing-Page-Desktop-View.png -------------------------------------------------------------------------------- /web-developer-portfolio/Design/Landing-Page-Mobile-View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/web-developer-portfolio/Design/Landing-Page-Mobile-View.png -------------------------------------------------------------------------------- /web-developer-portfolio/Design/Landing-Page-Tablet-View.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/web-developer-portfolio/Design/Landing-Page-Tablet-View.png -------------------------------------------------------------------------------- /web-developer-portfolio/README.md: -------------------------------------------------------------------------------- 1 | 2 | # Welcome to Codewell! 👋 3 | 4 | Codewell's aim is to provide you with real-world design templates that you can use to practice your HTML and CSS projects. 5 | 6 | Free or paid, all templates are high quality and will make great portfolio pieces. 7 | 8 | ### I've completed the challenge, now what? 9 | 10 | We recommend using one of these two websites to deploy your projects 11 | 12 | - [GitHub Pages](https://pages.github.com/) 13 | - [Netlify](https://www.netlify.com/) 14 | 15 | They're super easy to setup and you should have your website up and running in no time, just follow their instructions. 16 | 17 | 18 | ### Submit your solution to Codewell 19 | 20 | Visit the relevant challenge on [Codewell](https://codewell.cc) and click on 'Submit Solution' right under the challenge. 21 | Enter all the title, Github repo URL, Live URL (Netlify or GH Pages), and tell the community what challenges you've faced. 22 | 23 | ### Join our community on Slack 24 | 25 | If you want more real-time communication, you can visit our community on [Slack](https://join.slack.com/t/codewell-hq/shared_invite/zt-ni8c9g8h-gNYWrmqQ3Uh37dcLg9~LMQ). 26 | 27 | ### Fonts Used 28 | 29 | For headings: https://fonts.google.com/specimen/Prata 30 | For body: https://fonts.google.com/specimen/Inter 31 | 32 | ### Mobile Navigation Interaction (New) 33 | 34 | Using [Google Material Icons](https://fonts.google.com/icons) and JavaScript 35 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/icons/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/logos/samsung.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/logos/tinder.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/logos/verizon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/logos/visa.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /web-developer-portfolio/images/spense.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/web-developer-portfolio/images/spense.png -------------------------------------------------------------------------------- /web-developer-portfolio/images/yelpcamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ivobul/codewell-solutions/738915339171fecaaa3e8d7dbcf82b8a895a4002/web-developer-portfolio/images/yelpcamp.png -------------------------------------------------------------------------------- /web-developer-portfolio/script.js: -------------------------------------------------------------------------------- 1 | const mobileIconElem = document.querySelector(".page-header__mobile-icon") 2 | const mobileNavElem = document.querySelector(".page-header__mobile") 3 | 4 | mobileIconElem.addEventListener("click", () => { 5 | if (mobileIconElem.innerText === "menu") { 6 | mobileIconElem.innerText = "close" 7 | } 8 | else { 9 | mobileIconElem.innerText = "menu" 10 | } 11 | 12 | mobileNavElem.classList.toggle("active") 13 | }) 14 | --------------------------------------------------------------------------------