TimeLine on Bootstrap 5

Discussion of Html codes and other things
Post Reply
User avatar
Kosmito
Site Admin
Posts: 17
Joined: Mon Jan 09, 2023 7:16 pm
Contact:

TimeLine on Bootstrap 5

Post by Kosmito »

Post en Consutrccion /// Building post yet
Image
Showing the Content /// Mostrando el Contenido
Image

Code: Select all

<section id="timeline">
    <div class="container spacer-02">
        <h2 class="pb-2 border-bottom title-0">TimeLine</h2>
        <div class="row">
            <div class="col-22"><div class="vertical-line"></div>
                <a class="btn btn-outline-light" data-bs-toggle="collapse" href="#multiCollapse1" role="button" aria-expanded="false" aria-controls="multiCollapse1">Q2 2022</a>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Q3 2022</button>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse3" aria-expanded="false" aria-controls="multiCollapse3">Early Q1 2023</button>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse4" aria-expanded="false" aria-controls="multiCollapse4">End of Q1 2023</button>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse5" aria-expanded="false" aria-controls="multiCollapse5">Early Q2 2023</button>
            </div>
        </div>
        <div class="row content-align-center">
           <div class="col-22">
             <div class="collapse multi-collapse" id="multiCollapse1">
                <div class="h-100">
                <h5 class="card-title">$CLD Staking Launch</h5><br>
                <p class="card-text">In August of 2022, ClassicDAO underwent a very small private sale of CLD tokens to early investors, before launching the first dual staking mechanism on ETC for holders.</p>
               
            </div>
            </div>
          </div>
          <div class="col-22">
            <div class="collapse multi-collapse" id="multiCollapse2">
            <div class="h-100">
                <h5 class="card-title">Protocol Announcement</h5><br>
                <p class="card-text">In September of 2022, the WinslowDAO protocol, previously known as the HarmoniaDAO protocol was announced and outlined for its development for the ClassicDAO team.</p>
            </div>
            </div>
          </div>

          <div class="col-22">
            <div class="collapse multi-collapse" id="multiCollapse3">
                <div class="h-100">
                <h5 class="card-title">V1 Draft of the WinslowDAO Protocol</h5><br>
                <p class="card-text">The SoteriaSC team, which is the development firm tasked to the creation of the WinslowDAO protocol, expects to release the first fully completed draft of the protocol by the end of January 2023, which will later be deployed as ClassicDAO on Ethereum Classic.</p>
               
            </div>
            </div>
          </div>

          <div class="col-22">
            <div class="collapse multi-collapse" id="multiCollapse4">
                <div class="h-100">
                <h5 class="card-title">Launch of the ClassicDAO</h5><br>
                <p class="card-text">After over a years work, we hope to launch the WinslowDAO protocol as ClassicDAO by the end of march 2023. This will mark an important milestone not only for Ethereum Classic due to its innovative solutions, but for the whole blockchain and Decentralized Finance world.</p>                
            </div>
              </div>
          </div>
          
            <div class="col-22">
              <div class="collapse multi-collapse" id="multiCollapse5">
                <div class="h-100">
                <h5 class="card-title">Closing of $CLD staking</h5><br>
                <p class="card-text">Thanks to the incentives for voters, proposers and participators of the DAO, we hope to be able to close the $CLD staking mechanism for a monetary policy of the $CLD token completly controled by the DAO.</p>
        
            </div>
            </div>
          </div>
        </div>
        <div class="row content-align-center">
            <div class="col-22">
              <div class="collapse multi-collapse" id="multiCollapse1">
                 <div class="h-100">
                    <p><button type="button" class="btn btn-outline-light">Read More</button></p>
              </div>
             </div>
           </div>
           <div class="col-22">
             <div class="collapse multi-collapse" id="multiCollapse2">
             <div class="h-100">
                <p><button type="button" class="btn btn-outline-light">Read More</button></p>
              </div>
             </div>
           </div>   
           <div class="col-22">
             <div class="collapse multi-collapse" id="multiCollapse3">
                 <div class="h-100">
                    <p><button type="button" class="btn btn-outline-light">Read More</button></p>
              </div>
             </div>
           </div>    
           <div class="col-22">
             <div class="collapse multi-collapse" id="multiCollapse4">
                 <div class="h-100">
                    <p><button type="button" class="btn btn-outline-light">Read More</button></p>
                </div>
               </div>
           </div>
             <div class="col-22">
               <div class="collapse multi-collapse" id="multiCollapse5">
                 <div class="h-100">
                    <p><button type="button" class="btn btn-outline-light">Read More</button></p>
              </div>
             </div>
           </div>
         </div>
  </section>
