├── .gitignore ├── README.md ├── design ├── active-states.jpg ├── desktop-design.jpg ├── desktop-preview.jpg ├── mobile-design.jpg └── mobile-menu.jpg ├── images ├── bg-pattern-circles.svg ├── bg-pattern-intro.svg ├── favicon-32x32.png ├── icon-arrow-dark.svg ├── icon-arrow-light.svg ├── icon-close.svg ├── icon-hamburger.svg ├── illustration-editor-desktop.svg ├── illustration-editor-mobile.svg ├── illustration-laptop-desktop.svg ├── illustration-laptop-mobile.svg ├── illustration-phones.svg └── logo.svg ├── index.html ├── main.js ├── package.json ├── style-guide.md └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Avoid accidental upload of the Sketch and Figma design files 2 | ##################################################### 3 | ## Please do not remove lines 5 and 6 - thanks! 🙂 ## 4 | ##################################################### 5 | *.sketch 6 | *.fig 7 | 8 | # Avoid accidental XD upload if you convert the design file 9 | ############################################### 10 | ## Please do not remove line 12 - thanks! 🙂 ## 11 | ############################################### 12 | *.xd 13 | 14 | # Avoid your project being littered with annoying .DS_Store files! 15 | .DS_Store 16 | .prettierignore -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Blogr landing page 2 | 3 | This is a solution to the [Blogr landing page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/blogr-landing-page-EX2RLAApP). Frontend Mentor challenges help you improve your coding skills by building realistic projects. 4 | 5 | ## Welcome! 👋 6 | 7 | ## Table of contents 8 | 9 | - [Overview](#overview) 10 | - [The challenge](#the-challenge) 11 | - [Screenshot](#screenshot) 12 | - [Links](#links) 13 | - [My process](#my-process) 14 | - [Built with](#built-with) 15 | - [What I learned](#what-i-learned) 16 | - [Continued development](#continued-development) 17 | - [Author](#author) 18 | 19 | ## Overview 20 | 21 | ### The challenge 22 | 23 | Users should be able to: 24 | 25 | - View the optimal layout for the site depending on their device's screen size 26 | - See hover states for all interactive elements on the page 27 | 28 | ### Screenshot 29 | 30 | ![Blogr landing page coding challenge](./design/desktop-design.jpg) 31 | 32 | ### Links 33 | 34 | - Solution URL: [Solution URL](https://www.frontendmentor.io/solutions/blogr-landing-page-using-html-css-and-js-uEuPVH-N4) 35 | - Live Site URL: [Live site URL](https://blogr-landing-page-eight.vercel.app/) 36 | 37 | ## My process 38 | 39 | ### Built with 40 | 41 | - Semantic HTML5 markup 42 | - CSS custom properties 43 | - Flexbox 44 | - Desktop-first workflow then Mobile 45 | - Vanilla JS for mobile navigation toggle 46 | 47 | ### What I learned 48 | 49 | The dropdown menu is the highlight of my learning while working through this project. This is something I have never worked on before and had no prior knowledge how to go about it. I had to do a little research (Stackover flow to the rescue... lol). At the end, I was a able to complete the dropdown menu using just HTML and CSS- no JS. 50 | 51 | I faced a little challenge having a background color and a background image for a parent container. Below is a code snippet of how I was able to achieve it. 52 | 53 | ```css 54 | .header{ 55 | width: 100%; 56 | height: 100vh; 57 | position: relative; 58 | background: url(images/bg-pattern-intro.svg); 59 | background-position: center; 60 | background-size: 150%; 61 | padding: 4rem 10rem; 62 | border-bottom-left-radius: 6rem; 63 | background-repeat: no-repeat; 64 | background-color: hsl(353, 100%, 62%); 65 | } 66 | ``` 67 | 68 | ### Continued development 69 | 70 | While working through this project, I noticed I still needed to perfect using JS for mobile navigation toggle. I believe I can make a smoother transition for the mobile navigation toggle. So, I'll be working on that for the next couple of days. 71 | 72 | ## Author 73 | 74 | - Website - [Github/Uzoway](https://github.com/uzoway) 75 | - Frontend Mentor - [@uzoway](https://www.frontendmentor.io/profile/uzoway) 76 | - Twitter - [@Uzoway_](https://twitter.com/Uzoway_) 77 | 78 | Thanks for checking out this project. -------------------------------------------------------------------------------- /design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uzoway/blogr-landing-page/94ccdab51bbae2070d6fdb933efd52f6ff43b721/design/active-states.jpg -------------------------------------------------------------------------------- /design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uzoway/blogr-landing-page/94ccdab51bbae2070d6fdb933efd52f6ff43b721/design/desktop-design.jpg -------------------------------------------------------------------------------- /design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uzoway/blogr-landing-page/94ccdab51bbae2070d6fdb933efd52f6ff43b721/design/desktop-preview.jpg -------------------------------------------------------------------------------- /design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uzoway/blogr-landing-page/94ccdab51bbae2070d6fdb933efd52f6ff43b721/design/mobile-design.jpg -------------------------------------------------------------------------------- /design/mobile-menu.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uzoway/blogr-landing-page/94ccdab51bbae2070d6fdb933efd52f6ff43b721/design/mobile-menu.jpg -------------------------------------------------------------------------------- /images/bg-pattern-circles.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/bg-pattern-intro.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/uzoway/blogr-landing-page/94ccdab51bbae2070d6fdb933efd52f6ff43b721/images/favicon-32x32.png -------------------------------------------------------------------------------- /images/icon-arrow-dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-arrow-light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-close.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/icon-hamburger.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-editor-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-editor-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-laptop-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-laptop-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/illustration-phones.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Blogr landing page 11 | 12 | 13 | 14 | 15 |
16 |
17 | Blogr logo 18 | 54 | 58 | hamburger 59 |
60 | 61 |
62 |

