Commit e60a19de authored by Believer Programmers' Club's avatar Believer Programmers' Club

Merge branch 'tmw_3' into 'master'

Echo_ok Teamwork_03

See merge request bpcarm/trainings2017!313
parents e11d8094 66e0ba0e
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>echo $?</title>
<meta charset="utf-8" />
<style type="text/css">
* {
margin: 0;
padding:0;
}
#watch {
position:absolute;
left: 35%;
}
#bg {
position:fixed;
width:100%;
}
div h1 {
position:absolute;
width:60%;
}
#buttons {
position:relative;
width:100%
}
#photos {
height: 1000px;
z-index: 100;
width: 595px;
background-repeat: no-repeat;
background-image: url(img_default.png);
background-size: contain;
position: relative;
left: 366px;
}
div h1 {
color: #B0FF73;
z-index: 100;
display: inline;
margin-top: 130px;
margin-left: 28px;
font-weight: bold;
font-family: Arial;
}
.btnu {
width:60px;
height:60px;
cursor:pointer;
opacity: 0;
}
#photos p {
color: #B0FF73;
font-family: Arial;
font-weight: bold;
font-size: 14px;
position: absolute;
display: inline-block;
top: 567px;
}
#btn1 {
position: absolute;
left: 633px;
top: 510px;
z-index: 1001;
}
#btn2 {
position: absolute;
left: 459px;
top: 150px;
z-index: 1001;
}
#btn3 {
position: absolute;
left: 459px;
top: 420px;
z-index: 1001;
}
#btn4 {
position: absolute;
left: 811px;
top: 150px;
z-index: 1001;
}
#btn5 {
position: absolute;
left: 811px;
top: 420px;
z-index: 1001;
}
</style>
</head>
<body>
<nav>
<div id="container">
<span id="span"><h1>Welcome to Echo_ok. As our last two<br>teamworks were based on watch<br>modeling and programming we<br>decided to create something<br>concerning to Digital watch. If you<br>press the 1 button, menu will appear<br>and you can choose whatever you want.<br>In each of the sections we represented<br>a short biography so you can learn<br>about our members a little bit more.<br> Enjoy !</h1></span>
<img src="bg.jpg" id="bg" alt="background" />
<div id="buttons">
<button id="btn1" class="btnu">1</button>
<button id="btn2" class="btnu">2</button>
<button id="btn3" class="btnu">3</button>
<button id="btn4" class="btnu">4</button>
<button id="btn5" class="btnu">5</button>
<div id="photos">
</div>
</div>
</div>
</nav>
<script>
var button1 = document.getElementById("btn1")
var button2 = document.getElementById("btn2")
var button3 = document.getElementById("btn3")
var button4 = document.getElementById("btn4")
var button5 = document.getElementById("btn5")
var place = document.getElementById("photos")
button1.addEventListener("click", function() {
photos.style.backgroundImage = "url('img_1.png')"
photos.innerHTML = "<p></p>"
})
button2.addEventListener("click", function(){
photos.style.backgroundImage = "url('img_2.png')"
photos.innerHTML = "<p>My name is Vardan Martirosyan I'm 19 years old. I was born in Gyumri in 1998, I have a great interest in programming and mathematics and I want my abilities to expand and deepen as much as possible in those spheres. I have participated in multiple mathematic Olympiads, received high honors in all competitions and an opportunity to study abroad, but because of my love for my country I decided to continue my academic career in Armenia. </p>"
})
button3.addEventListener("click", function(){
photos.style.backgroundImage = "url('img_3.png')"
photos.innerHTML = "<p>I am Mariet Stepanians. I was born in Tehran in 1998 but raised in Yerevan, Armenia. Since very young age I started to learn musical instruments (piano and flute) and by now playing those instruments are my favorite hobbies. As I study in the faculty of Computer Science, I am so interested in programming. Therefore I try to do my best to be a part of the generation which will help to develop our country, especially in IT sphere.</p>"
})
button4.addEventListener("click", function(){
photos.style.backgroundImage = "url('img_4.png')"
photos.innerHTML = "<p>Hello, my name is Mariam. I'm 15 years old. I study in 132 school. My hobbies are singing and learning languages. Now I learn korean, but I planned to learn more languages.I study programming, and I like it so much.I was born in Moscow, and I lived there 7 years. When i come to Armenia, I had no friends. But now I think that I have the best friends in the world. Long time I have gone to the volleyball trainings. But now I want to take my all time to study programming, because I wanna be a good programmer.</p>"
})
button5.addEventListener("click", function(){
photos.style.backgroundImage = "url('img_5.png')"
photos.innerHTML = "<p>Hey. My name is Lilit. I'm 17 years old. I was born in Moscow, but live in Armenia. I know Armenian, Russian, English and a bit Korean and German. Traveling is a part of me. I am a student of Yerevan State College Of Humanities. I study tourism and different languages. My hobbies - singing, dancing, drawing or painting, writing books, creating new songs, playing the guitar and piano, cooking... I am a member of a new and a little popular group called zZipa. I'm a leader, vocalist and dancer. I have a dream and I will do all to reach it. My dream is to go to USA and study programming in the Silicon Valley. Maybe then I can work. I am a Christian, and I am from the worship group in People of God church. However, I know I can do all. It's an amazing chance from the heaven to reach my all dreams...</p>"
})
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment