Skip to content

Instantly share code, notes, and snippets.

@rotimi-best

rotimi-best/ICO.html

Last active February 20, 2022 20:02
Show Gist options
  • Save rotimi-best/42ea9c3a0f9837f50da2e6fd06e4e8f1 to your computer and use it in GitHub Desktop.
Save rotimi-best/42ea9c3a0f9837f50da2e6fd06e4e8f1 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Rotimi Best revised this gist Feb 21, 2019. No changes.
  2. Rotimi Best renamed this gist Feb 21, 2019. 1 changed file with 0 additions and 0 deletions.
    0 index.html → ICO.html
    View file
    File renamed without changes.
  3. Rotimi Best created this gist Feb 21, 2019.
    338 changes: 338 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,338 @@
    <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>[email protected]</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>
    7 changes: 7 additions & 0 deletions leviclan.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    LeviClan
    --------
    An ICO Website

    A [Pen](https://codepen.io/RB_Projects/pen/QYRPNy) by [Ibitoye Best](https://codepen.io/RB_Projects) on [CodePen](https://codepen.io).

    [License](https://codepen.io/RB_Projects/pen/QYRPNy/license).
    50 changes: 50 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    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);
    459 changes: 459 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,459 @@
    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;
    }
    }
    1 change: 1 addition & 0 deletions styles
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <link href="https://github.com/kristoferjoseph/flexboxgrid" rel="stylesheet" />