-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
173 lines (170 loc) · 7.87 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mario Rendic Portfolio</title>
<link rel="stylesheet" type="text/css" href="css/normalize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/script.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>
<div class="overlay"></div>
<a id="home"></a>
<header>
<div id="nav-toggle">
<i class="fas fa-bars"></i>
</div>
<nav>
<ul>
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#portfolio">Portfolio</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<div class="image">
<img src="img/mario-rendic.jpg" alt="Mario Rendić Front End Developer">
</div>
<h1>Mario Rendić</h1>
<h2>Front End Developer</h2>
</section>
<a id="portfolio"></a>
<section class="container portfolio browser-height">
<div class="col-12 center title">
<h1>Portfolio</h1>
<p>Check out some of my latest work.</p>
<i class="fas fa-code fa-2x"></i>
</div>
<article class="col-4">
<a href="https://www.sea-sense-charter.com/" target="_blank">
<div class="item">
<div class="item-image">
<img src="img/sea-sense-logo.svg" alt="Sea Sense Charter">
</div>
<div class="item-text">
<h2>Sea Sense Charter</h2>
<p>
WordPress custom designed and coded template
</p>
</div>
</div>
</a>
</article>
<article class="col-4">
<a href="https://www.aktivator.hr/" target="_blank">
<div class="item">
<div class="item-image">
<img src="img/aktivator-logo.svg" alt="Sea Sense Charter">
</div>
<div class="item-text">
<h2>Aktivator</h2>
<p>
Front end and Back end development custom template
</p>
</div>
</div>
</a>
</article>
<article class="col-4">
<a href="https://osoje-commerce.hr/" target="_blank">
<div class="item">
<div class="item-image">
<img src="img/osoje-logo.png" alt="Sea Sense Charter">
</div>
<div class="item-text">
<h2>OS Jeans</h2>
<p>
WordPress custom designed and coded template
</p>
</div>
</div>
</a>
</article>
</section>
<div class="big-border"></div>
<a id="about"></a>
<article class="container browser-height">
<div class="col-12 center title">
<h1>About</h1>
<p>Some interesting facts about me.</p>
<i class="fas fa-info fa-2x"></i>
</div>
<div class="col-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nunc enim, finibus at tempor quis, sollicitudin at ligula. Donec luctus malesuada scelerisque. Quisque consequat ipsum quis lectus laoreet accumsan. Sed et ullamcorper nulla, at convallis enim. Fusce sit amet ex id tortor molestie volutpat. Nulla at ipsum id quam malesuada molestie. Vestibulum sed dui congue justo accumsan suscipit. Nunc dictum mauris ut blandit suscipit. Fusce mollis tincidunt quam, nec viverra quam fringilla sed. Sed a dolor sed magna vulputate molestie.
</p>
<p>
Integer at dolor vitae augue vehicula elementum. Curabitur lobortis vulputate ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed vitae mollis metus. In hac habitasse platea dictumst. Integer pulvinar tortor in orci luctus, at molestie dui semper. Sed accumsan viverra ipsum id egestas. Quisque justo quam, faucibus eget consequat non, ullamcorper at ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
</article>
<div class="big-border"></div>
<a id="contact"></a>
<section class="container browser-height contact">
<div class="col-12 center title">
<h1>Contact</h1>
<p>Hire me or ask me anything at <a href="mailto:[email protected]">[email protected]</a></p>
<i class="far fa-envelope fa-2x"></i>
</div>
<article class="col-4">
<div class="center">
<h2>Phone</h2>
<p><a href="tel:+385992652001"><i class="fas fa-mobile-alt"></i> +385 (0)99 265 2001</a></p>
<p><a href="skype:mariorendic"><i class="fab fa-skype"></i> Skype: mariorendic</a>
<p><a href="viber:+385992652001"><i class="fab fa-viber"></i> Viber</a></p>
<p><a href="whatsapp:+385992652001"><i class="fab fa-whatsapp"></i> WhatsApp</a></p>
</div>
</article>
<article class="col-4">
<h2 class="center">Contact form</h2>
<div class="contact-form">
<form>
<label>Name</label>
<input type="text" name="name">
<label>E-mail</label>
<input type="email" name="email">
<label>Title</label>
<input type="text" name="title">
<label>Message</label>
<textarea name="Message"></textarea>
<div class="center">
<button name="submit">Submit</button>
</div>
</form>
</div>
</article>
<article class="col-4">
<div class="center">
<h2>Networks</h2>
<p><a href="https://web.facebook.com/mariorendic" target="_blank"><i class="fab fa-facebook-square"></i> Facebook</a></p>
<p><a href="https://www.instagram.com/rendic/" target="_blank"><i class="fab fa-instagram"></i> Instagram</a></p>
<p><a href="https://www.linkedin.com/in/mario-rendi%C4%87-685a9170/" target="_blank"><i class="fab fa-linkedin"></i> LinkedIn</a></p>
<p><a href="https://github.com/mariorendic" target="_blank"><i class="fab fa-github-square"></i> GitHub</a></p>
</div>
</article>
</section>
</main>
<footer>
<div class="container center">
<div class="col-12">
<p>Copyright © 2018. All rights reserved.</p>
</div>
</div>
</footer>
</body>
</html>