Extract "open source" feature column into its own section.

This commit is contained in:
Brock Whittaker 2017-08-08 11:14:55 -07:00 committed by Tim Abbott
parent c043d31074
commit eec26c5da6
2 changed files with 73 additions and 36 deletions

View File

@ -833,26 +833,28 @@ nav ul li.active::after {
font-weight: normal;
}
.portico-landing.hello .col-2 {
width: 60%;
.portico-landing.hello .col-3-5,
.portico-landing.hello .col-2,
.portico-landing.hello .col-4 {
margin-right: -4px;
display: inline-block;
vertical-align: top;
}
.portico-landing.hello .col-3-5 {
width: 60%;
}
.portico-landing.hello .col-2 {
width: 49.9%;
}
.portico-landing.hello .col-3 {
width: 33.3%;
margin-right: -4px;
display: inline-block;
vertical-align: top;
}
.portico-landing.hello .col-4 {
width: 20%;
margin-right: -4px;
display: inline-block;
vertical-align: top;
}
/* -- compare css -- */
@ -1165,29 +1167,61 @@ nav ul li.active::after {
background-color: #fff;
}
.portico-landing.hello .features .col-3 {
.portico-landing.hello .features .col-2 {
text-align: center;
position: relative;
z-index: 1;
}
.portico-landing.hello .features .col-3 img {
.portico-landing.hello .features .col-2 img {
margin-bottom: 20px;
width: 100%;
max-width: 300px;
}
.portico-landing.hello .features .col-3 .il-block {
.portico-landing.hello .features .col-2 .il-block {
display: inline-block;
width: 75%;
text-align: left;
}
.portico-landing.hello .features .col-3 h2 {
.portico-landing.hello .features .col-2 h2 {
font-weight: normal;
}
.portico-landing.hello .open-source {
text-align: center;
position: relative;
z-index: 1;
background-color: #262d3a;
color: hsl(220, 15%, 76%);
}
.portico-landing.hello .open-source img {
margin: 20px 2%;
width: 28%;
max-width: 500px;
}
.portico-landing.hello .open-source .il-block {
display: inline-block;
vertical-align: top;
width: 50%;
max-width: 700px;
text-align: left;
}
.portico-landing.hello .open-source h2 {
font-weight: normal;
}
.portico-landing.hello .open-source img {
display: inline-block;
}
.portico-landing.hello .testimonials {
color: hsl(220, 15%, 76%);
background-color: hsl(219, 21%, 19%);
@ -2506,7 +2540,7 @@ nav ul li.active::after {
padding: 43px 73px;
}
.portico-landing.hello .features .col-3 {
.portico-landing.hello .features .col-2 {
width: 100%;
}

View File

@ -251,7 +251,7 @@
</header>
<div class="content">
<div class="col-3">
<div class="col-2">
<img src="/static/images/landing-page/organised.png" alt=""/>
<div class="il-block">
<h2>Organized</h2>
@ -269,7 +269,7 @@
</p>
</div>
</div>
<div class="col-3">
<div class="col-2">
<img src="/static/images/landing-page/featured.png" alt=""/>
<div class="il-block">
<h2>Fully Featured</h2>
@ -287,26 +287,6 @@
</p>
</div>
</div>
<div class="col-3">
<img src="/static/images/landing-page/opensource.png" alt=""/>
<div class="il-block">
<h2>Open Source</h2>
<p>
Zulip is 100% open source software, built by a
vibrant community of hundreds of developers
from all around the world. With 90,000 words
of developer documentation, a high quality
code base, and a welcoming community, its easy
to extend or tweak Zulip.
</p>
<p>
Zulip has a significantly larger and more
active development community than other modern
open source group chat solutions like
Mattermost, Rocket.Chat, and matrix.org.
</p>
</div>
</div>
</div>
</div>
@ -491,6 +471,29 @@
</div>
</div>
<div class="open-source">
<div class="flex">
<img src="/static/images/landing-page/opensource.png" alt=""/>
<div class="il-block">
<h2>Open Source</h2>
<p>
Zulip is 100% open source software, built by a
vibrant community of hundreds of developers from
all around the world. With 100,000 words of
developer documentation, a high quality code base,
and a welcoming community, its easy to extend or
tweak Zulip.
</p>
<p>
Zulip has a significantly larger and more
active development community than other modern
open source group chat solutions like
Mattermost, Rocket.Chat, and matrix.org.
</p>
</div>
</div>
</div>
<div class="integrations">
<div class="content">
<header>