What is Html And Css

-

 What is Html And Css.

Welcome to HTML Basics.

This workshop leads you through the basics of Hyper Text Markup Language(Html).

Html is the building of web page. You will learn to use of HTML to author an HTML page to display in a web browser.

Objective :
By the end of this workshop, you will be able to:

  • Use a text or code editor to author an HTML document.
  • Just like notepad.ok
Html code editor
Html code Editor


  • Be able to use basic tags to denote paragraphs, emphasis or special type.

  • Create hyperlinks to other documents. 

    Create an email link.

  • Add images to your document. 

    Use a table for layout.

  • Apply colors to your HTML document.



Get my project source code.

Copy and paste your code Editor.

Multiple Login forms


Multiple Login forms

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=Edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>HTML</title>
 <style type="text/css" media="all">
  * {
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
  }

  a {
   text-decoration: none;
   outline: none;
   background: transparent;
  }
body{
    background-color: #17141d;

}
  .mainSection {
   width: 100vw;
   height: auto;
   /*background: linear-gradient(90deg, #201c29, #201c29 1px, #17141d 0, #17141d);*/
overflow: hidden
  }

  .ak_brand {
   width: 10rem;
   padding: 5px 0px;
   border: 1px solid purple;
   margin: 1rem auto;
   box-shadow: inset 0px 0px 5px 3px hsla(0, 0%, 100%, .20);
background-clip: text;

  }
  .ak_brand h1 {
   font-size: 1rem;
   font-weight: bold;
   text-align: center;
      color: #CAFFAA;

  }

  .ak_lookdesign {
   width: 10rem;
   border: 1px solid black;
   margin: auto;

  }

  .ak_newlook {
   font-size: 0.3rem;
   text-align: center;
   color: #CAFFAA;
  }

  .mainIcons {
   width: 99vw;
   height: 8vh;
   margin: 0.3rem auto;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   background-color: #17141d;

  }

  .box_1,
  .box_2,
  .box_3 {
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   background-color: #17141d;
   box-shadow: 0px 3px 6px 2px hsla(0, 0%, 100%, .2);
   
  }

  .fa-facebook-f {
   font-size: 1.4rem;
   color: #CAFFAA;

  }
  #fa-facebook{
   color: #4267B2;
  }
.active{
 color: #6A5CFF;
}
  .fa-google-plus-g {
   font-size: 1.4rem;
   color: #CAFFAA;

  }
#fa-google-plus{
    color: #db4a39;

}
  .fa-twitter {
   font-size: 1.4rem;
   color: #CAFFAA;

  }
#fa-twitter{
 color:#1DA1F2;
}
  #withFacebook,#withGoogle,#withTwitter {
   color: #CAFFAA;
   font-size: 0.3rem;
   text-align: center;
position: absolute;
transition: all 3s;
display: none;
  }

  .mainIcons_links {
   width: 99vw;
   height: 44vh;
   margin: 0.3rem auto;
   position: relative;
   background-color: #17141d;
  }

  .linkFacebook {
   width: 70vw;
   height: 40vh;
   position: absolute;
   top: 0.6rem;
   left: 3.5rem;
   background-color: #17141d;
   box-shadow: 0px 0px 5px 3px hsla(0, 0%, 100%, .1);
   transition: all 0.4s ease-in;
   border: 0.1px solid purple;
   z-index: -1;
   animation: myMove 2s;
  }

  @keyframes myMove {
   from {
    transform: scale(0.0);
   }

   to {
    transform: scale(1.0);

   }
  }

  .card {
   width: 67vw;
   height: auto;
   color: #09E943;
   margin: 0.4rem auto;
  }
  .continue{
   text-align: center;
   font-size: 0.6rem;
  }
.author_img{
    width: 2rem;
   height: 2rem;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   margin:0.4rem auto;
box-shadow: inset 0px 0px 5px 3px hsla(0, 0%, 100%, .1);

}
  .headBox {
   width: 50vw;
   height: 3vh;
   margin: 5px auto;

   

  }

  .titleFacebook {
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
 color: #4267B2;


  }
  .titleGoogle {
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
     color: #db4a39;



  }
  .titleTwitter {
   text-align: center;
   font-size: 1rem;
   font-weight: bold;
 color:#1DA1F2;


  }


  .Login {
   width: 20vw;
   height: 2.8vh;
   margin: 5px auto;
   text-align: center;

  }

  .ak_login {
   font-size: 0.7rem;
   color: #7164F0;

  }

  .formBox {
   width: 55vw;
   height: auto;
   margin: auto;
   padding: 1rem 0rem;
   background-color: #17141d;

  }

  .formBox label {
   color: whitesmoke;
   font-size: 0.5rem;
   margin: 0rem 0.5rem;

  }
