You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@wayang.apache.org by be...@apache.org on 2021/02/22 05:26:02 UTC
[incubator-wayang-website] 23/37: home page add the features
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 <be...@scalytics.io>
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