sin botones
Image

Code: Select all

<section id="timeline">
    <div class="container spacer-02">
        <h2 class="pb-2 border-bottom title-0">TimeLine</h2>
        <div class="row">
            <div class="col-22"><div class="vertical-line"></div>
                <a class="btn btn-outline-light" data-bs-toggle="collapse" href="#multiCollapse1" role="button" aria-expanded="false" aria-controls="multiCollapse1">Q2 2022</a>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse2" aria-expanded="false" aria-controls="multiCollapse2">Q3 2022</button>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse3" aria-expanded="false" aria-controls="multiCollapse3">Early Q1 2023</button>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse4" aria-expanded="false" aria-controls="multiCollapse4">End of Q1 2023</button>
            </div>
            <div class="col-22"><div class="vertical-line"></div>
                <button class="btn btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapse5" aria-expanded="false" aria-controls="multiCollapse5">Early Q2 2023</button>
            </div>
        </div>
        <div class="row content-align-center">
           <div class="col-22">
             <div class="collapse multi-collapse" id="multiCollapse1">
                <div class="h-100">
                <h5 class="card-title">$CLD Staking Launch</h5><br>
                <p class="card-text">In August of 2022, ClassicDAO underwent a very small private sale of CLD tokens to early investors, before launching the first dual staking mechanism on ETC for holders.</p>
               
            </div>
            </div>
          </div>
          <div class="col-22">
            <div class="collapse multi-collapse" id="multiCollapse2">
            <div class="h-100">
                <h5 class="card-title">Protocol Announcement</h5><br>
                <p class="card-text">In September of 2022, the WinslowDAO protocol, previously known as the HarmoniaDAO protocol was announced and outlined for its development for the ClassicDAO team.</p>
            </div>
            </div>
          </div>

          <div class="col-22">
            <div class="collapse multi-collapse" id="multiCollapse3">
                <div class="h-100">
                <h5 class="card-title">V1 Draft of the WinslowDAO Protocol</h5><br>
                <p class="card-text">The SoteriaSC team, which is the development firm tasked to the creation of the WinslowDAO protocol, expects to release the first fully completed draft of the protocol by the end of January 2023, which will later be deployed as ClassicDAO on Ethereum Classic.</p>
               
            </div>
            </div>
          </div>

          <div class="col-22">
            <div class="collapse multi-collapse" id="multiCollapse4">
                <div class="h-100">
                <h5 class="card-title">Launch of the ClassicDAO</h5><br>
                <p class="card-text">After over a years work, we hope to launch the WinslowDAO protocol as ClassicDAO by the end of march 2023. This will mark an important milestone not only for Ethereum Classic due to its innovative solutions, but for the whole blockchain and Decentralized Finance world.</p>                
            </div>
              </div>
          </div>
          
            <div class="col-22">
              <div class="collapse multi-collapse" id="multiCollapse5">
                <div class="h-100">
                <h5 class="card-title">Closing of $CLD staking</h5><br>
                <p class="card-text">Thanks to the incentives for voters, proposers and participators of the DAO, we hope to be able to close the $CLD staking mechanism for a monetary policy of the $CLD token completly controled by the DAO.</p>
        
            </div>
            </div>
          </div>
        </div>
  </section>
Extra CSS

/*TimeLine*/

Code: Select all

.vertical-line{
    border-left: 2px solid rgb(222, 226, 230);
        height: 50px;
        margin-left: 50%;
        margin-bottom: 4%;
}

.card-title {
    margin-bottom: var(--bs-card-title-spacer-y);
    text-decoration-line: underline;
    font-weight: bold;
  }
Image
Image
Post Reply