纯CSS制作个性网页

<!-- Taking a stab at answering this question:
http://www.reddit.com/r/css/comments/1w5qdh/how_do_i_make_these_diagonal_lines_in_css_where/ -->

<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>

<div class="page_bg">
  <div class="top_bg">
    <div class="red">&nbsp;</div>
    <div class="tan">
      <div class="circles">
        <div class="typography">Typography</div>
        <div class="color">Color</div>
        <div class="composition">Composition</div>
      </div>
    </div>
    <div class="black">
      
      <!-- 100% CSS devices image by Willpaige. Original here: http://codepen.io/willpaige/pen/rFElD -->
      <div class="devices_container">
        <div class="screen monitor">
          <div class="content">
            <div class="pg">
              <ul class="btns">
                <li></li><li></li><li></li>
              </ul>
              <ul class="txt">
                <li></li>        
                 <li></li>
                <li class="thin"></li>
                <li class="thin"></li>
                <li class="thin"></li>
              </ul>  
            </div>
          </div>
        <div class="base">
          <div class="grey-shadow"></div>
          <div class="foot top"></div>
          <div class="foot bottom"></div>
          <div class="shadow"></div>
          <div class="keyboard">
            <div class="btm"></div>
            <ul class="keys">
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
            <div class="shadow"></div>
          </div>
        </div>
      </div>
    <div class="laptop">
      <div class="content">
        <ul class="txt txt-laptop">
          <li></li>        
          <li></li>
          <li class="thin"></li>
          <li class="thin"></li>
          <li class="thin"></li>
        </ul>          
      </div>
    <div class="btm"></div>
    <div class="shadow"></div>
  </div>
  <div class="phone">
    <div class="screen">
      <div class="content">
            <ul class="txt">
              <li></li>
              <li></li>
              <li></li>
            </ul>
      </div>
    </div>   
  <div class="shadow"></div>        
  </div>
  </div>    
  </div>
    <!-- End of device images -->
    
  </div>
  <div class="bottom_bg">
    <div class="red2">&nbsp;</div>
    <div class="tan2">&nbsp;</div>
  </div>
</div>
<div class="page_container">
  <nav>
    <div class="logo"><a href="#">WUSTOMIZE</a></div>
    <div class="links">
      <ul>
        <li><a href="#" class="current">WHAT WE DO<br></a></li>  
        <li><a href="#">WHO WE ARE<br></a></li>  
        <li><a href="#">OUR WORK<br></a></li>  
        <li><a href="#">SAY HELLO<br></a></li>  
      </ul>
    </div>
  </nav>
  <div class="design">
    <h1><span class="small-header">WE<br></span>DESIGN</h1>
    <div class="text-content">
      <p>And we're doing that with consideration of composition color and typography principles.</p>
      
      <p>Like they say, the best design is invisible, but we are taking into account the little details as well, and mixing them in.</p>
      
      <p>If you need any kind of graphics design or web design then hire us. We do logotypes, identity, and of course websites, as well as offering many other services.</p>
    </div>
  </div>
  
  <div class="code">
    <h1><span class="small-header push">WE<br></span>&lt;CODE&gt;</h1>
    <div class="text-content">
      <p>We make beautiful designs come true. In a responsive manner, and in the best possible way. We code in html5, css3, and jquery. We also develop android and iOS apps.</p>
      
      <p>Our code is clean and semantic, with a strong focus on Search Engine optimization (SEO).</p>
      
    </div>
  </div>
  <div class="code"></div>
</div>