.formBox input{
 color: grey;
 font-size: 0.1rem;
}
  #email {
   width: 50vw;
   height: 1rem;
   border: none;
   outline: none;
   background: transparent;
   padding: 0.5rem 0rem;
   margin: 0rem 0.5rem;
   cursor: pointer;
   border-radius: 0.2rem;
   border: 0.1px solid purple;
border-radius: 0.3rem
  }

  #password {
   width: 50vw;
   height: 1rem;
   border: none;
   outline: none;
   background: transparent;
   padding: 0.5rem 0rem;
   margin: 0rem 0.5rem;
   cursor: pointer;
   border-radius: 0.2rem;
   border: 0.1px solid purple;
border-radius: 0.3rem

  }

  #signBtn {
   font-weight: bold;
   font-size: 0.3rem;
   border: none;
   outline: none;
   color:#CAFFAA;
   padding: 0.2rem 0.5rem;
   margin: 0.4rem 1rem;
  background-color: #17141d;
   border: 0.1px solid purple;

  }
.forgetPass{
 text-decoration: none;
 color: whitesmoke;
 font-size: 0.3rem;
 font-weight: bold;
 outline: none;
}
  .linkGoole {
   width: 70vw;
   height: 40vh;
   border: 0.1px solid purple;
   position: absolute;
   top: 0.6rem;
   left: 3.5rem;
  /* box-shadow: inset 0px 0px 5px 5px hsla(0, 0%, 100%, .20);*/
   box-shadow: 0px 0px 5px 3px hsla(0, 0%, 100%, .1);
   transition: all 0.2s ease-in;
   z-index: -1;
   animation: myMove 2s;

  }

  @keyframes myMove {
   from {
    transform: scale(0.0);
   }

   to {
    transform: scale(1.0);

   }
  }

  .linkTwitt {
   width: 70vw;
   height: 40vh;
   border: 0.1px solid purple;
   position: absolute;
   top: 0.6rem;
   left: 3.5rem;
   /*box-shadow: inset 0px 0px 5px 5px hsla(0,0%,100%,.20);*/
   box-shadow: 0px 0px 5px 3px hsla(0, 0%, 100%, .1);
   transition: all 0.4s ease-in;
   z-index: -1;
   animation: myMove 2s;
  }

  @keyframes myMove {
   from {
    transform: scale(0.0);
   }

   to {
    transform: scale(1.0);

   }
  }
 </style>
 <!-- HTML -->
 <!-- Custom Styles -->
 <link rel="stylesheet" href="style.css">
 <link rel="stylesheet" href="all.min.css">
</head>

<body>
 <section class="mainSection">
  <header>
   <div class="ak_brand">
    <h1>Ak Webpage Design</h1>
   </div>
   <div class="ak_lookdesign">
    <p class="ak_newlook">Looking New Design</p>
   </div>
   <div class="mainIcons">
    
    <div class="box_1" id="facebookPage">
     <i class="fab fa-facebook-f">&#xf39e;</i>
     <p id="withFacebook">With</p>
    </div>
    
    <div class="box_2" id="googlePage">
     <i class="fab fa-google-plus-g">&#xf0d5;</i>
     <!--<i class="fab fa-accusoft">&#xf369;</i>-->
         <p id="withGoogle">With</p>

    </div>
    
    <div class="box_3" id="twitterPage">
     <i class="fab fa-twitter">&#xf099;</i>
         <p id="withTwitter">With</p>

    </div>
    
   </div>
  </header>
  <div class="mainIcons_links">
   <div id="display_Fb" class="linkFacebook">
    <div id="innerItem">
     <div class="card">
     <p class="continue">Continue</p>

      <div class="author_img">
   <i class="fab fa-facebook-f" id="fa-facebook">&#xf39e;</i>

      </div>
      <div class="headBox">
       
       <h1 class="titleFacebook">Facebook</h1>
      </div>
      <div class="Login">
       <h2 class="ak_login">Login</h2>
      </div>
      <div class="formBox">
       <form class="myform" action="" method="get" accept-charset="utf-8">
        <label for="Email">Email</label>
        <input type="text" name="email" id="email" value="" placeholder="Email"/>
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" placeholder="Password"/>
        <input type="button" name="" id="signBtn" value="Sign in" />
        
       <a class="forgetPass" href="#">Forget Password ?</a> 
       </form>
      </div>
     </div>
    </div>
   </div>
   <div id="display_Goog" class="linkGoole">
  <div id="innerItem">
     <div class="card">
          <p class="continue">Continue</p>

         <div class="author_img">
     <i class="fab fa-google-plus-g" id="fa-google-plus">&#xf0d5;</i>

      </div>
    
      <div class="headBox">
       <h1 class="titleGoogle">Google+</h1>
      </div>
      <div class="Login">
       <h2 class="ak_login">Login</h2>
      </div>
      <div class="formBox">
       <form class="myform" action="" method="get" accept-charset="utf-8">
        <label for="Email">Email</label>
        <input type="text" name="email" id="email" value="" placeholder="Email"/>
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" placeholder="password"/>
        <input type="button" name="" id="signBtn" value="Sign in" />
    <a class="forgetPass" href="#">Forget Password ?</a> 

       </form>
      </div>
     </div>
    </div>

   </div>
   <div id="display_Twitt" class="linkTwitt">
           <div id="innerItem">
     <div class="card">
    <p class="continue">Continue</p>
    <div class="author_img">
     <i class="fab fa-twitter" id="fa-twitter">&#xf099;</i>

      </div>
    
      <div class="headBox">
       <h1 class="titleTwitter">Twitter</h1>
      </div>
      <div class="Login">
       <h2 class="ak_login">Login</h2>
      </div>
      <div class="formBox">
       <form class="myform" action="" method="get" accept-charset="utf-8">
        <label for="Email">Email or Username</label>
        <input type="text" name="email" id="email" value="" placeholder="Email or Username"/>
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" placeholder="password"/>
        <input type="button" name="" id="signBtn" value="Sign in" />
  <a class="forgetPass" href="#">Forget Password ?</a> 

       </form>
      </div>
     </div>
    </div>

   </div>
  </div>
 </section>
 <!--<div class="boxes">
 
 <div class="box" id="box_one">
 </div>

 <div class="box" id="box_two">
 </div>
 
 <div class="box" id="box_three">
 </div>
     <svg class="half-circle" viewBox="0 0 106 57">
      <path d="M102 4c0 27.1-21.9 49-49 49S4 31.1 4 4"></path>
     </svg>
 <div class="box" id="box_four">
 </div>
