Scribd Logo
Upload

Welcome to Scribd!

  • (flexEx)Feb 01 7_09 PM

    Uploaded by

    300allinone
    2 views3 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views3 pages

    (flexEx)Feb 01 7_09 PM

    Uploaded by

    300allinone

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 3

    <!

    DOCTYPE html>
    <html>
    <head>
    <title>Navbar</title>
    <style>
    *
    {
    margin:0px;
    }
    header
    {
    background-color:black;
    color:white;
    display:flex;
    height:60px;
    align-items:center;
    justify-content:space-between;
    }
    #links>a
    {
    color:white;
    text-decoration:none;
    margin:20px;
    }
    #landing-page
    {
    background:blue url("group.jpg") no-repeat 0px 0px scroll;
    background-size:cover;
    height:100vh;
    }
    #landing-page>#content-section
    {
    background-color:rgba(0, 0, 0,0.3);
    height:inherit;
    text-align:center;
    color:white;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    }
    #landing-page>#content-section>h1::first-letter
    {
    font-size:100px;
    color:orange;
    }
    #landing-page>#content-section>button
    {
    border:none;
    outline:none;
    padding:7px 20px;
    background-color:orange;
    }

    @media only screen and (min-width:0px) and (max-width:900px)


    {
    header
    {
    flex-direction:column;
    }
    }
    </style>
    </head>
    <body>
    <header>
    <h1>Jspiders</h1>
    <div id="links">
    <a href="#">Courses</a>
    <a href="#">About</a>
    <a href="#">Gallery</a>
    <a href="#">Contact</a>
    <a href="#">Settings</a>
    <a href="#">Placements</a>
    </div>
    </header>

    <!-- Landing Page -->


    <div id="landing-page">
    <div id="content-section">
    <h1>Welcome To Jspiders</h1>
    <p>Incididunt exercitation sed duis in duis in sit enim minim
    mollit adipisicing esse magna officia pariatur duis. Irure officia laboris dolore
    elit sunt nostrud proident laboris et tempor sunt laborum ut. Cupidatat et
    consectetur aliquip exercitation sint aliqua esse qui ut commodo consectetur cillum
    laborum.</p>
    <button>Read More</button>
    </div>
    </div>
    </body>
    </html>

    fdrfgtyhuiygtfrdfghjygfd

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Animations</title>
    <style>
    div
    {
    background:linear-gradient(45deg,orange,blue,green);
    width:50px;
    height:50px;
    position:relative;

    animation-name:rotate;
    animation-duration:3s;
    animation-timing-function:linear;
    animation-delay:0s;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    }
    @keyframes rotate
    {
    0%,100%
    {
    top:0px;
    left:0px;
    border-radius:0px;
    }
    25%
    {
    top:0px;
    left:250px;
    border-radius:50px 0px 0px 0px;
    }
    50%
    {
    top:250px;
    left:250px;
    border-radius:0px 50px 0px 0px;
    }
    75%
    {
    top:250px;
    left:0px;
    border-radius:0px 0px 50px 0px;
    }
    100%
    {
    border-radius:50px;
    }
    }
    </style>
    </head>
    <body>
    <div>

    </div>
    </body>
    </html>

    You might also like