-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
158 lines (137 loc) · 8.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/0e50a4fce9.js" crossorigin="anonymous"></script>
<title>Bootstrap</title>
<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=Lato:wght@300&family=Quicksand:wght@300&display=swap" rel="stylesheet">
<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=Dancing+Script&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a href="#" class="navbar-logo text-white">Home</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navmenu"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navmenu" >
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a href="#serviços" class="nav-link text-white">Serviços</a>
</li>
<li class="nav-item">
<a href="#inclusividade" class="nav-link text-white">inclusividade</a>
</li>
<li class="nav-item">
<a href="#contato" class="nav-link text-white">Contato</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- HOME -->
<section id="home" class="text-light p-5 text-center">
<div class="container">
<div class="d-md-flex align-items-center justify-content-between">
<div>
<h1 id="escola">Escola da Gi</h1>
<p>Ensino de reforço para ensino fundamental</p>
</div>
<img class="d-none d-md-block" src="./images/school.svg" alt="">
</div>
</div>
</section>
<!--SERVIÇOS -->
<section id="serviços" class="p-5">
<div class="container">
<div class="h1 text-center pb-5">Nossos serviços</div>
<div class="row text-center align-items-center">
<div class="col-md">
<div id="card-1" class="card align-items-center text-light p-3">
<div class="h1">Matemática</div>
<div class="card-body">
<img class="d-none d-md-block" src="./images/mathematics.svg" alt="">
</div>
<div class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati et delectus possimus veniam maxime rerum iure, eaque inventore soluta aperiam odio qui quia assumenda? Eum qui voluptates iste, consectetur eveniet, enim quis minus id perspiciatis similique et dolores veniam distinctio velit a quae facere maxime tempora debitis! Maxime, laboriosam ad.</div>
</div>
</div>
<div class="col-md">
<div id="card-2" class="card align-items-center text-light p-3">
<div class="h1">Português</div>
<div class="card-body">
<img class="d-none d-md-block" src="./images/english.svg" alt="">
</div>
<div class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio aut atque autem. Quo quisquam quidem quam iure quis, omnis fugiat! Consectetur ab minus at tenetur est similique minima consequuntur, eligendi ut adipisci ducimus enim magnam pariatur omnis, cupiditate obcaecati exercitationem veritatis tempora! Ratione molestiae repellat architecto assumenda quae nam quas.</div>
</div>
</div>
<div class="col-md">
<div id="card-3" class="card align-items-center text-light p-3">
<div class="h1">Música</div>
<div class="card-body">
<img class="d-none d-md-block" src="./images/music.svg" alt="">
</div>
<div class="p1">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis amet illo provident vel porro? Et id eos ex eaque error quisquam sint rem minima, perferendis molestiae repudiandae reprehenderit beatae obcaecati iusto nihil aliquam, libero exercitationem ipsum accusantium, vero harum! Iusto, perspiciatis necessitatibus placeat earum accusamus nesciunt quasi eius temporibus quaerat.</div>
</div>
</div>
</div>
</div>
</section>
<!-- INCLUSIVIDADE -->
<section id="inclusividade" class="text-light text-center p-5">
<div class="container">
<div class="row g-5">
<div class="col-md text-start">
<div>
<h1 class="pb-4">Educação inclusiva</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quaerat explicabo vel eos laudantium suscipit obcaecati a assumenda, beatae ab, rerum error iusto maiores ullam possimus autem at! Mollitia odit repudiandae ipsa nulla eum. Quae minus possimus, modi officia esse animi architecto sit quia eum repellat unde iste sunt veritatis sint voluptate voluptatem quaerat numquam, vel neque? Temporibus, similique perspiciatis quasi saepe corrupti dolore molestiae dolor fuga excepturi accusantium explicabo? Inventore voluptatibus tempore repellendus! Ab alias laboriosam odit quod soluta sunt magni mollitia distinctio eum quis aspernatur error magnam sapiente nihil quo, dolores praesentium impedit labore delectus corrupti debitis quam at reprehenderit. At facilis quos et recusandae ratione quis molestias doloribus delectus temporibus. Ab aut tenetur, est libero voluptatum eius rerum vel placeat debitis magnam maiores et. Dolor fugit praesentium, debitis odit sapiente, ipsa deserunt qui dolorem ab assumenda laborum earum quos pariatur sint consectetur maiores reprehenderit doloribus deleniti explicabo! Modi.</p>
</div>
</div>
<div class="col-md">
<div>
<img class="w-70 d-none d-sm-block" src="./images/inclusivo.svg">
</div>
</div>
</div>
</div>
</section>
<!-- CONTATO -->
<section id="contato" class="p-5">
<div class="container">
<h1 class="text-center mb-4">Contatos</h1>
<ul class="list-group list-group-flush">
<li class="list-group-item">Telefone: xxxx-xxxx</li>
<li class="list-group-item">E-mail: [email protected]</li>
</ul>
</div>
</div>
</section>
<!-- FOOTER -->
<section id="footer" class="p-2">
<div class="container">
<ul class="d-flex list-inline justify-content-center mb-auto">
<li class="list-inline-item p-2"><i class="fa-brands fa-instagram"></i></li>
<li class="list-inline-item p-2"><i class="fa-brands fa-linkedin-in"></i></li>
<li class="list-inline-item p-2"><i class="fa-brands fa-github"></i></li>
</ul>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>