more about-us styling

This commit is contained in:
Idaapayo 2021-06-03 21:48:16 +03:00
parent ec7657aea4
commit 38c5901848
10 changed files with 185 additions and 32 deletions

View File

@ -1,2 +1,3 @@
:title: Food Forests
:title: Food Forests
:template: Food forests

View File

@ -50,7 +50,39 @@
.wrapper-carousel{
box-sizing: border-box;
margin: auto;
border: solid 2px blue;
border: solid 2px #ffffff;
max-height: 600px;
max-width: 400px;
}
max-width: 500px;
}
.carousel-indicators li{
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators{
bottom: -50px;
/*padding-top: 50px;*/
}
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/*.col-carousel-left{*/
/* padding-left: 100px;*/
/*}*/
/*.carousel-indicators-round{*/
/* width: 14px;*/
/* height: 14px;*/
/* border: 2px solid black;*/
/* border-radius: 100%;*/
/*}*/

View File

View File

@ -0,0 +1,11 @@
{% extends "base.html" %}
{% block head %}
{{ super() }}
<link rel="stylesheet" type="text/css" href="{{SITEURL}}/theme/css/food-forest.css">
{% endblock %}
{% block content %}
{% endblock %}

View File

@ -35,6 +35,7 @@
</div>
</div>
<div class="row">
<p>Photo grid missing!!</p>
<div class="col-lg-3">
</div>
@ -49,25 +50,27 @@
</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 id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<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="row pt-5">
<div class="col-lg-6 col-md-12 col-sm-12 ps-5">
<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="col-lg-6 col-md-12 col-md-12 ps-5">
<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 class="iframe-container">
<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>

View File

@ -77,6 +77,7 @@
</div>
</div>
<div class="row">
<p>Photo grid missing!!</p>
<div class="col-lg-3">
</div>
@ -91,25 +92,27 @@
</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 id="carouselExampleIndicators" class="carousel slide carousel-dark" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
</ol>
<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="row pt-5">
<div class="col-lg-6 col-md-12 col-sm-12 ps-5">
<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="col-lg-6 col-md-12 col-md-12 ps-5">
<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 class="iframe-container">
<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>

View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>grassroots-pelican - Food Forests</title>
<title>grassroots-pelican</title>
<meta charset="utf-8" />
<meta name="ida" content="Pelican"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -18,7 +18,7 @@
<script src="https://use.fontawesome.com/5932321f98.js"></script>
<link rel="stylesheet" type="text/css" href="../theme/css/food-forest.css">
</head>
<body id="base-index" class="base-home">
@ -48,10 +48,7 @@
</nav>
<!--</div>-->
<h1>Food Forests</h1>
<div class="row">
<div class="col-lg-12 base-footer">

View File

@ -50,7 +50,39 @@
.wrapper-carousel{
box-sizing: border-box;
margin: auto;
border: solid 2px blue;
border: solid 2px #ffffff;
max-height: 600px;
max-width: 400px;
}
max-width: 500px;
}
.carousel-indicators li{
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators{
bottom: -50px;
/*padding-top: 50px;*/
}
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
}
.iframe-container iframe{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
/*.col-carousel-left{*/
/* padding-left: 100px;*/
/*}*/
/*.carousel-indicators-round{*/
/* width: 14px;*/
/* height: 14px;*/
/* border: 2px solid black;*/
/* border-radius: 100%;*/
/*}*/

View File

@ -0,0 +1,74 @@
.box-wrap{
box-sizing: border-box;
margin: auto;
border-style: solid;
border-color: #ffffff;
max-height: 900px;
max-width: 400px;
}
.box-title{
text-align: center;
font-weight: bold;
padding-top: 40px;
font-size: 40px;
}
.box-title1{
text-align: center;
font-weight: bold;
padding-top: 80px;
font-size: 40px;
}
.box-words{
padding-top: 20px;
text-align: center;
}
.box-words1{
padding-top: 40px;
}
.inline-buttons{
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
padding-top: 20px;
padding-bottom: 20px;
/*flex-wrap: wrap;*/
}
.a-button{
background: #ffffff;
border: 1px solid black;
color: black;
padding: 0.5em;
/*padding: 12px 6px;*/
text-decoration: none;
width: 150px;
border-radius: 25px;
}
.a-button:hover{
background-color: #3E3F45;
color: #ffffff;
}
.wrapper-carousel{
box-sizing: border-box;
margin: auto;
border: solid 2px #ffffff;
max-height: 600px;
max-width: 500px;
}
.carousel-indicators li{
width: 10px;
height: 10px;
border-radius: 100%;
}
.carousel-indicators{
bottom: -50px;
}
/*.col-carousel-left{*/
/* padding-left: 100px;*/
/*}*/
/*.carousel-indicators-round{*/
/* width: 14px;*/
/* height: 14px;*/
/* border: 2px solid black;*/
/* border-radius: 100%;*/
/*}*/

View File