Styling images on frontpage a bit

This commit is contained in:
Víðir Valberg Guðmundsson 2016-07-28 12:44:26 +02:00
parent f387c0a394
commit 0bc64a7d6d
2 changed files with 81 additions and 42 deletions

View file

@ -113,3 +113,9 @@ footer {
.nav li a { .nav li a {
padding: 30px 7px; padding: 30px 7px;
} }
.text-container {
display: flex;
align-items: center;
height: 200px;
}

View file

@ -7,41 +7,65 @@
<div class="col-md-12"> <div class="col-md-12">
<img src="{% static 'img/logo.png' %}" class="img-responsive" <img src="{% static 'img/logo.png' %}" class="img-responsive"
id="front-logo" /> id="front-logo" />
<p class="lead">
<strong>Bornhack</strong> is a 7 day outdoor tent camping festival where
hackers, makers and people with an interest in technology and security
come together to celebrate technology, socialise, learn and <strong>have fun</strong>.
</p>
<p> <br />
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/inconvenience.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/inconvenience_tn.jpg" alt="Sorry for the inconvenience"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking_tn.jpg" alt="Hacking"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/1440021030983232.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/1440021030983232_tn.jpg" alt="Tents at CCCamp2015"></a>
</p>
<p class="lead"> <div class="row">
It takes place for the first time from <strong>August 27 to September 3rd <div class="col-md-8 text-container">
2016</strong> on the Danish island of <strong>Bornholm</strong> where we <div class="lead">
have found the geography and backbone to make it happen. <strong>Bornhack</strong> is a 7 day outdoor tent camping festival
</p> people with an interest in technology and security
come together to celebrate technology, socialise, learn and <strong>have fun</strong>.
</div>
</div>
<div class="col-md-4">
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/1440021030983232.jpg">
<img class="img-thumbnail"
src="https://people.bornhack.org/tyk/ohm_cccamp_pics/1440021030983232_tn.jpg"
alt="Tents at CCCamp2015">
</a>
</div>
</div>
<p> <br />
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/camp_villages.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/camp_villages_tn.jpg" alt="Hacking tent at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ccc2-5e6cdc7575a1ef63.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ccc2-5e6cdc7575a1ef63_tn.jpg" alt="Tents at CCCamp2015"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/datenklo.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/datenklo_tn.jpg" alt="Datenklo at CCCamp2015"></a>
</p>
<p class="lead"> <div class="row">
Bornhack is a <strong>participatory</strong> event where we expect people <div class="col-md-4">
to come up with ideas and projects, and help make the content. We will reach out to <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking.jpg">
people to ensure interesting, high quality talks and workshops. <img class="img-thumbnail"
</p> src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking_tn.jpg"
alt="Hacking">
</a>
</div>
<div class="col-md-8 text-container">
<div class="lead">
It takes place for the first time from <strong>August 27 to September 3rd
2016</strong> on the Danish island of <strong>Bornholm</strong> where we
have found the geography and backbone to make it happen.
</div>
</div>
</div>
<p> <br />
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/0021652.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/0021652_tn.jpg" alt="Campsite at nighttime"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/MgpF-OHM2013-2005.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/MgpF-OHM2013-2005_tn.jpg" alt="Noisy Square at OHM2013"></a> <div class="row">
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/OHM2013_big_tux.png"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/OHM2013_big_tux_tn.jpg" alt="Big Tux at OHM2013"></a> <div class="col-md-8 text-container">
</p> <p class="lead">
Bornhack is a <strong>participatory</strong> event where we expect people
to come up with ideas and projects, and help make the content. We will reach out to
people to ensure interesting, high quality talks and workshops.
</p>
</div>
<div class="col-md-4">
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/0021652.jpg">
<img class="img-thumbnail"
src="https://people.bornhack.org/tyk/ohm_cccamp_pics/0021652_tn.jpg"
alt="Campsite at nighttime">
</a>
</div>
</div>
<br />
<p class="lead"> <p class="lead">
You are very welcome to ask questions and show your interest on our different channels: You are very welcome to ask questions and show your interest on our different channels:
@ -61,18 +85,27 @@
The Bornhack Team The Bornhack Team
</p> </p>
</div> </div>
<p>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/dome.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/dome_tn.jpg" alt="Dome at CCCamp2015"></a> <p>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/hacking-hard-drive-controllers.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/hacking-hard-drive-controllers_tn.jpg" alt="Hacking harddrive controllers"></a> <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/inconvenience.jpg">
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/img_20150816_184130-sarah-crop.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/img_20150816_184130-sarah-crop_tn.jpg" alt="Hacking in progress at CCCamp2015"></a> <img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/inconvenience_tn.jpg"
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/maxresdefault.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/maxresdefault_tn.jpg" alt="Lights at CCCamp2015"></a> alt="Sorry for the inconvenience">
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking_tn.jpg" alt="Hacking sign at OHM2013"></a> </a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-15.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-15_tn.jpg" alt="Illuminated road at night at OHM2013"></a> <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/MgpF-OHM2013-2005.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/MgpF-OHM2013-2005_tn.jpg" alt="Noisy Square at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-3-hOHM-sweet-hOHM.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-3-hOHM-sweet-hOHM_tn.jpg" alt="Tent at OHM2013"></a> <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/OHM2013_big_tux.png"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/OHM2013_big_tux_tn.jpg" alt="Big Tux at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013_partfusion_projects.png"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013_partfusion_projects_tn.jpg" alt="Hardware at OHM2013"></a> <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/camp_villages.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/camp_villages_tn.jpg" alt="Hacking tent at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/wide__820x461.png"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/wide__820x461_tn.jpg" alt="CCCamp2015 at night"></a> <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ccc2-5e6cdc7575a1ef63.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ccc2-5e6cdc7575a1ef63_tn.jpg" alt="Tents at CCCamp2015"></a>
</p> <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/datenklo.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/datenklo_tn.jpg" alt="Datenklo at CCCamp2015"></a>
</div> <a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/dome.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/dome_tn.jpg" alt="Dome at CCCamp2015"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/hacking-hard-drive-controllers.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/hacking-hard-drive-controllers_tn.jpg" alt="Hacking harddrive controllers"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/img_20150816_184130-sarah-crop.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/img_20150816_184130-sarah-crop_tn.jpg" alt="Hacking in progress at CCCamp2015"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/maxresdefault.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/maxresdefault_tn.jpg" alt="Lights at CCCamp2015"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-0a-hacking_tn.jpg" alt="Hacking sign at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-15.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-15_tn.jpg" alt="Illuminated road at night at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-3-hOHM-sweet-hOHM.jpg"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013-3-hOHM-sweet-hOHM_tn.jpg" alt="Tent at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013_partfusion_projects.png"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/ohm2013_partfusion_projects_tn.jpg" alt="Hardware at OHM2013"></a>
<a href="https://people.bornhack.org/tyk/ohm_cccamp_pics/wide__820x461.png"><img class="img-thumbnail" src="https://people.bornhack.org/tyk/ohm_cccamp_pics/wide__820x461_tn.jpg" alt="CCCamp2015 at night"></a>
</p>
</div> </div>