-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
99 lines (86 loc) · 5.25 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Criação Layout OnePage - Tomatoes</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h1>Tomatoes</h1>
<div class="barra"></div>
</header>
<main>
<nav>
<div class="menu"><span class="material-icons">add</span></div>
<div class="nav-items">
<a href="#topo" class="tooltip" data-tooltip="Tomato">
<span class="material-icons">add</span>
<label class="text_tooltip"></label>
</a>
<a href="#botao" class="tooltip" data-tooltip="95%">
<span class="material-icons">gamepad</span>
<label class="text_tooltip"></label>
</a>
<a href="#tolltips" class="tooltip" data-tooltip="Not Only Red">
<span class="material-icons">chat_bubble_outline</span>
<label class="text_tooltip"></label>
</a>
<a href="#parallax" class="tooltip" data-tooltip="Shapes">
<span class="material-icons">bubble_chart</span>
<label class="text_tooltip"></label>
</a>
</div>
</nav>
<section>
<div id="topo" class="section_info">
<div class="row container">
<h2 class="header">What is a Tomato</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, aliquid eos? Pariatur repellat omnis porro architecto. Repudiandae quibusdam eos ducimus unde, explicabo doloremque dolor quasi maxime nobis. Molestias, illo quaerat?lore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae blanditiis ab aspernatur omnis alias tempore excepturi et aperiam odit sequi neque temporibus quidem maiores voluptatum, consequuntur praesentium corporis rem veniam.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem1t.jpg"></div>
</div>
</section>
<section>
<div id="botao" class="section_info">
<div class="row container">
<h2 class="header">95% water</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, aliquid eos? Pariatur repellat omnis porro architecto. Repudiandae quibusdam eos ducimus unde, explicabo doloremque dolor quasi maxime nobis. Molestias, illo quaerat?lore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae blanditiis ab aspernatur omnis alias tempore excepturi et aperiam odit sequi neque temporibus quidem maiores voluptatum, consequuntur praesentium corporis rem veniam.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem2t.jpg"></div>
</div>
</section>
<section>
<div id="tolltips" class="section_info">
<div class="row container">
<h2 class="header">Not only red</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, aliquid eos? Pariatur repellat omnis porro architecto. Repudiandae quibusdam eos ducimus unde, explicabo doloremque dolor quasi maxime nobis. Molestias, illo quaerat?lore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae blanditiis ab aspernatur omnis alias tempore excepturi et aperiam odit sequi neque temporibus quidem maiores voluptatum, consequuntur praesentium corporis rem veniam.</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax"><img src="img/imagem3t.jpg"></div>
</div>
</section>
<section>
<div id="parallax" class="section_info">
<div class="row container">
<h2 class="header">Color and Shapes</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit, aliquid eos? Pariatur repellat omnis porro architecto. Repudiandae quibusdam eos ducimus unde, explicabo doloremque dolor quasi maxime nobis. Molestias, illo quaerat?lore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae blanditiis ab aspernatur omnis alias tempore excepturi et aperiam odit sequi neque temporibus quidem maiores voluptatum, consequuntur praesentium corporis rem veniam.</p>
</div>
</div>
</section>
</main>
<footer>
<p>pomodori 2021 - all sauces must be reserved</p>
</footer>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>