Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>LEARN WEB Template</title>
<meta name="description" content="">
<link href="css/all.css" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/website.css">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/maps.js"></script>
</head>
<body>
<dl class="skip">
<dt><strong>skip navigation</strong></dt>
<dd><a href="#container">skip to Content</a></dd>
</dl>
<hr>
<div id="wrap">
<!-- header -->
<header id="header">
<h1 class="logo">
<a href="#"><i class="fas fa-home"></i> Logo</a>
</h1>
<nav>
<h2>Main navigation</h2>
<button type="button"><i class="fas fa-bars"></i> <span>Main menu</span></button>
<ul class="lnb">
<li><a href="#">Team</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Price</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Search</a></li>
</ul>
</nav>
</header>
<!-- //header -->
<!-- visual -->
<section class="visual">
<h3>Learn w3.css</h3>
<p><img src="img/pic.jpg" alt=""></p>
</section>
<!-- //visual -->
<!-- container -->
<div id="container">
<!-- team -->
<section class="team">
<h3>OUR TEAM</h3>
<p>Meet the team - our office rats:</p>
<ul>
<li>
<figure>
<img src="img/irene.jpg" alt="">
</figure>
<figcaption>
<strong>Irene</strong>
<small>Leader, Main Rapper</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/seulgi.jpg" alt="">
</figure>
<figcaption>
<strong>Seulgi</strong>
<small>Main Dancer, Lead Vocal</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/wendy.jpg" alt="">
</figure>
<figcaption>
<strong>Wendy</strong>
<small>Main Vocal</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/joy.jpg" alt="">
</figure>
<figcaption>
<strong>Joy</strong>
<small>Lead Rapper, Sub Vocal</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/yeri.jpg" alt="">
</figure>
<figcaption>
<strong>Yeri</strong>
<small>Sub Vocal, Sub Rapper</small>
</figcaption>
</li>
</ul>
</section>
<!-- //team -->
<!-- pricing -->
<section class="pricing">
<h3>PRICING</h3>
<p>Choose a pricing plan that fits your needs.</p>
<dl>
<dt><strong>Basic</strong></dt>
<dd>
<ul>
<li><strong>10GB</strong> Storage</li>
<li><strong>10</strong> Emails</li>
<li><strong>10</strong> Domains</li>
<li><strong>Endless</strong> Support</li>
<li><strong>$</strong> <em>10</em> <span>per month</span> </li>
</ul>
<p><a href="#"><i class="fas fa-check"></i> Sign Up</a></p>
</dd>
</dl>
<dl>
<dt><strong>Pro</strong></dt>
<dd>
<ul>
<li><strong>25GB</strong> Storage</li>
<li><strong>25</strong> Emails</li>
<li><strong>25</strong> Domains</li>
<li><strong>Endless</strong> Support</li>
<li><strong>$</strong> <em>25</em> <span>per month</span> </li>
</ul>
<p><a href="#"><i class="fas fa-check"></i> Sign Up</a></p>
</dd>
</dl>
<dl>
<dt><strong>Premium</strong></dt>
<dd>
<ul>
<li><strong>50GB</strong> Storage</li>
<li><strong>50</strong> Emails</li>
<li><strong>50</strong> Domains</li>
<li><strong>Endless</strong> Support</li>
<li><strong>$</strong> <em>50</em> <span>per month</span> </li>
</ul>
<p><a href="#"><i class="fas fa-check"></i> Sign Up</a></p>
</dd>
</dl>
</section>
<!-- //pricing -->
<!-- contact -->
<section class="contact">
<h3>Contact Us</h3>
<p>Swing by for a cup of coffee, or whatever.</p>
<div id="map"></div>
</section>
<!-- //contact -->
</div>
<!-- //container -->
<footer id="footer">
<p><strong>Follow Us</strong></p>
<dl>
<dt><strong>sns Link</strong></dt>
<dd><a href="#"><i class="fab fa-facebook-f"></i> <span>Go facebook</span></a></dd>
<dd><a href="#"><i class="fab fa-twitter"></i> <span>Go twitter</span></a></dd>
<dd><a href="#"><i class="fab fa-google-plus-g"></i> <span>Go google plus</span></a></dd>
<dd><a href="#"><i class="fab fa-instagram"></i> <span>Go instagram</span></a></dd>
</dl>
<p class="copy">Powered by <a href="#">w3.css</a></p>
</footer>
</div>
</body>
</html>일단 html 코드만 다 짜놓은 상태
css는 손을 따로 안대서 정리도 안되고 이미지 사이즈도 너무 크다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 029 웹페이지 예제 실습 (3) script 적용 및 호스팅 (0) | 2021.03.18 |
|---|---|
| 028 웹사이트 예제 실습 (2) css 적용 (0) | 2021.03.18 |
| 026 media query 반응형 웹, 반응형 웹페이지 예제 실습 (0) | 2021.03.09 |
| 025 CSS3 공부 (4) transform, filter (0) | 2021.03.05 |
| 024 CSS3 공부 (3) transition, transform, animation (0) | 2021.03.04 |
Daily Study/Web Dev
