<section>
  <h2>Welcome <br> let's get started😁</h2>
  <div class="flex__container--1">
    <div>
      <a href="#" class="sign-up" >Sign Up</a>
    </div>
    <div>
      <a href="#" class="log-in">Log In</a>
    </div>
  </div>
 
 <form >
   <div class="flex__container--form">
     <i class="icon ion-md-person"></i>
   <input type="text" placeholder="Username">
     </div>
   <div class="flex__container--form">
     <i class="icon ion-md-mail"></i>
   <input type="text" placeholder="Email">
   </div>
   <div class="flex__container--form">
     <i class="icon ion-md-key"></i>
   <input type="text" placeholder="Password">
   </div>
    <button class="btn" type="button">Sign Up</button>
  </form>
  
  <footer>
    <div>
      <p>
        Icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/"                 title="Flaticon">www.flaticon.com</a> 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>
      </p>
      <div><p>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/"                 title="Flaticon">www.flaticon.com</a> 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>Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/"                 title="Flaticon">www.flaticon.com</a> 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></p></div>
    </div>
    <div style="text-align:center; text-transform:uppercase;">
      Weekly coding challenge. Week 1 <br>
      made with <span class="heart">❤</span> by Timothy Ogbemudia 
    </div>
  </footer>
</section>
@import url('https://fonts.googleapis.com/css?family=Squada+One&display=swap');
*{
  margin:0;
  padding:0;
}
body{
  font-size: 25px;
  font-family: 'Squada One', cursive;
  background-color: #25004b;
  color: #fff;
}
a{
  text-decoration:none;
  color:inherit;
}
section{
  width: 100%;
}
form{

  width: 70%;
  margin-left: 40%;
  padding: 10px 30px;
 
}

input[type=text]{
  display:block;
  margin-left:2px;
  margin: 20px 0;
  padding: 10px 30px;
  background-color: inherit;
  border: 1px solid #fff;
  color: inherit;
  width:auto;
  font-size: 60%;
  font-family: 'Squada One', cursive;
}
input:focus{
  outline: none !important;
  border: 1px solid #F90536;
}
p{
  font-size: 60%;
  text-align: center;
  margin: 14px 0;
}
h2{
  font-size: 150%;
  text-align: center;
  margin-top:10px;
}
.flex__container--1{
  display:flex;
 justify-content:center;
 
}
.flex__container--1 div a{
  margin-left: 10px;
  font-size: 100%;
  color: #fff;
  text-decoration: none;
}

.flex__container--1 div a:after{
   display: block;
    height: 2px;
    background-color: #F90536;
    content: " ";
    width: 60px;
    margin: 0 auto;
    margin-top:10px;
}
.btn{
padding: 10px 30px;
margin-left: 65px;
  color: #fff;
background-color:#F90536 ;
border: 1px solid #F90536 ;
  transition: background-color 0.5s, color 0.5s, border 0.5s;
}
.btn:hover{
  background-color:white;
  color: #000;
  border: 1px solid #fff;
}
.flex__container--form{
  display:flex;
}
.flex__container--form i{
  margin: 20px 0;
 background-color: #F90536 ;
  padding:10px;
}
.heart{
  color: #a83f39 ;
}
const signUp= document.querySelector('.sign-up');
const signIn= document.querySelector('.log-in')
signUp.addEventListener('click',()=> {
  const markup=`
  <div class="flex__container--form">
     <i class="icon ion-md-person"></i>
   <input type="text" placeholder="Username">
     </div>
   <div class="flex__container--form">
     <i class="icon ion-md-mail"></i>
   <input type="text" placeholder="Email">
   </div>
   <div class="flex__container--form">
     <i class="icon ion-md-key"></i>
   <input type="text" placeholder="Password">
   </div>
    <button class="btn" type="button">Sign Up</button>
`;
  const form= document.querySelector('form');
  form.innerHTML='';
  form.insertAdjacentHTML("afterbegin",markup);
});


signIn.addEventListener('click',()=> {
  const markup=`
  <div class="flex__container--form">
     <i class="icon ion-md-person"></i>
   <input type="text" placeholder="Username">
     </div>
   <div class="flex__container--form">
     <i class="icon ion-md-key"></i>
   <input type="text" placeholder="Password">
   </div>
    <button class="btn" type="button">Sign Up</button>
`;
  const form= document.querySelector('form');
  form.innerHTML='';
  form.insertAdjacentHTML("afterbegin",markup);
})

Run Pen

External CSS

  1. https://unpkg.com/ionicons@4.5.10-0/dist/css/ionicons.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.