Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

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-style: none; }

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

        img { border:0;}

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

 

        /* 배경동영상 */

        .vid { width:100%; height:100%; position:fixed; top:-60px; left:0px; opacity:0.9; }

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

 

        /*로고*/

        h1 { position:fixed; top:40px; left:40px; z-index:10;}

        h1 img { width:280px; height:auto;}

        header {width:700px;

                height:100%; 

                position:fixed; 

                top:0px;            

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

                background: #97e031; 

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

        }

        /* 1depth*/

        #gnb {  width:220px; position:absolute; top:150px; right:0px;}

        #gnb>li {position:relative; }

        #gnb>li>a { display:block; width:220px; height:50px; font:bold 18px/3 play; color:#222; box-sizing:border-box; padding-right:40px; text-align:right;}

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

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

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

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

 

        /* 2depth */

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

        #gnb ul { 

            position:absolute; 

            left:0px;  

            top:0px; 

            opacity:0; 

            transition: 0.5s;

        }

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

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

 

        #gnb ul a { display:block; width:150px; height:40px; background:#222; border-bottom:1px solid #b9fb05; font:bold 16px/2.5 arial; color:#fff; box-sizing:border-box; padding-left:50px; margin-bottom:3px; transition:all 0.5s; }

        #gnb ul a:hover { background:#b9fb05; color:#333; }

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

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

 

        /* sns 버튼 모음*/

        #sns { position:fixed; top:60px; right:50px;}

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

        #sns .fa{ color:yellowgreen;

                transition: 0.5s;

        }

        #sns .fa:hover { color:rgb(209, 243, 141);

            transform:scale(2);

        }

 

        /* 텍스트 박스 */

        .txtBox { width:340px; height:280px; position:fixed; top:200px; right:70px; }

        .txt { position:absolute; top:200px; right:0px; font-size:34px; font-family:play; color:#bbb; letter-spacing:-2px;}

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

        .tit { position:absolute; top:0px; right:0px; font-size:160px; color:#b9fb05; font-family: 'Monoton', cursive; letter-spacing:-1px;}

        .tit em { font-size:50px; font-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/08 layout03  (0) 2020.10.08
10/7 css selector  (0) 2020.10.07
10/7 html_workspace  (0) 2020.10.07
'TIS_2020/빅데이터2020_1기' Related Articles more
Comments