Skip to content

Commit 8f1c351

Browse files
author
JT
committed
add clone graphic
1 parent 4660255 commit 8f1c351

3 files changed

Lines changed: 126 additions & 9 deletions

File tree

‎website/source/index.html.erb‎

Lines changed: 60 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@
3434
<div class="feature" id="feature-iterate">
3535
<div class="container">
3636
<div class="row">
37-
<div class="col-lg-6 col-md-6">
37+
<div class="col-lg-5 col-md-5">
3838
<div class="it-icon f-icon">
3939
<div class="t-block"></div>
4040
<div class="t-block t2"></div>
4141
<div class="t-block t3"></div>
4242
<div class="t-block t4"></div>
4343
</div>
4444
</div>
45-
<div class="col-lg-6 col-md-6">
45+
<div class="col-lg-7 col-md-7">
4646
<h2 class="feature-t">Iterate on infrastructure safely</h2>
4747
</div>
4848
</div>
@@ -52,15 +52,67 @@
5252
<div class="feature" id="feature-clone">
5353
<div class="container">
5454
<div class="row">
55-
<div class="col-lg-6 col-md-6">
55+
<div class="col-lg-5 col-md-5">
5656
<h2 class="feature-t">Clone complete environments easily</h2>
5757
</div>
58-
<div class="col-lg-6 col-md-6">
58+
<div class="col-md-push-1 col-lg-6 col-md-6">
5959
<div class="clone-icon f-icon">
60-
<div class="t-block"></div>
61-
<div class="t-block t2"></div>
62-
<div class="t-block t3"></div>
63-
<div class="t-block t4"></div>
60+
<div class="c-group clearfix">
61+
<div class="c-col c1">
62+
<div class="c-block"></div>
63+
<div class="c-block"></div>
64+
<div class="c-block"></div>
65+
<div class="c-block"></div>
66+
</div>
67+
<div class="c-col c2">
68+
<div class="c-block"></div>
69+
<div class="c-block"></div>
70+
<div class="c-block"></div>
71+
<div class="c-block"></div>
72+
</div>
73+
<div class="c-col c3">
74+
<div class="c-block"></div>
75+
<div class="c-block"></div>
76+
</div>
77+
</div>
78+
79+
<div class="c-group cg2">
80+
<div class="c-col c1">
81+
<div class="c-block"></div>
82+
<div class="c-block"></div>
83+
<div class="c-block"></div>
84+
<div class="c-block"></div>
85+
</div>
86+
<div class="c-col c2">
87+
<div class="c-block"></div>
88+
<div class="c-block"></div>
89+
<div class="c-block"></div>
90+
<div class="c-block"></div>
91+
</div>
92+
<div class="c-col c3">
93+
<div class="c-block"></div>
94+
<div class="c-block"></div>
95+
</div>
96+
</div>
97+
98+
<div class="c-group cg3 clearfix">
99+
<div class="c-col c1">
100+
<div class="c-block"></div>
101+
<div class="c-block"></div>
102+
<div class="c-block"></div>
103+
<div class="c-block"></div>
104+
</div>
105+
<div class="c-col c2">
106+
<div class="c-block"></div>
107+
<div class="c-block"></div>
108+
<div class="c-block"></div>
109+
<div class="c-block"></div>
110+
</div>
111+
<div class="c-col c3">
112+
<div class="c-block"></div>
113+
<div class="c-block"></div>
114+
</div>
115+
</div>
64116
</div>
65117
</div>
66118
</div>

‎website/source/stylesheets/_home.less‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,41 @@
110110

111111
h2{
112112
color: white;
113-
}
113+
}
114+
115+
.c-group{
116+
display: inline-block;
117+
margin-right: 20px;
118+
119+
&.cg2{
120+
opacity: .8;
121+
}
122+
123+
&.cg3{
124+
opacity: .6;
125+
}
126+
127+
.c-col{
128+
display: inline-block;
129+
float: left;
130+
131+
&.c1{
132+
padding-top: 16px;
133+
}
134+
135+
&.c3{
136+
padding-top: 55px;
137+
}
138+
139+
.c-block{
140+
background-color: white;
141+
width: 30px;
142+
height: 30px;
143+
.skewY(30deg);
144+
margin: 5px 5px 0 0;
145+
}
146+
}
147+
}
114148
}
115149

116150
#footer-wrap{

‎website/source/stylesheets/main.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -648,6 +648,37 @@ body.page-sub #header {
648648
#feature-clone h2 {
649649
color: white;
650650
}
651+
#feature-clone .c-group {
652+
display: inline-block;
653+
margin-right: 20px;
654+
}
655+
#feature-clone .c-group.cg2 {
656+
opacity: .8;
657+
}
658+
#feature-clone .c-group.cg3 {
659+
opacity: .6;
660+
}
661+
#feature-clone .c-group .c-col {
662+
display: inline-block;
663+
float: left;
664+
}
665+
#feature-clone .c-group .c-col.c1 {
666+
padding-top: 16px;
667+
}
668+
#feature-clone .c-group .c-col.c3 {
669+
padding-top: 55px;
670+
}
671+
#feature-clone .c-group .c-col .c-block {
672+
background-color: white;
673+
width: 30px;
674+
height: 30px;
675+
-webkit-transform: skewY(30deg);
676+
-moz-transform: skewY(30deg);
677+
-ms-transform: skewY(30deg);
678+
-o-transform: skewY(30deg);
679+
transform: skewY(30deg);
680+
margin: 5px 5px 0 0;
681+
}
651682
#footer-wrap {
652683
background-color: white;
653684
padding: 0 0 50px 0;

0 commit comments

Comments
 (0)