Created
March 26, 2019 20:47
-
-
Save marypieroszkiewicz/6f7ed8eb2fb966e51cc34c2f17754767 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GOGOmedia - Recruitment Task</title> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,500,700&subset=latin-ext" rel="stylesheet"> | |
| <!-- Font Awesome Icons --> | |
| <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.0/css/all.css" integrity="sha384-Mmxa0mLqhmOeaE8vgOSbKacftZcsNYDjQzuCOm6D02luYSzBG8vpaOykv9lFQ51Y" crossorigin="anonymous"> | |
| <!-- Style CSS --> | |
| <link rel="styleseet" href="css/normalize.css"> | |
| <link rel="stylesheet" href="css/style.css"> | |
| </head> | |
| <body> | |
| <!-- header --> | |
| <header class="header-container"> | |
| <section class="container clearfx"> | |
| <div class="header-container__logo"> | |
| <a href="#"><img src="images/logo.png"></a> | |
| </div> | |
| </section> | |
| <div class="banner-container"> | |
| <section class="container clearfx"> | |
| <h1 class="banner-container__title">Heading</h1> | |
| <p class="banner-container__text">Lorem ipsum dolor sit amet, consect etur adipiscing elit.</p> | |
| <div class="box-container"> | |
| <div class="box-container__box box--1"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet.</p> | |
| <div class="box__icon"><i class="fab fa-wordpress"></i></div> | |
| </div> | |
| <div class="box-container__box box--2"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Proin gravida dolor sit amet lacus.</p> | |
| </div> | |
| <div class="box-container__box box--3"> | |
| <h2 class="box__head">Ultra Mega Super Long Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Lorem ipsum dolor sit amet</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </header> | |
| <!-- end of header --> | |
| <!-- main --> | |
| <main class="main-container"> | |
| <section class="container clearfx"> | |
| <div class="wrapper-container"> | |
| <h1 class="wrapper-container__title">Heading</h1> | |
| <p class="wrapper-container__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit.<p> | |
| </div> | |
| <div class="box-container"> | |
| <div class="box-container__box box--1"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet.</p> | |
| <div class="box__icon"><img class="icons" src="images/icon_2.png" alt=""></div> | |
| </div> | |
| <div class="box-container__box box--2"> | |
| <h2 class="box__head">Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Proin gravida dolor sit amet lacus.</p> | |
| </div> | |
| <div class="box-container__box box--3"> | |
| <h2 class="box__head">Ultra Mega Super Long Heading</h2> | |
| <p class="box__par">Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod bibendum laoreet. Lorem ipsum dolor sit amet</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- end of main --> | |
| <!-- footer --> | |
| <!-- end of footer --> | |
| </body> | |
| <!-- JS Scripts --> | |
| <script src="js/app.js"></script> | |
| </html> | |
| // ---------------------------------------------------- | |
| // ----- MIXINS ----- | |
| // ---------------------------------------------------- | |
| // --- Media Queries - Breakpoints --- | |
| @mixin screen($size) { | |
| @if $size == mobile420 { | |
| @media #{$mobile__420} { | |
| @content; | |
| } | |
| } | |
| @else if $size == tablet860 { | |
| @media #{$tablet__860} { | |
| @content; | |
| } | |
| } | |
| @else if $size == desktop1200 { | |
| @media #{$desktop__1200} { | |
| @content; | |
| } | |
| } | |
| @else if $size == high-screen1440 { | |
| @media #{$high-screen__1440} { | |
| @content; | |
| } | |
| } | |
| @else { | |
| @media only screen and #{$size} { | |
| @content; | |
| } | |
| } | |
| } | |
| // --- End Of Media Queries - Breakpoints | |
| // --- Clearfix --- | |
| @mixin clearfix { | |
| &::after { | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| } | |
| // ----- End Of Clearfix ----- | |
| // --- BEM --- | |
| // Block Element | |
| @mixin element($element) { | |
| &__#{$element} { | |
| @content; | |
| } | |
| } | |
| // Block Modifier | |
| @mixin modifier($modifier) { | |
| &--#{$modifier} { | |
| @content; | |
| } | |
| } | |
| // ----- End Of BEM ----- | |
| // Box Container | |
| @mixin boxes-container { | |
| display: flex; | |
| flex-direction: column; | |
| width: 100%; | |
| padding: 1.25rem .625rem; | |
| text-align: center; | |
| @include screen('tablet860') { | |
| padding: 2.875rem 1.75rem 0; | |
| } | |
| @include screen('desktop1200') { | |
| flex-direction: row; | |
| justify-content: space-between; | |
| padding: 2.875rem 4.375rem 0; | |
| } | |
| @include element('box') { | |
| flex-basis: 100%; | |
| background-color: $bg_color-primary; | |
| padding: .9375rem; | |
| margin-bottom: 1.188rem; | |
| @include screen('tablet860') { | |
| padding: 1.875rem; | |
| } | |
| @include screen('desktop1200') { | |
| flex-basis: 33.33%; | |
| padding: 2.5rem 1.875rem; | |
| margin-right: 1.188rem; | |
| margin-bottom: 0; | |
| } | |
| &:last-child { | |
| margin-right: 0; | |
| margin-bottom: 0; | |
| } | |
| & .box__head { | |
| font-size: 1.25rem; | |
| font-weight: 400; | |
| color: $font_color-headline; | |
| line-height: 28px; | |
| } | |
| & .box__par { | |
| font-size: .9375rem; | |
| color: $font_color-box--p; | |
| line-height: 25px; | |
| } | |
| } | |
| & .box--1 { | |
| .box__icon { | |
| padding-top: .875rem; | |
| .fa-wordpress { | |
| color: $icon_color; | |
| font-size: 2.625rem; | |
| } | |
| } | |
| } | |
| } | |
| // ----- END OF MIXINS ----- |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment