Personal Website Redesign in progress...

index.html

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>

<header>
<nav role='navigation'>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
  </ul>
</nav>  
</header>
<div class="hero">
  <h2>Hello.<br />My name is Geoffrey Shepard.<br />I love web design.</h2>
  <p>Currently I am <span class="highlight">available for hire</span></p>
  <p>I am also building a live streaming web design community</p>
  <p><a href="https://twitter.com/webnationlive" target="_blank">Follow us @webnationlive to stay connected</a></p>
</div>
<div class="content">
  <div class="leftcontent">
    <div class="innerblock">
      <div class="bloghighlight">
        <h4>What I am thinking....</h4>
        <article>
          <div class="article-title">
            <h3>Why typography is important</h3>
          </div>
          <div class="article-details">
            <h3 class="date">August 15, 2013</h3>
          </div>
          <div class="article-summary">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ex aperiam quam explicabo labore unde quasi soluta voluptatibus vel praesentium tenetur iure quo dolor a consequatur tempore ratione nostrum? Placeat... <a href="#" class="readmore">continue reading</a></p>
          </div>
        </article>
                <article>
          <div class="article-title">
            <h3>Colors are important</h3>
          </div>
          <div class="article-details">
            <h3 class="date">August 15, 2013</h3>
          </div>
          <div class="article-summary">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ex aperiam quam explicabo labore unde quasi soluta voluptatibus vel praesentium tenetur iure quo dolor a consequatur tempore ratione nostrum? Placeat... <a href="#" class="readmore">continue reading</a></p>
          </div>
        </article>
                <article>
          <div class="article-title">
            <h3>Layouts are also fundamental to webdesign.</h3>
          </div>
          <div class="article-details">
            <h3 class="date">August 15, 2013</h3>
          </div>
          <div class="article-summary">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ex aperiam quam explicabo labore unde quasi soluta voluptatibus vel praesentium tenetur iure quo dolor a consequatur tempore ratione nostrum? Placeat... <a href="#" class="readmore">continue reading</a></p>
          </div>
        </article>
        <div class="link">
          <a href="#">Read More</a>
        </div>
      </div>
    </div>
  </div>
  <div class="rightcontent">
    <div class="innerblock">
        <div class="highlight">
          <h2>Recent Projects</h2>
          <ul class="portfolio-images">
            <li><img src="https://i.imgur.com/u3E174C.png" alt="" /></li>
            <li><img src="https://i.imgur.com/u3E174C.png" alt="" /></li>
            <li><img src="https://i.imgur.com/u3E174C.png" alt="" /></li>
            <li><img src="https://i.imgur.com/u3E174C.png" alt="" /></li>
          </ul>
         <div class="linkwrapper">
          <div class="link">
            <a href="#">See More</a>
          </div>
         </div>

        </div>
    </div>
  </div>
</div>

<div class="expertise">

    <h3 class="sectionheader">What I do...</h3>

  <div class="expert1">
    <div class="exwrapper">
      <div class="col13">
    <h2>FRONT-END DESIGN</h2><p>A front-end designer’s goal is to make websites that are easily understood and accessible. This includes cross-browser, cross-platform, and cross device testing. As a designer I am concerned with the content, colors, theme, accessibility, page loading, usability, and most importantly the end-users experience.</p></div>
      <div class="col13">
    <h2>RESPONSIVE WEB DESIGN</h2><p>is an approach that is aimed at providing the best viewing experience regardless of the device, browser, platform, or resolution. Responsive Web Design (RWD) provides an easy way to read and navigate the website with minimal resizing, panning, and scrolling.</p></div>
      <div class="col13">
    <h2>INTERFACE DESIGN</h2><p>is the design of websites, applications, and software with the focus on the user’s experience and interaction. The purpose is to make an efficient and simple interface where the user doesn’t have to think about how to accomplish their goals. This design process has to balance technical functionality and visual design that will adapt to the wide variety of users and needs</p></div>
      
  </div>
</div> 


<footer>
   <ul class="cta">
     <li>I love answering questions as I work, follow me at <a href="https://twitter.com/GJShepard"> https://twitter.com/GJShepard</a> to know when I am streaming next.</li>
     <li>I usually live stream my code pen work on <a href="http://www.justin.tv/designtheweb">http://www.justin.tv/designtheweb</a></li>

   </ul>
</footer>

personal-website-redesign-in-progress.markdown

Personal Website Redesign in progress...

Trying to get a feel for colors and basic design for my new personal blog/portfolio. I also livestream and answer questions when I design on codepen, come join me.

A Pen by Geoff Shepard on CodePen.

License.

style.scss

