ICO Landing Page

ICO.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css"> 

       <!-- HEADER WITH NAVIGATION BAR -->
    <header id="main-header">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4"> 
                    <h1><a href="#">LeviClan</a></h1>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 start-sm start-md start-lg">
                    <nav id="navbar"> 
                        <ul>
                            <li class="current"> <a href="#">Home</a> </li>
                            <li> <a href="#about">About us</a> </li>
                            <li> <a href="#roadmap">RoadMap</a> </li>
                            <li> <a href="#clan">Team</a> </li>
                            <li> <a href="#documents">Documents</a> </li>
                        </ul>
                    </nav>
                </div>
                <div id="right-nav" class="col-xs-12 col-sm-2 col-md-2 col-lg-2 end-sm end-md end-lg">
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>
                </div>
            </div>
        </div>
    </header>

    <!-- SHOWCASE SECTION-->

    <section id="showcase">
        <div class="container">
            <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
                <div id="showcase-left" class="col-xs-12 col-sm-6, col-md-6, col-lg-6">
                    <h2>The Perfect Crowdfunding.</h2>
                    <p>Trusted by MILLIONS of other clans</p>
                </div>
                <div id="showcase-right" class="col-xs-12 col-sm-6, col-md-6 col-lg-6">
                    <h3>Total Sale is <span class="live">LIVE</span></h3>
                    <h3>Token Sale Ends in:</h3>   
                    <div class="clock row center-xs center-sm center-md center-lg">
                        
                    </div>
                </div>
            </div>
            <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <button class="showcase-button"> buy token now</button>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div id="progress-top" class="row">
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div>
                                <span class="cap-amount">$3m</span>
                                <div class="cap-text">Soft Cap</div>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                            <div>
                                <span class="cap-amount">$15m</span>
                                <div class="cap-text">Hard Cap</div>
                            </div>
                        </div>
                    </div>  
                    <div id="progressbar">
                        <div class=""></div>
                    </div>
                </div>                
            </div>
        </div>
    </section>

    <!-- ABOUT SECTION-->

    <section id="about">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h2 class="title-text">About Us</h2>
                    <!-- ABOUT US ROW -->                
                    <div class="row title-body">
                        <div class="box col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium in assumenda quo ducimus iure sapiente nulla nemo, possimus eveniet atque enim iusto praesentium nisi mollitia, consequuntur aliquam temporibus quos tempora?
                                 Dignissimos, repellendus voluptas. Iste at reiciendis id. Ab nulla, placeat itaque et quis dolore soluta quas nemo, ut, neque voluptate molestias expedita porro consequatur sit dolorum aperiam voluptas temporibus? Quia!
                            </p>
                            <button class="about-button">Read More</button>
                        </div>
                        <div class="box col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            <img src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735696/about.jpg" alt="">
                        </div>
                    </div>

                    <!-- OUR MISSION ROW --> 
                    <div class="row title-body">
                        <div id="mission" class="row middle-xs middle-sm middle-md middle-lg">
                            <div class="box col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                <iframe id="video" width="100%" height="50%" src="https://www.youtube.com/embed/uzVP3qAhzZU" frameborder="0" allowfullscreen=""></iframe>
                            </div>
                          
                            <div class="box col-xs-12 col-sm-6 col-md-6 col-lg-6">
                                <h3 class="title-text">Our Mission</h3>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium in assumenda quo ducimus iure sapiente nulla nemo, possimus eveniet atque enim iusto praesentium nisi mollitia, consequuntur aliquam temporibus quos tempora?
                                  porro consequatur sit dolorum aperiam voluptas temporibus? Quia!
                                </p>
                            </div>
                        </div> 
                    </div>                                    
                </div>
            </div>
        </div>
    </section>

    <!-- ROADMAP SECTION-->

    <section id="roadmap">
        <div class="container">
            <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
                <div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h2 class="title-text"><i class="fa-title fa fa-rocket"></i> Road Map</h2>
                    <p class="title-body">Where's Crowdholding going?</p>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <p class="roadmap-item">Research and Development</p>
                    <div id="research" class="roadmap-box">
                            <h4 class="month" id="jan-month">January</h4>
                            <p class="year" id="jan-year">2018</p>                        
                    </div>
                    <i class="fa fa-angle-double-right"></i>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <p class="roadmap-item"> A closed round of sales</p>
                    <div id="sale" class="roadmap-box">
                            <h4 class="month">April</h4> 
                            <p class="year">2018</p>                    
                    </div>
                    <i class="fa fa-angle-double-right"></i>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <p class="roadmap-item">Fire Lotto LAUNCH</p><br>
                    <div id="launch" class="roadmap-box">
                        <h4 class="month">June</h4>  
                        <p class="year">2018</p>                          
                    </div>
                    <i class="fa fa-angle-double-right"></i> 
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <p class="roadmap-item">Token pre-Sales</p><br>
                    <div id="token" class="roadmap-box" >
                        <h4 class="month">December</h4>
                        <p class="year">2018</p>
                    </div>
                    <i class="fa fa-angle-double-right"></i> 
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <p class="roadmap-item">Advertising Campaign Kick-Off</p>
                    <div id="kick-off" class="roadmap-box" >
                        <h4 class="month">March </h4> 
                        <p class="year">2019</p>                       
                    </div>
                    <i class="fa fa-angle-double-right"></i> 
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <p class="roadmap-item">Advertising Campaign Runs</p>
                    <div id="advert" class="roadmap-box" >
                        <h4 class="month">August</h4>
                        <p class="year">2019</p>                            
                    </div>
                    <i class="fa fa-angle-double-right"></i>
                </div>                
            </div>
        </div>
    </section>

    <!--THE CLAN SECTION ALSO KNOWN AS TEAM SECTION -->
    <section id="clan">
        <div class="container">
            <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h2 class="title-text"><i class="fa fa-title fa-address-card"></i> The Clan</h2>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735696/gate.jpg" alt="">
                    <h4> Bill Gates</h4>
                    <p>CEO</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>                       
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735695/jeff.jpg" alt="">
                    <h4>Jeff Bezos</h4>
                    <p>Managing Director</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735696/mark.jpg" alt="">
                    <h4>Mark Zukerberg</h4>
                    <p>Senior Engineer</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box center">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735694/elon.jpg" alt="">
                    <h4>Elon Musk</h4>
                    <p>Head of Innovation</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>
                </div>
            </div>
            <div class="row center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735696/gate.jpg" alt="">
                    <h4> Bill Gates</h4>
                    <p>CEO</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>                       
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735695/jeff.jpg" alt="">
                    <h4>Jeff Bezos</h4>
                    <p>Managing Director</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735696/mark.jpg" alt="">
                    <h4>Mark Zukerberg</h4>
                    <p>Senior Engineer</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-2 clan-box center">
                    <img class="clan-image" src="http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735694/elon.jpg" alt="">
                    <h4>Elon Musk</h4>
                    <p>Head of Innovation</p> 
                    <ul>
                        <li><a href="https://www.facebook.com" target="_blank"> <i class="fa fa-facebook-square"></i> </a></li>
                        <li> <a href="https://www.telegram.com" target="_blank"> <i class="fa fa-telegram"></i> </a></li>
                        <li> <a href="https://www.instagram.com" target="_blank"> <i class="fa fa-instagram"></i> </a></li>                        
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!--THE DOCUMENTS SECTION -->
    <section id="documents">
        <div class="container">
            <div class="row center-xs center-sm center-md center-lg">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <h2 class="title-text"><i class="fa fa-title fa-address-book"></i> Documents</h2>
                    <div class="row center-xs center-sm center-md center-lg">
                        <div class="document-box col-xs-12 col-sm-3 col-md-3 col-lg-3">
                            <i class="fa fa-book"></i>
                            <h3><a href="#">White Paper</a></h3>
                        </div>
                        <div class="document-box col-xs-12 col-sm-3 col-md-3 col-lg-3">
                            <i class="fa fas fa-angle-down"></i>
                            <h3><a href="#">Terms & Privacy</a></h3>
                        </div>
                        <div class="document-box col-xs-12 col-sm-3 col-md-3 col-lg-3">
                            <i class="fa fa-envelope-square"></i>
                            <h3><a href="#">Smart Contract</a></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <footer id="footer">
        <div class="container">
            <div class="row center-xs center-sm center-md center-lg">
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <h4>Subscribe</h4>
                    <form action="">
                        <input type="text" placeholder="Your email here..">
                        <button class="footer-button">Submit</button>
                    </form>
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <h4>Join the community</h4>
                       <ul>
                            <li><a href=""><i class="fa fa-facebook-square"></i></a></li>
                            <li><a  href=""><i class="fa fa-github-square"></i></a></li>
                            <li><a href=""><i class="fa fa-linkedin"></i></a></li>

                            <li><a href=""><i class="fa fa-telegram"></i></a></li>

                            <li><a href=""><i class="fa fa-instagram"></i></a></li>

                            <li><a href=""><i class="fa fa-pinterest"></i></a></li>
                            <li><a href=""><i class="fa fa-slack"></i></a></li>

                            <li><a href=""><i class="fa fa-skype"></i></a></li>
                        </ul>                        
                </div>
                <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
                    <h4>Contact Us</h4>
                    <p>hello@leviclan.com</p>
                    <p>Office 7 35-37 Ludgate Hill</p>
                    <p>London, United Kingdom</p>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 center-xs center-sm center-md center-lg middle-xs middle-sm middle-md middle-lg bottom-footer">

                    <p>&copy; 2018 Rotimi Ibitoye Best</p>
                </div>
            </div>
        </div>
    </footer>

leviclan.markdown

LeviClan

An ICO Website

A Pen by Ibitoye Best on CodePen.

License.

script.js

const countdown = document.querySelector('.clock');

// Set Launch Date (ms)
const launchDate = new Date('Jan 1, 2019 13:00:00').getTime();

// Update every second
const intvl = setInterval(() => {
  // Get todays date and time (ms)
  const now = new Date().getTime();

  // Distance from now and the launch date (ms)
  const distance = launchDate - now;

  // Time calculation
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor(
    (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
  );
  const mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display result
  countdown.innerHTML = `
  <div class="clock-space col-xs-2 col-sm-2, col-md-2, col-lg-2">
	<span class="days time">${days}</span>
	<div data-locale="clock_days" class="text">days</div>
</div>
<div class="clock-space col-xs-2 col-sm-2, col-md-2, col-lg-2">
	<span class="hours time">${hours}</span>
	<div data-locale="clock_hours" class="text">hours </div>
</div>
<div class="clock-space col-xs-2 col-sm-2, col-md-2, col-lg-2">
	<span class="minutes time">${mins}</span>
	<div data-locale="clock_minutes" class="text">min</div>
</div>
<div class="clock-space col-xs-2 col-sm-1, col-md-1, col-lg-1">
	<span class="seconds time">${seconds}</span>
	<div data-locale="clock_seconds" class="text">sec</div>
</div>
`;

  // If launch date is reached
  if (distance < 0) {
    // Stop countdown
    clearInterval(intvl);
    // Style and output text
    countdown.style.color = '#17a2b8';
    countdown.innerHTML = 'Launched!';
  }
}, 1000);

style.css

body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin:0;
    padding:0;
    line-height: 1.5em;
    font-size: 17px;
}
.container {
    margin:auto;
}
p, h2, h3{
    margin: 0;
}
a{
    text-decoration: none;
}

