-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
80 lines (74 loc) · 5.86 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<title>Thiago Balera | About</title>
<meta name="author" content="Lucas Araujo">
<meta name="description" content="Page about Thiago Balera, with information, music style and influences">
<meta name="keywords" content="Thiago Balera biography profile bio about information music style influences">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!--link to Google Fonts API-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Raleway:ital@0;1&family=Nunito:wght@800;900;1000&display=swap" rel="stylesheet">
<!--link to external CSS stylesheet-->
<link href="css/modal.css" rel="stylesheet"><!--Reference: https://www.w3schools.com/howto/howto_css_modal_images.asp-->
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<header>
<div id="logo"></div>
<nav id="navbar">
<div id="menu">
<a href="index.html" title="Home">Home</a>
<a href="about.html" title="About">About</a>
<a href="media.html" title="Media">Media</a>
<a href="contact.html" title="Contact">Contact</a>
</div>
</nav>
<div id="socialMedia">
<a href="https://www.instagram.com/thiago.balera" target="_blank" title="Visit my Instagram!"><img src="images/socialmedia/instagram.png" alt="Instagram icon"></a>
<a href="https://www.facebook.com/thiago_maturano/" target="_blank" title="Visit my Facebook!"><img src="images/socialmedia/facebook.png" alt="Facebook icon"></a>
<a href="https://www.twitter.com/thiago_balera/" target="_blank" title="Visit my Twitter!"><img src="images/socialmedia/twitter.png" alt="Facebook icon"></a>
</div>
</header>
<main class="container">
<section class="about">
<h1>About</h1>
<img src="images/about/thiago_balera.jpg" alt="Thiago Balera with the guitar" class="left">
<p><strong>Thiago Balera</strong> is a self-taught musician and instrumentalist who discovered his love for music at a young age. He started playing instruments such as drums, guitar, and bass in his teens, and also developed his singing skills. With time, his style and personality matured within the music scene, leading him to pursue formal music education.</p>
<p>Balera studied at the renowned Dramatic and Musical Conservatory "Dr. Carlos de Campos" in Tatuí, SP, and has been working professionally with music since 2010. He is known for his versatility and range, with a style that spans from pop to samba, providing a diverse sound that pleases audiences of all ages and musical preferences.</p>
<p>What sets Thiago apart is his beautiful voice and his taste for covering famous songs. He is a talented musician who can bring a unique touch to any song. With his passion for music and dedication to his craft, he is sure to deliver a memorable performance that will leave a lasting impression on your audience.</p>
</section>
<section class="gallery">
<hr>
<div class="thumbnails">
<img src="images/photos/thumb/thiago_balera_1.jpg" data-src="images/photos/thiago_balera_1.jpg" alt="Image 1">
<img src="images/photos/thumb/thiago_balera_2.jpg" data-src="images/photos/thiago_balera_2.jpg" alt="Image 2">
<img src="images/photos/thumb/thiago_balera_3.jpg" data-src="images/photos/thiago_balera_3.jpg" alt="Image 3">
<img src="images/photos/thumb/thiago_balera_4.jpg" data-src="images/photos/thiago_balera_4.jpg" alt="Image 4">
<img src="images/photos/thumb/thiago_balera_5.jpg" data-src="images/photos/thiago_balera_5.jpg" alt="Image 1">
<img src="images/photos/thumb/thiago_balera_6.jpg" data-src="images/photos/thiago_balera_6.jpg" alt="Image 2">
<img src="images/photos/thumb/thiago_balera_7.jpg" data-src="images/photos/thiago_balera_7.jpg" alt="Image 3">
<img src="images/photos/thumb/thiago_balera_8.jpg" data-src="images/photos/thiago_balera_8.jpg" alt="Image 4">
<img src="images/photos/thumb/thiago_balera_9.jpg" data-src="images/photos/thiago_balera_9.jpg" alt="Image 1">
<img src="images/photos/thumb/thiago_balera_10.jpg" data-src="images/photos/thiago_balera_10.jpg" alt="Image 2">
<img src="images/photos/thumb/thiago_balera_11.jpg" data-src="images/photos/thiago_balera_11.jpg" alt="Image 3">
<img src="images/photos/thumb/thiago_balera_12.jpg" data-src="images/photos/thiago_balera_12.jpg" alt="Image 4">
</div>
<!--Reference: https://www.w3schools.com/howto/howto_css_modal_images.asp-->
<div class="modal">
<span class="close">×</span>
<img class="modal-image" src="">
<div class="caption"></div>
<a class="prev">❮</a>
<a class="next">❯</a>
</div>
</section>
</main>
<footer>
Copyright 2023 by <strong>Lucas Araujo</strong>.<br><em class="small">All Rights Reserved</em>.
</footer>
<script src="javascript/modal.js"></script><!--Reference: https://www.w3schools.com/howto/howto_css_modal_images.asp-->
</body>
</html>