This is an automated email from the ASF dual-hosted git repository. bertty pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/incubator-wayang-website.git
commit 53fc6c0af755777adca1e1b21331a257a1609d0e Author: Bertty Contreras-Rojas <[email protected]> AuthorDate: Mon Feb 15 01:23:18 2021 -0300 home page add the features --- _layouts/home.html | 61 +++++++++++++++++++++++++++++++++++------------------ assets/css/home.css | 35 ++++++++++++++++++++++++++++++ 2 files changed, 76 insertions(+), 20 deletions(-) diff --git a/_layouts/home.html b/_layouts/home.html index 3ade523..88ab611 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -3,10 +3,10 @@ layout: default --- <section id="full-screen-2" class="container-fluid p-0"> <div class="row h-100 p-5"> - <div class="col-6 h-100"> + <div class="col-md-6 h-100"> </div> - <div class="col-6 h-100 p-5" > + <div class="col-md-6 h-100 p-5" > <div class="row h-50"> <div class="col h-100 d-flex align-content-end flex-wrap" > <h1 class="p-2 display-4 tx-shadow"> @@ -15,7 +15,7 @@ layout: default </div> </div> <div class="row h-50"> - <div class="col h-100 tx-shadow p-5"> + <div class="col h-100 tx-shadow pr-5"> <p class="lead"> <strong> {{ page.section-1.text }} @@ -41,26 +41,47 @@ layout: default </div> </section> <section id="full-screen" class="container-fluid p-0"> - <div class="row h-100 p-5"> - <div class="col-6 h-100"> - + <div class="container"> + <div class="row d-flex justify-content-center tx-shadow"> + <p class="display-4 p-2"> + {{ page.section-3.title }} + </p> </div> - <div class="col-6 h-100 p-5" > - <div class="row h-50"> - <div class="col h-100 d-flex align-content-end flex-wrap" > - <h1 class="p-2 display-4 tx-shadow"> - {{ page.section-1.title }} - </h1> + <div class="row d-flex justify-content-center tx-shadow"> + <p class="lead p-2"> + <strong> + {{ page.section-3.text }} + </strong> + </p> + </div> + </div> + +{% assign col = 1 %} + <div class="row container-circle mb-3"> + <div class="container"> + <div class="row"> +{% for item in site.data.features %} + <div class="col-md-4" style="text-align: center"> + <div class="circle"> + <i class="{{item.icon}} fa-8x"></i> + <h4>{{item.title}}</h4> + <div class="hide"> + {{item.description-short}} + </div> + </div> </div> + {% if col == 3 %} </div> - <div class="row h-50"> - <div class="col h-100 tx-shadow p-5"> - <p class="lead"> - <strong> - {{ page.section-1.text }} - </strong> - </p> - </div> + </div> + </div> + <div class="row container-circle mb-3"> + <div class="container"> + <div class="row"> + {% assign col = 0 %} + {% else %} + {% assign col = col | plus: 1 %} + {% endif %} +{% endfor %} </div> </div> </div> diff --git a/assets/css/home.css b/assets/css/home.css index e5ccc4a..a48285c 100644 --- a/assets/css/home.css +++ b/assets/css/home.css @@ -104,4 +104,39 @@ p { } .tx-shadow .lead { font-size: 1.7em; +} + +.container-circle { + min-height: 25em; +} + +.circle { + height: 15em; + width: 15em; + background-color: #bbb; + border-radius: 100%; + display: inline-block; + text-align: center; + padding-top: 3em; + background: rgb(255,255,255); + background: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 92%, rgba(255,255,255,0) 100%); } + +.hide { + display: none; + width: 100%; + padding-inline: 0.5em; + padding-top: -0.2em; + font-size: 1.4em; +} + +.circle:hover { + height: 25em; + transition: height 0.25s ease-in, border-radius 0.5s; + -webkit-transition: height 0.25s ease-in, border-radius 0.5s; + border-bottom-left-radius: 0% ; + border-bottom-right-radius: 0% ; +} + +.circle:hover > .hide { + display: block; } \ No newline at end of file
