cycle ofimages complete
This commit is contained in:
parent
2723d83d3c
commit
d25eb2acdd
|
|
@ -22,14 +22,56 @@
|
|||
margin-left: 400px;
|
||||
margin-right: 400px;
|
||||
}
|
||||
.arrow-container{
|
||||
/*margin-left: -100px;*/
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
/*.img-center{*/
|
||||
/* margin: auto;*/
|
||||
/*}*/
|
||||
.center-this{
|
||||
text-align: center;
|
||||
}
|
||||
.arrow-container img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.word-wrap{
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
border-top: solid 2px #e6e6e6;
|
||||
border-bottom: solid 2px #e6e6e6;
|
||||
max-width: 250px;
|
||||
max-height: 300px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.word-wrap2{
|
||||
/*margin-top: 10px;*/
|
||||
box-sizing: border-box;
|
||||
border-top: solid 2px #e6e6e6;
|
||||
border-bottom: solid 2px #e6e6e6;
|
||||
padding: 10px;
|
||||
max-width: 60%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
/*position: absolute;*/
|
||||
/*max-width: 300px;*/
|
||||
}
|
||||
|
||||
.last-content-box{
|
||||
display: inline-block;
|
||||
}
|
||||
.rotate-up{
|
||||
transform: rotate(250deg);
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: -60px;
|
||||
}
|
||||
.rotate-up-side{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.rotate-down-side{
|
||||
transform: rotate(120deg);
|
||||
overflow: hidden;
|
||||
/*margin-left: -30px;*/
|
||||
}
|
||||
.handmaid-img{
|
||||
padding-top: 20px;
|
||||
}
|
||||
@media only screen and (max-width: 480px){
|
||||
.text-img{
|
||||
|
|
@ -55,6 +97,19 @@
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: auto;
|
||||
}
|
||||
.img-extend{
|
||||
height: 300px;
|
||||
}
|
||||
.rotate-up-side{
|
||||
transform: rotate(200deg);
|
||||
}
|
||||
.rotate-down-side{
|
||||
transform: rotate(90deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1024px){
|
||||
|
|
@ -81,4 +136,12 @@
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: auto;
|
||||
}
|
||||
.rotate-down-side{
|
||||
transform: rotate(100deg);
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -19,32 +19,51 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="d-flex many-imgs">-->
|
||||
<!--<!– <div class="flex-column">–>-->
|
||||
<!--<!– <div class="flex-lg-shrink-0 flex-md-shrink-0 flex-sm-shrink-1">–>-->
|
||||
<!-- <img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs1resized.gif">-->
|
||||
<!--<!– </div>–>-->
|
||||
<!-- <div class="flex-lg-grow-1 flex-md-grow-1 flex-sm-grow-0">-->
|
||||
<!-- <p class="text1-beside">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p>-->
|
||||
<!-- </div>-->
|
||||
<!--<!– </div>–>-->
|
||||
<!-- <div class="align-self-end">-->
|
||||
<!-- <div class="arrow-container">-->
|
||||
<!-- <img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--<!– </div>–>-->
|
||||
<!-- </div>-->
|
||||
<div class="many-imgs">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs1resized.gif">
|
||||
<img class="img-fluid img-extend" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs1resized.gif">
|
||||
</div>
|
||||
<div class="col-6 mt-auto">
|
||||
<p class="text-beside1 word-wrap">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
|
||||
<div class=" arrow-container">
|
||||
<div class="bottom">
|
||||
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-inline-flex flex-row-reverse">
|
||||
<!-- first item is left most item on the page order has been reversed with flex-row-reverse-->
|
||||
<div class="col-6">
|
||||
<div class="center-this">
|
||||
<img class="img-fluid handmaid-img" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-3.webp">
|
||||
|
||||
<p class="word-wrap2" >Due to economic instability, people often lack money with which to purchase from each other</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p class="text-beside1">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
|
||||
<div class="arrow-container">
|
||||
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp"></div>
|
||||
<img class="img-fluid rotate-up" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">
|
||||
<img class="img-fluid tree-img" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-8.webp">
|
||||
<p class="word-wrap2">Thriving communities build their own prospering economies</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex ">
|
||||
<div class="col-6 center-this">
|
||||
<img class="img-fluid rotate-up-side" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">
|
||||
</div>
|
||||
|
||||
<div class="col-6 ">
|
||||
<img class="img-fluid rotate-down-side" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-2.webp">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 center-this">
|
||||
<div class="last-content-box">
|
||||
<img class="img-fluid" src="{{SITEURL}}/theme/images/howitworks-imgs/manyimgs-5.webp">
|
||||
<p class="word-wrap">Community currencies create a stable medium of exchange tied to local development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -80,32 +80,51 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="d-flex many-imgs">-->
|
||||
<!--<!– <div class="flex-column">–>-->
|
||||
<!--<!– <div class="flex-lg-shrink-0 flex-md-shrink-0 flex-sm-shrink-1">–>-->
|
||||
<!-- <img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs1resized.gif">-->
|
||||
<!--<!– </div>–>-->
|
||||
<!-- <div class="flex-lg-grow-1 flex-md-grow-1 flex-sm-grow-0">-->
|
||||
<!-- <p class="text1-beside">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p>-->
|
||||
<!-- </div>-->
|
||||
<!--<!– </div>–>-->
|
||||
<!-- <div class="align-self-end">-->
|
||||
<!-- <div class="arrow-container">-->
|
||||
<!-- <img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-2.webp">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
<!--<!– </div>–>-->
|
||||
<!-- </div>-->
|
||||
<div class="many-imgs">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs1resized.gif">
|
||||
<img class="img-fluid img-extend" src="../theme/images/howitworks-imgs/manyimgs1resized.gif">
|
||||
</div>
|
||||
<div class="col-6 mt-auto">
|
||||
<p class="text-beside1 word-wrap">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
|
||||
<div class=" arrow-container">
|
||||
<div class="bottom">
|
||||
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-2.webp"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-inline-flex flex-row-reverse">
|
||||
<!-- first item is left most item on the page order has been reversed with flex-row-reverse-->
|
||||
<div class="col-6">
|
||||
<div class="center-this">
|
||||
<img class="img-fluid handmaid-img" src="../theme/images/howitworks-imgs/manyimgs-3.webp">
|
||||
|
||||
<p class="word-wrap2" >Due to economic instability, people often lack money with which to purchase from each other</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<p class="text-beside1">Community Inclusion Currencies are regional means of exchange that supplements the national currency system. See Sarafu Network as an example.</p><br>
|
||||
<div class="arrow-container">
|
||||
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-2.webp"></div>
|
||||
<img class="img-fluid rotate-up" src="../theme/images/howitworks-imgs/manyimgs-2.webp">
|
||||
<img class="img-fluid tree-img" src="../theme/images/howitworks-imgs/manyimgs-8.webp">
|
||||
<p class="word-wrap2">Thriving communities build their own prospering economies</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row d-flex ">
|
||||
<div class="col-6 center-this">
|
||||
<img class="img-fluid rotate-up-side" src="../theme/images/howitworks-imgs/manyimgs-2.webp">
|
||||
</div>
|
||||
|
||||
<div class="col-6 ">
|
||||
<img class="img-fluid rotate-down-side" src="../theme/images/howitworks-imgs/manyimgs-2.webp">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 center-this">
|
||||
<div class="last-content-box">
|
||||
<img class="img-fluid" src="../theme/images/howitworks-imgs/manyimgs-5.webp">
|
||||
<p class="word-wrap">Community currencies create a stable medium of exchange tied to local development</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,14 +22,56 @@
|
|||
margin-left: 400px;
|
||||
margin-right: 400px;
|
||||
}
|
||||
.arrow-container{
|
||||
/*margin-left: -100px;*/
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
/*.img-center{*/
|
||||
/* margin: auto;*/
|
||||
/*}*/
|
||||
.center-this{
|
||||
text-align: center;
|
||||
}
|
||||
.arrow-container img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
.word-wrap{
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
border-top: solid 2px #e6e6e6;
|
||||
border-bottom: solid 2px #e6e6e6;
|
||||
max-width: 250px;
|
||||
max-height: 300px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.word-wrap2{
|
||||
/*margin-top: 10px;*/
|
||||
box-sizing: border-box;
|
||||
border-top: solid 2px #e6e6e6;
|
||||
border-bottom: solid 2px #e6e6e6;
|
||||
padding: 10px;
|
||||
max-width: 60%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
/*position: absolute;*/
|
||||
/*max-width: 300px;*/
|
||||
}
|
||||
|
||||
.last-content-box{
|
||||
display: inline-block;
|
||||
}
|
||||
.rotate-up{
|
||||
transform: rotate(250deg);
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: -60px;
|
||||
}
|
||||
.rotate-up-side{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.rotate-down-side{
|
||||
transform: rotate(120deg);
|
||||
overflow: hidden;
|
||||
/*margin-left: -30px;*/
|
||||
}
|
||||
.handmaid-img{
|
||||
padding-top: 20px;
|
||||
}
|
||||
@media only screen and (max-width: 480px){
|
||||
.text-img{
|
||||
|
|
@ -55,6 +97,19 @@
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: auto;
|
||||
}
|
||||
.img-extend{
|
||||
height: 300px;
|
||||
}
|
||||
.rotate-up-side{
|
||||
transform: rotate(200deg);
|
||||
}
|
||||
.rotate-down-side{
|
||||
transform: rotate(90deg);
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1024px){
|
||||
|
|
@ -81,4 +136,12 @@
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: auto;
|
||||
}
|
||||
.rotate-down-side{
|
||||
transform: rotate(100deg);
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -19,12 +19,85 @@
|
|||
}
|
||||
.many-imgs{
|
||||
padding-top: 100px;
|
||||
margin-left: 500px;
|
||||
margin-right: 500px;
|
||||
margin-left: 400px;
|
||||
margin-right: 400px;
|
||||
}
|
||||
.arrow-container{
|
||||
|
||||
/*.img-center{*/
|
||||
/* margin: auto;*/
|
||||
/*}*/
|
||||
.center-this{
|
||||
text-align: center;
|
||||
}
|
||||
.word-wrap{
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
border-top: solid 2px #e6e6e6;
|
||||
border-bottom: solid 2px #e6e6e6;
|
||||
max-width: 250px;
|
||||
max-height: 300px;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
|
||||
.word-wrap2{
|
||||
/*margin-top: 10px;*/
|
||||
box-sizing: border-box;
|
||||
border-top: solid 2px #e6e6e6;
|
||||
border-bottom: solid 2px #e6e6e6;
|
||||
padding: 10px;
|
||||
max-width: 60%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
|
||||
/*position: absolute;*/
|
||||
/*max-width: 300px;*/
|
||||
}
|
||||
|
||||
.last-content-box{
|
||||
display: inline-block;
|
||||
}
|
||||
/*.right-this{*/
|
||||
/* text-align: right;*/
|
||||
/*}*/
|
||||
/*.reduce-gap{*/
|
||||
/* display: inline;*/
|
||||
/*}*/
|
||||
/*.arrow-container{*/
|
||||
/* !*margin-left: -100px;*!*/
|
||||
/* !*display: flex;*!*/
|
||||
/* width: 200px;*/
|
||||
/* height: 120px;*/
|
||||
/*}*/
|
||||
/*.arrow-container img{*/
|
||||
/* width: 100%;*/
|
||||
/* height: auto;*/
|
||||
/*}*/
|
||||
.rotate-up{
|
||||
transform: rotate(250deg);
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: -60px;
|
||||
}
|
||||
.rotate-up-side{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.rotate-down-side{
|
||||
transform: rotate(120deg);
|
||||
overflow: hidden;
|
||||
/*margin-left: -30px;*/
|
||||
}
|
||||
/*.vertical-center{*/
|
||||
/* vertical-align: center;*/
|
||||
/*}*/
|
||||
.handmaid-img{
|
||||
padding-top: 20px;
|
||||
}
|
||||
/*.last-content-box{*/
|
||||
/* display: inline;*/
|
||||
/*}*/
|
||||
/*.bottom{*/
|
||||
/* align-self: flex-end;*/
|
||||
/*}*/
|
||||
@media only screen and (max-width: 480px){
|
||||
.text-img{
|
||||
font-size: 30px;
|
||||
|
|
@ -49,6 +122,12 @@
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: auto;
|
||||
}
|
||||
.img-extend{
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 1024px){
|
||||
|
|
@ -75,4 +154,7 @@
|
|||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.tree-img{
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue