-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (125 loc) · 4.63 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frog code</title>
<link rel="icon" href="cavalo.png">
<link
href="https://fonts.googleapis.com/css?family=Montserrat&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<script defer src="app.js"></script>
</head>
<body class="light">
<!-- Navbar -->
<nav class="navbar">
<ul class="navbar-nav">
<li class="logo"> <a href="#" class="nav-link">
<span class="link-text">FrogCodes</span>
<svg
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="angle-double-right"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
class="svg-inline--fa fa-angle-double-right fa-w-14 fa-5x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M224 273L88.37 409a23.78 23.78 0 0 1-33.8 0L32 386.36a23.94 23.94 0 0 1 0-33.89l96.13-96.37L32 159.73a23.94 23.94 0 0 1 0-33.89l22.44-22.79a23.78 23.78 0 0 1 33.8 0L223.88 239a23.94 23.94 0 0 1 .1 34z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M415.89 273L280.34 409a23.77 23.77 0 0 1-33.79 0L224 386.26a23.94 23.94 0 0 1 0-33.89L320.11 256l-96-96.47a23.94 23.94 0 0 1 0-33.89l22.52-22.59a23.77 23.77 0 0 1 33.79 0L416 239a24 24 0 0 1-.11 34z"
class="fa-primary"
></path>
</g>
</svg>
</a>
</li>
<!-- Dropdown -->
<li class="nav-item has-dropdown">
<a href="#" class="nav-link">
<span class="link-text">theme</span>
<a href="#" class="nav-link">
<svg
class="theme-icon"
id="lightIcon"
aria-hidden="true"
focusable="false"
data-prefix="fad"
data-icon="moon-stars"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="svg-inline--fa fa-moon-stars fa-w-16 fa-7x"
>
<g class="fa-group">
<path
fill="currentColor"
d="M320 32L304 0l-16 32-32 16 32 16 16 32 16-32 32-16zm138.7 149.3L432 128l-26.7 53.3L352 208l53.3 26.7L432 288l26.7-53.3L512 208z"
class="fa-secondary"
></path>
<path
fill="currentColor"
d="M332.2 426.4c8.1-1.6 13.9 8 8.6 14.5a191.18 191.18 0 0 1-149 71.1C85.8 512 0 426 0 320c0-120 108.7-210.6 227-188.8 8.2 1.6 10.1 12.6 2.8 16.7a150.3 150.3 0 0 0-76.1 130.8c0 94 85.4 165.4 178.5 147.7z"
class="fa-primary"
></path>
</g>
</svg>
</a>
<ul class="dropdown">
<li class="dropdown-item">
<a id="light" href="#">branco</a>
</li>
<li class="dropdown-item">
<a id="dark" href="#">escuro</a>
</li>
<li class="dropdown-item">
<a id="solar" href="#">solar</a>
</li>
</ul>
</li>
</ul>
</nav>
<header>
<img src="r-removebg-preview.png" class="logo" />
<h1>desenvolvimento de sites</h1>
<p>
</p>
</header>
<main>
<div class="cards">
<h3>Movies</h3>
<h1>Popular</h1>
<div class="card card__one">
<div class="card__bg"></div>
<img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_mono.png" />
<div class="card__text">
<p class="card__title">Princess Mononoke</p>
</div>
</div>
<div class="card card__two">
<div class="card__bg"></div>
<img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_chihiro.png" />
<div class="card__text">
<p class="card__title">Spirited Away</p>
</div>
</div>
<div class="card card__three">
<div class="card__bg"></div>
<img class="card__img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/3dr_howlcastle.png" />
<div class="card__text">
<p class="card__title">Howl's Moving Castle</p>
</div>
</div>
</div>
</main>
</body>
</html>