관리 메뉴

moozi

10/12 layout04.html 본문

TIS_2020/빅데이터2020_1기

10/12 layout04.html

moozi 2020. 10. 12. 14:27

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NIKE</title>

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

    <style>

 

        @import url(http://fonts.googleapis.com/css?family=Play);

        @import url(http://fonts.googleapis.com/css?family=Monoton);

        

        /*    Reset CSS  */

        * { margin:0;  padding:0; }

        ol,ul { list-stylenone; }

        a { outline:0text-decoration:nonecolor:#bbb;}

        img { border:0;}

        body { position:fixed;  width:100%height:100%background:#111;}

 

        /* 배경동영상 */

        .vid { width:100%height:100%position:fixedtop:-60pxleft:0pxopacity:0.9; }

        .vid video { width:100%min-width:1600px; }

 

        /*로고*/

        h1 { position:fixedtop:40pxleft:40pxz-index:10;}

        h1 img { width:280pxheight:auto;}

        header {width:700px;

                height:100%

                position:fixed

                top:0px;            

                left:-420px/* 왼쪽으로 이동 */ 

                background#97e031

                transform:skewX(-40deg);  /* 40도 기울게  */

        }

        /* 1depth*/

        #gnb {  width:220pxposition:absolutetop:150pxright:0px;}

        #gnb>li {position:relative; }

        #gnb>li>a { display:blockwidth:220pxheight:50pxfont:bold 18px/3 play; color:#222box-sizing:border-boxpadding-right:40pxtext-align:right;}

        #gnb>li.on>a { background:#111color:#fff;}

        #gnb>li:hover>a { background:#111color:#fff;}

        #gnb em { display:inline-blocktransform:skewX(40deg)!important; }

        #gnb em i {     margin-right:20px;}

 

        /* 2depth */

        /* 서브메뉴 기본 상태*/

        #gnb ul { 

            position:absolute

            left:0px;  

            top:0px

            opacity:0

            transition0.5s;

        }

        /* 서브메뉴 변경된 상태 */

        #gnb>li:hover ul { opacity:0.8left:205px; } /* 서브메뉴 보이게 */

 

        #gnb ul a { display:blockwidth:150pxheight:40pxbackground:#222border-bottom:1px solid #b9fb05font:bold 16px/2.5 arialcolor:#fffbox-sizing:border-boxpadding-left:50pxmargin-bottom:3pxtransition:all 0.5s; }

        #gnb ul a:hover { background:#b9fb05color:#333; }

        #gnb>li.on ul { opacity:0.8left:205pxtop:-10px; }

        #gnb li.on ul a { background:#444opacity:0.7; } 

 

        /* sns 버튼 모음*/

        #sns { position:fixedtop:60pxright:50px;}

        #sns li { float:leftmargin-right:30px;}

        #sns .facolor:yellowgreen;

                transition0.5s;

        }

        #sns .fa:hover { color:rgb(209243141);

            transform:scale(2);

        }

 

        /* 텍스트 박스 */

        .txtBox { width:340pxheight:280pxposition:fixedtop:200pxright:70px; }

        .txt { position:absolutetop:200pxright:0pxfont-size:34pxfont-family:play; color:#bbbletter-spacing:-2px;}

        .txt b { font:bold 34px arialcolor:#b9fb05;   margin-left:20px;}

        .tit { position:absolutetop:0pxright:0pxfont-size:160pxcolor:#b9fb05font-family'Monoton'cursiveletter-spacing:-1px;}

        .tit em { font-size:50pxfont-family:play; color:#fff;}

    </style>

</head>

<body>

    <!-- 배경동영상 -->

    <figure class="vid">

        <video  loop="loop" autoplay="autoplay" muted="muted">

            <source src="img/nike.mp4" type="video/mp4" />

        </video>

    </figure>

    

    <!-- 로고 -->

    <h1><img src="img/logo2.png" /></h1>

    

  

    <!-- header -->

    <header>        

        <ul id="gnb">

            <li class="on">

                <a href="#"><em><i class="fa fa-refresh fa-spin"></i>About NIKE</em></a>

                <ul>

                    <li><a href="#"><em><b>English</b></em></a></li>                

                </ul>

            </li>

            <li>

                <a href="#"><em>Brand Info</em></a>             

                <ul>

                    <li><a href="#"><em>sub</em></a></li>

                    <li><a href="#"><em>sub</em></a></li>

                    <li><a href="#"><em>sub</em></a></li>

                    <li><a href="#"><em>sub</em></a></li>

                </ul>

            </li>

            <li>

                <a href="#"><em> Community</em></a>

                <ul>

                    <li><a href="#"><em>sub</em></a></li>

                    <li><a href="#"><em>sub</em></a></li>

                    <li><a href="#"><em>sub</em></a></li>       

                </ul>

            </li>

            <li>

                <a href="#"><em>Product Value</em></a>

                <ul>

                    <li><a href="#"><em>sub</em></a></li>

                    <li><a href="#"><em>sub</em></a></li>           

                </ul>

            </li>

            <li>                

                <a href="#"><em>Company History</em></a>

                <ul>

                    <li><a href="#"><em>sub</em></a></li>                       

                </ul>

            </li>   

        </ul>

    </header>

    <!-- sns 버튼모음 -->

    <ul id="sns">

        <li><a href="#"><i class="fa fa-facebook"></i></a></li>

        <li><a href="#"><i class="fa fa-twitter"></i></a></li>

        <li><a href="#"><i class="fa fa-youtube"></i></a></li>  

    </ul>

 

    <!-- 웹폰트 텍스트박스 -->

    <section class="txtBox">

        <p class="txt">Best Qualified<b>AIR MAX</b></p>

        <p class="tit">50<em>/ 24</em></p>

    </section>  

</body>

</html>

'TIS_2020 > 빅데이터2020_1기' 카테고리의 다른 글

10/13 movie  (0) 2020.10.13
10/13 layout04.html  (0) 2020.10.13
10/12 layout04.html  (0) 2020.10.12
10/08 layout03  (0) 2020.10.08
10/7 css selector  (0) 2020.10.07
10/7 html_workspace  (0) 2020.10.07
0 Comments
댓글쓰기 폼