Freelance Section UI

freelance-section-ui.markdown

Freelance Section UI

A Pen by Mason Fox on CodePen.

License.

index.jade

mixin grid-item(icon, title, content)
  .grid-item
    i.material-icons= icon
    .item-content
      h3= title
      p= content

section.freelance
  .container
    .row
      header.col-xs-12
        i.material-icons fingerprint
        h2.header-title Make your Mark
        h4.header-subtitle Web Design and Development
        
  .container
    .row
      .freelance-grid
        +grid-item(
          'build',
          'Manage your Site',
          'Built on a easy to use content management system, making managing your content a synch!'
        )
        
        +grid-item(
          'phonelink',
          'Responsive Design',
          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sapiente cupiditate necessitatibu.'
        )
        
        +grid-item(
          'storage',
          'Dedicated Self-Hosting',
          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sapiente cupiditate necessitatibu.'
        )
        
        +grid-item(
          'data_usage',
          'Strikingly Performant',
          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error sapiente cupiditate necessitatibu.'
        )
        
  .container
    .row
      .col-xs-12.col-md-8.col-md-offset-2.freelance-signup
        h3 Get Started
        p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed eum, repellendus, quod culpa expedita quam cumque obcaecati reprehenderit aliquam, mollitia ducimus saepe. Ea nemo pariatur eveniet doloribus, provident, tempora harum!
        a(href="#0").freelance-btn Schedule a Meeting
        
        

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

@import url(https://fonts.googleapis.com/css?family=Varela+Round);

$main: #2196F3;
$secondary: #0D47A1;

$main-font: Varela Round;
$secondary-font: Open Sans;

:root {
  font-size: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.freelance {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient($main, $secondary);
  padding: 3rem;
  font-family: $main-font;
  overflow: hidden;
}

.freelance header {
  text-align: center;
  color: #fff;
  
  i {
    font-size: 3rem;
  }
  
  .header-title {
    margin-top: 1.5rem;
  }
  
  .header-subtitle {
    color: rgba(255,255,255,.6);
    font-family: $secondary-font;
    font-weight: 300;
    margin-top: .75rem;
    font-size: 1.35rem;
  }
}

.freelance-grid {
  display: flex;
  align-items: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
  
  .grid-item {
    width: 50%;
    color: #fff;
    padding: 3rem;
    text-align: center;
    
    @media (max-width: 900px) {
      width: 100%;
      padding: 1.5rem 6rem;
    }
    
    @media (max-width: 600px) {
      width: 100%;
      padding: 1.5rem 2rem;
    }
    
    i {
      width: 100%;
      font-size: 2.5rem;
      margin-bottom: .75rem;
      color: $main;
      
      &:nth-child(1) {
        color: lighten($main, 8%);
      }
    }
    
    .item-content {
      p {
        color: rgba(255,255,255,.6);
        font-weight: 300;
        font-family: $secondary-font;
      }
    }
  }
}

.freelance-signup {
  color: #fff;
  text-align: center;
  margin-top: 2rem;
  padding: 3rem 1rem;
  border-top: 2px solid rgba(255,255,255,.15);
  
  h3 {
    font-family: $main-font;
  }
  
  p {
    color: rgba(255,255,255,.6);
    font-family: $secondary-font;
    font-weight: 300;
  }
}

.freelance-btn {
  position: relative;
  top: 2rem;
  background: rgba(255,255,255,.85);
  color: $secondary;
  padding: 1rem 2rem;
  // font-family: $secondary-font;
  border-radius: 10px;
  text-transform: uppercase;
  
  &:hover, &:focus {
    text-decoration: none;
    background: rgba(255,255,255, 1);
  }
}

.freelance p {
  font-size: 1.05rem;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />