Assignment3-Twitter/index1.html

<html>
<head>
    <title>Twitter login page with only CSS</title>
    <link rel="icon" type="image/png" href="images/tweet.png" >
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      .left{
        background-image:url('./images/bluetweet.png'); 
        background-repeat: no-repeat;
        background-size:200%;
      }
    </style>
    
</head>
<body>
    <button><a href="../index.html">BACK</a></button>
    <div class="maindiv">
      <div class="parent">
        <div class="left">
            <div class="div1">
                <h2><b>You're one step away from the <br/> shiny new Twitter.com</b></h2>
                <p><b>We've added tons of cool features, including ...</b></p>
            </div>
            <div class="icons">
                  <p><i class="fa fa-hashtag"></i>
                     Explore
                    <br/>Get the latest Tweets, news, and videos in one place.
                  </p>
                                
                  <p>
                    <i class="fa fa-bookmark"></i>
                    Bookmarks
                    <br/>Save that interesting Tweet for later.
                  <p>
                                
                  <p>
                    <i class="fa fa-paint-brush"></i>
                    Personalize
                    <br/>Choose from new themes and more dark mode operations.
                  </p>
            </div>
        </div>

        <div class="right">
            <form>
                    <div class="text">
                        <input class="pwd" type="email"  placeholder="Phone, email or username"/>
                        <input class="pwd" type="password"  name="password" placeholder="Password"/>
                        <button class="button-1 login">login</button><br/>
                        <label><a href="#">Forgot password?</a></label>
                        
    
                    </div>
            </form>
    
            <div class="card">
              <div class="head"></div>
                <img class="image" src="images/tweet.png" />
                <h2>See what's happening in <br/> the world right now</h2>
                 <p>Join Twitter today.</p> 
               <input type="button" class="button-1 signup" name="signup" value="Sign up">
               <br/>
               <input type="button" class="button-1 login" name="login" value="Log in">
            </div>
          </div>
        </div>

        <div class="footer">
            <ul>
                <a href=""><li>About</li></a>
                <a href=""><li> HelpCenter</li></a>
                <a href=""><li>Blog</li></a>
                <a href=""><li>Status</li></a>
                <a href=""><li>Jobs</li></a>
                <a href=""><li>Terms</li></a>
                <a href=""><li>Privacy Policy</li></a>
                <a href=""><li>Cookies</li></a>
                <a href=""><li>Adsinfo</li></a>
                <a href=""><li>Brand</li></a>
                <a href=""><li>Apps</li></a>
                <a href=""><li>Advertise</li></a>
                <a href=""><li>Marketing</li></a>
                <a href=""><li>Business</li></a>
                <a href=""><li>Developers</li></a>
                <a href=""><li>Directory</li></a>
                <a href=""><li>Settings</li></a>
                <a href=""><li>&copy2019 Twitter</li></a>
            </ul>
        </div>
  
  </div>
</body>
</html>