-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
145 lines (129 loc) · 8.69 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">
<title>CodePen - FabiCard</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<body>
<div class="container">
<header class="cabecalho">
<div class="perfil">
<img class="perfil-foto" src="https://github.com/FabianaCampanari.png" />
<div class="titulo">
<h1>Fabiana Campanari</h1>
<h3>Front End Developer | Graphic Designer Prolancer | Tech Lover and Nerd</h3>
<!--Icons-->
<a href="https://github.com/FabianaCampanari" class="icons" target="_blank" rel="external"><img src="https://i.imgur.com/fj8B98p.png" alt="Ícone github"></a>
<a href="https://www.linkedin.com/in/fabiana-campanari/" class="icons" target="_blank" rel="external"><img src="https://i.imgur.com/uWUyOBe.png" alt="Ícone Linkedin"></a>
<a href="https://codepen.io/your-work/" class="icons" target="_blank" rel="external"><img src="https://i.imgur.com/qfpPHtt.png" alt="Ícone codepen"></a>
</div>
</div>
<div class="tema">
<button onclick="mudaTema()">Dark Mode</button>
</div>
</header>
<!-- Project Structure -->
<main class="projetos">
<ul class="lista-projetos">
<p class="subtitulo">Projects</p>
<ul>
<li class="projetos-item">
<p> 📂 Portifolio</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="OJZawKV" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/OJZawKV">
Portifolio </a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 👽 About</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="LYmXryR" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/LYmXryR">
About</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 🃏 Top Trumps</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="wvjXqzY" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/wvjXqzY">
Top Trumps </a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 🏆 2022 World Cup Ranking<< /p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="GRdBzBL" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/GRdBzBL">
2022 World Cup Ranking</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 📺 NerdFlix</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="KKRGNwE" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/KKRGNwE">
NerdFlix</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 🔮 Angels of Atlantis Oracle</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="dyeqjoQ" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/dyeqjoQ">
Angels of Atlantis Oracle</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 🪐 Converter SkyWalker</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="mdLKRPP" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/mdLKRPP">
Converter SkyWalker</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 💰 Currency Converter</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="WNJyoVO" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/WNJyoVO">
Currency Converter</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 🎩 Mentalist Game</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="NWMzbYR" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/NWMzbYR">
Mentalist Game</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
<li class="projetos-item">
<p> 📊 Average Calculator</p>
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="rNvqQOy" data-user="fabiana-campanari" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/fabiana-campanari/pen/rNvqQOy">
Average Calculator</a> by Fabiana Campanari (<a href="https://codepen.io/fabiana-campanari">@fabiana-campanari</a>)
on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
</li>
</main>
</div>
</body>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>