CodePen Embed - CSS Flexbox Contact Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="contact.css">
    <title>Contact Bloom</title>
</head>
<body>
    <nav class="nav-container">
        <!--<h3 class="title">BLOOM</h3>-->
        <input type="checkbox" />
        <span class="menu-span"></span>
        <span class="menu-span"></span>
        <span class="menu-span"></span>
        <ul class="nav-items">
            <li><a href="#" class="menu-link">home</a></li>
            <li><a href="../About-Page/about.html" class="menu-link">about</a></li>
            <li><a href="#" class="menu-link">blog</a></li>
            <li><a href="../Contact-Page/contact.html" class="menu-link">contact us</a></li>
        </ul>
    </nav>
    <div class="hero-image" >
        <div class="hero-text">
          <h1 class="hero-header">hit us up</h1>
          <p class="hero-subtext">hop on over to our social media, subscribe for updates or drop us an email below</p>
        </div>
    </div>

    <div class="section-1" >
            <div class="email-container">
                <div class="email_container">
                    <form id="singular-form">
                        <button class="shown" type="button" id="trigger"> subscribe </button>
                        <div id="input-container">
                            <input type="text" placeholder="e-mail?" class="email-input">
                            <button type="button">send</button>
                        </div>
                        <div id="success">thanks!</div>
                    </form>
                </div> 
            </div>        
            <div class="section-1-text">
              <h1 class="section-1-header">email us</h1>
              <p class="section-1-subtext">demo@bloomEmail.com</p>
            </div>
    </div>
    <footer class="footer">
        <a href="#">twitter</a>
        <a href="#">insta</a>
        <a href="#">tumblr</a>
        <a href="#">pinterest</a>
    </footer>
</body>
<script src="/scripts/email-form.js"></script>
</html>

body, html{
    min-height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    font-family: Arial;
    background: black;
    
}

.nav-items {
    width: 100%;
    list-style: none;
    margin: 0; 
    padding: 0;
    background: black;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end; 
}

.nav-items a {
    margin: 0;
    text-decoration: none;
    display: block;
    padding-right: 2em;
    color: white;
    font-size: .8em;
    /*text-transform: uppercase;*/
    padding-bottom: 1em;
}

input {
    opacity: 0;
}

.hero-image{
    background-color: white;
    height: 30%;
    border-top: 1px solid #8c8b8b;
    box-shadow: 0 8px 10px -10px #8c8b8b inset;
}

.hero-image, .section-1 {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    align-self: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    justify-content: center;
}
      
.hero-text {
    color: black;
    padding-bottom: 5%;
}

.hero-text, .section-1-text {
    align-content: center;
    text-align: center;
}

.hero-header{
    font-size:5em;
}

.hero-subtext, .section-1-subtext {
    font-size: 1em;
}

.section-1 {
    width: 100%;
    padding-top: 2%;
    align-content: center;
    box-shadow: 0 -8px 10px -10px #8c8b8b;
}

.section-1-text {
    order: 1;
    color: white;
    padding-bottom: 5%;
}

.section-1-header{
    font-size: 2em;
}

.email-container {
    align-self: center;
    width: 80%;
    height: 6em;
    order: 2;
    margin: 0;
    --main-color: white;
    --accent-color: black;
    overflow: hidden;
}

.email-input{
    text-align: center;
}

.email-container,
#singular-form button,
.email_container>#singular-form>button#trigger,
.email_container>#singular-form>#input-container>input {   
    font-size: 1.5em;
    font-weight: bold;
}

.email_container{
    height: 2.5em;
    padding: .1em;
    background-color: white;
    text-align: center;
    border-radius: 10em;
    overflow: hidden;
    transition: width .4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.email_container>#singular-form {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: white;
}

.email_container>#singular-form button { /*send button*/
    width: 5em;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 4em;
    cursor: pointer;
    font-size: 1em;
}

.email_container>#singular-form>button#trigger {
    padding: 0;
    width: 100%;
    color: black;
    background-color: transparent;
    z-index: 3;
}

.email_container>#singular-form>#input-container {
    text-align: center;
    width: 100%;
    z-index: 2;
}

.email_container>#singular-form>#input-container>input {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    border: none;
    outline: none;
    padding: 0 26% 0 3%;
    opacity: 0;
    transform: scale(0);
    transition: all .4s ease .4s;
    font-size: 1em;
}

.email_container>#singular-form>#input-container>button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    background-color: black;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all .4s ease .4s;
}

.email_container>#singular-form>#success {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    z-index: 1;
    transition: all .2s ease .4s;
}

.email_container>#singular-form>button#trigger,
.email_container>#singular-form>#input-container,
.email_container>#singular-form>#success {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scale(0);
    opacity: 0;
}

.email_container>#singular-form>button#trigger {
    transition: all .4s ease;
}

.email_container>#singular-form>#input-container {
    transform: scale(1);
    opacity: 1;
    transition: all .4s ease .4s;
}

.email_container>#singular-form>button#trigger.shown,
.email_container>#singular-form>#input-container.shown,
.email_container>#singular-form>#success.shown,
.email_container>#singular-form>#input-container>button.shown,
.email_container>#singular-form>#input-container>input.shown {
    transform: scale(1);
    opacity: 1;
}

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-basis: row wrap;
    border-top: 1px solid #8c8b8b;
    box-shadow: 0 10px 10px -10px #8c8b8b inset;
    background: white;
    height: 2em;
    justify-content: space-around;
    padding-top: 2%;
    padding-bottom: 1%;
    overflow: hidden;
    z-index: 4;
}

footer>a{
    text-decoration: none;
    list-style: none;
    color: black;
}

@media (max-width: 680px), screen and (orientation: portrait) {
    .hero-image{
        min-height: 20%;
    }
    .hero-header{
        font-size:2em;
    }
    
    .hero-subtext, .section-1-subtext {
        padding: 5%;
        font-size: 1em;
    }
    .email-container,
    #singular-form button,
    .email_container>#singular-form>button#trigger,
    .email_container>#singular-form>#input-container>input {  
    font-size: 1em;
    font-weight: 400;
    }   
    .email_container{
        height: 2em;
    }

    .menu-link {
      text-decoration: none;
      color: black;
      transition: color 0.3s ease;
    }
    
    .menu-link:hover {
      color: #6a7;
    }
    
    .nav-container {
        padding-top: 1.5em; /*moves the whole hamburger menu*/
        display: flex;
        flex-direction: column;
        position: fixed; /*stops scroll on mobile*/
        z-index: 5;
        -webkit-user-select: none;
        user-select: none;
    }

    .nav-container input { /*invisible*/
    margin-top: -2em;
    margin-left: -1em;
      width: 6em;
      height: 5em;
      position: absolute;
      cursor: pointer;
      opacity: 0;
      z-index: 7; 
      -webkit-touch-callout: none;
      overflow: hidden;
    }
    
    .nav-container .menu-span { /*open close toggle*/
        width: 2.1em;
        height: .3em;
        margin-bottom: .3em;
        margin-left: 15%;
        position: relative;
        background: black;
        border-radius: 3px;
        z-index: 6;
        transform-origin: 4px 0px;
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                  opacity 0.55s ease;
               
    }
    
    .nav-container .menu-span:first-child {
      transform-origin: 0% 0%;
    }
    
    .nav-container .menu-span:nth-last-child(2) {
      transform-origin: 0% 100%;
    }
    
    .nav-container input:checked ~ .menu-span {
      opacity: 1;
      transform: rotate(45deg) translate(-2px, -1px);
      background: rgb(0, 0, 0);
    }
    
    .nav-container input:checked ~ .menu-span:nth-last-child(3) {
      opacity: 0;
      transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    .nav-container input:checked ~ .menu-span:nth-last-child(2) {
      transform: rotate(-45deg) translate(0, -1px);
    }
    
    .nav-items {
        text-align: center;
        position: fixed;
        width: 100%;
        height: 100%;
        background: white;
        list-style-type: none;
        transform-origin: 0% 0%;
        transform: translate(-100%, 0);
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .nav-items {
        list-style: none;
        display: flex;
        flex-flow: column wrap;
        justify-content: center; 
    }
    
    .nav-items a {
        text-decoration: none;
        display: block;
        padding: 1em;
        color: black;
        font-size: 1.3em;
    }
    
    .nav-container input:checked ~ ul {
      transform: none;
    }
    input {
        opacity: 1;
    }
    .footer{
        position: absolute;
    }

}

const yo = {};

yo.email_container = document.querySelector('.email_container');
yo.form = document.querySelector('.email_container > #singular-form');
yo.trigger = document.querySelector('.email_container > #singular-form > button#trigger');
yo.input = document.querySelector('.email_container>#singular-form>#input-container>input');
yo.submitButton = document.querySelector('.email_container > #singular-form > #input-container > button');
yo.successMessage = document.querySelector('.email_container > #singular-form > #success');

yo.submitDelay = 1500;

yo.clickHandler = (e) => {
    switch (e.target) {
        case yo.trigger:
            console.log('case trigger');
            yo.email_container.style.width = '98%';
            e.target.classList.remove('shown');
            yo.input.classList.add('shown');
            yo.submitButton.classList.add('shown');
            yo.input.focus();
            break;
        case yo.submitButton:
            yo.submitForm();
            break;
    }
}

yo.handleInputKeypress = (e) => {
    if (e.keyCode === 13) {
        e.preventDefault();
        yo.submitForm();
    }
}

yo.submitForm = () => {
    yo.input.style.transition = 'all .4s ease';
    yo.submitButton.style.transition = 'all .4s ease';
    yo.input.classList.remove('shown');
    yo.submitButton.classList.remove('shown');
    yo.email_container.style.transition = 'all .4s cubic-bezier(0.47, 0.47, 0.27, 1.20) .4s';
    yo.email_container.style.width = '';
    yo.successMessage.classList.add('shown');
    let submission = setTimeout(() => yo.form.submit(), yo.submitDelay);
}

yo.input.addEventListener('keypress', (e) => yo.handleInputKeypress(e));
document.addEventListener('click', (e) => yo.clickHandler(e));

This Pen is owned by Njeri Cooper on CodePen.

See more by @njericooper on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.