-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (128 loc) · 9.31 KB
/
index.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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<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=Allison&family=Lato:wght@100;300;400;700&family=Roboto:wght@100;300;400;500&display=swap" rel="stylesheet">
<!-- Favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="img/icons/favicon/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/icons/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icons/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/icons/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icons/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/icons/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icons/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icons/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icons/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/icons/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/icons/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/icons/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/icons/favicon/favicon-16x16.png">
<link rel="manifest" href="img/icons/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/icons//ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- meta descriptions -->
<title>Rafael Santiago | Photographer</title>
<meta name="author" content="Photographer">
<meta name="keywords" content="photographer, freelance, argentina, rafael, santiago, photos, photography, argentina, world, nature, panoramic">
<meta name="description" content="Hi, I'm Rafael Santiago, Photographer and Traveler.">
<meta property="og:site_name" content="Photographer">
<meta property="og:title" content="Rafael Santiago | Photographer" />
<meta property="og:description" content="Hi, I am Rafael Santiago, Photographer and Traveler.
I was born in Argentina and I'm discovering the world through my lens." />
<meta property="og:image" itemprop="image" content="https://photos.rafaelsantiago.site/link-thumbnail.jpg">
<meta property="og:type" content="website" />
</head>
<body>
<section class="hero_section" id="home">
<navbar class="navbar">
<div class="logo_div">
<div class="logo"><a href="#home">Rafael Santiago</a></div>
<div class="sub_logo">Photographer</div>
</div>
<div class="toggle_menu" id="toggle_menu"><img src="/img/icons/icon_menu.svg" alt="menu icon"></div>
<ul class="menu" id="menu">
<li><a class="menu_link" href="#home" id="menu_home">Home</a></li>
<li><a class="menu_link" href="#latest_work" id="menu_latest_work">Latest Work</a></li>
<li><a class="menu_link" href="#Photo Gallery" id="menu_photo_gallery">Photo Gallery</a></li>
<li><a class="menu_link" href="#about_me" id="menu_about_me">About me</a></li>
<li><a class="menu_link" href="#contact" id="menu_contact_me">Contact me</a></li>
</ul>
</navbar>
<script src="js/menu.js"></script>
<div class="hero_text_box">
<!-- <div class="hero_hi">Hi, I'm</div> -->
<div class="hero_name">Rafael Santiago</div>
<div class="hero_profession">Photographer & Traveler</div>
<div class="hero_icons">
<a href="#contact"><img class="hero_icon" src="https://github.com/rafasan135/photographer-website/blob/e1a98af7555f9f76972f4741279565f424504512/img/icons/icon_mail.svg" alt="email icon"></a>
<a href="https://www.instagram.com/rafasan135"><img class="hero_icon" src="https://github.com/rafasan135/photographer-website/blob/2d852b50222385bef2fd2b4c85d2064d8e77d666/img/icons/icon_instagram.svg" alt="instagram icon"></a>
</div>
</div>
</section>
<section class="latest_work_section" id="latest_work">
<div class="tittle_latest_work">
<div class="latest_tittle">Latest Work</div>
<div class="latest_subtittle"> </div>
</div>
<div class="box_card">
<div clas="box_card_tittle">
<h2 class="box_tittle">Travel Argentina through my lens</h2>
<ul class="box_list_icons">
<li><img class="box_icons" src="img/icons/icon_calendar.svg" alt="calendar icon"><p>5 Months</p></li>
<li><img class="box_icons bx2" src="img/icons/icon_van.svg" alt="van icon"><p>25.000 kms</p></li>
<li class="box_icon_3seasons"><img class="box_icons" src="img/icons/icon_seasons.svg" alt="seasons representation icons"><p>3 Seasons</p></li>
</ul>
<div class="box_card_text">Join me on my trip through Argentina, traveling through the country with my photos, starting from the center-east of the country towards the extreme south in Ushuaia to the extreme north of the country, arriving at La Quiaca and then crossing the country from West to East from Mendoza to Misiones.</div>
<div class="box_card_pictures">
<img class="card" src="/img/cards/salta_card.jpg" alt="card with image of Salta City">
<img class="card" src="/img/cards/entrerios_card.jpg" alt="card with image of a fox from Entre Rios Province">
<img class="card" src="/img/cards/jujuy_card.jpg" alt="card with image of Purmamarca City in Jujuy Province">
<img class="card" src="/img/cards/catamarca_card.jpg" alt="card with image of Mountain Road in Catamarca Province">
<img class="card" src="/img/cards/chubut_card.jpg" alt="card with image of a penguien in Chubut Province">
<img class="card" src="/img/cards/neuquen_card.jpg" alt="card with image of sky full of stars at some place in Neuquen Province">
<img class="card" src="/img/cards/santacruz_card.jpg" alt="card with image of a route with Mountains in the background in Santa Cruz Province">
<img class="card" src="/img/cards/corrientes_card.jpg" alt="card with image of Yacare similar than Cocodrile or aligator in Corrientes Province">
</div>
</div>
</div>
<div class="banner_to_gallery">
<div class="banner_tittle">Visit my Photo Gallery</div>
<div class="banner_paragraph">and discover ther world through my eyes</div>
<div class="banner_btn">See more</div>
</div>
</section>
<section class="about_me" id="about_me">
<div class="about_me_box"><img src="/img/others/aboutme_picture.jpg" alt="profile picture" class="about_me_profile_picture">
<div class="about_me_textbox">
<h2 class="h2_aboutme">About me</h2>
<p class="about_me_text">I'm Rafael, I was born in Argentina and since the end of 2017 I have been discovering the world through photography</p>
<p class="about_me_text">Photography is my passion and when I combined it with traveling it was a wonderful experience. Every new place I visit and explore bring to me many feelings that I try to summarize with a picture.</p>
<p class="about_me_text">I feel every day there is something new I can learn and I am happy that photography is one of this topics in my life.</p>
<div class="aboutme_btn">
<button class="instagram_btn"><a href="https://www.instagram.com/rafasan135" target="_blank">Visit my Instagram</a></button>
<button class="gallery_btn"><a href="https://photography.rafaelsantiago.site">Visit my Gallery</a></button>
</div>
</div>
</div>
</section>
<section class="contact_section" id="contact">
<form class="form" action="https://formsubmit.co/contact@rafaelsantiago.site"
method="POST">
<div class="form_container">
<h2 class="form_tittle">Get in touch</h2>
<input type="text" id="name" class="form_input" placeholder="Name" name="name">
<input type="email" id="name" class="form_input" placeholder="E-mail" name="email">
<textarea class="form_input form_input--message" placeholder="Message" name="message"></textarea>
<input type="submit" value="Submit" class="form_cta">
</div>
</form>
<footer class="footer">Designed and developed by myself | Copyright © Rafael Santiago 2023</footer>
</section>
</body>
</html>