$dark: #2c343b;
$pink: #E65B53;
$light: #FFFCE2;
$tan: #FFE4B6;
$text: #222222;
$lighttext: #4F4F4F;


/* IE9  - Also picked up by most modern browsers */
::selection {
    background:$pink;
    color:#FFF;
    text-shadow:none;
}
/* Safari & Chrome - Webkit Rendering */
::-webkit-selection {
    background:$pink;
    color:#FFF;
    text-shadow:none;
}
/* Mozilla based - Gecko Rendering */    
::-moz-selection {
     background:$pink;
    color:#FFF;
    text-shadow:none;
}
body{background-color: $dark;
margin:7px;
border:2px solid #fff;
font-family: 'Open Sans', sans-serif;
float:left;
width:100%;
  height:100%;
}

nav{
  font-family: 'Open Sans Condensed', sans-serif;
  margin:0px;
  padding:0px;
  width:100%;
  text-align:center;
  background-color:#fff;
  border-bottom:2px solid #fff;
  ul{background-color:#fff;
    padding:0px;
    display:inline-block;
    margin:0px;
    li{
      display:inline-block;
      
      
      a{text-decoration:none;color:$dark;font-weight:bold; display:block;padding: 15px 40px; 
        &:hover{background-color:#D9D6C0;color:$dark;}
      }
      
    }
  }
}
.hero{
text-align:center;
margin:50px 0px;
  h2{
  color:#fff;
  text-transform:uppercase;
  font-size:21px;
  line-height: 28px;
  }
    p{
      color: $light;
      span.highlight{color:$pink;}
      a{color:$pink;} 
    }  
}
.content{
  float:left;display:block;clear:both;
  width:100%;
  padding:45px 0px;
  background-color:#fff;
  .leftcontent{
    float:left;
    width:50%;
    display:inline-block;
    .innerblock{float:right;}
    .bloghighlight{
      max-width:550px;
      margin:0px auto;
      
      article{margin-top:25px;}
        h4{
          text-align:center;
          font-size:19px;
          margin:0;
        }
        .article-title{
          h3{color: $dark;font-size:14px;line-height:28px;margin:0px;}
        }
      .article-details{
        h3.date{
          font-size:12px;
          color: $lighttext;
          font-height:14px;
          margin:0px;
        }
      }
      .article-summary{
        font-size:14px;
        line-height:1.5em;
        a.readmore{
          text-decoration:none;
          font-family: 'Open Sans Condensed', sans-serif;
          color: $pink;
          font-weight:700;
          float:right;
          display:block;
          padding:3px 10px;
          margin-bottom:25px;
          &:hover{color:#fff;background-color:$pink;}
        }
      }
    }

  }
  .rightcontent{
    float:left;
    width:50%;
    display:inline-block;
    .innerblock{float:left;}
    
    ul{
      margin-top:25px;
      li{
        list-style-type:none;
        color:$dark;
        padding-top:15px;
        a{
        font-weight:bold;
        font-size:14px;
          color:$pink;
          word-wrap:break-word;
        }
      }
    }
    .highlight{
      max-width:550px;
      margin:0 auto;
      
      img{
        width:225px;
        height:225px;
      }
      h2{
        text-align:center;
        font-size:19px;
        margin:0;
      }
      ul.portfolio-images{
        li{
          display:inline-block;
          padding:0;
        }
      }
    }

  }
  .innerblock{
  padding:0px 30px;
  }
}

.link{
  display:block;
  clear:both;
  margin:0 auto;
  width:150px;
  text-align:center;
  
  a{
      display:block;
      background-color:$pink;
      color:#fff;
      text-decoration:none;
      padding:10px 25px;
      border-radius:7px;
          
      &:hover{background-color:$lighttext;}
    }
}

.expertise{
  float:left;
  width:100%;

  .col13{
    display:inline-block;
    width:25%;
    margin:4%;
    color:#fff;
    h2{text-align:center;}
    p{}
  }
  h3{
    text-transform:uppercase;
    font-size:2em;
    letter-spacer:2px;
    text-align:center;
    padding:35px 0px 0px 0px;
    color:#fff;
  }
  .exwrapper{
    padding-bottom:75px;
  }
  
  .expert1{
      display:block;
  }

      
      
  
}
.arrow_box_pink {
	position: relative;
	background: #E65B53;
}
.arrow_box_pink:after {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(230, 91, 83, 0);
	border-top-color: #E65B53;
	border-width: 30px;
	margin-left: -30px;
}


footer{
  float:left;
  clear:both;
  padding:50px 0px;
  width:100%;
  background-color:$tan;
  ul.cta{
    max-width:550px;
    margin:0 auto;
    li{
      list-style-type:none;
      color:$dark;
      a{
        color:$pink;
      }
    }
  }
}