Sunday, 24 June 2018

How to Create Login /Sign In form Using HTML and CSS (JavaScript)

Learn How to Create Login Form Using HTML and CSS (Javascript)

This Tutorial will teach you, How to Create Sign In /Login form using html and css and This tutorial will also teach you how you can add JavaScript in forms and make them more attractive and good.


          
Video Tutorial

Codes are available for free, you can use these codes for free.

Code with HTML,CSS and Javascript :


<html>
<head>
      <title>Cobra Kai</title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
body{
background-color: #0e0e0e;
}

nav{
border-bottom:solid 5px #e50303;
}


ul{
padding
  list-style: none;
  padding: 20px;
}

li{
   display: inline-block;
   color: #e50303;
   padding-left: 20px;
   font-size: 18px;
   font-family: Arial;
}

.form-container{
               background-color: #e50303;
      margin: 9%;
      padding:30px;
      margin-left:30%;
      margin-right:30%;
      
               }
input{
   border: none;
   font-size: 31px;
   padding: 3px;
   width:100%;
     }
 h1{
   color: white;
   text-align: center;
   font-size: 41px;
   font-family: Arial;
 }
label{
      color: white;
   letter-spacing: 1px;
   font-size: 18px;
   font-family: Arial;
     }
.sign-in{
       text-align: center;
    border: none;
    padding: 16px;
    font-size: 18px;
    letter-spacing: 1px;
    background-color:white;
    
}
p, p > a{
 color: white;
 font-family: Arial;
 text-decoration: none;
}
p > a:hover{
 color: white;
 font-family: Arial;
 text-decoration: underline;
}
.jam{
display:none;
}
.create-acc{
           margin-top:-90px;
     text-align: center;
     margin-left: 43%;
      border: none;
    padding: 16px;
    font-size: 18px;
    letter-spacing: 1px;
    background-color:white;
    padding-left: 34px;
    padding-right: 34px;
}

.overlay {
    height: 90%;
    width: 100%;
    background-color: #0e0e0e;
    overflow-y: hidden;
    transition: .5s;
 transition-delay:1s;
}

.overlay-content {
    width: 100%;
    
}

img{
width: 50%;
margin-left: 25%;
}



</style>  
</head>
<body>



<nav>
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact Us</li>
</ul>
</nav>

<div id="myNav" class="overlay" onclick="document.getElementById('demo').style.display='block'">
  <div class="overlay-content" >
  <img id="myImage" src="https://image.ibb.co/edHdkT/ss2.jpg"   onclick="closeNav()">
  </div>
</div>

<audio id="myAudio">

  <source src="file:///F:/YouTube/youtube%20music/effects/Dumpster_Rattle.mp3" type="audio/mpeg">
</audio>

<div class="jam" id="demo">
<div class="form-container">
<form>

<h1>Sign In</h1>

<br/>

<label>Username</label>
<br/>
<input type="text">

<br/>
<br/>

<label>Password</label>
<br/>
<input type="password">

<br/>
<br/>
<br/>

<button type="submit" class="sign-in">Sign In</button>

<br/>
<br/>

<p><a href="#">Forgot Password?</a></p>


</form>
</div>


<button type="submit" class="create-acc">Create Account</button>
</div>
<script>

function closeNav() {
 document.getElementById('myImage').src='https://image.ibb.co/iofW5T/ss.jpg';
var x = document.getElementById("myAudio");
x.play(); 
    document.getElementById("myNav").style.height = "0%";
}
</script>

</body>
</html>


Output :




Code with HTML and CSS Only :


<!DOCTYPE html>
<html>
<head>
<title>Cobra Kai</title>

<style type="text/css">
*{
padding: 0px;
margin: 0px;
}

:root{
--blacky: #0e0e0e;
--redy: #e50303;
}

body{
background-color: var(--blacky);
font-family: Arial;
}

ul{
list-style: none;
}

nav{
    border-bottom: solid 5px var(--redy);
}

nav ul li{
display: inline-block;
padding: 20px;
color: var(--redy);
}

.main-container{
background-color: var(--redy);
margin-left: 30%;
margin-right: 30%;
margin-top: 6%;
padding: 30px;
}

h1{
color: white;
padding: 40px;
text-align: center;
}

label{
font-size: 24px;
color: white;

}


input{
font-size: 24px;
padding: 5px;
outline: none;
width: 100%;
}

.btn-signin{
font-size: 24px;
padding: 5px;
outline: none;
background-color: white;
color: var(--blacky);
border: none;
}

.btn-create-account{
font-size: 24px;
padding: 10px;
outline: none;
background-color: white;
color: var(--blacky);
border: none;
margin-left: 44%;
}

</style>

</head>
<body>

<!---Creating Navigation Bar -->

<nav>
<ul>
<li>Home</li>
<li>About us</li>
<li>Contact us</li>
</ul>
</nav>

<!--Creating Form -->

<div class="container">
<div class="main-container">

<h1>Sign in</h1>
<form>
<label>Username</label>
<br/>
<input type="text">
<br/><br/>
<label>Password</label>
<br/>
<input type="Password">
<br/><br/>
<button type="submit" class="btn-signin">Sign in</button>