A modern publishing platform

63 |

Grow your audience and build your online brand

64 | 68 |
69 |
70 | 71 | 72 |
73 | 122 |
123 | 124 | 125 |
126 |

Designed for the future

127 |
128 |
129 |

Introducing an extensible editor

130 |

Blogr features an exceedingly intuitive interface which lets you focus on one thing: creating content. 131 | The editor supports management of multiple blogs and allows easy manipulation of embeds such as images, 132 | videos, and Markdown. Extensibility with plugins and themes provide easy ways to add functionality or 133 | change the looks of a blog 134 |

135 |

Robust content management

136 |

Flexible content management enables users to easily move through posts. Increase the usability of your blog 137 | by adding customized categories, sections, format, or flow. With this functionality, you’re in full control. 138 |

139 |
140 |
141 | editor illustration 142 | editor illustration 143 |
144 |
145 |
146 | 147 | 148 |
149 |
150 | phone illustration 151 | circle pattern 152 |
153 |
154 |

State of the Art Infrastructure

155 |

With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast connectivity. 156 | This ensures your site will load instantly, no matter where your readers are, keeping your site competitive. 157 |

158 |
159 |
160 | 161 | 162 |
163 |
164 | laptop illustration 165 | laptop illustration 166 |
167 |
168 |
Free, open, simple
169 |

Blogr is a free and open source application backed by a large community of helpful developers. It supports 170 | features such as code syntax highlighting, RSS feeds, social media integration, third-party commenting tools, 171 | and works seamlessly with Google Analytics. The architecture is clean and is relatively easy to learn. 172 |

173 |
Powerful tooling
174 |

Batteries included. We built a simple and straightforward CLI tool that makes customization and deployment a breeze, but 175 | capable of producing even the most complicated sites. 176 |

