-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (111 loc) · 5.81 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link href='https://fonts.googleapis.com/css?family=Roboto&display=swap' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="nav">
<div class="container cf">
<h1 class="name">Niccolo' Vannetti</h1>
<nav class="main-nav">
<ul>
<li class="button"><a href="#top">Home</a></li>
<li class="button"><a href="#portfolio">Portfolio</a></li>
<li class="button"><a href="#contact">Contact</a></li>
<li class="button"><a href="#skill">Skill</a></li>
</ul>
</nav>
</div>
</header>
<!-- main header -->
<div class="gradient">
<div class="description container cf">
<img class="profile-img" src="img/profile.png" alt="profile image">
<p class="my-desc">Hi! I'm a front end Developer who loves reponsive design and css. I recently finished learning front-end-web development ar Treehouse and am excided to put all my skill to use!</p>
</div>
</div>
<!-- Portfolio Section -->
<div class="container cf">
<h1 id="portfolio" >PORTFOLIO</h1>
<div class="col marketing">
<img src="img/portfolio-1.png" alt="marketing image">
<h2>Marketing Page</h2>
<p class="description_2">This project shows front page of a marketing website for a specific business im intrested in.</p>
</div>
<div class="col search">
<img src="img/portfolio-2.png" alt="Search image">
<h2>Search Page</h2>
<p class="description_2">This project searches through a specific database to find information that the user is trying to look up.</p>
</div>
<div class="col travel">
<img src="img/portfolio-3.png" alt="Travel image">
<h2>Travel App</h2>
<p class="description_2">This project compares travel times based on different transportation methods and tell you the best one.</p>
</div>
<div class="col map">
<img src="img/portfolio-4.png" alt="Favorite spots image">
<h2>Map of favorite spots</h2>
<p class="description_2">This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
</div>
<div class="col photo">
<img src="img/portfolio-5.png" alt="Photo gallery image">
<h2>Photo Gallery</h2>
<p class="description_2">This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
</div>
<div class="col calculator">
<img src="img/portfolio-6.png" alt="Calculator image">
<h2>Calculator</h2>
<p class="description_2">Someone can enter in the numbers they want, and press the big blue button and get the result.</p>
</div>
</div>
<!-- Skill Section -->
<div class="container cf">
<h1 id="skill" >SKILL</h1>
<div class="col photoshop">
<img class="skill_img" src="img/Photoshop.png" alt="photoshop icon">
<h2>Photoshop</h2>
<p class="description_skill">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col illustrator">
<img class="skill_img" src="img/illustrator.png" alt="illustrator icon">
<h2>Illustrator</h2>
<p class="description_skill">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="col ae">
<img class="skill_img" src="img/AE.png" alt="ae icon">
<h2>After Effects</h2>
<p class="description_skill">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<footer>
<div id="contact" class="contacts">
<h3>CONTACT</h3>
<p class="description_2">If you are interested in chatting or you want more information about what i have been working on, i'd love to ear from you.</p>
<P>Phone<strong> +391234567890</strong></P>
<p>Email<strong><a href="mailto:[email protected]"> [email protected]</a></strong></p>
</div >
<!-- bottom menu for mobile phones-->
<ul class="bottom-menu cf">
<li><a class="name-bottom" href="#"><strong>Niccolo' Vannetti</strong></a></li>
<li><a class="back-top" href="#top">Back to top</a></li>
</ul>
<!-- bottom menu for tablets-->
<div id="bottom-menu-2" class="container bottom-menu-tab cf">
<h3 class="name-bottom">Niccolo' Vannetti</h3>
<nav class="main-nav-bottom">
<ul>
<li class="button-bottom"><a href="#top">Home</a></li>
<li class="button-bottom"><a href="#portfolio">Portfolio</a></li>
<li class="button-bottom"><a href="#contact">Contact</a></li>
<li class="button-bottom"><a href="#skill">Skill</a></li>
</ul>
</nav>
</div>
</footer>
</body>
</html>