...
 
Commits (2)
......@@ -406,10 +406,6 @@ h2.animated_title{
margin: 0px;
}
h2.animated_title:nth-of-type(even){
font-family: junicode-outline;
}
h2.animated_title:nth-of-type(1){
margin-left: 70vh;
}
......@@ -438,15 +434,39 @@ h2.animated_title:nth-of-type(6){
font-family: junicodeboldcondensed;
}
div.text-body{
position: absolute;
position: fixed;
display: none;
top: 90vh;
width: 40%;
margin-left: 30%;
width: 500px;
right: 20px;
bottom: 180px;
top: 20px;
overflow-y: scroll;
padding: 30px;
outline: 3px solid teal;
color: teal;
font-size: 36px;
font-size: 28px;
background-color: white;
font-family: junicoderegularcondensed;
}
div.text-body:hover{
z-index: 2;
}
#reveal{
display: none;
width: 400px;
background-color: white;
/* border-left: 1px solid teal; */
position: fixed;
right: 20px;
top: 20px;
bottom: 180px;
outline: 3px solid teal;
padding: 30px;
z-index: 1;
font-family: junicodeboldcondensed;
}
nav{
position: fixed;
right: 20px;
......@@ -473,36 +493,30 @@ a:visited{
color: teal;
}
#reveal{
display: none;
width: 400px;
background-color: white;
/* border-left: 1px solid teal; */
position: fixed;
right: 20px;
top: 100px;
}
#reveal::-webkit-scrollbar {
display: none;
}
#reveal p{
margin: 5px;
font-size: 36px;
}
div.img-gallery{
/* div.img-gallery{
width: 1200px;
margin-top: 60px;
margin-left: 20px;
}
} */
div.img-gallery img{
/* div.img-gallery img{
width: 32%;
float: left;
margin-right: 1%;
margin-bottom: 10px;
}
} */
.grid-item { width: 200px; }
.grid-item--width2 { width: 400px; }
@media only screen and (max-width: 1550px) {
div.animation-container{
......@@ -546,13 +560,22 @@ div.img-gallery img{
bottom: 90px;
}
#reveal{
width: 100%;
position: absolute;
width: 300px;
position: fixed;
top: 10px;
right: 10px;
left: 10px;
}
#reveal-body{
width: 300px;
position: fixed;
top: 10px;
right: 0px;
right: 10px;
left: 10px;
}
#reveal p{
font-size: 26px;
warning
}
div.img-gallery{
width: 100%;
......
var option0 = {
strings: [ "Tasi ^2000 tējas"],
typeSpeed: 400
strings: [ "Tasi ^1000 tējas"],
typeSpeed: 300
}
var option1 = {
strings: [ "^1500Arbatos ^2000 puodelis"],
typeSpeed: 400
strings: [ "^500Arbatos ^1000 puodelis"],
typeSpeed: 300
}
var option2 = {
strings: [ "^2000 O ceasca ^2000 de ceai"],
typeSpeed: 400
strings: [ "^1000 O ceasca ^1000 de ceai"],
typeSpeed: 300
}
var option3 = {
strings: [ "^2800Filiżanka ^2000 herbaty"],
typeSpeed: 400
strings: [ "^1800Filiżanka ^1000 herbaty"],
typeSpeed: 300
}
var option4 = {
strings: [ "^3000 Cupán ^2000 tae"],
typeSpeed: 400
strings: [ "^2000 Cupán ^1000 tae"],
typeSpeed: 300
}
var option5 = {
strings: [ "A ^2000 cup ^2000 of ^1000 tea"],
......@@ -28,14 +28,21 @@ var typed1 = new Typed(".animated_title1", option1);
var typed2 = new Typed(".animated_title2", option2);
var typed3 = new Typed(".animated_title3", option3);
var typed4 = new Typed(".animated_title4", option4);
var typed5 = new Typed(".animated_title5", option5);
// var typed5 = new Typed(".animated_title5", option5);
document.addEventListener("DOMContentLoaded", function() {
console.log("document loaded");
var about = document.getElementById('about');
var secondaryintro = document.getElementById('reveal');
$('#about').click(function () {
$('#reveal').slideToggle();
}
);
$('#info').click(function () {
$('#reveal-body').slideToggle();
}
);
$('.grid').masonry({
// options
itemSelector: '.grid-item',
columnWidth: 200
});
});
This diff is collapsed.
......@@ -40,7 +40,7 @@
<h2 class="animated_title animated_title2"></h2>
<h2 class="animated_title animated_title3"></h2>
<h2 class="animated_title animated_title4"></h2>
<h2 class="animated_title animated_title5"></h2>
<h2 class="animated_title animated_title5">A cup of tea</h2>
<div id="reveal" class="text-body">
<p>A cup of tea can be powerful and meaningful tool to bring people together to share not only joy and be used as a relaxing ritual but also share worries and frustrations we all experience during our life and even more when our everyday life is so busy, challenging and everything is changing fast, it can be hard to keep up and adapt.</p>
......@@ -48,10 +48,10 @@
<nav>
<a id="about" href="#">about</a>
<a href="#gallery">project</a>
<a href="#">info</a>
<a id="info" href="#">info</a>
</nav>
</div>
<div class="text-body">
<div id="reveal-body" class="text-body">
<p>During the project participants with diverse cultural, social and mental health background will have opportunity to engage in art project and express themselves in relaxed and non judgmental environment through art and creativity. Feel the power of community learning, sense of belonging and be accepted while learning new skill and tapping into their own creativity while being a part of a unique local art project that doesn't have to stop when project is over. By bringing creativity and art into our everyday habits and environment it can help us improve and strengthen our connections with ourselves and community around us, make it brighter and happier.</p>
<hr>
<p>During the project participants will create decorative polymer clay tea pots. There must be a tea drinking traditions in every country and home, and by inviting, teaching and encouraging participants to create their own tea pot design it ultimately builds connections between ones cultural background, life experience and Ireland.</p>
......@@ -63,28 +63,36 @@
<p>I have been working closely with Forward Steps Centre management coordinating and delivering classes for latvian diaspora kids and adult groups for the past twelve months. I know how passionate team at the centre is about offering support to local community groups and individuals. This project is very unique and has lots of potential to create awareness, be part of community art project, engage.</p>
</div>
<div id="gallery" class="img-gallery">
<img src="assets/imgs/1.jpg" alt="">
<img src="assets/imgs/1b.jpg" alt="">
<img src="assets/imgs/2.jpg" alt="">
<img src="assets/imgs/2c.jpg" alt="">
<img src="assets/imgs/3.jpg" alt="">
<img src="assets/imgs/3a.jpg" alt="">
<img src="assets/imgs/4d.jpg" alt="">
<img src="assets/imgs/5e.jpg" alt="">
<img src="assets/imgs/6f.jpg" alt="">
<img src="assets/imgs/7g.jpg" alt="">
<img src="assets/imgs/8h.jpg" alt="">
<img src="assets/imgs/a1.jpg" alt="">
<img src="assets/imgs/a2.jpg" alt="">
<img src="assets/imgs/a3.jpg" alt="">
<img src="assets/imgs/a4.jpg" alt="">
<img src="assets/imgs/a5.jpg" alt="">
<img src="assets/imgs/a6.jpg" alt="">
<img src="assets/imgs/a7.jpg" alt="">
<!-- <div class="grid">
<div class="grid-item">...</div>
<div class="grid-item grid-item--width2">...</div>
<div class="grid-item">...</div>
</div>
-->
<div class="grid img-gallery">
<div class="grid-item"><img src="assets/imgs/1.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/1b.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/2.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/2c.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/3.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/3a.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/4d.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/5e.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/6f.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/7g.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/8h.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a1.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a2.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a3.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a4.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a5.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a6.jpg" alt=""></div>
<div class="grid-item"><img src="assets/imgs/a7.jpg" alt=""></div>
</div>
<script src="assets/js/typed.js"></script>
<script src="assets/js/masonry.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
......