-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (109 loc) · 5.09 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Oswald&family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link rel="short icon" href="./img/house.png" type="image/x-icon">
<title>Casa Criativa</title>
</head>
<body>
<div id="container">
<section id="intro">
<header>
<img src="./img/27pdZLL - Imgur (1).png" alt="casa Criativa" >
</header>
<!--Conteudo principal -->
<main>
<p>Ficar em casa em períodos longos, não deve ser nada fácil.</p>
<p> Por isso iremos catalogar ideias, <strong>brincadeiras, jogos, filmes,
livros, cursos, dicas</strong> e tudo que for necessário para tornar esse
momento mais interessante.</p>
<p>Começe clicando em ver ideias para ver as ideias cadastradas e contribua
adicionando suas ideias.</p>
</main>
<section id="buttons">
<button onclick="onOff()"> + Adicionar ideia</button>
<a href="ideias.html" class="button">Ver ideias</a>
</section>
<footer>Com 🧡 <a href="https://www.instagram.com/jullydeveloper/" target="blanck">Jully Developer</a></footer>
</section>
<section id="last-ideias">
<div class="idea">
<img src="./img/programing.png" alt="estudo" width="10%" height="10%">
<div class="content">
<h3>Cursos de Programação</h3>
<p>Estudo</p>
<div class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Tempora, consequuntur neque minima consectetur officia distinctio.
Excepturi neque placeat cumque atque vel. Odio exercitationem praesentium
quaerat explicabo ipsum consequatur animi rem.
</div>
<a href="#">Ir para a ideia</a>
</div>
</div>
<div class="idea">
<img src="./img/athlete.png" alt="gym" width="10%" height="10%">
<div class="content">
<h3>Exercícios</h3>
<p>Saúde</p>
<div class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Tempora, consequuntur neque minima consectetur officia distinctio.
Excepturi neque placeat cumque atque vel. Odio exercitationem praesentium
quaerat explicabo ipsum consequatur animi rem.
</div>
<a href="#">Ir para a ideia</a>
</div>
</div><br>
<div class="idea">
<img src="./img/yoga.png" alt="yoga" width="10%" height="10%">
<div class="content">
<h3>Meditação</h3>
<p>Mentalidade</p>
<div class="description">
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Tempora, consequuntur neque minima consectetur officia distinctio.
Excepturi neque placeat cumque atque vel. Odio exercitationem praesentium
quaerat explicabo ipsum consequatur animi rem.
</div>
<a href="#">Ir para a ideia</a>
</div>
</div>
</section>
</div>
<!--Modal-->
<div id="modal" class="hide">
<div class="content">
<h1>Nova Ideia</h1>
<form action="">
<div class="input-wraper">
<label for="title">Título da Ideia</label>
<input type="text" name="title">
</div>
<div class="input-wraper">
<label for="category">Categoria</label>
<input type="text" name="category">
</div>
<div class="input-wraper">
<label for="image">Link da imagem</label>
<input type="url" name="image">
</div>
<div class="input-wraper">
<label for="description">Digite uma descrição para essa ideia</label>
<textarea name="description" cols="30" rows="10"></textarea>
</div>
<div class="input-wraper">
<label for="link">Link da Ideia</label>
<input type="text" name="link">
</div>
<a href="#" onclick="onOff()">Voltar</a>
<button id="form-button">Salvar</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>