/* COMMON CLASSES */

.fa-title{
    font-size:60px;
    color:#d9a520;
}
.title-text{
    font-size:60px;
}

.title-body{
    font-size: 20px;
}
.live{
    text-transform: uppercase;
    color: red;
}

/* HEADER */
#main-header{
    border-bottom: 2px solid #d9a520;
    background: #000000;
    position: fixed;
    top: 0;
    width: 100%;
}
#main-header h1{
    margin: 10px 0;
}
#main-header a{
    text-decoration: none;
    color: #ffff;
}

/* NAVIGATION BAR */
#navbar{
    text-transform: uppercase;
}


#navbar li{
    display: inline;
    padding-right: 20px;
    list-style: none;
    font-weight: bold;
}

#right-nav li{
    display: inline;
    padding-right: 5px;
    list-style: none;
}
#right-nav li .fa{
    font-size: 25px;
}

#navbar li.current a, #navbar a:hover{
    border-bottom: 3px solid #d9a520;
    padding-bottom: 5px;
}
#right-nav a:hover{
    color: #d9a520;
}


/* SHOWCASE */
#showcase{
    margin-top: 62px;
    height: 700px;
    background: linear-gradient(to bottom right, #ecea61, #f17007);
}

#showcase #showcase-left{
    border-right: 5px solid #000000;
    margin: 80px 0 10px 0;
    padding: 25px 10px;
}
#showcase #showcase-left h2{
    font-size: 50px;
    line-height: 1em;
}

