2018-01-14 TIL WPS Homework 홈페이지 복제하기

14 Jan 2018 • TIL

CNN 홈페이지 따라만들기

<body>
  <div id="wrap">
  
<!--헤더 시작-->

    <header>
      <div class="header-plain">
        <div class="nav-container">
          <a href="" class="nav-logo"></a>
        </div>
        <div class="header-nav"> 
          <div class="nav-links">
            <a href="" class="nav-link-list">Regions</a>
          </div>
          <div class="header-right">
            <a href="" class="international-edition">international edition+</a>
            <a href="" class="search"><img src="http://sobewff.org/wp-content/themes/sobewff_2018/images/search_gray.svg" alt=""></a>
            <a href="" class="menu"><img src="https://www.hypetap.com/assets/production/images/brand-svgs/menu-icon.colors-white.svg" alt=""></a>
          </div>
        </div>
      </div>
    </header>
    
<!--메인 시작-->

    <div class="main clearfix">
      <section class="news clearfix">
      
      <!--메인 왼쪽 기사-->
      
        <div class="news-left">
          <div class="hightlight-news">
            <h2 class="highlight-title">'Racist and xenophobic remarks'</h2>
            <img src="http://cdn.cnn.com/cnnnext/dam/assets/180112131332-01-donald-trump-0111-overlay-tease.jpg" alt="" class="highlight-image">
            <ul class="left-news-list">
              <li class="left-new-list-items"><strong>African Union demand Trump apology</strong></li>
 
            </ul>
          </div>
        </div>
        
      <!--메인 가운데 기사-->
        <div class="news-center">
        
        <!--메인 가운데 첫 번째 행-->
        
          <div class="center-row1">
            <h2 class="dontmiss">Don't miss</h2>
            <div class="dontmiss-container">
              <img src="http://cdn.cnn.com/cnnnext/dam/assets/180112185625-stormy-daniels-trump-medium-tease.jpg" alt="">
              <div class="gray-square"><strong>WSJ: Trump lawyer arranged porn star payment for her silence</strong></div>
            </div>
          </div>

		<!--메인 가운데 두 번째 행-->
		
          <div class="center-row2">
            <div class="dontmiss-container">
              <img src="http://cdn.cnn.com/cnnnext/dam/assets/170915105256-01-north-korea-flag-medium-tease.jpg" alt="">
              <div class="gray-square"><strong>North Korean media talks up reunification</strong></div>
            </div>
          </div>
        </div>
        
		<!--메인 오른쪽 기사-->
		
        <div class="news-right">
          <div class="right-row1">
            <h2 class="dontmiss">Top stories</h2>
            <div class="topstory-container">
              <img src="http://cdn.cnn.com/cnnnext/dam/assets/180105114312-03-iran-pro-government-protest-0105-medium-tease.jpg" alt="">
              <span class="topstory-text"><strong>Iran threatens 'severe' response to Trump's sanctions</strong></span>
              <ul class="right-news-list">
                <li class="right-new-list-items">Vegas shooting: Unsealed docs released</li>
              </ul>
            </div>
          </div>
        </div>
      </section>
    </div>
    
    <!--밑단-->
    
    <div class="bottom">
      <section class="bottom-news">
        <div class="bottom-container clearfix">
          <div class="bottom-head clearfix">
            <span class="bottom-head-text">In Case You Missed it</span>
            <span class="stripe"></span>
          </div>
          <div class="bottom-inside-container clearfix">
          
          <!--밑단 왼쪽 기사-->
          
            <div class="left-col">
              <div class="left-col-container">
                <img src="http://cdn.cnn.com/cnnnext/dam/assets/171130213312-global-warning-ward-greenland-2-overlay-tease.jpg" alt="">
                <div class="warning_box">Global Warning</div>
                <div class="big_caption">Melting glaciers may someday flood your city</div>
              </div>
            </div>
            
				<!--밑단 오른쪽 기사-->
				
            <div class="right-col clearfix">
            
            <!--밑단 오른쪽 첫 번째 행-->
            
              <div class="right-row1">
                <div class="img-box">
                  <img src="http://cdn.cnn.com/cnnnext/dam/assets/171113193652-01-libya-slave-auction-hp-tz-large-tease.jpg" alt="">
                  <div class="exclusive">CNN EXCLUSIVE</div>
                </div>
                <span class="right-row1-caption">
                  People sold as slaves for just $400
                </span>
                
             <!--밑단 오른쪽 두 번재 행-->
             
                <div class="right-row2">
                  <img src="http://cdn.cnn.com/cnnnext/dam/assets/171113121311-peter-burling-large-tease.jpg" alt="">
                  <span class="right-row2-caption">
                    'Everest of the Seas:' Four-hour sleeps, freeze dried food
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
		<!--footer시작-->
		
      <footer class="footer">
      
      <!--footer contents-->
      
        <div class="footer-content">
          <div class="footer-menu clearfix">
            <div class="Regions">
              <span class="list-title">Regions</span>
              <ul>
                <li>U.S.</li>
                <li>Africa</li>
                <li>Americas</li>
                <li>Asia</li>
                <li>China</li>
                <li>Europe</li>
                <li>Middle East</li>
                <li>Opinion</li>
              </ul>
            </div>
          </div>
          
         <!--footer outer-->
          
          <div class="footer-outer">
            <div class="copyright">
              <span>© 2018 Cable News Network. Turner Broadcasting System, Inc. All Rights Reserved.</span><br>
              <span>CNN Sans ™ & © 2016 Cable News Network.</span>
            </div>
            <div class="legal">
              <span class="legal-text">Terms of Use</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
</body>

실제 CNN 사이트

(위)실제 CNN사이트 edition.cnn.com

내가 만든 사이트

아래 그림은 따라서 만든 CNN 홈페이지, 헤더 부분을 조금 더 손봐야 할 듯하다.

Comments

Related Posts