-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
155 lines (113 loc) · 4.89 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!--Titulo do Site-->
<title>Planeta Terra</title>
<!--Meta Tags do Site-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Author" content="Pauloh">
<meta name="Description" content="Este é um site para treinar alguns conceitos do front mais avançados">
<meta name="Keywords" content="front,html,css,javascript">
<!--Links do Site-->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/effects.css">
<link rel="stylesheet" href="css/responsive.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=Ms+Madi&family=Open+Sans:ital,wght@0,300;0,500;1,300;1,500&family=Pacifico&display=swap" rel="stylesheet">
<!--scripts externos do site-->
<script src="https://kit.fontawesome.com/96c7bd056c.js" crossorigin="anonymous"></script>
</head>
<body>
<!--Header do Site-->
<header>
<div class="opacity"></div>
<div class="container">
<div class="logo">
<marquee>
<h1>Nosso Mundo!</h1>
</marquee>
</div>
<!--logo-->
<!--menu Desktop-->
<nav class="menu_desktop">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Sobre</a></li>
<li><a href="">Contato</a></li>
</ul>
</nav>
<!--menu Desktop-->
<!--menu Mobile-->
<nav class="menu_mobile">
<h2 class="ativa"><i class="fa-solid fa-bars"></i></h2>
<ul>
<h2 class="fecha"><i class="fa-solid fa-x"></i></h2>
<li><a href="">Equipment</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
</ul>
</div>
<!--container-->
<div class="container-txt">
<div class="container">
<h2>Podes não ter o mundo nas tuas mãos, mas podes ser o mundo de alguém.</h2>
</div>
</div>
<!--container txt-->
</header>
<!--sessão de informações-->
<section class="info">
<div class="container">
<div class="info-content">
<div class="img-info">
<img src="css/imagem/planeta3.jpg" alt="">
</div>
<!--img-info-->
<div class="text-info">
<h3>O Mundo está em suas mãos </h3>
<h2>Se você não pode ser o sol, seja um planeta, mas nunca deixe de irradiar a luz que mora no seu coração.</h2>
</div>
<!--text info-->
</div>
<!--info content-->
<div class="info-content">
<div class="img-info">
<img src="./css/imagem/peneta2.jpg" alt="">
</div>
<!--img-info-->
<div class="text-info">
<h3>O Mundo está em suas mãos </h3>
<h2>Planeta terra, onde quem berra se ferra. O céu clama por paz, e o solo fede a guerra. Seres distantes, sim, cada vez mais distantes, construindo muros onde deveriam haver pontes.</h2>
</div>
<!--text info-->
</div>
<!--info content-->
<div class="info-content">
<div class="img-info">
<img src="./css/imagem/planeta4.jpg" alt="">
</div>
<!--img-info-->
</div>
<!--info content-->
</div>
<!--container-->
</section>
<!--info-->
<footer>
<div class="container">
<span><a href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook" target="_blank"></i></a> <a href="https://www.instagram.com/" target="_blank"><i class="fa-brands fa-instagram"></i></a> <a href="https://twitter.com/" target="_blank"><i class="fa-brands fa-twitter"></i></a> <a href="https://youtube.com" target="_blank"><i class="fa-brands fa-youtube"></i></a></span>
<p>Todos os Direitos Reservados - 2022 </p>
<p>feito com amor por Pauloh <i class="fa-solid fa-laptop-code"></i></p>
</div>
<!--container-->
</footer>
<!--scripts internos do site-->
<script src="javascript/main.js"></script>
</body>
<!--scripts internos do site-->
<script src="javascript/main.js"></script>
</body>
</html>