CSS Prac
<h1>Apollo Melody</h1>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<img id = "pageLogo" src="https://i.ibb.co/Gn1MHLB/headphones.jpg" alt="">
<div id = "loginPanel">
<form action="#" class = "signupForm">
<label for = "name">Enter Name:</label> <br />
<input type = "text" placeholder = "Enter Name"> <br />
<label for = "email">Email Address:</label> <br />
<input type = "text" placeholder = "Email Address"> <br />
<label for = "Name">User Name:</label> <br/>
<input type = "text" placeholder = "User Name"> <br />
<label for = "password">Password:</label> <br/>
<input type = "text" placeholder = "Password"> <br />
<label for = "password">Password Again:</label> <br/>
<input type = "text" placeholder = "Password Again"> <br />
<button class = "">SIGN UP</button>
</form>
</div>
<!-- <div id = "footer">
Icons made by itim2101 from www.flaticon.com is licensed by <a href="http://creativecommons.org/licenses/by/3.0/"title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</div> -->
body {
/* width:1080px; */
height:1250px;
background: linear-gradient(45deg, rgb(66, 244, 226), rgb(131, 244, 66));
background-repeat: no-repeat;
}
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
color: rgb(225, 225, 225);
font-size: 70px;
font-family: 'Fredoka One', cursive;
text-align: center;
padding-top: 80px;
}
#pageLogo {
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
border-radius: 80px;
border-style: dotted;
}
#loginPanel {
height: 500px;
width: 400px;
background-color: #FFFFFF;
border-radius: 20px;
position: relative;
top: 80px;
margin: auto;
text-align: center;
opacity: 0.80;
}
form {
font-family: 'Montserrat', sans-serif;
font-size: 35px;
}
input
{
height: 30px;
width: 350px;
}
::-webkit-input-placeholder {
text-align: center;
}
button {
display: inline-block;
border: none;
border-radius: 2px;
padding-top: 5px;
margin: 0;
text-decoration: none;
background: rgb(255, 255, 255);
color: rgb(0, 0, 0);
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out,
transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
button:hover,
button:focus {
background: rgb(206, 221, 229);
}
button:focus {
outline-offset: -4px;
}
button:active {
transform: scale(0.99);
}
#footer {
position: relative;
display: block;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Fredoka+One" rel="stylesheet" />