Home / Project / Make A Sign Up Page using HTML and CSS

Make A Sign Up Page using HTML and CSS

-

In this Tutorial, we will see how to make a beautiful Signup Page for your website, we will need some CSS Tools like Clippy, CSS gradient And Google Fonts.
you can take the source code and modify it, for this project we will also need an image, for me i used this image from unsplash, but you can take any image you like.



HTML CODE


 <!DOCTYPE html>
<html>
<head>
 <title>Sign up</title>
 <link rel="stylesheet" href="main.css">
</head>
<body>
 
     <div class="container">
         
         <div class="signup">
             <form>
                    <h1>Sign up</h1>
                 <label>Full Name:</label><br>
                 <input type="text"><br>
                 
                 <label>E-mail:</label><br>
                 <input type="email"><br>
                 
                 <label>Password:</label><br>
                 <input type="password"><br>
                 
                 <label>confirm Password:</label><br>
                 <input type="password"><br>
                 <button>Next</button>
             </form>
         </div>
         
         <div class="info">
            <div class="filter">
                
            </div>
                <div class="text">
                    <h1>Make your dream come true</h1>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor orci urna, id efficitur massa dignissim non. Curabitur non aliquet nisi. Vivamus consequat libero quis urna porttitor luctus. Vestibulum posuere accumsan sapien vel accumsan. Sed luctus eleifend arcu sed venenatis. Pellentesque cursus et justo ultricies egestas. Suspendisse erat leo, bibendum et sodales in, placerat in augue. Praesent non est dignissim, sagittis orci a, consectetur dolor.</p>
                </div>
             
         </div>
     </div>
 
</body>
</html>

CSS CODE



 @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
.container{
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: row;
}
.signup{
    position: relative;
    width: 30%;
}
.info{
    position: relative;
    background-image: url(background.jpg);
    background-size: cover;
    background-position: center;
    width: 70%;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
.filter{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(162,84,251);
background: -moz-linear-gradient(30deg, rgba(162,84,251,1) 0%, rgba(255,116,223,1) 100%);
background: -webkit-linear-gradient(30deg, rgba(162,84,251,1) 0%, rgba(255,116,223,1) 100%);
background: linear-gradient(30deg, rgba(162,84,251,1) 0%, rgba(255,116,223,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#a254fb",endColorstr="#ff74df",GradientType=1);
    opacity: 0.6;
    z-index: 0;
}
.text{
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #fafafa;
    
}
.text h1{
    font-size: 2em;
    text-transform: uppercase;
    text-align: center;
    font-family: 'Roboto',sans-serif;
    line-height: 2em;
}
.text p{
    font-size: 18px;
    line-height: 27px;
    text-align: left;
    font-family: 'Open sans',sans-serif;
}

form{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 80%;
}
form label{
    color: #BA6FB8;
    font-size: 1.2em;
    margin-bottom: 25px;
}
form input{
    width: 100%;
    padding: 8px 10px;
    margin: 10px 0;
    border-radius: 3px;
    border: 1px solid #BA6FB8;
    box-shadow: 0 2px 8px rgba(65,65,65,.3);
    font-size: 1.2rem;
}
form h1{
     color: #BA6FB8;
    font-size: 2.8rem;
    font-family: 'Roboto',sans-serif;
    margin-bottom: 25px;
}



form button{
    text-align: center;
    width: 50%;
    border-radius: 30px;
    padding: 5px 0;
    font-family: 'Open Sans',sans-serif;
    background-color: #BA6FB8;
    color: #fafafa;
    font-size: 1.2em;
    text-transform: uppercase;
    margin: 10px 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: none;
    cursor: pointer;
}

if you like this project and want to see more project like this, just comment bellow
Make A Sign Up Page using HTML and CSS Make A Sign Up Page using HTML and CSS Reviewed by Medics on July 15, 2019 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
-->
Powered by Blogger.