Create a beautiful sign up form with an iphone template using HTML and CSS
 |
| SIGN UP FORM IN IPHONE TEMPLATE |
Source Code HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="iphone.css">
</head>
<body>
<header>
<h1 class="heading">
AB's OFFICIAL BLOG
</h1>
<nav class="topnav">
<a href="#">HOME</a>
<a href="#">CONTACT</a>
<a href="#">PRICING</a>
<a href="#">OUT TEAM</a>
</nav>
</header>
<hr>
<br>
<br>
<div class="container">
<div class="description">
<hr>
<br>
<h1 class="learn">
LEARN WEB DEVELOPMENT / DESIGNING <br> <h2 class="free"> FOR FREE OF COST </h2>
</h1>
<p class="firstp">
We provide best and simple web page <br>
creating tutorials for beginners <br>
to start learning front end development / designing <br>
Follow our blog for latest updates
</p>
<br>
<hr>
<br><br><br><br> <br> <br> <br> <br> <br>
</div>
<div>
<br>
<div class="iphone">
<div class="notch">
<div class="notchelements">
<span class="speaker"></span>
<span class="camera"></span>
</div>
</div>
<form method="POST" action="ab.html">
<br>
<h3 class="formheading">
SIGN UP
</h3>
<section class="forminput">
<label for="username">USERNAME</label>
<br>
<input required type="text" name="Username" id="username" placeholder="Enter Username">
<br>
<label for="email">E-MAIL</label>
<br>
<input required type="email" name="email" id="email" placeholder="Enter Email">
<br>
<label for="password">PASSWORD</label>
<br>
<input required type="password" id="pass" name="pass" placeholder="Enter Password">
<br>
<label for="pass">RETYPE PASSWORD</label>
<br>
<input type="password" id="password" name="pass" required placeholder="Retype Password">
<br>
<input id="checkbox" type="checkbox" class="checkbox" value="Agree" required>
<label for="checkbox">ACCEPT TERMS AND CONDITIONS</label>
</section>
<br>
<button class="button" type="submit">
SIGN UP
</button>
<br>
<hr class="blackhr">
<p class="already" href="#">
ALREADY HAVE AN ACCOUNT?
</p>
<button type="menu" class="signinbutton">
SIGN IN
</button>
</form>
</div>
</div>
</div>
<footer>
<p class="footerele">
DEVELOPED BY AB's OFFICIAL
</p>
</footer>
</body>
</html>
Source Code CSS
body {
background-color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 50px auto;
}
header {
background-color: black;
position: fixed;
top: 0;
left: 0;
right: 0;
}
.heading {
font-family: Brush Script MT;
color: coral;
font-style: italic;
margin-left: 2%;
}
.container {
background-image: linear-gradient(to left, coral, black);
margin-left: 1%;
overflow: hidden;
display: flex;
flex-direction: row;
}
.container div {
width: 50%;
text-align: center;
}
.topnav {
float: right;
margin-top: -20px;
padding-bottom: 5px;
}
a {
text-decoration: none;
color: white;
padding-right: 15px;
font-family: 'Courier New';
}
.free, .learn, .firstp {
margin-left: 8%;
font-family: comic sans ms;
text-align: left;
}
.firstp {
margin-left: 13%;
}
.iphone {
background-color: wheat;
margin-top: 20px;
margin-left: 18%;
width: 0%;
height: 85%;
border: 7px solid black;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.container {
height: fit-content;
}
.description {
margin-top: 150px;
color: white;
}
.notch {
background-color: black;
height: 4%;
width: 3%;
margin-left: 24%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
span {
display: inline-block;
background-color: white;
}
.notchelements {
margin-left: 24%;
margin-top: -5px;
}
.speaker {
height: 6px;
width: 56px;
border-radius: 12px;
}
.camera {
height: 8px;
width: 8px;
border-radius: 50%;
margin-left: 2%;
}
.formheading {
color: white;
text-align: center;
background-color: black;
font-weight: 600;
opacity: 65%;
}
.forminput {
text-align: left !important;
margin-left: 5%;
}
label {
font-size: 13px;
}
input:hover {
border-color: crimson;
}
input {
opacity: 75%;
padding-left: 4%;
height: 30px;
width: 88%;
outline: none;
}
.checkbox {
width: fit-content !important;
height: 17px;
margin-left: -1px;
margin-top: 10px;
}
.button {
opacity: 80%;
border: transparent;
float: left;
margin-left: 4%;
margin-top: -12px;
width: fit-content;
height: 30px;
background-color: rgb(51, 113, 228);
color: white;
font-weight: bolder;
letter-spacing: 1px;
border-radius: 6px;
outline: none;
font-family: calibri !important;
font-size: 16px;
}
.button:hover, .signinbutton:hover {
cursor: pointer;
background-color: coral;
color: black;
opacity: 100%;
}
.blackhr {
width: 90%;
}
.already {
color: black;
font-size: 13px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.signinbutton {
opacity: 80%;
border: transparent;
height: 30px;
background-color: rgb(87, 87, 87);
color: white;
font-weight: bolder;
letter-spacing: 1px;
border-radius: 6px;
outline: none;
font-family: calibri !important;
font-size: 16px;
width: 88%;
}
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: black;
color: white;
text-align: center;
font-size: 24px;
height: 56px;
}
form {
opacity: 85%;
font-family: Copperplate;
}
.footerele {
margin-top: -1px;
}
Comments
Post a Comment