</form>


</div>
</div>

<!--Creating Create Account Button -->
<br/><br/><br/>
<button type="submit" class="btn-create-account">Create Account</button>

</body>
</html>

Output :







Share:

Saturday, 2 June 2018

How to Create Cards Using HTML and CSS

Learn How to Create Cards Using HTML and CSS in Hindi...


           

Code :



Result :

Cards using html css
Cards 



Share:

Wednesday, 23 May 2018

Dropdown Menu with Sub menu Using HTML and CSS only

Learn How to Create Navigation bar with Dropdown's and Sub Menus Using HTML and CSS only


            


Code :


Result :
Navbar with dropdowns and Sub menu
Navbar with dropdowns and Sub menu

Share:

Saturday, 19 May 2018

Create 404 Error Page for Blogger/ Blogspot Blogs

Learn How to Create 404 error page for blogger/ Blogspot

page not found 404
How to Create 404 error page for blogger

Steps to Create a 404 error page are :


Step 1 - Open Blogger > after this go to search preferences.

Step 2 - Go to Errors and redirections > Now Edit "Custom Page Not Found"

In Custom Page Not Found Paste the given code below and save it.

Congrats, You have Learned, How to Create 404 error page.

Code :


Share:

Sunday, 15 April 2018

Make Photo Gallery By Using HTML and CSS Only


photo gallery in css and html
Learn How to Make Photo Gallery by using HTML and CSS only
About this Photo Gallery this Photo Gallery is Created in HTML and CSS and it is Beginners level Photo Gallery.

           
  

Advantages of this Photo Gallery :
  • It is easy to make.
  • Less CSS code is Used.
  • Very basic type of CSS properties are Used to create this Photo Gallery.
  • Hover effects makes it beautiful.


Disadvantages of this Photo Gallery :

  • It is not responsive. 


Photo Gallery 1 - Code :



Result :

photo gallery in css and html
Photo Gallery

Photo Gallery 2 - Code :



Result :
Photo gallery using css and html
Photo Gallery
_________________________________________________________________________________

Thanks for Reading :)







Share:

Saturday, 7 April 2018

How to Create Coming Soon... Web Page Using HTML and CSS | Code and Video Tutorial

Learn How to Create Basic "Website Coming Soon..." web Page Using HTML and CSS.

              

HTML Code :



Output :

website comming soon
Output.



Download Image :

download free logo
Download logo for free.



Share:

Friday, 6 April 2018

How to Delete About.me Account/ page | Step By Step

 Delete About.me

What is About.me ?

About.me (Usually styled as about.me) is a personal web hosting service co-founded by Ryan Freitas, Tony Conrad and Tim Young in October 2009.On December 20, 2010, just four days after its public launch, About.me was acquired by AOL.

Steps to delete About.me page or Account :- 

Step 1 : Login to about.me

Step 2 : Click on Settings  > Go to Account

           
         You can also Follow video  - https://www.youtube.com/watch?v=YRSCPJimXT8

Step 3 : In Account you will see lots of option below LOGOUT option you will see other options too one of them are DELETE Account option Click on it or Follow this link after Logging into your account https://about.me/account/#deleteaccount

Step 4 : Retype your password and confirm deletion.

Step 5 : Their is no step 5 account is deleted now its celebration time :)
___________________________________________________________________________

Thanks for Reading...


Share:

Complete HTML Tutorials for Beginners in Hindi | Free Video Course

Complete HTML Tutorials for Beginners in Hindi


HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages.

This Tutorial will Help you in Learning HTML. It contains all Lessons from Basic to Advance in Hindi.


               

Playlist Learn HTML in Hindi  -



List of Topics cover in this Tutorial are :



1. What is HTML ? Advantages and Disadvantages of HTML. 





2. Tools for Development (Web browsers, Text Editors)



4. Basic HTML Tags Explained in Detail (HTML tag, Head tag, Body tag, Title tag)

Post - https://studyreadeducate.blogspot.com/2018/03/html-document-structure.html


5. What are Heading and Paragraph tags.


6. What is HTML Text Formatting ? Text Formatting Tags.


7. What is Comment in HTML ? How to Use comment.


8. What is Hyperlink ? How to Use Hyperlink.


9. How to Add/ Insert Images using HTML tag on Web Pages or Website.


10. Create Tables in HTML using table tag, tr tag, td tag, th tag.


11. What is List ? Types of List ? How to Create Lists ?


12. What is Attribute ?


13. What are Block Level and Inline Elements in HTML.

14. Learn Creating Forms in HTML.

Video (Forms Part - 1 Create Basic Forms) - https://www.youtube.com/watch?v=184489o7P74

Video (Forms Part - 2 Types of Inputs) - https://www.youtube.com/watch?v=2YBNqx3L8FE

Video (Forms Part - 3 Form Elements) - https://www.youtube.com/watch?v=echVG4oDH3Y

15. What to Learn After HTML ?





Share:
Copyright © Study Read and Educate | Powered by Blogger Distributed By Protemplateslab & Design by ronangelo | Blogger Theme by NewBloggerThemes.com