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.
Last active
December 30, 2018 19:15
-
-
Save jishanshaikh4/f5c02bab59548813e1116f0eb54b3552 to your computer and use it in GitHub Desktop.
Personal Website Redesign in progress...
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
| <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> |
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
| $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; | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment