Skip to content

Instantly share code, notes, and snippets.

@ToneyGi

ToneyGi/index.html

Created May 1, 2024 16:33
Show Gist options
  • Save ToneyGi/b3d0732fd3f25a024c9e8bb8f58059ec to your computer and use it in GitHub Desktop.
Save ToneyGi/b3d0732fd3f25a024c9e8bb8f58059ec to your computer and use it in GitHub Desktop.
Download ZIP
Sign-up Form
Raw
index.html
<body>
<div class="warning">
<p>This is not a real service</p>
</div>
<div id="photo-id">Photo by <a href="http://unsplash.com/@mariellem">Mariellem Oliveira</a> on <a href="http://https://unsplash.com/">Unsplash</a>.</div>
<div class="card">
<h1 class="title">CatLap</h1>
<div class="description">
<p>Our mission is to deliver a cat onto every cold lap in the world. This world is full of catless laps and lapless cats.
<br>Let's change that!!
<br>By signing up to our service we will deliver one purring cat to warm up your legs in the coldest days and you'll be providing a cozy place to nap to your new furry companion</p>
</div>
<form action="get">
<legend>Try Us: <p>(required fields are marked with *)</p></legend>
<div class="inputs">
<ul class="col">
<li>
<label for="fname">First Name*:</label>
<input type="text" name="fname" id="fname" placeholder=" " required>
</li>
<li>
<label for="mail">Email*:</label>
<input type="email" name="mail" id="mail" placeholder=" " required>
</li>
<li>
<label for="pwd">Pasword*:</label>
<input type="password" name="" id="" placeholder=" " minlength="5" required>
</li>
</ul>
<ul class="col">
<li>
<label for="lname">Last Name*:</label>
<input type="text" name="lname" id="lname" placeholder=" " required>
</li>
<li>
<label for="tel">Phone Number:</label>
<input type="tel" name="tel" id="tel" >
</li>
<li>
<label for="cpwd">Confirm Password*:</label>
<input type="password" name="cpwd" id="cpwd" placeholder=" " minlength="5" required>
</li>
</ul>
</div>
</form>
<button type="submit" id="button">Create Account</button>
<div class="login">Already have an account? <a href="http://" target="_blank" rel="noopener noreferrer">Log in</a></div>
</div>
<footer>
<p>Made by <a href="https://github.com/Learning-create">Learning-create</a></p>
</footer>
</body>
</html>
Raw
style.css
@font-face {
font-family: 'comfortaabold';
src: url('fonts/comfortaa-bold-webfont.woff2') format('woff2'),
url('fonts/comfortaa-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'comfortaalight';
src: url('fonts/comfortaa-light-webfont.woff2') format('woff2'),
url('fonts/comfortaa-light-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'comfortaaregular';
src: url('fonts/comfortaa-regular-webfont.woff2') format('woff2'),
url('fonts/comfortaa-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lemon_milkregular';
src: url('fonts/lemon_milk-webfont.woff2') format('woff2'),
url('fonts/lemon_milk-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0%;
padding: 0%;
}
body {
background-color: rgb(245, 245, 220) ;
height: 100vh;
padding: 0%;
margin: 0%;
display: flex;
flex-direction: column;
font-family: "comfortaaregular";
background-image: url(https://images.unsplash.com/photo-1616513842455-e05584b1145c?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
background-size: contain;
background-repeat: no-repeat;
}
#photo-id {
position: absolute;
color: black;
left: 30rem;
& a{
color: black;
}
}
form {
display: flex;
flex-direction: column;
width: 500px;
}
ul {
width: 100%;
}
li {
list-style: none;
display: flex;
flex-direction: column;
width: 100%;
justify-content: space-between;
}
legend {
font-size: 1.5rem;
margin-bottom: 1.5rem;
> p {
font-size: 1rem
}
}
input {
width: 90%;
height: 2rem;
margin-top: .5rem;
margin-bottom: 1.5rem;
border-radius: 5px;
font-size: 1.5rem;
transition: background-color 0.5s ease-out;
}
input:required {
border: 1px solid black;
}
input:optional {
border-color: azure;
}
input:invalid {
border-color: red;
}
input:placeholder-shown {
border-color: black;
}
input:focus {
box-shadow: 1px 1px 20px rgb(126, 195, 255);
}
footer {
background: linear-gradient(0deg, rgba(183,70,252,1) 0%, rgba(183,70,252,0.26934523809523814) 100%);
height: 5vh;
width: 400px;
border-radius: 100px 100px 0px 0px;
position: absolute;
bottom: 0px;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
color: white;
& a{
color: white;
}
}
.title {
font-size: 6rem;
font-family: 'lemon_milkregular';
text-align: center;
font-weight: 400;
}
.inputs {
display: flex;
width: 100%;
}
.card {
background-color: rgb(206, 223, 253);
height: 100vh;
width: 40vw;
align-self: end;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
box-shadow: inset 1px 0px 10px black;
> * {
width: 80%;
}
}
.description {
display: flex;
justify-content: center;
align-items: center;
}
.description p {
width: 55ch;
text-align: center;
font-size: 1.5rem;
}
.warning {
background-color: rgb(85, 0, 0);
color: white;
height: 5rem;
aspect-ratio: 7/1;
position: absolute;
left: -8.5rem;
top: 6rem;
transform: rotate(-45deg);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.75rem;
}
.login {
align-self: center;
width: fit-content;
}
#button {
width: 15rem;
align-self: center;
height: 3rem;
font-size: 1.25rem;
border-radius: 10px;
border: 0px;
background-color: aliceblue;
box-shadow: 1px 1px 10px rgb(171, 214, 252);
}
#button:hover {
background-color: rgb(171, 214, 252);
box-shadow: 1px 1px 20px rgb(126, 195, 255);
}
@ToneyGi
Copy link
Author

ToneyGi commented May 1, 2024

Project: Sign-up Form solutions

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment