8000 Tweak layout and styles · python/pythonineducation.org@5c67cf6 · GitHub
[go: up one dir, main page]
Skip to content

Commit 5c67cf6

Browse files
hawkzhawkz
committed
Tweak layout and styles
1 parent bb55bd2 commit 5c67cf6

File tree

5 files changed

+707
-315
lines changed

5 files changed

+707
-315
lines changed

‎content/test.html

Lines changed: 132 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -4,52 +4,56 @@
44
title: Python in Education
55
---
66
<div class="about-block">
7-
<div class="container-fluid">
8-
<div class="row">
9-
<div class="col-md-4 col">
10-
<div class="image-holder">
11-
<img src="images/img1.png" alt="image">
7+
<div class="wrap">
8+
<div class="container-fluid">
9+
<div class="row">
10+
<div class="col-md-4 col">
11+
<div class="image-holder">
12+
<img src="images/img1.png" alt="image">
13+
</div>
14+
<h2>learn</h2>
15+
<p>Lorem ipsum dolor sit amet, sit oporteat atomorum te, qui ad enim etiam congue. Cu homero propriae mea, ne vel invidunt phaedrum efficiendi. </p>
16+
<a href="#" class="more"><span>get_started</span></a>
1217
</div>
13-
<h2>learn</h2>
14-
<p>Lorem ipsum dolor sit amet, sit oporteat atomorum te, qui ad enim etiam congue. Cu homero propriae mea, ne vel invidunt phaedrum efficiendi. </p>
15-
<a href="#" class="more">get_started</a>
16-
</div>
17-
<div class="col-md-4 col">
18-
<div class="image-holder">
19-
<img src="images/img2.png" alt="image">
18+
<div class="col-md-4 col">
19+
<div class="image-holder">
20+
<img src="images/img2.png" alt="image">
21+
</div>
22+
<h2>teach</h2>
23+
<p>Lorem ipsum dolor sit amet, sit oporteat atomorum te, qui ad enim etiam congue. Cu homero propriae mea, ne vel </p>
24+
<a href="#" class="more"><span>fun resources</span></a>
2025
</div>
21-
<h2>teach</h2>
22-
<p>Lorem ipsum dolor sit amet, sit oporteat atomorum te, qui ad enim etiam congue. Cu homero propriae mea, ne vel </p>
23-
<a href="#" class="more">fun resources</a>
24-
</div>
25-
<div class="col-md-4 col">
26-
<div class="image-holder">
27-
<img src="images/img3.png" alt="image">
26+
<div class="col-md-4 col">
27+
<div class="image-holder">
28+
<img src="images/img3.png" alt="image">
29+
</div>
30+
<h2>build</h2>
31+
<p>Lorem ipsum dolor sit amet, sit oporteat atomorum te, qui ad enim etiam congue. Cu homero propriae mea, ne vel invidunt phaedrum efficiendi. Enim iudicabit cu eam, </p>
32+
<a href="#" class="more"><span>lets go!</span></a>
2833
</div>
29-
<h2>build</h2>
30-
<p>Lorem ipsum dolor sit amet, sit oporteat atomorum te, qui ad enim etiam congue. Cu homero propriae mea, ne vel invidunt phaedrum efficiendi. Enim iudicabit cu eam, </p>
31-
<a href="#" class="more">lets go!</a>
3234
</div>
35+
<span class="sticker"></span>
3336
</div>
34-
<span class="sticker"></span>
3537
</div>
3638
</div>
3739
<div class="illustration-block">
3840
<img src="images/img-visual.jpg" alt="image description" width="1440" height="942">
3941
</div>
4042
<section class="text-section">
41-
<div class="container-fluid">
42-
<div class="row">
43-
<div class="col-md-4 visual text-center">
44-
<img src="images/img4.png" alt="image description" width="187" height="186">
45-
</div>
46-
<div class="col-md-8 description">
47-
<h2>python is a programming language.</h2>
48-
<p>It's used all over the world by all sorts of people from professional coders to complete beginners. It's very easy to learn. Use Python to code cool stuff on your micro:bit or other computer.</p>
43+
<div class="wrap">
44+
<div class="container-fluid">
45+
<div class="row">
46+
<div class="col-md-4 visual text-center">
47+
<img src="images/img4.png" alt="image description" width="187" height="186">
48+
</div>
49+
<div class="col-md-8 description">
50+
<h2>python is a programming language.</h2>
51+
<p>It's used all over the world by all sorts of people from professional coders to complete beginners. It's very easy to learn. Use Python to code cool stuff on your micro:bit or other computer.</p>
52+
</div>
4953
</div>
54+
<span class="sticker"></span>
55+
<span class="sticker sticker-top"></span>
5056
</div>
51-
<span class="sticker"></span>
52-
<span class="sticker sticker-top"></span>
5357
</div>
5458
</section>
5559
<section class="title-section" style="background: url(images/img5.png) no-repeat 100% 100%;">
@@ -62,51 +66,56 @@ <h1>learning <span>is play</span></h1>
6266
</div>
6367
</section>
6468
<section class="info-section">
65-
<div class="container-fluid">
66-
<span class="sticker sticker1"></span>
67-
<h1> learn</h1>
68-
<div class="row">
69-
<div class="article">
70-
<div class="col-md-4 visual text-center">
71-
<img src="images/img6.png" alt="image description">
72-
</div>
73-
<div class="col-md-8">
74-
<div class="description">
75-
<h2>tutorials</h2>
76-
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
77-
<a href="#" class="more">this is a link</a>
69+
<div class="wrap">
70+
<div class="container-fluid">
71+
<span class="sticker sticker1"></span>
72+
<h1> learn</h1>
73+
<div class="row">
74+
<!-- product item -->
75+
<div class="article">
76+
<div class="col-md-4 visual text-center">
77+
<img src="images/img6.png" alt="image description">
7878
</div>
79-
</div>
80-
</div>
81-
<div class="article">
82-
<div class="col-md-4 visual text-center">
83-
<img src="images/img7.png" alt="image description">
84-
</div>
85-
<div class="col-md-8">
86-
<div class="description">
87-
<h2>micro:bit</h2>
88-
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
89-
<a href="#" class="more">code the future with micro:bit</a>
79+
<div class="col-md-8">
80+
<div class="description">
81+
<h2>tutorials</h2>
82+
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
83+
<a href="#" class="more"><span>this is a link</span></a>
84+
</div>
9085
</div>
9186
</div>
92-
</div>
93-
<div class="article">
94-
<div class="col-md-4 visual text-center">
95-
<img src="images/img8.png" alt="image description">
87+
<!-- product item -->
88+
<div class="article">
89+
<div class="col-md-4 visual text-center">
90+
<img src="images/img7.png" alt="image description">
91+
</div>
92+
<div class="col-md-8">
93+
<div class="description">
94+
<h2>micro:bit</h2>
95+
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
96+
<a href="#" class="more"><span>code the future with micro:bit</span></a>
97+
</div>
98+
</div>
9699
</div>
97-
<div class="col-md-8">
98-
<div class="description">
99-
<h2>raspberry pi</h2>
100-
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
101-
<a href="#" class="more">this is a link</a>
100+
<!-- product item -->
101+
<div class="article">
102+
<div class="col-md-4 visual text-center">
103+
<img src="images/img8.png" alt="image description">
104+
</div>
105+
<div class="col-md-8">
106+
<div class="description">
107+
<h2>raspberry pi</h2>
108+
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
109+
<a href="#" class="more"><span>this is a link</span></a>
110+
</div>
102111
</div>
103112
</div>
104113
</div>
114+
<span class="sticker"></span>
105115
</div>
106-
<span class="sticker"></span>
107116
</div>
108117
</section>
109-
<section class="title-section" style="background: url(images/img9.png) no-repeat 85% 50%;">
118+
<section class="title-section center" style="background: url(images/img9.png) no-repeat 85% 50%;">
110119
<div class="container-fluid">
111120
<div class="row">
112121
<div class="col-xs-6 col-lg-7 heading-col separator2">
@@ -116,31 +125,35 @@ <h1>play is <span>creativity</span></h1>
116125
</div>
117126
</section>
118127
<section class="info-section">
119-
<div class="container-fluid">
120-
<span class="sticker sticker2"></span>
121-
<h1> teach</h1>
122-
<div class="row">
123-
<div class="article">
124-
<div class="col-md-4 visual text-center">
125-
<img src="images/img10.png" alt="image description">
126-
</div>
127-
<div class="col-md-8">
128-
<div class="description">
129-
<h2>resources</h2>
130-
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
131-
<a href="#" class="more">this is a link</a>
128+
<div class="wrap">
129+
<div class="container-fluid">
130+
<span class="sticker sticker2"></span>
131+
<h1> teach</h1>
132+
<div class="row">
133+
<!-- product item -->
134+
<div class="article">
135+
<div class="col-md-4 visual text-center">
136+
<img src="images/img10.png" alt="image description">
137+
</div>
138+
<div class="col-md-8">
139+
<div class="description">
140+
<h2>resources</h2>
141+
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
142+
<a href="#" class="more"><span>this is a link</span></a>
143+
</div>
132144
</div>
133145
</div>
134-
</div>
135-
<div class="article">
136-
<div class="col-md-4 visual text-center">
137-
<img src="images/img11.png" alt="image description">
138-
</div>
139-
<div class="col-md-8">
140-
<div class="description">
141-
<h2>community</h2>
142-
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
143-
<a href="#" class="more">this is a link</a>
146+
<!-- product item -->
147+
<div class="article">
148+
<div class="col-md-4 visual text-center">
149+
<img src="images/img11.png" alt="image description">
150+
</div>
151+
<div class="col-md-8">
152+
<div class="description">
153+
<h2>community</h2>
154+
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
155+
<a href="#" class="more"><span>this is a link</span></a>
156+
</div>
144157
</div>
145158
</div>
146159
</div>
@@ -157,39 +170,44 @@ <h1>creativity is <span>exploration</span></h1>
157170
</div>
158171
</section>
159172
<section class="info-section">
160-
<div class="container-fluid">
161-
<h1> build</h1>
162-
<div class="row">
163-
<div class="article">
164-
<div class="col-md-4 visual text-center">
165-
<img src="images/img7.png" alt="image description">
166-
</div>
167-
<div class="col-md-8">
168-
<div class="description">
169-
<h2>documentation</h2>
170-
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
171-
<a href="#" class="more">this is a link</a>
173+
<div class="wrap">
174+
<div class="container-fluid">
175+
<h1> build</h1>
176+
<div class="row">
177+
<!-- product item -->
178+
<div class="article">
179+
<div class="col-md-4 visual text-center">
180+
<img src="images/img7.png" alt="image description">
181+
</div>
182+
<div class="col-md-8">
183+
<div class="description">
184+
<h2>documentation</h2>
185+
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
186+
<a href="#" class="more"><span>this is a link</span></a>
187+
</div>
172188
</div>
173189
</div>
174-
</div>
175-
<div class="article">
176-
<div class="col-md-4 visual text-center">
177-
<img src="images/img8.png" alt="image description">
178-
</div>
179-
<div class="col-md-8">
180-
<div class="description">
181-
<h2>source code</h2>
182-
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
183-
<a href="#" class="more">this is a link</a>
190+
<!-- product item -->
191+
<div class="article">
192+
<div class="col-md-4 visual text-center">
193+
<img src="images/img8.png" alt="image description">
194+
</div>
195+
<div class="col-md-8">
196+
<div class="description">
197+
<h2>source code</h2>
198+
<p>Eum ei nisl idque offendit, oratio oporteat has ea, ius habeo vivendo ea. Nec erat audiam complectitur id. Viderer nominati maluisset vim in, cum in labores sensibus, eu purto dicit sed. Cu nec graeci accommodare. His duis doming urbanitas an, impetus gubergren ut mel. Eius dignissim theophrastus pri an, cu petentium consequat eum.</p>
199+
<a href="#" class="more"><span>this is a link</span></a>
200+
</div>
184201
</div>
185202
</div>
186203
</div>
204+
<span class="sticker sticker3"></span>
187205
</div>
188-
<span class="sticker sticker3"></span>
189206
</div>
190207
</section>
191208
<section class="title-section" style="background: url(images/img13.png) no-repeat 89% 100%;">
192209
<div class="container-fluid">
210+
<span class="sticker sticker-bottom"></span>
193211
<div class="row">
194212
<div class="col-xs-6 col-lg-7 heading-col separator4">
195213
<h1>explore with <span>python</span></h1>

0 commit comments

Comments
 (0)
0