Day 13( project - 4) insta log in page

Instagram log in

NEW HTML TAG

span- is an inline container used tomark up a part of a text

HTML CODE

</head>
<body>
    <main>
        <div class="left">
            <img class="logo" style="width: 70px;height: 70px;" src="/PHOTO/imgginsta.jpg" alt=" instagram logo" >
            <p>See everyday moments from your <span> close friends.</span></p>

            <img  class="instaimg" src="/PHOTO/instafront.webp" alt="">
        </div>
        <div class="right">
            <div class="login">
                <p> Log into instagram</p>
            <input type="text" placeholder="mobile number,username or email">
            <input type="password" placeholder="Password">
            <button class="A">Log in</button>
            <button class="b">Forgot password?</button>
            <button class="c">Log in with Facebook</button>
            <button class="d">Create new account</button>
            </div>



        </div>

    </main>
    <footer>
    <nav>
        <a href="https://about.meta.com/" target="_blank">Meta</a>
  <a href="https://about.instagram.com/" target="_blank">About</a>
  <a href="https://about.instagram.com/blog" target="_blank">Blog</a>
  <a href="https://www.metacareers.com/" target="_blank">Jobs</a>
  <a href="https://help.instagram.com/" target="_blank">Help</a>
  <a href="https://developers.facebook.com/docs/instagram" target="_blank">API</a>
  <a href="https://privacycenter.instagram.com/policy/" target="_blank">Privacy</a>
  <a href="https://help.instagram.com/581066165581870" target="_blank">Terms</a>
  <a href="https://www.instagram.com/explore/locations/" target="_blank">Locations</a>
  <a href="https://www.instagram.com/directory/profiles/" target="_blank">Popular</a>
  <a href="https://www.instagram.com/web/lite/" target="_blank">Instagram Lite</a>
  <a href="https://www.meta.ai/" target="_blank">Meta AI</a>
  <a href="https://www.threads.net/" target="_blank">Threads</a>
  <a href="https://www.facebook.com/help/instagram/261704639352628" target="_blank">
</div>.
    </nav>

</body>
</html>

CSS CODE

<style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        main{
            /* border: 1px solid red; */
            height: 90vh;
            display: grid;
            grid-template-columns: 1.5fr 1.3fr;
        }
        .left{
            /* border: 1px solid black; */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;




        }

        .right{
            /* border: 1px solid blue; */
            display: flex;
            justify-content: center;
            align-items: center;


        }
        footer{
            height: 10vh;

        }
        .logo{
            margin-right: 70%;
        }
        .instaimg{

            width: 70vh;
            height: 50vh;

        }
       .left p{
            /* border: 1px solid ; */
            width: 60%;
            font-size: 40px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, sans-serif ;

        }
        span{
            color:  #FE0567;

        }
        .login{
            /* border: 1px solid; */
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 80%;
        }
        .login p{
         font-size: x-large;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         font-weight: 700;
        }
        button ,input{

            padding: 10px;



            font-size: small ;
            border: 1px solid #dbdbdb;
            border-radius: 9999px;
            background-color: white;
        }
        button{
            cursor: pointer;
        }
        .A{
            background-color: #3776ff;
            color: white;

        }
        .d{
            color: #3776ff;
            background-color: white;
        }
        .b{
            border: white;
            padding-top: 0%;
        }
        a{
            color:grey;
            text-decoration: none;
            margin-right: 10px;
        }
        nav{

            text-align: center;
        }

    </style>

NEW CSS Propertys

font-size-is used to specify the size of the text/font.
font family-is specifies the font for an element.
font weight- is to sets how thick or thin characters in text should be displayed.
font-variant- In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size

OUTPUT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        main{
            /* border: 1px solid red; */
            height: 90vh;
            display: grid;
            grid-template-columns: 1.5fr 1.3fr;
        }
        .left{
            /* border: 1px solid black; */
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-evenly;




        }

        .right{
            /* border: 1px solid blue; */
            display: flex;
            justify-content: center;
            align-items: center;


        }
        footer{
            height: 10vh;

        }
        .logo{
            margin-right: 70%;
        }
        .instaimg{

            width: 70vh;
            height: 50vh;

        }
       .left p{
            /* border: 1px solid ; */
            width: 60%;
            font-size: 40px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, sans-serif ;

        }
        span{
            color:  #FE0567;

        }
        .login{
            /* border: 1px solid; */
            display: flex;
            flex-direction: column;
            gap: 20px;
            width: 80%;
        }
        .login p{
         font-size: x-large;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         font-weight: 700;
        }
        button ,input{

            padding: 10px;



            font-size: small ;
            border: 1px solid #dbdbdb;
            border-radius: 9999px;
            background-color: white;
        }
        button{
            cursor: pointer;
        }
        .A{
            background-color: #3776ff;
            color: white;

        }
        .d{
            color: #3776ff;
            background-color: white;
        }
        .b{
            border: white;
            padding-top: 0%;
        }
        a{
            color:grey;
            text-decoration: none;
            margin-right: 10px;
        }
        nav{

            text-align: center;
        }

    </style>
</head>
<body>
    <main>
        <div class="left">
            <img class="logo" style="width: 70px;height: 70px;" src="/PHOTO/imgginsta.jpg" alt=" instagram logo" >
            <p>See everyday moments from your <span> close friends.</span></p>

            <img  class="instaimg" src="/PHOTO/instafront.webp" alt="">
        </div>
        <div class="right">
            <div class="login">
                <p> Log into instagram</p>
            <input type="text" placeholder="mobile number,username or email">
            <input type="password" placeholder="Password">
            <button class="A">Log in</button>
            <button class="b">Forgot password?</button>
            <button class="c">Log in with Facebook</button>
            <button class="d">Create new account</button>
            </div>



        </div>

    </main>
    <footer>
    <nav>
        <a href="https://about.meta.com/" target="_blank">Meta</a>
  <a href="https://about.instagram.com/" target="_blank">About</a>
  <a href="https://about.instagram.com/blog" target="_blank">Blog</a>
  <a href="https://www.metacareers.com/" target="_blank">Jobs</a>
  <a href="https://help.instagram.com/" target="_blank">Help</a>
  <a href="https://developers.facebook.com/docs/instagram" target="_blank">API</a>
  <a href="https://privacycenter.instagram.com/policy/" target="_blank">Privacy</a>
  <a href="https://help.instagram.com/581066165581870" target="_blank">Terms</a>
  <a href="https://www.instagram.com/explore/locations/" target="_blank">Locations</a>
  <a href="https://www.instagram.com/directory/profiles/" target="_blank">Popular</a>
  <a href="https://www.instagram.com/web/lite/" target="_blank">Instagram Lite</a>
  <a href="https://www.meta.ai/" target="_blank">Meta AI</a>
  <a href="https://www.threads.net/" target="_blank">Threads</a>
  <a href="https://www.facebook.com/help/instagram/261704639352628" target="_blank">
</div>.
    </nav>

</body>
</html>

output link

akilan46-project-bce2db.gitlab.io

DEV Community

Day 13( project - 4) insta log in page

Instagram log in

HTML CODE

CSS CODE

Top comments (0)