177 |
178 |
179 | 180 | 181 | 218 | 219 | 220 | 221 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("mobilemenu"); 2 | var mobilenav = document.getElementById("mobilenav"); 3 | 4 | mobilenav.style.left = "-100%"; 5 | 6 | btn.onclick = function(){ 7 | if(mobilenav.style.left == "-100%"){ 8 | mobilenav.style.left = "50%"; 9 | btn.src = "images/icon-close.svg"; 10 | } 11 | 12 | else{ 13 | mobilenav.style.left = "-100%"; 14 | btn.src = "images/icon-hamburger.svg"; 15 | } 16 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "blogr-landing-page", 3 | "version": "1.0.0", 4 | "description": "Modern publishing platform", 5 | "main": "main.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/uzoway/blogr-landing-page.git" 12 | }, 13 | "author": "Uzochukwu", 14 | "license": "ISC", 15 | "bugs": { 16 | "url": "https://github.com/uzoway/blogr-landing-page/issues" 17 | }, 18 | "homepage": "https://github.com/uzoway/blogr-landing-page#readme" 19 | } 20 | -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Front-end Style Guide 2 | 3 | ## Layout 4 | 5 | The designs were created to the following widths: 6 | 7 | - Mobile: 375px 8 | - Desktop: 1440px 9 | 10 | ## Colors 11 | 12 | ### Primary 13 | 14 | - Light red (CTA text): hsl(356, 100%, 66%) 15 | - Very light red (CTA hover background): hsl(355, 100%, 74%) 16 | - Very dark blue (headings): hsl(208, 49%, 24%) 17 | 18 | ### Neutral 19 | 20 | - White (text): hsl(0, 0%, 100%) 21 | - Grayish blue (footer text): hsl(240, 2%, 79%) 22 | - Very dark grayish blue (body copy): hsl(207, 13%, 34%) 23 | - Very dark black blue (footer background): hsl(240, 10%, 16%) 24 | 25 | ### Gradient 26 | 27 | Background gradient - Intro/CTA mobile nav: 28 | 29 | - Very light red: hsl(13, 100%, 72%) 30 | - Light red: hsl(353, 100%, 62%) 31 | 32 | Background gradient - body: 33 | 34 | - Very dark gray blue: hsl(237, 17%, 21%) 35 | - Very dark desaturated blue: hsl(237, 23%, 32%) 36 | 37 | ## Typography 38 | 39 | ### Body Copy 40 | 41 | - Font size: 16px 42 | 43 | ### Fonts 44 | 45 | - Family: [Overpass](https://fonts.google.com/specimen/Overpass?preview.text_type=custom) 46 | - Weights: 300, 600 47 | 48 | - Family: [Ubuntu](https://fonts.google.com/specimen/Ubuntu?preview.text_type=custom) 49 | - Weights: 400, 500, 700 50 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-size: 16px; 6 | } 7 | 8 | body,html{ 9 | overflow-x: hidden; 10 | background: hsl(0, 26%, 96%); 11 | } 12 | 13 | /** Header starts here **/ 14 | 15 | .header{ 16 | width: 100%; 17 | height: 100vh; 18 | position: relative; 19 | background: url(images/bg-pattern-intro.svg); 20 | background-position: center; 21 | background-size: 150%; 22 | padding: 4rem 10rem; 23 | border-bottom-left-radius: 6rem; 24 | background-repeat: no-repeat; 25 | background-color: hsl(353, 100%, 62%); 26 | } 27 | 28 | .header .navigation{ 29 | display: flex; 30 | align-items: center; 31 | } 32 | 33 | .header .navigation .site-nav{ 34 | flex: 1; 35 | margin-left: 3.5rem; 36 | display: flex; 37 | align-items: center; 38 | } 39 | 40 | .header .navigation .site-nav li{ 41 | margin-right: 1.5rem; 42 | list-style: none; 43 | position: relative; 44 | } 45 | 46 | .header .navigation .site-nav li a{ 47 | text-decoration: none; 48 | color: hsl(0, 0%, 100%); 49 | cursor: pointer; 50 | transition: 1s; 51 | font-family: 'Ubuntu', sans-serif; 52 | } 53 | 54 | .header .navigation .site-nav li a:hover{ 55 | text-decoration: underline; 56 | } 57 | 58 | .header .navigation .site-nav li img{ 59 | margin-left: .5rem; 60 | transition: .5s; 61 | } 62 | 63 | .header .navigation .site-nav li:hover img{ 64 | transform: rotate(-180deg); 65 | } 66 | 67 | .header .navigation .site-nav li .dropdown-menu{ 68 | display: none; 69 | transition: .5s; 70 | z-index: 10; 71 | } 72 | 73 | .header .navigation .site-nav li:hover .dropdown-menu{ 74 | display: block; 75 | } 76 | 77 | .header .navigation .site-nav li .dropdown-menu ul{ 78 | position: absolute; 79 | margin-top: .2rem; 80 | margin-left: -2rem; 81 | background: hsl(0, 0%, 100%); 82 | padding: 1.5rem; 83 | text-align: left; 84 | border-radius: 5px; 85 | box-shadow: 0 0 15px 3px rgba(0, 0, 0, 0.4); 86 | } 87 | 88 | .header .navigation .site-nav li .dropdown-menu ul li{ 89 | display: block; 90 | margin-bottom: 1rem; 91 | } 92 | 93 | .header .navigation .site-nav li .dropdown-menu ul li:last-child{ 94 | margin-bottom: 0; 95 | } 96 | 97 | .header .navigation .site-nav li .dropdown-menu ul li a{ 98 | color: hsl(240, 0%, 56%); 99 | transition: .5s; 100 | cursor: pointer; 101 | text-decoration: none; 102 | } 103 | 104 | .header .navigation .site-nav li .dropdown-menu ul li a:hover{ 105 | color: hsl(0, 0%, 5%); 106 | } 107 | 108 | .header .navigation .register{ 109 | display: flex; 110 | align-items: center; 111 | } 112 | 113 | .header .navigation .register li{ 114 | margin-left: 2rem; 115 | list-style: none; 116 | } 117 | 118 | .header .navigation .register li a{ 119 | text-decoration: none; 120 | color: hsl(0, 0%, 100%); 121 | cursor: pointer; 122 | font-weight: 700; 123 | font-size: 0.9rem; 124 | font-family: 'Ubuntu', sans-serif; 125 | } 126 | 127 | .header .navigation .register li .signup{ 128 | padding: .8rem 2.5rem; 129 | background: hsl(0, 0%, 100%); 130 | color: hsl(356, 100%, 66%); 131 | border: none; 132 | border-radius: 2rem; 133 | transition: .5s; 134 | } 135 | 136 | .header .navigation .register li .signup:hover{ 137 | background: hsl(355, 100%, 74%); 138 | color: hsl(0, 0%, 100%); 139 | } 140 | 141 | .header .navigation #mobilemenu{ 142 | display: none; 143 | } 144 | 145 | .header .header-content{ 146 | position: absolute; 147 | top: 50%; 148 | left: 50%; 149 | transform: translate(-50%, -50%); 150 | text-align: center; 151 | width: 100%; 152 | } 153 | 154 | .header .header-content h1{ 155 | font-size: 3.5rem; 156 | color: hsl(0, 0%, 100%); 157 | margin-bottom: 1rem; 158 | font-family: 'Overpass', sans-serif; 159 | } 160 | 161 | .header .header-content p{ 162 | font-size: 1.2rem; 163 | color: hsl(0, 0%, 100%); 164 | margin-bottom: 3rem; 165 | font-family: 'Ubuntu', sans-serif; 166 | font-weight: 400; 167 | } 168 | 169 | .header .header-content .header-content-links{ 170 | display: flex; 171 | align-items: center; 172 | justify-content: center; 173 | } 174 | 175 | .header .header-content .header-content-links li{ 176 | list-style: none; 177 | margin: 0 .5rem; 178 | } 179 | 180 | .header .header-content .header-content-links li a{ 181 | text-decoration: none; 182 | padding: .7rem 1.5rem; 183 | cursor: pointer; 184 | font-size: .9rem; 185 | font-weight: 700; 186 | font-family: 'Ubuntu', sans-serif; 187 | } 188 | 189 | .header .header-content .header-content-links li .start{ 190 | background: hsl(0, 0%, 100%); 191 | color: hsl(353, 100%, 62%); 192 | border-radius: 2rem; 193 | transition: .5s; 194 | } 195 | 196 | .header .header-content .header-content-links li .start:hover{ 197 | background: hsl(355, 100%, 74%); 198 | color: hsl(0, 0%, 100%); 199 | } 200 | 201 | .header .header-content .header-content-links li .learn{ 202 | background: transparent; 203 | color: hsl(0, 0%, 100%); 204 | border-radius: 2rem; 205 | transition: .5s; 206 | border: 1px solid hsl(0, 0%, 100%); 207 | } 208 | 209 | .header .header-content .header-content-links li .learn:hover{ 210 | background: hsl(0, 0%, 100%); 211 | color: hsl(355, 100%, 74%); 212 | } 213 | 214 | .mobilenav{ 215 | display: none; 216 | } 217 | 218 | /** Blogr Description starts here **/ 219 | 220 | .description{ 221 | width: 100%; 222 | min-height: 100vh; 223 | position: relative; 224 | padding: 10rem 0 3rem 10rem; 225 | background: hsl(0, 26%, 96%); 226 | z-index: 2; 227 | } 228 | 229 | .description h2{ 230 | font-size: 2.5rem; 231 | color: hsl(208, 49%, 24%); 232 | text-align: center; 233 | margin-bottom: -4rem; 234 | font-family: 'Overpass', sans-serif; 235 | font-weight: 700; 236 | } 237 | 238 | .description .description-content{ 239 | width: 100%; 240 | display: flex; 241 | align-items: center; 242 | position: relative; 243 | } 244 | 245 | .description .description-content .description-content-leftcolumn{ 246 | flex-basis: 50%; 247 | } 248 | 249 | .description .description-content .description-content-leftcolumn h3{ 250 | font-size: 1.8rem; 251 | color: hsl(208, 49%, 24%); 252 | margin-bottom: 2.5rem; 253 | font-family: 'Overpass', sans-serif; 254 | font-weight: 700; 255 | } 256 | 257 | .description .description-content .description-content-leftcolumn p{ 258 | font-size: 1.2rem; 259 | margin-bottom: 3rem; 260 | font-family: 'Overpass', sans-serif; 261 | font-weight: 300; 262 | } 263 | 264 | .description .description-content .description-content-rightcolumn{ 265 | position: relative; 266 | flex-basis: 50%; 267 | } 268 | 269 | .description .description-content .description-content-rightcolumn .desktop-editor{ 270 | width: 150%; 271 | position: relative; 272 | } 273 | 274 | .description .description-content .description-content-rightcolumn .mobile-editor{ 275 | display: none; 276 | } 277 | 278 | /** Services starts here **/ 279 | 280 | .services{ 281 | width: 100%; 282 | padding: 8rem 10rem; 283 | position: relative; 284 | background: hsl(237, 17%, 21%); 285 | display: flex; 286 | align-items: center; 287 | justify-content: space-between; 288 | border-top-right-radius: 6rem; 289 | border-bottom-left-radius: 6rem; 290 | } 291 | 292 | .services .services-rightcolumn{ 293 | flex-basis: 50%; 294 | } 295 | 296 | .services .services-rightcolumn h4{ 297 | font-size: 2.3rem; 298 | color: hsl(0, 0%, 100%); 299 | margin-bottom: 2rem; 300 | font-family: 'Overpass', sans-serif; 301 | font-weight: 600; 302 | } 303 | 304 | .services .services-rightcolumn p{ 305 | font-size: 1.1rem; 306 | color: hsl(0, 0%, 100%); 307 | font-family: 'Overpass', sans-serif; 308 | font-weight: 300; 309 | line-height: 1.9rem; 310 | } 311 | 312 | .services .services-leftcolumn{ 313 | flex-basis: 40%; 314 | position: relative; 315 | background-image: url(images/illustration-phones.svg); 316 | background-position: center; 317 | background-size: cover; 318 | } 319 | 320 | .services .services-leftcolumn .phone{ 321 | position: absolute; 322 | left: -5rem; 323 | top: -16rem; 324 | z-index: 3; 325 | } 326 | 327 | .services .services-leftcolumn .circle-pattern{ 328 | position: absolute; 329 | left: -25rem; 330 | top: -50rem; 331 | z-index: 1; 332 | width: 250%; 333 | } 334 | 335 | /** Features starts here **/ 336 | 337 | .features{ 338 | width: 100%; 339 | position: relative; 340 | padding: 15rem 10rem 15rem 0; 341 | display: flex; 342 | align-items: center; 343 | justify-content: space-between; 344 | background: hsl(0, 26%, 96%); 345 | z-index: 2; 346 | } 347 | 348 | .features .features-leftcolumn{ 349 | flex-basis: 50%; 350 | position: relative; 351 | } 352 | 353 | .features .features-leftcolumn .desktop-illustration{ 354 | width: 150%; 355 | position: absolute; 356 | top: 50%; 357 | transform: translateY(-50%); 358 | left: -16rem; 359 | } 360 | 361 | .features .features-leftcolumn .mobile-illustration{ 362 | display: none; 363 | } 364 | 365 | .features .features-rightcolumn{ 366 | flex-basis: 40%; 367 | position: relative; 368 | } 369 | 370 | .features .features-rightcolumn h5{ 371 | font-size: 1.8rem; 372 | color: hsl(208, 49%, 24%); 373 | margin-bottom: 1.5rem; 374 | font-family: 'Overpass', sans-serif; 375 | font-weight: 700; 376 | } 377 | 378 | .features .features-rightcolumn p{ 379 | font-size: .95rem; 380 | color: hsl(208, 49%, 24%); 381 | margin-bottom: 3rem; 382 | font-family: 'Overpass', sans-serif; 383 | font-weight: 300; 384 | line-height: 2.1rem; 385 | } 386 | 387 | /** Footer starts here **/ 388 | 389 | footer{ 390 | width: 100%; 391 | padding: 4rem 10rem 6rem; 392 | background: hsl(240, 10%, 16%); 393 | display: flex; 394 | justify-content: space-between; 395 | position: relative; 396 | border-top-right-radius: 6rem; 397 | } 398 | 399 | footer .footer-box{ 400 | flex-basis: 20%; 401 | } 402 | 403 | footer .footer-box h6{ 404 | font-size: 1rem; 405 | color: hsl(0, 0%, 100%); 406 | margin-bottom: 2rem; 407 | font-family: 'Ubuntu', sans-serif; 408 | font-weight: 500; 409 | } 410 | 411 | footer .footer-box ul li{ 412 | list-style: none; 413 | margin-bottom: 1rem; 414 | } 415 | 416 | footer .footer-box ul li a{ 417 | text-decoration: none; 418 | color: hsl(240, 2%, 79%); 419 | font-size: 1rem; 420 | transition: .5s; 421 | cursor: pointer; 422 | font-family: 'Ubuntu', sans-serif; 423 | font-weight: 400; 424 | } 425 | 426 | footer .footer-box ul li a:hover{ 427 | text-decoration: underline; 428 | } 429 | 430 | footer .attribution{ 431 | position: absolute; 432 | bottom: 3rem; 433 | left: 50%; 434 | transform: translateX(-50%); 435 | color: hsl(240, 2%, 79%); 436 | font-family: 'Ubuntu', sans-serif; 437 | font-weight: 400; 438 | } 439 | 440 | footer .attribution a{ 441 | text-decoration: none; 442 | color: hsl(0, 0%, 100%); 443 | font-family: 'Ubuntu', sans-serif; 444 | font-weight: 400; 445 | } 446 | 447 | /** Responsive Design starts here **/ 448 | 449 | @media (max-width: 991px){ 450 | .header{ 451 | background: url(images/bg-pattern-intro.svg); 452 | background-position: center; 453 | background-size: 400%; 454 | padding: 4rem 1.5rem; 455 | background-color: hsl(353, 100%, 62%); 456 | } 457 | 458 | .header .navigation{ 459 | justify-content: space-between; 460 | } 461 | 462 | .header .navigation .site-nav{ 463 | display: none; 464 | } 465 | 466 | .header .navigation .register{ 467 | display: none; 468 | } 469 | 470 | .header .header-content .header-content-links li .start{ 471 | padding: 1rem; 472 | font-size: .8rem; 473 | display: block; 474 | } 475 | 476 | .header .header-content .header-content-links li .learn{ 477 | padding: 1rem; 478 | font-size: .8rem; 479 | display: block; 480 | } 481 | 482 | .header .navigation #mobilemenu{ 483 | display: block; 484 | } 485 | 486 | .header .header-content{ 487 | padding: 0 1.5rem; 488 | } 489 | 490 | .header .header-content h1{ 491 | font-size: 2.3rem; 492 | } 493 | 494 | .header .header-content p{ 495 | margin-bottom: 4rem; 496 | } 497 | 498 | .header .header-content .header-content-links li a{ 499 | padding: 1.2rem 1.5rem; 500 | font-size: 1rem; 501 | } 502 | 503 | .description{ 504 | padding: 4rem 2rem 8rem; 505 | } 506 | 507 | .description h2{ 508 | font-size: 1.8rem; 509 | margin-bottom: 2rem; 510 | } 511 | 512 | .description .description-content{ 513 | flex-wrap: wrap; 514 | } 515 | 516 | .description .description-content .description-content-rightcolumn { 517 | position: relative; 518 | flex-basis: 100%; 519 | order: 1; 520 | display: flex; 521 | align-items: center; 522 | justify-content: center; 523 | } 524 | 525 | .description .description-content .description-content-rightcolumn .desktop-editor{ 526 | display: none; 527 | } 528 | 529 | .description .description-content .description-content-rightcolumn .mobile-editor{ 530 | display: block; 531 | width: 110%; 532 | margin-bottom: 1.5rem; 533 | } 534 | 535 | .description .description-content .description-content-leftcolumn { 536 | flex-basis: 100%; 537 | order: 2; 538 | text-align: center; 539 | margin-bottom: 3rem; 540 | } 541 | 542 | .description .description-content .description-content-leftcolumn h3{ 543 | margin-bottom: 1rem; 544 | } 545 | 546 | .description .description-content .description-content-leftcolumn p{ 547 | font-size: 1.1rem; 548 | margin-bottom: 3rem; 549 | } 550 | 551 | .services{ 552 | padding: 8rem 2rem; 553 | flex-wrap: wrap; 554 | justify-content: space-between; 555 | } 556 | 557 | .services .services-rightcolumn{ 558 | flex-basis: 100%; 559 | text-align: center; 560 | margin-top: 6rem; 561 | } 562 | 563 | .services .services-leftcolumn .phone{ 564 | position: absolute; 565 | left: 125%; 566 | transform: translateX(-50%); 567 | top: -19rem; 568 | z-index: 3; 569 | width: 375px; 570 | } 571 | 572 | .features{ 573 | padding: 4rem 2rem; 574 | flex-wrap: wrap; 575 | } 576 | 577 | .features .features-leftcolumn{ 578 | flex-basis: 100%; 579 | display: flex; 580 | align-items: center; 581 | justify-content: center; 582 | } 583 | 584 | .features .features-leftcolumn .desktop-illustration{ 585 | display: none; 586 | } 587 | 588 | .features .features-leftcolumn .mobile-illustration{ 589 | display: block; 590 | width: 130%; 591 | margin-bottom: 1.5rem; 592 | } 593 | 594 | .features .features-rightcolumn{ 595 | flex-basis: 100%; 596 | text-align: center; 597 | } 598 | 599 | .features .features-rightcolumn h5{ 600 | font-size: 1.7rem; 601 | } 602 | 603 | footer{ 604 | padding: 4rem 0 6rem; 605 | flex-wrap: wrap; 606 | } 607 | 608 | footer .footer-box{ 609 | flex-basis: 100%; 610 | text-align: center; 611 | margin-bottom: 3rem; 612 | } 613 | 614 | footer .attribution{ 615 | font-size: .9rem; 616 | } 617 | 618 | footer .attribution a{ 619 | font-size: .9rem; 620 | } 621 | 622 | #mobilenav{ 623 | display: block; 624 | position: absolute; 625 | top: 8.5rem; 626 | left: 50%; 627 | transform: translateX(-50%); 628 | width: 85%; 629 | padding: 2rem 1.5rem; 630 | background: hsl(0, 0%, 100%); 631 | box-shadow: 0 0 30px 3px rgba(0, 0, 0, 0.3); 632 | text-align: center; 633 | border: none; 634 | border-radius: .5rem; 635 | z-index: 10; 636 | transition: .5s; 637 | } 638 | 639 | .mobilenav ul li{ 640 | list-style: none; 641 | margin-bottom: 2rem; 642 | display: flex; 643 | align-items: center; 644 | justify-content: center; 645 | } 646 | 647 | .mobilenav ul li a{ 648 | text-decoration: none; 649 | color: hsl(240, 10%, 16%); 650 | font-size: 1.2rem; 651 | font-weight: 300; 652 | font-family: 'Ubuntu', sans-serif; 653 | font-weight: 400; 654 | } 655 | 656 | .mobilenav ul li img{ 657 | margin-left: .5rem; 658 | transition: .5s; 659 | } 660 | 661 | .mobilenav ul li:nth-child(3){ 662 | position: relative; 663 | } 664 | 665 | .mobilenav ul li:hover img{ 666 | transform: rotate(-180deg); 667 | } 668 | 669 | .mobilenav ul .connect{ 670 | display: flex; 671 | flex-direction: column; 672 | align-items: center; 673 | } 674 | 675 | .mobilenav ul .connect .connect-text{ 676 | display: flex; 677 | align-items: center; 678 | } 679 | 680 | .mobilenav ul .connect .dropdown-menu-mobile{ 681 | background: hsl(0, 10%, 92%); 682 | padding: 1.5rem 0; 683 | width: 100%; 684 | border-radius: .5rem; 685 | display: none; 686 | transition: 2s; 687 | } 688 | 689 | .mobilenav ul .connect:hover .dropdown-menu-mobile{ 690 | display: block; 691 | } 692 | 693 | .mobilenav ul .connect .dropdown-menu-mobile li:last-child{ 694 | margin-bottom: 0; 695 | } 696 | 697 | .mobilenav ul hr{ 698 | display: block; 699 | border: none; 700 | border-top: 1px solid hsl(0, 4%, 85%); 701 | margin: 2rem auto 2rem; 702 | width: 100%; 703 | } 704 | 705 | .mobilenav ul .signup{ 706 | margin-bottom: 0; 707 | } 708 | 709 | .mobilenav ul .signup a{ 710 | padding: .8rem 2.5rem; 711 | background: linear-gradient(90deg, hsl(13, 100%, 72%), hsl(353, 100%, 62%)); 712 | color: hsl(0, 0%, 100%); 713 | border-radius: 2rem; 714 | transition: .5s; 715 | font-family: 'Ubuntu', sans-serif; 716 | font-weight: 400; 717 | } 718 | 719 | .mobilenav ul .signup a:hover{ 720 | background: linear-gradient(90deg, hsl(353, 100%, 62%), hsl(13, 100%, 72%)); 721 | } 722 | } 723 | 724 | @media (max-width: 320px){ 725 | .header .header-content h1{ 726 | font-size: 1.9rem; 727 | } 728 | 729 | .header .header-content .header-content-links li .start{ 730 | padding: 1rem; 731 | font-size: .8rem; 732 | } 733 | 734 | .header .header-content .header-content-links li .learn{ 735 | padding: 1rem; 736 | font-size: .8rem; 737 | } 738 | 739 | .description h2{ 740 | font-size: 1.5rem; 741 | } 742 | 743 | .description .description-content .description-content-leftcolumn h3{ 744 | font-size: 1.5rem; 745 | } 746 | 747 | .services .services-leftcolumn .phone{ 748 | width: 320px; 749 | } 750 | 751 | .services .services-rightcolumn{ 752 | margin-top: 2rem; 753 | } 754 | 755 | .services .services-rightcolumn h4{ 756 | font-size: 2.1rem; 757 | } 758 | 759 | footer .attribution{ 760 | font-size: .7rem; 761 | } 762 | 763 | footer .attribution a{ 764 | font-size: .7rem; 765 | } 766 | } --------------------------------------------------------------------------------