#showcase #showcase-left p{
    font-size: 25px;
}

#showcase #showcase-right{
    margin: 80px 0 10px 0;
}

#showcase #showcase-right h3{
    font-size: 25px;
    padding-bottom: 20px;
}

#showcase #showcase-right .text{
    font-weight: bold;
    text-transform: uppercase;
}

#showcase #showcase-right .clock-space{
    padding-right: 5px;
}
#showcase #showcase-right .time{
    font-size: 35px;
    font-weight: bolder;
}

#showcase .showcase-button{
    margin: 20px 0;
    text-transform: capitalize;
    font-weight: lighter;
    font-size: 20px;
    width: 20%;
    padding: 20px 0;
    border: 1px solid #272626;
    border-radius: 2rem;
    background-color: rgb(56, 52, 52);
    color: #fff;
    opacity: 1;
    box-shadow: 0 10px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
#showcase .showcase-button:hover{
    transition-duration: 0.4s;
    background-color: #f5cc5a;
    color: rgb(10, 10, 10);
    cursor: pointer;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);
}

#progress-top{
    margin-bottom: 20px;
}

#progress-top .cap-amount{
    font-size: 25px;
    font-weight: bolder;
}

#progress-top .cap-text{
    font-size: 15px;
    font-weight: lighter;
}

/* THE ABOUT SECTION */
#about{
    background-color: #f6f6ee;
}
#about h2{
    margin: 90px 0;
}

#about p{
    padding-bottom: 20px;
}

#about .title-body{
    margin-bottom: 50px;
}

#about .about-button{
    width: 200px;
    height: 50px;
    border: 2px solid #d9a520;
    background-color: #f6f6ee;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    text-transform: uppercase;
    border-radius: 2em;
    font-size: 17px;
}

#about .about-button:hover{
    background-color: #d9a520;
    color: white;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);
}
#about img{
    border-radius: 2rem;
}

#mission{
    margin-bottom: 20px;
}

#mission h3{
    margin: 30px 0;
}

#mission iframe{
    border-radius: 1rem;
    height: 350px;
}


/* ROADMAP SECTION {My favourite}*/

#roadmap{
    background-color: #000000;
    color: white;
    padding-bottom: 20px;
    border-bottom: 2px solid #d9a520;
    border-top: 2px solid #d9a520;
}

.title-text{
    margin: 50px 0;
}
#roadmap .title-body{
    margin: 10px 0 50px 0;
}

#roadmap .roadmap-box{
    border-radius: 1.5rem;
    border-top: 5px solid #d9a520; 
    background-color: white;
    color: black;
    height: 200px;
    opacity: 0.8;
}

#roadmap .roadmap-box .month{
    font-family: 'Open Sans', sans-serif;
    font-size: 25px;
    font-weight: bolder;
    text-transform: capitalize;
}
#roadmap .roadmap-box .year{
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: bolder;
    text-transform: capitalize;
}

