carousel to about-us

This commit is contained in:
Idaapayo 2021-06-03 19:54:20 +03:00
parent 11dc6218bb
commit ec7657aea4
4 changed files with 102 additions and 8 deletions

View File

@ -47,3 +47,10 @@
background-color: #3E3F45;
color: #ffffff;
}
.wrapper-carousel{
box-sizing: border-box;
margin: auto;
border: solid 2px blue;
max-height: 600px;
max-width: 400px;
}

View File

@ -35,19 +35,59 @@
</div>
</div>
<div class="row">
<div class="col-3">
<div class="col-lg-3">
</div>
<div class="col-3">
<div class="col-lg-3">
</div>
<div class="col-3">
<div class="col-lg-3">
</div>
<div class="col-3">
<div class="col-lg-3">
</div>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel" data-interval="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-6 col-md-12 col-md-12">
<div class="wrapper-carousel">
<h3 class="years">2010</h3>
<h2>ECO_PESA</h2>
<p>This program was launched as a backed currency model with 75 Businesses taking part in three informal settlements near Kongowea, Mombasa. The currency was backed by donor funds and accomplished some amazing community service and environmental goals in partnership with Green World Campaign while increasing local trade for a year period.</p>
</div>
</div>
<div class="col-lg-6 col-md-12 col-md-12">
<div class="wrapper-carousel">
<iframe width="480" height="277" src="https://www.youtube.com/embed/UaspBGmsdLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
{% endblock %}

View File

@ -77,20 +77,60 @@
</div>
</div>
<div class="row">
<div class="col-3">
<div class="col-lg-3">
</div>
<div class="col-3">
<div class="col-lg-3">
</div>
<div class="col-3">
<div class="col-lg-3">
</div>
<div class="col-3">
<div class="col-lg-3">
</div>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel" data-interval="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-lg-6 col-md-12 col-md-12">
<div class="wrapper-carousel">
<h3 class="years">2010</h3>
<h2>ECO_PESA</h2>
<p>This program was launched as a backed currency model with 75 Businesses taking part in three informal settlements near Kongowea, Mombasa. The currency was backed by donor funds and accomplished some amazing community service and environmental goals in partnership with Green World Campaign while increasing local trade for a year period.</p>
</div>
</div>
<div class="col-lg-6 col-md-12 col-md-12">
<div class="wrapper-carousel">
<iframe width="480" height="277" src="https://www.youtube.com/embed/UaspBGmsdLE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<div class="row">
<div class="col-lg-12 base-footer">

View File

@ -47,3 +47,10 @@
background-color: #3E3F45;
color: #ffffff;
}
.wrapper-carousel{
box-sizing: border-box;
margin: auto;
border: solid 2px blue;
max-height: 600px;
max-width: 400px;
}