GroupMe Mockup

hj

by Joseph Perez

HTML

<span>Already have an account? <a href="">Log in.</a></span>

<div class="content-container">
  <div class="icon">
  </div>
  
  <p>
  Get your group together.
  </p>
  
  <span class="facebook-span"><span class="f">f</span>Continue with Facebook</span>
  
  <hr width="200">OR<hr width="200">
  
  <textarea placeholder="[email protected]"></textarea><button>Continue</button>
  <br>
  <span>By signing up, you agree to our <a href="">terms of service</a>.</span>
  
</div>

<footer>
  By Using this site you agree to the use of cookies for analytics, personalized content and ads. <a href="">Read more</a>
</footer>

CSS

body{
  margin: 0;
  padding: 0;
}

body > span{
  padding: 10px;
  float: right;
  top: 0;
  right: 0;
  position: fixed;
}

footer{
  background-color: #2b5464;
  color: white;
  font-family: "Noto Sans", sans-serif;
  padding: 0px 10px;
  text-align: center;
           width: 100%;
            bottom: 0;
            position: fixed;
}

a{
  color: #00aff0;
}

a:hover, a:focus{
  color: #0077a3;
}

.content-container{
  margin-top: 25%;
  text-align: center;
}

.content-container .icon{
  height: 75px;
  width: 75px;
  background-color: #5dcbf0;
  border-radius: 15px;
  margin-left: 44%;
}

.content-container p{
  font-size: 22px;
}

.facebook-span{
  background-color: #395cbd;
  border-radius: 10px;
  color: white;
  font-size: 18px;
  padding: 12px 22%;
}

.f{
  font-size: 120%;
  padding-right: 5px;
}

textarea{
  border-radius: 5px;
  overflow: auto;
}

button{
  background: linear-gradient(#72e03f, #69b844);
  border-radius: 5px;
  color: white;
  padding: 10px 20px;
}

JavaScript

9:55 AM

10:20 AM