HTML, CSS and JavaScript Code
<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" >HTML and CSS Code 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>https://youtu.be/0RRUOIvmuWA I realized that I had my camera set up incorrectly, so when I upload…
https://youtu.be/C3oFfV20K_c Make Animated progress step bar using Figma
https://youtu.be/o3pSH_oRzko How to Hide All Grids in Figma
https://youtu.be/hdSUylKSsho How to Create Responsive Tool tip in Figma
https://youtu.be/AEiH7dSDhKo Having issue in figma pixel grid? learn how to show/ hide figma pixel grid…
https://youtu.be/iilYzHg9LwQ There are some issues going on in ventura OS its still in development phase…
View Comments
nice post..
web design company in chennai
web design services in chennai
website designing company in chennai
website developers in chennai
best web design company in chennai
nice sir
Tremendous work. Thank you for sharing such a compelling knowledge here, I am sure it would help many of newbies who are learning html and css.
Web Design Company | Web development Lucknow
Thanks