-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
116 lines (105 loc) · 8.63 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Source+Sans+Pro:wght@300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="src/css/main.css">
<script src="https://kit.fontawesome.com/bfb175b869.js" crossorigin="anonymous"></script>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Leonardo Silvatti</title>
</head>
<body data-spy="scroll" data-target="main-navbar" data-offset="0">
<nav id="main-navbar" class="navbar navbar-expand-lg navbar-dark fixed-top mainavbar">
<a class="navbar-brand" href="#">Leonardo Silvatti</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainMenu" aria-controls="mainMenu" aria-expanded="true" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainMenu">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sobre mim</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projetos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contato</a>
</li>
</ul>
</div>
</nav>
<div class="container-fluid" id="hero">
<div class="container-fluid herotext">
<h1>Olá, eu faço
<h1 href="" class="typewrite" data-period="2000" data-type='[ " Sites.", " Aplicativos.", " Designs."]'>
<span class="wrap"></span>
</h1>
</h1>
</div>
</div>
<div class="container-fluid" id="main-info">
<div class="row">
<div class="col-md-5" id="pic">
<img class="img-fluid pp" src="src/img/pp.jpg">
</div>
<div class="col-md-7" id="info">
<h1>Leonardo Silvatti Silva</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="container-fluid" id="cards">
<div class="row row-of-cards">
<div class="col qcard">
<i class="fas fa-globe-americas fa-3x"></i>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="col qcard midcard">
<i class="fas fa-users fa-3x"></i>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
<div class="col qcard">
<i class="fas fa-desktop fa-3x"></i>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut</p>
</div>
</div>
</div>
<div class="container-fluid" id="sobre">
<div class="row">
<div class="col ed colexps section-1">
<h1 class="desktop" id="educatitle">Educação</h1>
<div id="educamobile" onclick="rotateArrow(this)" data-toggle="collapse" href="#mobileEdu" role="button" aria-expanded="false" aria-controls="mobileEdu" class="trigger"><h1 id="educatitle">Educação</h1>
<i class="fas fa-chevron-down fa-2x mobile-trigger"></i></div>
<div class="collapse" id="mobileEdu">
<div class="card card-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
<a onclick="InsideRotateArrow(this)" data-toggle="collapse" href="#mobileEdu" role="button" aria-expanded="false" aria-controls="mobileEdu">Ver menos</a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
</div>
<div class="col prof colexps section-2">
<h1 class="desktop" id="exptitle">Exeperiências</h1>
<div id="expmobile" onclick="rotateArrow(this)" data-toggle="collapse" href="#mobileExp" role="button" aria-expanded="false" aria-controls="mobileExp" class="trigger"><h1 id="exptitle">Exeperiências</h1>
<i class="fas fa-chevron-down fa-2x mobile-trigger"></i></div>
<div class="collapse" id="mobileExp">
<div class="card card-body">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
<a onclick="InsideRotateArrow(this)" data-toggle="collapse" href="#mobileExp" role="button" aria-expanded="false" aria-controls="mobileExp">Ver menos</a>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="src/js/main.js"></script>
</body>
</html>