-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (117 loc) · 5.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FreeCodeCamp Projects</title>
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<ul id="navlist">
<li>
<a class="nav-link" href="#matutu">Landing Page</a>
</li>
<li>
<a class="nav-link" href="#tribute">Tribute Page</a>
</li>
<li>
<a class="nav-link" href="#survey">Survey Form</a>
</li>
<li>
<a class="nav-link" href="#portifolio">Personal Portifolio</a>
</li>
<li>
<a class="nav-link" href="#calculator">JS Calculator</a>
</li>
<li>
<a class="nav-link" href="#drum">Drum Machine</a>
</li>
<li>
<a class="nav-link" href="#markdown">Markdown Previewer</a>
</li>
<li>
<a class="nav-link" href="#quotes">Random Quotes Generator</a>
</li>
<li>
<a class="nav-link" href="#bar-chart">Bar Chart</a>
</li>
<li>
<a class="nav-link" href="#scatterplot">Scatterplot Graph</a>
</li>
<li>
<a class="nav-link" href="#heatmap">Scatterplot Graph</a>
</li>
<li>
<a class="nav-link" href="#choroplethMap">Choropleth Map</a>
</li>
<li>
<a class="nav-link" href="#treemapDiagram">Treemap Diagram</a>
</li>
</ul>
</nav>
<main>
<h1 id="header">FreeCodeCamp Projects</h1>
<section class="projects-section">
<div id="projects-grid">
<a id="matutu" class="project project-tile" href="./matutu-landing-page/index.htm" target="_blank">
<img class="project-image" src="./matutu-landing-page/img/marca-04.png" alt="Matutu Logo">
<p class="project-title">Matutu Landing page</p>
</a>
<a id="tribute" class="project project-tile" href="./tribute-page/index.html" target="_blank">
<img class="project-image" src="./tribute-page/img/ernst-gotsh.jpg" alt="Ernst Gotsh">
<p class="project-title">Ernst Götsh Tribute</p>
</a>
<a id="survey" class="project project-tile" href="./survey-form/index.html" target="_blank">
<img class="project-image" src="./survey-form/img/beans.jpg" alt="Beans">
<p class="project-title">Survey Form</p>
</a>
<a id="portifolio" class="project project-tile" href="./portifolio-page/index.html" target="_blank">
<img class="project-image" src="./portifolio-page/img/programing.png" alt="programming">
<p class="project-title">Personal Portifolio</p>
</a>
<a id="calculator" class="project project-tile" href="./js-calculator/index.html" target="_blank">
<img class="project-image" src="./images/calculator.png" alt="JS Calculator">
<p class="project-title">JS Calculator</p>
</a>
<a id="drum" class="project project-tile" href="./drum-machine/index.html" target="_blank">
<img class="project-image" src="./images/drum.png" alt="Drum Machine">
<p class="project-title">Drum Machine</p>
</a>
<a id="markdown" class="project project-tile" href="./markdown-previewer/index.html" target="_blank">
<img class="project-image" src="./images/markdown.png" alt="Markdown Previewer">
<p class="project-title">Markdown Previewer</p>
</a>
<a id="quotes" class="project project-tile" href="./random-quote-generator/index.html" target="_blank">
<img class="project-image" src="./images/quotes.png" alt="Random Quotes Generator">
<p class="project-title">Random Quotes Generator</p>
</a>
<a id="bar-chart" class="project project-tile" href="./bar-chart/index.html" target="_blank">
<img class="project-image" src="./images/bar-chart.png" alt="Bar Chart">
<p class="project-title">Bar Chart</p>
</a>
<a id="scatterplot" class="project project-tile" href="./scatterplot-graph/index.html" target="_blank">
<img class="project-image" src="./images/scatter-plot.png" alt="Scatterplot Graph">
<p class="project-title">Scatterplot Graph</p>
</a>
<a id="heatmap" class="project project-tile" href="./heat-map/index.html" target="_blank">
<img class="project-image" src="./images/heat-map.png" alt="Heat Map">
<p class="project-title">Heat Map</p>
</a>
<a id="choroplethMap" class="project project-tile" href="./choropleth-map/index.html" target="_blank">
<img class="project-image" src="./images/choropleth-map.png" alt="Choropleth Map">
<p class="project-title">Choropleth Map</p>
</a>
<a id="treemapDiagram" class="project project-tile" href="./treemap-diagram/index.html" target="_blank">
<img class="project-image" src="./images/treemap-diagram.png" alt="Treemap Diagram">
<p class="project-title">Treemap Diagram</p>
</a>
</div>
</section>
</main>
</body>
</html>