Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>코딩2</title>
- <style>
- body {
- margin:0;
- }
- #wrap {
- margin:0 auto;
- width:940px;
- }
- header {
- border-radius:20px 20px 0 0;
- width:100%;
- height:300px;
- background-color:yellow;
- background-image:url(http://lorempixel.com/940/300);
- }
- nav {
- width:100%;
- height:50px;
- background-color:rgb(0,0,0);
- }
- nav > a {
- font-size:25px;
- color:white;
- text-decoration:none;
- height: 50px;
- line-height:50px;
- padding:0 10px;
- display:inline-block;
- }
- nav > a:hover { background-color:red;}
- section, aside { min-height:400px; float:left; }
- section { width:640px;}
- aside { width:300px; background-color:green;}
- .hello { width:620px; padding:10px; }
- .hello > h1 { font-size: 28px; margin-bottom:0;}
- .hello > p { font-size: 18px; line-height: 150%;}
- .hello > p > img { border-radius:10px; margin: 5px 5px 0 0;}
- .video { clear:both; }
- .video > div { width:320px;height:240px;float:left;}
- .slide { clear:both; }
- .slide > div {
- margin: 20px 0;
- width: 640px;
- height: 300px;
- position: relative;
- overflow: hidden;
- }
- .slide > div > img {
- width: 640px;
- height: 300px;
- position: absolute;
- left: 0;
- top: -300px;
- }
- </style>
- </head>
- <body>
- <div id="wrap">
- <header id="h"></header>
- <nav>
- <a href="#rest" onmouseover="change('food')">HOME</a>
- <a href="#rest" onmouseover="change('cats')">HTML</a>
- <a href="#rest" onmouseover="change('sports')">STYLE</a>
- <a href="#rest" onmouseover="change('people')">JAVASCRIPT</a>
- <a href="#rest" onmouseover="change('city')">공주대학교</a>
- </nav>
- <section>
- <article class="hello">
- <h1>환영합니다.</h1>
- <p><img align="left" src="http://lorempixel.com/100/100/technics">웹을 활용한 코딩 배우기 시간에 오신것을 환영합니다. 이 강의는 국립공주대학교 학생들을 위해 개설되었으며 웹 개발 언어를 통해 컴퓨터 코딩을 이해하고 이를 통해 디지털 세계로의 접근을 보다 깊이 하기 위해 개설되었습니다.</p>
- </article>
- <article class="video">
- <div><iframe width="320" height="240" src="https://www.youtube.com/embed/av_QX3uSTR0" frameborder="0" allowfullscreen></iframe></div>
- <div><iframe width="320" height="240" src="https://www.youtube.com/embed/Rxn9_LwZ_6A" frameborder="0" allowfullscreen></iframe></div>
- </article>
- <article class="slide">
- <div>
- <img src="http://lorempixel.com/640/300/nightlife">
- <img src="http://lorempixel.com/640/300/business">
- <img src="http://lorempixel.com/640/300/technics">
- </div>
- </article>
- </section>
- <aside>
- </aside>
- </div>
- <script src="http://code.jquery.com/jquery-latest.js"></script>
- <script>
- function change(c){
- var src = "http://lorempixel.com/940/300/" + c;
- $("#h").css("background-image","url(" + src + ")");
- }
- //슬라이드
- var slideimgs = $(".slide > div > img");
- var sno = 0;
- var max = slideimgs.length - 1;
- $( slideimgs[sno] ).css("top",0);
- $(".slide > div").click( function(){
- $(slideimgs[sno]).animate({"top":"300px"},2000,
- function(){ $(this).css({"top":"-300px"}); }
- );
- sno = sno + 1;
- if( sno > max ) sno=0;
- $(slideimgs[sno]).animate({"top":0},2000);
- } );
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement