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 class="blind"><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 class="blind">Main navigation</h2>
<button type="button" class="btn_nav"><i class="fas fa-bars"></i> <span class="blind">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 class="tle">Red Velvet</h3>
<p class="pic"><img src="img/pic.jpg" alt=""></p>
</section>
<!-- //visual -->
<!-- container -->
<div id="container">
<!-- team -->
<section class="team">
<h3 class="tle">TEAM MEMBERS</h3>
<p class="desc">Red and Velvet, different two themes.</p>
<ul class="human">
<li>
<figure>
<img src="img/irenecrop.png" alt="">
</figure>
<figcaption>
<strong>Irene</strong>
<small>Leader, Main Rapper</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/seulgicrop.png" alt="">
</figure>
<figcaption>
<strong>Seulgi</strong>
<small>Main Dancer, Lead Vocal</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/wendycrop.png" alt="">
</figure>
<figcaption>
<strong>Wendy</strong>
<small>Main Vocal</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/joycrop.png" alt="">
</figure>
<figcaption>
<strong>Joy</strong>
<small>Lead Rapper, Sub Vocal</small>
</figcaption>
</li>
<li>
<figure>
<img src="img/yericrop.png" alt="">
</figure>
<figcaption>
<strong>Yeri</strong>
<small>Sub Vocal, Sub Rapper</small>
</figcaption>
</li>
</ul>
</section>
<!-- //team -->
<!-- pricing -->
<section class="pricing">
<h3 class="tle">MEMBERSHIP</h3>
<p class="desc">Choose a membership plan that fits your needs.</p>
<dl>
<dt><strong>REVELUV 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><span class="pay"><strong>$</strong> <em>10</em></span> <span>per month</span> </li>
</ul>
<p class="sign"><a href="#"><i class="fas fa-check"></i> Sign Up</a></p>
</dd>
</dl>
<dl>
<dt><strong>REVELUV Ace</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><span class="pay"><strong>$</strong> <em>25</em></span> <span>per month</span> </li>
</ul>
<p class="sign"><a href="#"><i class="fas fa-check"></i> Sign Up</a></p>
</dd>
</dl>
<dl>
<dt><strong>REVELUV 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><span class="pay"><strong>$</strong> <em>50</em></span> <span>per month</span> </li>
</ul>
<p class="sign"><a href="#"><i class="fas fa-check"></i> Sign Up</a></p>
</dd>
</dl>
</section>
<!-- //pricing -->
<!-- contact -->
<section class="contact">
<h3 class="tle">Contact Us</h3>
<p class="desc">About the team and Membership plans.</p>
<div id="map"></div>
</section>
<!-- //contact -->
</div>
<!-- //container -->
<footer id="footer">
<p class="desc"><strong>Follow Us</strong></p>
<dl>
<dt class="blind"><strong>sns Link</strong></dt>
<dd><a href="#"><i class="fab fa-facebook-f"></i> <span class="blind">Go facebook</span></a></dd>
<dd><a href="#"><i class="fab fa-twitter"></i> <span class="blind">Go twitter</span></a></dd>
<dd><a href="#"><i class="fab fa-google-plus-g"></i> <span class="blind">Go google plus</span></a></dd>
<dd><a href="#"><i class="fab fa-instagram"></i> <span class="blind">Go instagram</span></a></dd>
</dl>
<p class="copy">Powered by <a href="#">w3.css</a></p>
</footer>
</div>
</body>
</html>원래는 무슨 웹디자인 회사 같은 컨셉의 예제였는데
그냥 하면 재미도 없고 아저씨 사진 써야해서 조금 내용만 손 봤다.
@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* maps */
#map {
width: 100%;
height: 500px;
}
/* reset */
body {
padding-top: 50px;
font-family: 'Noto Sans KR', sans-serif;
font-size: 14px;
}
.blind {
display: block;
position: absolute;
left: 0;
top: -9999em;
overflow: hidden;
}
.skip a {
position: absolute;
left: 0;
top: -9999em;
z-index: 9999;
display: block;
width: 100%;
background-color: navy;
color: #efefef;
text-decoration: none;
text-align: center;
line-height: 2;
}
.skip a:focus {
top: 0;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
hr {
display: none;
}
/* style */
#wrap {
max-width: 1200px;
margin: 0 auto;
}
#header {
position: fixed;
top: 0;
z-index: 30;
width: 100%;
background-color: #000;
max-width: 1200px;
}
#header .logo {
float: left;
}
#header .logo a {
display: block;
padding: 0 20px;
background-color: #fbb69f;
color: #fff;
font-size: 16px;
font-weight: bold;
line-height: 50px;
text-decoration: none;
text-transform: uppercase;
}
#header .logo a:hover {
background-color: #ccc;
columns: #000;
}
#header .logo a i {
margin-right: 10px;
}
#header .btn_nav {
float: right;
width: 50px;
height: 50px;
border: 0;
background-image: none;
background-color: #333;
color: #eee;
font-size: 20px;
line-height: 50px;
cursor: pointer;
}
#header .btn_nav:hover {
background-color: #ccc;
color: #000;
}
#header .lnb {
display: none; /* test */
position: absolute;
top: 50px;
width: 100%;
}
#header .lnb li a {
display: block;
padding-left: 20px;
border-bottom: 1px solid #333;
background-color: #222;
color: #eee;
font-size: 15px;
font-weight: bold;
line-height: 40px;
text-decoration: none;
text-transform: uppercase;
letter-spacing: .2em;
}
#header .lnb li a:hover {
background-color: #ddd;
color: #000;
}
.visual {
position: relative;
z-index: 20;
}
.visual .tle {
position: absolute;
bottom: 20px;
left: 20px;
z-index: 10;
padding: 0 20px;
background-color: #000;
color: #eee;
font-size: 2em;
text-transform: uppercase;
letter-spacing: .1em;
line-height: 65px;
cursor: pointer;
}
.visual .tle:hover {
background-color: #ffb69f;
color: #fff;
}
.visual .pic {
position: relative;
z-index: 5;
}
.visual .pic img {
width: 100%;
filter: sepia(0.2) grayscale(0.2);
}
#container {
text-align: center;
}
#container .team {
padding: 80px 0 60px;
border-bottom: 1px solid #ddd;
}
#container .team .tle {
font-size: 26px;
line-height: 60px;
}
#container .team .desc {
margin-bottom: 40px;
font-size: 16px;
line-height: 30px;
}
#container .human {
}
#container .human figure img {
width: 280px;
border-radius: 50%;
}
#container .human figcaption {
margin-bottom: 20px;
}
#container .human figcaption strong {
display: block;
font-size: 20px;
/*font-style: bold;*/
line-height: 50px;
}
#container .human figcaption small {
display: block;
font-size: 1.2em;
line-height: 30px;
}
#container .pricing {
padding: 80px 0 60px;
border-bottom: 1px solid #ddd;
}
#container .pricing .tle {
font-size: 26px;
line-height: 60px;
}
#container .pricing .desc {
margin-bottom: 40px;
font-size: 16px;
line-height: 30px;
}
#container .pricing dl {
margin: 0 20px 20px;
border: 1px solid #ccc;
}
#container .pricing dt strong {
display: block;
background-color: #222;
color: #eee;
font: 24px/3.4 'Verdana',sans-serif;
}
#container .pricing dd li {
border-bottom: 1px solid #ccc;
font-size: 1.2em;
line-height: 50px;
}
#container .pricing dd li strong {
font-weight: bold;
color: #000;
}
#container .pricing dd li span {
display: block;
}
#container .pricing dd li span.pay {
padding: 15px 0 0;
font-size: 2em;
}
#container .pricing dd li span.pay + span {
/* 인접 선택자 pay class를 가진 span 다음의 span을 선택 */
color: #666;
font-size: .9em;
}
#container .pricing dd .sign {
padding: 20px 0;
background-color: #f0f0f0;
}
#container .pricing dd .sign a {
display: inline-block;
padding: 0 24px;
background-color: #ffb69f;
color: #fff;
font-size: 1.2em;
text-decoration: none;
line-height: 45px;
}
#container .pricing dd .sign a i {
margin-right: 10px;
}
#container .pricing dd .sign a:hover {
background-color: #ccc;
color: #000;
}
#container .contact {
padding: 80px 0 0;
}
#container .contact .tle {
font-size: 26px;
line-height: 60px;
}
#container .contact .desc {
margin-bottom: 40px;
font-size: 16px;
line-height: 30px;
}
#footer {
padding: 30px 0 50px;
background-color: #222;
color: #eee;
text-align: center;
}
#footer a {
color: #fff;
}
#footer .desc {
margin-bottom: 15px;
font-size: 1.3em;
}
#footer dl {
margin-bottom: 15px;
}
#footer dd {
display: inline;
}
#footer dd a {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
line-height: 40px;
text-align: center;
font-size: 1.2em;
background-color: #ffb69f;
color: #eee;
}
#footer dd a:hover {
background-color: #ccc;
color: #000;
}그리고 css에서도 간단하게 색깔 같은 부분만 부분부분 손봤다.
max-width 값을 1200px로 고정시켜놔서
창을 늘려도 폭은 1200px 이상 늘어나지 않고
폭을 줄이면 위의 메인 메뉴의 폭이 따라서 좁아진다.
아직도 제로부터 혼자 하긴 좀 머리가 안돌아가지만
어느 정도는 좀 생각이 되긴 하는 것 같다.
다음 강의에서 스크립트 넣고 호스팅까지 하면 일단 html, css 강의는 끝이다.
일단 이번게 끝나면 인터랙션까진 구현못하더라도
지난 학기에 만들었던 '혐오의 시대' 작업 코드도 한 번 짜봐야겠다.
올해가 다 가기 전에 그건 100% 구현해봐야지...
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 030 html css 연습 (0) | 2021.03.23 |
|---|---|
| 029 웹페이지 예제 실습 (3) script 적용 및 호스팅 (0) | 2021.03.18 |
| 027 웹사이트 예제 실습 (1) html 마크업 (0) | 2021.03.15 |
| 026 media query 반응형 웹, 반응형 웹페이지 예제 실습 (0) | 2021.03.09 |
| 025 CSS3 공부 (4) transform, filter (0) | 2021.03.05 |
Daily Study/Web Dev
