Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="generator" content="">
<meta name="robots" content="index,follow">
<title>About - Enlighten Design</title>
<link rel="stylesheet" href="css/subcide.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<dl class="skip-nav">
<dt class="blind"><strong>skip Navigation</strong></dt>
<dd><a href="#content">skip to content</a></dd>
</dl>
<hr>
<div id="wrap">
<!-- header -->
<div id="header">
<h1 class="logo"><a href="#"><img src="img/logo_enlighten.gif" alt="Enlighten Designs"></a></h1>
<h2 class="blind">Main menu</h2>
<ul class="lnb">
<li class="mm1"><a href="#" class="on">About</a></li>
<li class="mm2"><a href="#">Services</a></li>
<li class="mm3"><a href="#">Portfolio</a></li>
<li class="mm4"><a href="#">Contact Us</a></li>
</ul>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- content -->
<div id="content">
<div class="inner">
<h2><img src="img/about.gif" alt="About"></h2>
<p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p>
<p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p>
<h2><img src="img/contact.gif" alt="Contact Us"></h2>
<address>
<p><em>Phone:</em> (07) 853 6060</p>
<p><em>Fax:</em> (07) 853 6060</p>
<p><em>Email:</em> <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a></p>
<p><em>P.O Box:</em> 14159, Hamilton, New Zealand</p>
</address>
<p><a href="#">More contact information...</a></p>
</div>
</div>
<!-- //content -->
<!-- aside -->
<div id="aside">
<div class="inner">
<h2 class="blind">aside area</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus. Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget, purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.</p>
</div>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<dl class="btm_menu">
<dt class="blind"><strong>Bottom menu</strong></dt>
<dd><a href="#">About</a> -</dd>
<dd><a href="#">Services</a> -</dd>
<dd><a href="#">Portfolio</a> -</dd>
<dd><a href="#">Contact Us</a> -</dd>
<dd><a href="#">Terms of Trade</a></dd>
</dl>
<p class="copy">
Copyright © Enlighten Designs<br>
Powered by <a href="#">Enlighten Hosting</a> and <a href="#">Vadmin 3.0 CMS</a>
</p>
</div>
<!-- //footer -->
</div>
</body>
</html>@charset "utf-8";
/* reset */
html,body,dl,dt,dd,h1,h2,ul,li,p,address {margin:0; padding: 0}
body,h1,h2 {font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 12px}
li {list-style-type: none}
img,fieldset {border:0}
img {vertical-align: top}
address, em{font-style: normal}
hr {display: none}
.blind {display: block; position: absolute; left:0; top: -9999em}
.skip-nav a {display: block; position: absolute; left: 0; top: -9999em; z-index: 9999; width: 100%; background-color: navy; color: #eee; text-align: center; text-decoration: none; line-height: 2.4em;}
.skip-nav a:focus {top:0}
/* style */
#wrap {width: 760px; margin: 0 auto}
#header {position: relative; padding-bottom: 150px; background: url(../img/visual_about.jpg) no-repeat 0 100%}
.about #header {background-image: url(../img/visual_about.jpg)}
.services #header {background-image: url(../img/visual_services.jpg)}
.portfolio #header {background-image: url(../img/visual_portfolio.jpg)}
.contact #header {background-image: url(../img/visual_contact.jpg)}
#header .logo {position: absolute; right: 26px; top: 106px}
#header .lnb {padding-left: 11px; *zoom: 1;}
#header .lnb:after {content: ''; display: block; clear: both;}
#header .lnb li {float: left}
#header .lnb li a {display:block; height: 50px; background: no-repeat 0 0; text-indent: -9999em}
#header .lnb li.mm1 a {width: 71px; background-image: url(../img/m_about.gif)}
#header .lnb li.mm2 a {width: 84px; background-image: url(../img/m_services.gif)}
#header .lnb li.mm3 a {width: 95px; background-image: url(../img/m_portfolio.gif)}
#header .lnb li.mm4 a {width: 106px; background-image: url(../img/m_contact.gif)}
#header .lnb li a:hover {background-position: 0 -50px}
#header .lnb li a.on,
#header .lnb li a.on:hover {background-position: 0 -100px}
#container {padding-bottom: 20px; *zoom:1;}
#container:after {content: ''; display: block; clear: both}
#container #content {float: left; width: 63%; color: #666; line-height: 1.3}
#container #content .inner {padding: 25px 25px 0}
#container #content h2,
#container #content p,
#container #content address {margin-bottom: 15px}
#container #content address p {margin-bottom: 0}
#container #aside {float: right; width: 37%; color: #666; line-height: 1.3}
#container #aside .inner {padding: 25px 25px 0 0}
#footer {border-top: 1px solid #ccc; padding: 25px 25px 35px; color: #999; font-size: .9em; line-height: 1.8; *zoom:1}
#footer a {color: #aaa; text-decoration: none}
#footer a:hover {color: brown}
#footer:after {content:''; display: block; clear:both;}
#footer .btm_menu {float: right}
#footer .btm_menu dd {display: inline}
#footer .copy {float: left}
각 메뉴별로 html 파일을 나눠서 링크를 걸어줘서 클릭하면 이동하게 만들어졌다.
일단 이제 내일부터는 css3 공부하니까 좀 더 요즘 트렌드 방식으로 코딩을 하니까
더 제대로 하나하나 이해하고 복습도하고 해봐야겠다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 023 CSS3 공부 (2) multi columns, rounded box, box-sizing, flex (0) | 2021.03.02 |
|---|---|
| 022 CSS3 공부 (1) css3 선택자, 그림자,말줄임,투명도 지정 (0) | 2021.02.25 |
| 020 CSS 공부 (16) 레이아웃 예제 실습 (0) | 2021.02.21 |
| 019 CSS 공부 (15) 로그인 페이지 예제 실습 (0) | 2021.02.17 |
| 018 CSS 공부 (14) 다음 부동산 메뉴, 테이블 예제 실습 (0) | 2021.02.16 |
Daily Study/Web Dev
