Skip to content

Commit 7294872

Browse files
Tomasz-KluczkowskiTomasz-Kluczkowski
committed
Experiments with about layout.
1 parent 6371e7e commit 7294872

File tree

3 files changed

+115
-27
lines changed

3 files changed

+115
-27
lines changed

‎_pages/01_about.html‎

Lines changed: 56 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -31,35 +31,68 @@ <h2 class="about__page-subtitle">Our Goals, Our Story</h2>
3131

3232
<div class="about__container container-fluid">
3333
<div class="row">
34-
<div class="col-12">
35-
<h2 class="section-title">Python Sprints Decoded</h2>
36-
<h2 class="about__title">Why We Work Together?</h2>
37-
<p class="about__paragraph-dark">
38-
Python Sprints is a non for profit group of like minded programmers who care about making open source projects better.
39-
We all use them for free but often do not put any thought to how much effort it takes to create and maintain this software. Very often the amount of core developers working on a particular project can be counted on fingers of one hand and yet literally thousands of people use their work.
40-
We believe that we all should share our skills and earn our good karma.
41-
</p>
34+
<div class="about__who-container col-12 no-padding-x">
35+
<h2 class="about__section-title-left">Who We Are</h2>
36+
<div class="row">
37+
<div class="col-md-8 offset-md-2">
38+
<img class="about__paragraph-img-main" src="../static/images/services/advanced_lvl_840x560px.jpg" alt="Test image 1">
39+
<h2 class="about__paragraph-title">Python Sprints Decoded</h2>
40+
<hr class="about__divider-right">
41+
<p class="about__paragraph-dark">
42+
Python Sprints is a non for profit group of like minded programmers who care about making open source projects better.
43+
We believe in sharing our skills for free to earn our good karma. If you are devoted to a particular open source project, please let us know, we could make a sprint dedicated to it!
44+
Inclusion is in the nature of our group and we want to make sure that no one is underrepresented. All people are welcome.
45+
</p>
46+
</div>
47+
<div class="col-md-6">
48+
</div>
49+
</div>
4250
</div>
4351
</div>
4452
<div class="row">
45-
<div class="col-12">
46-
<h2 class="about__title">How It Started?</h2>
47-
<p class="about__paragraph-dark">
48-
Our group was founded in October 2017. As all things in life the beginnings were humble with only a handful of people collaborating but the word quickly spread and now we have above 500 members and counting.
49-
</p>
53+
<div class="col-md-12">
54+
<h2 class="about__section-title-right">Way To Go</h2>
55+
<h2 class="about__paragraph-title">Passion</h2>
56+
<h2 class="about__paragraph-title">Dedication</h2>
57+
<h2 class="about__paragraph-title">Sharing Knowledge</h2>
58+
5059
</div>
51-
</div>
52-
<div class="row">
53-
<div class="col-12">
54-
<h2 class="about__title">What Our Meetings Look Like?</h2>
55-
<p class="about__paragraph-dark">
56-
Usually there is a subject advertised well ahead of the time with clear setup instructions so that everyone can come prepared.
57-
But you should not worry if setting up is difficult - part of our creed is to help new people get introduced into the world of open source.
58-
Help will be provided even if it is just creating a git repository and learning how to contribute. It is all part of growing our group organically and all people are welcome!
59-
All the coding aside there is always time for joyful banter with pizza and beers to hand.
60-
</p>
60+
<div class="about__paragraph-img-container col-md-12">
61+
<img class="about__paragraph-img-top rounded" src="../static/images/services/advanced_lvl_840x560px.jpg" alt="Test image 1">
62+
<img class="about__paragraph-img-bot rounded" src="../static/images/services/advanced_lvl_840x560px.jpg" alt="Test image 1">
6163
</div>
6264
</div>
65+
66+
<!--<div class="row">-->
67+
<!--<div class="col-md-4">-->
68+
<!--<img class="img-fluid" src="../static/images/services/advanced_lvl_840x560px.jpg" alt="Test image 1">-->
69+
<!--</div>-->
70+
<!--<div class="col-md-4">-->
71+
<!--<img class="img-fluid" src="../static/images/services/advanced_lvl_840x560px.jpg" alt="Test image 1">-->
72+
<!--</div>-->
73+
<!--<div class="col-md-4">-->
74+
<!--<img class="img-fluid" src="../static/images/services/advanced_lvl_840x560px.jpg" alt="Test image 1">-->
75+
<!--</div>-->
76+
<!--</div>-->
77+
<!--<div class="row">-->
78+
<!--<div class="col-12">-->
79+
<!--<h2 class="about__title">How It Started?</h2>-->
80+
<!--<p class="about__paragraph-dark">-->
81+
<!--Our group was founded in October 2017. As all things in life the beginnings were humble with only a handful of people collaborating but the word quickly spread and now we have above 500 members and counting. Nowadays we meet at least once a month.-->
82+
<!--</p>-->
83+
<!--</div>-->
84+
<!--</div>-->
85+
<!--<div class="row">-->
86+
<!--<div class="col-12">-->
87+
<!--<h2 class="about__title">What Our Meetings Look Like?</h2>-->
88+
<!--<p class="about__paragraph-dark">-->
89+
<!--Usually there is a subject advertised well ahead of the time with clear setup instructions so that everyone can come prepared.-->
90+
<!--You should not worry though if setting up is difficult - part of our creed is to help new people get introduced into the world of open source.-->
91+
<!--Help will be provided even if it is just creating a git repository and learning how to contribute. It is all part of growing our group organically and all people are welcome!-->
92+
<!--All the coding aside there is always time for joyful banter with pizza and beers to hand.-->
93+
<!--</p>-->
94+
<!--</div>-->
95+
<!--</div>-->
6396
</div>
6497