#roadmap  #research{
    background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735698/research.jpg') no-repeat center;
    
}
#roadmap #sale{
    background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735699/sale.jpg') no-repeat center;
}
#roadmap #launch{
    background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735696/launch.jpg') repeat center;
}
#roadmap #token{
    background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735697/token.png') no-repeat center;
}
#roadmap #kick-off{
    background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735694/kick-off.jpg') no-repeat center;
}
#roadmap #advert{
    background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519737531/loudadvert.jpg') no-repeat center;
}
.roadmap-item {
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 10px;
}

#roadmap .fa{
    font-size:60px;
    color: #d9a520;
    padding-top: 25px;
}


/* CLAN SECTION --> THE TEAM */

#clan{
    /* Section for the clan  */
}

#clan .clan-box{
    background-color: #ffffff;
    margin-left: 40px;
    padding: 0 20px 20px 20px;
    box-shadow: 0 10px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); 
    margin-bottom: 50px;
}

#clan .clan-image{
    width: 150px;
    height: 150px;
    border-radius: 5rem;
    margin-top: 20px;
}

#clan .clan-box h4{
    margin: 10px 0;
}
#clan .clan-box p{
    margin: 10px 0;
}

#clan .clan-box .fa, #footer .fa{
    font-size:25px;
    color: #000000;
}

#clan li{
    display: inline;
    padding-right: 5px;
    list-style: none;
    margin: 0 5px 0 -10px;
}
#clan .clan-box ul li a:hover i{
    color: #d9a520;
}

#clan .clan-box .fa{
    font-size: 25px;
}

/* THE DOCUMENT SECTION */
#documents{
    background: url("http://res.cloudinary.com/dvdlbbt34/image/upload/v1521058991/footer.jpg") repeat;
    
    color: white;
}
#documents .fa{
    color: rgb(248, 246, 246);
}
#documents .document-box{
    background-color: #fa761e;
    margin: 0 50px 70px 10px;
    border-radius: 5px;
    height: 250px;

}
#documents .document-box:hover{
    background-color: #af4804;
    cursor: pointer;
}

#documents .document-box i{
    background-color: #fb8537;
    border-radius: 5rem;
    font-size: 40px;
    margin: 20px 0;
    padding: 30px 35px;
}


#documents .document-box h3 a{
    color: white;
}


/* FOOTER SECTION */
#footer{
    background: #1a1a1a;
    color: white;
}

#footer ul li{    
    display: inline;
    list-style: none;
}
#footer ul li a:hover i{
    color: #d9a520;
}

#footer li .fa{
    font-size: 25px;    
    color: white;
    padding: 0 5px;
}

.footer-button{
    height: 39px;
    width: 90px;
    background-color: #fb8537;
    color: white;
    border: none;
    text-transform: uppercase;
    padding: 0 7px;
}

.footer-button:hover{
    cursor: pointer;
    font-weight: bolder;
}

#footer input[type=text]{
    height: 35px;
    width: 70%;
    padding: 0 7px;    
}

.bottom-footer{
    margin: 20px 0;
}


@media(max-width: 900px){
    #main-header{
        position: static;
        text-align: center;
    }

    #showcase{
    margin-top: 0;
    }

    #about .title-body img{
        margin-top: 10px;
    }
    #about h2{
        margin: 50px 0;
    }
    #mission .title-body{
        margin: 5px 15px;
    }
    #roadmap .roadmap-box{
        width: 38%;
        height: 250px;
        text-align: center;
        margin-left: 220px;
    }
    #roadmap  #research{
    background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735698/research.jpg') repeat center;
    
    }
    #roadmap #launch{
        background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735696/launch.jpg') repeat center;
    }
    #roadmap #kick-off{
        background:#333 url('http://res.cloudinary.com/dvdlbbt34/image/upload/v1519735694/kick-off.jpg') repeat center;
    }
    #clan .clan-box{
        margin: 20px 50px;
    }
    .footer-button{
        margin-top: 10px;
    }

}

@media(max-width: 350px){
  #navbar li.current a, #navbar a:hover{
    border-bottom: 3px solid #fff;
    padding-bottom: 2px;
}
}

styles

<link href="https://github.com/kristoferjoseph/flexboxgrid" rel="stylesheet" />