-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
149 lines (137 loc) · 8.14 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>The Sfingers</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="iconic/font/css/open-iconic-bootstrap.css" rel="stylesheet"> <!-- Font iconic -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"><!-- Font awesome -->
<link rel="stylesheet" href="thesfingers.css">
</head>
<body style="margin-bottom:200px;">
<header>
<nav class="navbar navbar-dark fixed-top navbar-expand-md navegbar"> <!-- Selecionar cor, background e tipo de device -->
<div class="container">
<a href="index.html" class="navbar-brand"><img src="img/logo3.png" style="width:108px"> </a> <!-- selecionar logo e width do mesmo -->
<!-- Botão hamburguer -->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navmenu"> <!-- target é a div que você quer esconder no menu -->
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navegação -->
<div class="collapse navbar-collapse" id="navmenu"> <!-- é aqui que você coloca a target -->
<ul class="ml-auto navbar-nav mr-4">
<li class="nav-item"> <a href="index.html"class="nav-link active" >Home</a> </li>
<li class="nav-item"> <a href="videos.html"class="nav-link" >Vídeos</a> </li>
<li class="nav-item"> <a href="quemsomos.html"class="nav-link" >Quem somos</a> </li>
<li class="nav-item"> <a href="contato.html"class="nav-link" >Contato</a> </li>
</ul>
</div>
</div>
</nav>
</header>
<section id="home" class="d-flex"> <!-- Inicio da HOME -->
<div class="container align-self-center mt-5">
<div class="row justify-content-center">
<div class="col-md-10"> <!-- Inicio do carousel -->
<div id="carousel-legenda" class=" carousel slide" data-ride="carousel">
<div class="carousel-inner" >
<ol class="carousel-indicators">
<li class="active" data-target="#carousel-legenda" data-slide-to="0"></li>
<li data-target="#carousel-legenda" data-slide-to="1"></li>
<li data-target="#carousel-legenda" data-slide-to="2"></li>
<li data-target="#carousel-legenda" data-slide-to="3"></li>
<li data-target="#carousel-legenda" data-slide-to="4"></li>
</ol>
<!-- wid 806 height 453 para todos -->
<div class="carousel-item active">
<img src="img/carousel-imagem1.jpeg" width="100%" class="img-fluid" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-item">
<img src="img/carousel-imagem2.jpg" width="100%" class="img-fluid" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-item">
<img src="img/carousel-imagem3.jpg" width="100%" class="img-fluid" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-item">
<img src="img/carousel-imagem4.jpeg" width="100%" class="img-fluid" alt="">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-item">
<img src="img/carousel-imagem5.jpeg" width="100%" class="img-fluid" alt="">
<div class="carousel-caption">
</div>
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#carousel-legenda"> <i class="fas fa-chevron-circle-left display-4"></i> </a>
<a class="carousel-control-next" data-slide="next" href="#carousel-legenda"> <i class="fas fa-chevron-circle-right display-4"></i> </a>
</div> <!-- fim do carousel controlado -->
</div>
</div>
</section> <!-- Fim da HOME -->
<section id="resumo" class=""> <!-- Inicio do resumo -->
<div class="container py-3">
<div class="row">
<div class="col-md-7"> <!-- Div com 1 video só -->
<h3 class="display-4">Nós somos THE SFINGERS</h3>
<p class="lead">A famosa banda da Escola Arquiteto Luis Saia, direto de São Miguel Paulista para o mundo!</p>
<iframe class="" width="100%" height="380" src="https://www.youtube.com/embed/i32xyzxI0Sw?start=28" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-md-5 pt-1">
<div class="col-md-12">
<iframe width="100%" height="260" src="https://www.youtube.com/embed/-5frpsggteY?start=59" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="col-md-12">
<iframe width="100%" height="260" src="https://www.youtube.com/embed/fYGLRF4J-cU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section> <!-- Fim do resumo -->
<section id="inspiracao" class="d-flex"> <!-- Inicio da inspiracao -->
<div class="container align-self-center">
<div class="row justify-content-center">
<img src="img/beatles.png" class="img-fluid d-none d-md-block" width="400px" alt="">
</div>
</div>
</section> <!-- Fim da inspiracao -->
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="row justify-content-center">
<a href="index.html"> <img src="img/logo3.png" class="" width="142" alt=""></a>
</div>
</div>
<div class="col-md-5">
<ul class="navbar-nav footbar navbar-dark navbar-expand-md justify-content-around py-2">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a> </li>
<li class="nav-item"><a class="nav-link" href="videos.html">Vídeos</a> </li>
<li class="nav-item"><a class="nav-link" href="quemsomos.html">Quem somos</a> </li>
<li class="nav-item"><a class="nav-link" href="contato.html">Contato</a> </li>
</ul>
</div>
<div class="col-md-4 row justify-content-center ml-1">
<ul class="navbar-nav navbar-expand nav-social">
<li class="nav-item"><a class="nav-link" href="https://www.facebook.com/matheus.waynelopes/"><i class="fab fa-facebook-square icone"></i></a> </li>
<li class="nav-item "><a class="nav-link" href="https://twitter.com/Math_Lopes13"><i class="fab fa-twitter-square icone"></i></a> </li>
<li class="nav-item "><a class="nav-link" href="http://api.whatsapp.com/send?1=pt_BR&phone=5511971415567"><i class="fab fa-whatsapp-square icone"></i></a> </li>
<li class="nav-item "><a class="nav-link" href="https://www.youtube.com/channel/UCd-lk0VDy1fFyo1UaZq1egQ"><i class="fab fa-youtube-square icone"></i></a> </li>
</ul>
</div>
</div>
</div>
</footer>
<!-- Javascript -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>