text CSS Prac

Posted 2021-05-01

Apollo Melody
--------


A [Pen](https://codepen.io/tacitreturn/pen/GwbYRW) by [glenn](https://codepen.io/tacitreturn) on [CodePen](https://codepen.io).

[License](https://codepen.io/tacitreturn/pen/GwbYRW/license).

<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" />