*{
margin:0;
padding:0
font-family: 'Fredoka One', cursive;
font-weight:bold;
}
#navbar{
margin:0;
padding:0;
display:flex;
background-color:#031321;
justify-content:flex-end;
height:3vh
}
#navbar a{
text-decoration:none;
color:white;
margin-left:5px;
margin-right:5px;
padding:2px;
transition:1.5s;
}
#navbar a:hover{
color:cyan;
box-shadow:0 0 10px #2196f2,:0 0 40px #2196f2, :0 0 80px #2196f2;
margin-right:3px;
border-radius:6px;
background-color:cyan;
color:white;
}
<html>
<head>
<title>Flex box </title>
<link rel="stylesheet" href="style.css"></link>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
</head>
<body>
<div id="navbar" >
<a href="#">Home</a>
<a href="#">Our Services</a>
<a href="#">About us</a>
<a href="#">Contact Us</a>
</div>
</body>
</html>
header{
text-align:center;
color:Black;
font-family:Times new roman;
font-size:25px;
font-weight:bold ;
}
.container{
margin:5px;
background-color:#f2f2f2;
border-radius:3px;
padding:10px;
font-weight:3px;
}
input[type="email"],
input[type="number"]{
width:78%;
}
button{
background-color:blue;
padding:2px;
border-radius:2px;
color:white;
}
<!DOCTYPE html>
<html>
<head>
<title>Free Trial</title>
<link type="text/css" rel="stylesheet" a href="style.css">
<div class="container"> <header>BOOK YOUR FREE TRIAL</header>
</head>
<body>
<hr>
<form >
* Email: <input type="email" required><br><br>
* Phone: <input type="number" required>
<br><br>
<input type="checkbox"> I agree to receive whatsapp mesaage on this number.
<br>
<button class="btn">Next</button>
</form></div>
</body>
</html>
body {
margin:0px;
padding:0px;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#031321;
font-family:consolas;
}
a{
position:relative;
display:inline-block ;
padding:15px 30px;
color:#2196f3;
text-transform:uppercase;
letter-spacing:4px;
text-decoration:none;
font-size:24px;
overflow:hidden ;
transition:0.2s;
}
a:hover{
color:#255784;
background:#2196f3;
box-shadow:0 0 10px #2196f3, 0 0 40px #2196f3, 0 0 80px #2196f3;
transition-delay:1s;
}
a span{
position:absolute ;
display:block;
}
a span:nth-child(1){
top:0%;
left:-100%;
width:100%;
height:2px;
background:linear-gradient(90deg, transparent, #2196f3;)
}
a:hover span:nth-child(1){
left:100%;
trasition:1s;
}
a span:nth-child(3){
bottom:0%;
right:-100%;
width:100%;
height:2px;
background:linear-gradient(270deg, transparent , #2196f3;)
}
a:hover span:nth-child(3){
right:100%;
transition:1s;
transition-delay:0.5s;
}
a span:nth-child(2){
top:-100%;
right:0%;
width:2px;
height:100%;
background:linear-grandient(180deg, transparent , #2196f3;)
}
a:hover span:nth-child(2){
top:100%;
transition:1s;
transition-delay:0.25s;
}
a span:nth-child(4){
bottom:-100%;
left:0%;
width:2px;
height:100%;
background:linear-gradient(360deg, transparent, #2196f3;)
}
a:hover span:nth-child(4){
bottom:100%;
transition:1s;
transition-delay:0.75s;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
Neon Button
</a>
</body>
</html>
main{
box-sizing:border-box;
margin:0;
padding:0;
display:grid;
border:2px solid black;
grid-template-rows: 60px 100px 100px 60px;
grid-template-columns:repeat(3,1fr) 150px;
height:100%;
grid-gap:10px;
}
.header{
background-color:red;
grid-column:1/-1;
}
.box1{
color:white;
background-color:blue;
}
.box2{
color:white;
background-color:green;
}
.box3{
color:white;
background-color:yellow;
}
#section{
background-color:aqua;
grid-column:1/4;
grid-row:3/9;
}
#aside{
background-color:orange;
grid-column:4/5;
grid-row:2/9;
}
#footer{
display:grid;
background-color:violet;
grid-column:1/-1;
}
<link rel="stylesheet"
a href="style.css"></link>
<main>
<div class="header">Header</div>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div id="section">Section</div>
<div id="aside">Aside</div>
<div id="footer">Footer</div>
</main>
