Skip to content

Commit ea24629

Browse files
marktheunissenmarktheunissen
committed
Adding screencast
1 parent 35f9150 commit ea24629

File tree

3 files changed

+91
-30
lines changed

3 files changed

+91
-30
lines changed

‎_sass/main.scss

+55-30
Original file line numberDiff line numberDiff line change
@@ -25,31 +25,31 @@
2525
text-align: center;
2626
padding-top: 50px;
2727
padding-bottom: none;
28-
@include respond-to(iphone) {
29-
padding-bottom: 50px;
28+
@include respond-to(iphone) {
29+
padding-bottom: 50px;
3030
}
3131
h1 {
3232
font-family: $bebas;
3333
font-size: 80px;
3434
margin-bottom: .2em;
3535
padding-top: .6em;
3636
color: $yellow;
37-
line-height: .9em;
37+
line-height: .9em;
3838
}
3939
h3 {
4040
font-weight: 600;
4141
font-size: 26px;
4242
color: $lightGray;
43-
line-height: 1.2em;
43+
line-height: 1.2em;
4444
}
4545
}
4646
.notify {
4747
text-align: center;
4848
padding-bottom: 2em;
4949
padding-top: 2em;
50-
@include respond-to(iphone) {
51-
padding-bottom: 4em;
52-
padding-top: 4em;
50+
@include respond-to(iphone) {
51+
padding-bottom: 4em;
52+
padding-top: 4em;
5353
}
5454
color: $lightGray;
5555
background-color: rgba(0, 0, 0, 0.5);
@@ -64,14 +64,39 @@
6464
p {
6565
padding-left: 1em;
6666
padding-right: 1em;
67-
}
67+
}
68+
}
69+
70+
.screencast {
71+
text-align: center;
72+
padding-bottom: 2em;
73+
padding-top: 2em;
74+
@include respond-to(iphone) {
75+
padding-bottom: 4em;
76+
padding-top: 4em;
77+
}
78+
color: $lightGray;
79+
max-width: 50em;
80+
margin: 0 auto;
81+
iframe {
82+
border: none;
83+
width: 300px;
84+
height: 330px;
85+
86+
@include respond-to(iphone) {
87+
border: 15px solid rgba(0, 0, 0, 0.5);
88+
width: 600px;
89+
height: 645px;
90+
}
91+
}
92+
@include border-radius(5px);
6893
}
6994
}
7095
.features {
7196
padding-top: 1em;
7297
padding-bottom: 4em;
7398
background: $lightGray;
74-
@include respond-to(ipad) {
99+
@include respond-to(ipad) {
75100
padding-top: 4em;
76101
}
77102
h2 {
@@ -81,32 +106,32 @@
81106
}
82107
.description-left {
83108
@include span-columns(12);
84-
@include respond-to(ipad) {
109+
@include respond-to(ipad) {
85110
@include span-columns(5);
86111
@include respond-to (desktop) {
87112
@include span-columns(4);
88-
@include respond-to(widescreen) {
89-
@include span-columns(6);
90-
}
113+
@include respond-to(widescreen) {
114+
@include span-columns(6);
115+
}
91116
}
92117
}
93118
margin-top: 2em;
94119
}
95120
.description-right {
96121
@include span-columns(12);
97122
margin-bottom: 2em;
98-
@include respond-to(ipad) {
123+
@include respond-to(ipad) {
99124
@include span-columns(5);
100125
margin-top: 4em;
101126
float: right;
102127
@include respond-to (desktop) {
103128
@include span-columns(4);
104129
float: right;
105-
@include respond-to(widescreen) {
106-
@include span-columns(6);
130+
@include respond-to(widescreen) {
131+
@include span-columns(6);
107132
margin-top: 4em;
108133
float: right;
109-
}
134+
}
110135
}
111136
}
112137
margin-top: 2em;
@@ -116,16 +141,16 @@
116141
@include span-columns(12 omega, 12);
117142
@include respond-to (iphone) {
118143
@include span-columns(9 omega, 12);
119-
@include respond-to(ipad) {
144+
@include respond-to(ipad) {
120145
float: right;
121146
height: auto;
122147
width: 50%;
123-
@include respond-to(widescreen) {
148+
@include respond-to(widescreen) {
124149
float: right;
125150
height: auto;
126-
width: auto;
151+
width: auto;
127152
}
128-
}
153+
}
129154
}
130155
}
131156
#cloud {
@@ -140,13 +165,13 @@
140165
margin-right: .5em;
141166
margin-bottom: 4em;
142167
margin-top: 3em;
143-
@include respond-to(widescreen) {
168+
@include respond-to(widescreen) {
144169
float: left;
145170
height: auto;
146171
width: auto;
147172
margin-right: .5em;
148-
margin-bottom: 4em;
149-
}
173+
margin-bottom: 4em;
174+
}
150175
}
151176
}
152177
}
@@ -158,9 +183,9 @@
158183
padding-top: 3em;
159184
.step-one, .step-two, .step-three {
160185
@include span-columns(12);
161-
@include respond-to(ipad) {
186+
@include respond-to(ipad) {
162187
@include span-columns(3.5);
163-
margin-right: 0;
188+
margin-right: 0;
164189
}
165190
color: $lightGray;
166191
.step-one-circle, .step-two-circle, .step-three-circle {
@@ -183,11 +208,11 @@
183208
}
184209
}
185210
.step-one, .step-two {
186-
margin-right: 1.5em;
211+
margin-right: 1.5em;
187212
}
188213
.step-three, .step-two {
189214
padding-left: 0;
190-
@include respond-to(ipad) {
215+
@include respond-to(ipad) {
191216
padding-left: 1.5em;
192217
}
193218
}
@@ -210,13 +235,13 @@
210235
span {
211236
@include span-columns(12);
212237
margin-top: 2em;
213-
@include respond-to(ipad) {
238+
@include respond-to(ipad) {
214239
@include span-columns(7 omega, 12);
215240
margin-top: 2em;
216241
}
217242
a {
218243
font-size: 18px;
219-
font-weight: 700;
244+
font-weight: 700;
220245
color: $blackGray;
221246
}
222247
}

‎css/main.css

+31
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,37 @@ button:active, button.active {
340340
padding-left: 1em;
341341
padding-right: 1em;
342342
}
343+
.header .screencast {
344+
text-align: center;
345+
padding-bottom: 2em;
346+
padding-top: 2em;
347+
color: #f2f2f2;
348+
max-width: 50em;
349+
margin: 0 auto;
350+
-webkit-border-radius: 5px;
351+
-moz-border-radius: 5px;
352+
-ms-border-radius: 5px;
353+
-o-border-radius: 5px;
354+
border-radius: 5px;
355+
}
356+
@media only screen and (min-width: 480px) {
357+
.header .screencast {
358+
padding-bottom: 4em;
359+
padding-top: 4em;
360+
}
361+
}
362+
.header .screencast iframe {
363+
border: none;
364+
width: 300px;
365+
height: 330px;
366+
}
367+
@media only screen and (min-width: 480px) {
368+
.header .screencast iframe {
369+
border: 15px solid rgba(0, 0, 0, 0.5);
370+
width: 600px;
371+
height: 645px;
372+
}
373+
}
343374

344375
.features {
345376
padding-top: 1em;

‎index.html

+5
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ <h3>Training environments made easy</h3>
2222

2323
<!--End mc_embed_signup-->
2424
</div>
25+
26+
<div class="screencast">
27+
<h2>Screencast</h2>
28+
<iframe src="http://player.vimeo.com/video/70075762" width="600" height="645" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
29+
</div>
2530
</div>
2631
</div>
2732
<div class="features">

0 commit comments

Comments
 (0)