6598

‎_sass/about.scss‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,71 @@
2626
}
2727

2828
.about__container {
29-
max-width: 80%;
29+
max-width: 70%;
3030
}
3131

32-
.about__title {
32+
.about__section-title-left {
33+
@extend .section-title;
34+
margin-top: 10%;
35+
margin-bottom: 10%;
36+
text-align: left;
37+
}
38+
39+
.about__section-title-right {
40+
@extend .about__section-title-left;
41+
text-align: right;
42+
}
43+
44+
.about__paragraph-title {
3345
@extend .title-dark;
34-
margin-top: 5%;
3546
font-size: 1.65em;
47+
text-align: right;
3648
}
3749

50+
.about__divider-right {
51+
margin-right: 0;
52+
width: 50%;
53+
}
54+
55+
3856
.about__paragraph-dark {
3957
@extend .paragraph-dark;
58+
text-align: justify;
59+
text-justify: inter-word;
4060
padding-left: 0;
4161
padding-right: 0;
62+
}
63+
64+
.about__paragraph-img-main {
65+
width: 35%;
66+
float: left;
67+
margin-right: 1em;
68+
margin-bottom: 0.5em;
69+
}
70+
71+
.about__paragraph-img-container {
72+
position: relative;
73+
padding-bottom: 50%;
74+
margin-top: 20%;
75+
}
76+
77+
78+
.about__paragraph-img-top {
79+
position: absolute;
80+
display: block;
81+
width: 40%;
82+
top: 0;
83+
right: 15%;
84+
border-bottom: $light-white 2px groove;
85+
border-left: $light-white 2px groove;
86+
}
87+
88+
.about__paragraph-img-bot {
89+
position: absolute;
90+
display: block;
91+
width: 40%;
92+
top: 40%;
93+
left: 15%;
94+
border-top: $light-white 2px groove;
95+
border-right: $light-white 2px groove;
4296
}

‎_sass/style.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -515,7 +515,8 @@ a {
515515
}
516516

517517
.services__content {
518-
@extend .paragraph-dark
518+
@extend .paragraph-dark;
519+
margin-top: 0;
519520
}
520521

521522
@media (min-width: 768px) {

0 commit comments

Comments
 (0)