-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (150 loc) · 10.1 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
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="favicon.ico">
<title>BuJo: the Bullet Journal!</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid">
<header class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top d-flex justify-content-around col-12">
<a class="navbar-brand logo" href="#home">BuJo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Alterna navegação">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">O Método</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#indice">Índice</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#futuro">Log do Futuro</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#mensal">Log Mensal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#diario">Log Diário</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#colecoes">Coleções</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="home" class="row slider">
<div id="carouselExampleIndicators" class="carousel slide col-12 carousel-fade" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active" style="background-image: url('img/sarah-dorweiler-glass.jpg')">
<div class="carousel-caption text-secondary">
<h5>Organize sua rotina</h5>
<p>Dias mais simples e produtivos</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('img/alberto-zanetti-lake.jpg')">
<div class="carousel-caption text-secondary">
<h5>Planeje objetivos de curto prazo</h5>
<p>Pequenas metas de remo em remo</p>
</div>
</div>
<div class="carousel-item" style="background-image: url('img/dave-hoefler-mountain.jpg')">
<div class="carousel-caption text-secondary">
<h5>Alcence grandes propósitos</h5>
<p>Lugares onde nunca imaginou chegar</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Anterior</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Próximo</span>
</a>
</div>
</div>
<section id="about" class="row secao">
<article class="col-12 col-md-7 d-flex flex-column align-items-center justify-content-center secao-texto">
<h2 class="">O método Buller Journal.<span class="text-muted"> Seu criador: Rider Carroll.</span></h2>
<p class="">O Bullet Journal é um método de organização flexível e um tanto diferentes da agendas clássicas. Criado pelo designer Rider Carroll, o BuJo (abreviação) é definido em seu <a target="_blank" href="https://bulletjournal.com/">site oficial</a> como "uma prática de mindfulness disfarçada de sistema de produtividade" e tem cinco seções básicas que serão descritas aqui. </p>
</article>
<div class="col-12 col-md-5 d-flex justify-content-center align-items-center">
<img class="secao-img" src="img/rider-carroll.png" alt="Retrato de Rider Carroll, designer criador do Bullet Journal">
</div>
</section>
<hr>
<section id="indice" class="row secao">
<article class="col-12 col-md-7 order-md-1 d-flex flex-column align-items-center justify-content-center secao-texto">
<h2 class="">Índice.<span class="text-muted"> Afinal, precisamos nos achar.</span></h2>
<p class="">É importante separar as duas primeiras páginas do seu BuJo para o índice, isto é, um lugar que reúne toda página correspondente a cada uma de suas partes. Assim, será fácil navegar entre os meses, dias e, principalmente, entre as coleções. </p>
</article>
<div class="col-12 col-md-5 d-flex justify-content-center align-items-center">
<img class="secao-img" src="img/adam-birkett-storage.jpg" alt="Foto de um arquivo morto">
</div>
</section>
<hr>
<section id="futuro" class="row secao">
<article class="col-12 col-md-7 d-flex flex-column align-items-center justify-content-center secao-texto">
<h2 class="">Log do Futuro.<span class="text-muted"> De olho nas grandes metas.</span></h2>
<p class="">Já aprendemos em Dark que não temos o tempo, é ele que nos tem... espera, a conversa está ficando um pouco complicada. De toda forma, podemos planejar aquilo que desejamos para nosso futuro. E é aqui, no log do futuro, que vamos listar o que queremos realizar em cada um dos próximos meses. </p>
</article>
<div class="col-12 col-md-5 d-flex justify-content-center align-items-center">
<img class="secao-img" src="img/jeremy-thomas-stars.jpg" alt="Foto de um homem em pé e um céu estrelado ao fundo">
</div>
</section>
<hr>
<section id="mensal" class="row secao">
<article class="col-12 col-md-7 order-md-1 d-flex flex-column align-items-center justify-content-center secao-texto">
<h2 class="">Log mensal.<span class="text-muted"> Uma perspectiva mais imediata.</span></h2>
<p class=""> Para alcançar grandes metas, é importante dividir para consquistar. No log mensal, é hora de listar todos os dias daquele mês e definir objetivos breves e outras observações a respeito daquele período de tempo.</p>
</article>
<div class="col-12 col-md-5 d-flex justify-content-center align-items-center">
<img class="secao-img" src="img/nathan-dumlao-calendar.jpg" alt="Foto de um calendário do mês de janeiro de 2020">
</div>
</section>
<hr>
<section id="diario" class="row secao">
<article class="col-12 col-md-7 d-flex flex-column align-items-center justify-content-center secao-texto">
<h2 class="">Log Diário.<span class="text-muted"> Organizando a rotina.</span></h2>
<p class="">O log diário é talvez a seção que mais impactará a sua produtividade. É aqui que devemos abrir um espaço para cada dia do mês e inserir ali os tais "bullets" que dão nome ao BuJo, que nada mais são que pontos ou tópicos significativos (como um x para indicar uma tarefa realizada ou um pequeno círculo para indicar um evento). Sentar à noite e organizar o dia seguinte vai fazer com que seja mais leve cumprir seus objetivos. </p>
</article>
<div class="col-12 col-md-5 d-flex justify-content-center align-items-center">
<img class="secao-img" src="img/charles-deluvio-day.jpg" alt="Foto de um calendário de um dia 2 qualquer">
</div>
</section>
<hr>
<section id="colecoes" class="row secao">
<article class="col-12 col-md-7 order-md-1 d-flex flex-column align-items-center justify-content-center secao-texto">
<h2 class="">Coleções.<span class="text-muted"> Nem tudo é previsível.</span></h2>
<p class="">Para garantir a flexibilidade do BuJo, Rider Carroll adicionou o conceito de coleções, que são seções aleatórias que surgem e você precisa adicionar no meio do seu BuJo, como os melhores filmes do ano, uma lista de leitura ou a gestão das suas finanças. Depois de adicionar a coleção, é só registrar a página no índice e ela se torna encontrável. O BuJo é muito adaptável e é quase certo que ele vai atender suas necessidades!</p>
</article>
<div class="col-12 col-md-5 d-flex justify-content-center align-items-center">
<img class="secao-img" src="img/eniko-kis-polaroid.jpg" alt="Foto de uma câmera antiga Polaroid">
</div>
</section>
<footer class="row footer">
<div class="col 12 border-top d-flex justify-content-center align-items-center text-black-50">
<p class="footer-text">O Bullet Journal é propriedade intelectual do designer <a target="_blank" href="https://bulletjournal.com/">Rider Carroll</a>. Este site foi construído por <a target="_blank" href="https://github.com/andradeoromulo">Rômulo Andrade</a> como conclusão para o curso de Tecnologia Web I.</p>
</div>
</footer>
<!-- JavaScript-->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>