</div>-->
 <script type="text/javascript">
//For Facebook link 

  var withFacebook= document.getElementById('withFacebook');

 document.getElementById('facebookPage').addEventListener('click',function(){
  var facebookPg = document.getElementById('display_Fb');
  

  facebookPg.style.zIndex = "3";
  
  facebookPg.style.transform = "scale(1.0)";
  
  facebookPg.style.animationName = 'myMove';
  
if (withFacebook.style.display == "none"){
  withFacebook.style.display = "block";
  withFacebook.style.transform = 'translateY(1.5rem)'
  withFacebook.style.transition ='all 3s';

}
else{
   withFacebook.style.display = "none";

}


   if (facebookPg.style.display == "none") {
    facebookPg.style.display = "block";
   }
   else {
    facebookPg.style.display = "none";
   }

});
//For Google link
  var withGoogle = document.getElementById('withGoogle');

document.getElementById('googlePage').addEventListener('click',function(){

if (withGoogle.style.display == "none") {
 withGoogle.style.display = "block";
 withGoogle.style.transform = 'translateY(1.5rem)'
 withGoogle.style.transition = 'all 3s';

}
else {
 withGoogle.style.display = "none";

}
 var displayGoog = document.getElementById('display_Goog');
   displayGoog.style.zIndex = "4";


if (displayGoog.style.display =="none"){
     displayGoog.style.display = "block";

}
else{
     displayGoog.style.display = "none";

}

});

//For Twitter link
var withTwitter = document.getElementById('withTwitter');

document.getElementById('twitterPage').addEventListener('click',function(){
 
 if (withTwitter.style.display == "none") {
  withTwitter.style.display = "block";
  withTwitter.style.transform = 'translateY(1.5rem)'
  withTwitter.style.transition = 'all 3s';
 
 }
 else {
  withTwitter.style.display = "none";
 
 }
 
 var displayTwitt = document.getElementById('display_Twitt');
  displayTwitt.style.zIndex = "5";



if (displayTwitt.style.display =="none"){
 
     displayTwitt.style.display = "block";

}
else{
     displayTwitt.style.display = "none";

}

});


 </script>
 <!-- Project -->
 <script src="https://use.fontawesome.com/8a85d7b64f.js"></script>
 <script src="all.min.js"></script>
 <script src="main.js"></script>
</body>

</html>








Comments

Post a Comment

Popular posts from this blog

Make a website with Html and Css

-
Image
  Make a website using html and css Get the design Html and Css code below | *Copy and paste your code editor. <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta http-equiv="X-UA-Compatible" content="IE=Edge">   <meta name="viewport" content="width=device-width, initial-scale=1">   <title>HTML</title>      <!-- HTML -->      <!-- Custom Styles -->   <link rel="stylesheet" href="style.css">   <link rel="preconnect" href="https://fonts.gstatic.com">   <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> *{     margin: 0px;     padding: 0px; }   .sectionHead {    width: 100vw;    height: 50vh;   }   .menuDiv {    width: 100vw;    height: 5rem;    display: flex;    position: fixed; ...
Read more