Scribd Logo
Upload

Welcome to Scribd!

  • DOCTYPE HTML

    Uploaded by

    Nageen Shah
    28 views4 pages
    website

    Original Title

    DOCTYPE html

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    website

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    28 views4 pages

    DOCTYPE HTML

    Uploaded by

    Nageen Shah
    website

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>NS Ceations</title>
    <link rel="stylesheet" type="text/css" href="css/style.css"></li>
    </head>
    <body>
    <header>
    <div class="main">
    <div class="logo">
    <img src="logo.png">
    </div>
    <ul>
    <li class="active"><a href="#">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="gallery.html">OUR WORK</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    </ul>
    </div>
    <div class="title">
    <h1>NS Creations</h1>
    </div>

    <div class="button">
    <a href="#" class="btn">TOUR</a>
    <a href="#" class="btn">ENTER</a>

    </div>
    </header>

    </body>
    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <title>NS Ceations</title>
    <link rel="stylesheet" type="text/css" href="css/img-style.css"></li>
    </head>
    <body>
    <header>
    <div class="main">
    <div class="logo">
    <img src="logo.png">
    </div>
    <ul>
    <li><a href="index.html">HOME</a></li>
    <li><a href="about.html">ABOUT</a></li>
    <li><a href="services.html">SERVICES</a></li>
    <li><a href="gallery.html">GALLERY</a></li>
    <li><a href="contact.html">CONTACT</a></li>
    </ul>
    </div>
    <div class="title">
    <h1>Product Gallery</h1>
    </div>

    <div class="sub-title">
    <h1></h1>
    <div class="box"><img src="img/1.jpg"></div>
    <div class="box"><img src="img/2.jpg"></div>
    <div class="box"><img src="img/3.jpg"></div>
    <div class="box"><img src="img/4.jpg"></div>
    <div class="box"><img src="img/5.jpg"></div>
    <div class="box"><img src="img/6.jpg"></div>
    <div class="box"><img src="img/7.jpg"></div>
    <div class="box"><img src="img/8.jpg"></div>

    </div>
    </header>

    </body>
    </html>
    *{
    margin: 0;
    padding: 0;
    font-family: Century Gothic;
    font-weight: bold;
    }

    header{
    background-image:linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url(../background.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
    }

    ul{
    float: right;
    list-style-type: none;
    margin-top: 30px;
    }

    ul li{
    display: inline-block;
    }

    ul li a{
    text-decoration: none;
    color: #f7941e;
    padding: 5px;
    border: 1px transparent;
    transition: 0.6s ease;
    }

    ul li a:hover{
    background-color: #fff;
    color: #000;
    }

    ul li.active a{
    background-color: #fff;
    color: #000;
    }

    .logo img{
    float: left;
    width: 250px;
    height: auto;
    }
    .main{
    max-width: 1200px;
    margin: auto;
    }

    .title{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .sub-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .sub-title h1{
    color: #7ad3f7;
    font-size: 30px;
    }

    .title h1{
    color: #fff;
    font-size: 100px;
    }

    .button{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

    .btn{
    border: 1px solid #fff;
    padding: 10px 30px;
    text-decoration: none;
    font-size: 20px;
    font-weight: bold;
    }

    .btn:hover{
    background-color: #fff;
    color: #000;
    }

    You might also like