Svg Login Page Design with source code

Nilesh dadheech May 12, 2020

Code is here :


<html>
<head>
<title> Svg design</title>
<style type="text/css">
body{
margin:0;
padding:0;

}
#container{
margin-top: 100px;
width: 100%;
}

#svg{
background:white;
color: black;
width: 300px;
height: 70px;
margin:auto;


}
#text{
border-bottom: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
background:white;
color: black;
width: 290px;
height: 290px;
margin:auto;
text-align: center;
}
input{
padding:5px;
}
#btn{
background-color:#ff00ff;
padding:10px;
color:white;
width: 120px;
font-weight: bold;
}
</style>
</head>

<body>
<div id="container">
<div id="svg">
<svg viewbox="0 0 100 100">



<circle cx="" cy="" r="30" fill="#ff00ff"></circle>
<circle cx="50" cy="" r="30" fill="#ff00ff"></circle>
<circle cx="100" cy="" r="30" fill="#ff00ff"></circle>
</svg>
</div>
<div id="text"><br>
<h1 align="center">Login</h1>
<input type="email" name="" placeholder="Email"><br><br>
<input type="password" name="" placeholder="Password"><br><br>
<input type="submit" name="" value="Login" id="btn"><br><br>

<svg viewbox="0 0 100 100">



<circle cx="100" cy="7" r="7" fill="#ff00ff"></circle>
<circle cx="" cy="7" r="7" fill="#ff00ff"></circle>

</svg>

</div>
</div>
</body>
</html>

Tags
Reactions

Post a Comment

1 Comments