diff --git a/web/.DS_Store b/web/.DS_Store
new file mode 100644
index 0000000..bd1ede9
Binary files /dev/null and b/web/.DS_Store differ
diff --git a/web/grid.png b/web/grid.png
new file mode 100644
index 0000000..fd7a502
Binary files /dev/null and b/web/grid.png differ
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 0000000..6fa1984
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,52 @@
+
+
+
+
+
+
+ Practical Vision
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ - element 1
+ - element 2
+ - element 3
+ - element 4
+ - element 5
+ - element 6
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/script.js b/web/script.js
new file mode 100644
index 0000000..e69de29
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..8211bb5
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,137 @@
+:root{
+ font-family: Arial, Helvetica, sans-serif;
+ --background-color: white;
+ --regular: 30px
+}
+
+body{
+ margin: 0 ;
+ height: 100vh;
+ width: 100vw;
+ background-color: var(--background-color);
+ background-image: url('grid.png');
+ background-size: 5cm;
+ overflow-y: hidden;
+}
+
+header{
+ z-index: 120;
+ position: absolute;
+ text-align: center;
+ transform: rotate(-13deg);
+ font-size: 7vw;
+ color: rgb(227, 224, 240);
+ margin: 0 10%;
+ animation: cycle 1s linear ;
+ color: rgba(0,0,0,0);
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+
+
+button{
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ display: inline-block;
+ padding: 0.5vw 1.5em;
+ color: blue;
+ font-size: var(--regular);
+ text-decoration: none;
+ margin-bottom: 1.5vw;
+ background-color: rgba(104, 96, 226, 0.164);
+ border-radius: 40px;
+ box-shadow: 3px 8px 20px rgba(78, 78, 219, 0.76);
+}
+
+nav{
+ z-index: 100;
+ padding: 20px;
+ margin: 0;
+ position: fixed;
+ display: flex;
+ -webkit-box-align: start;
+ align-items: flex-start;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ flex-direction: column;
+ z-index: 110;
+ color: blue;
+ height: 100%;
+ box-sizing: border-box;
+}
+
+#print{
+ color: red;
+ background-color: rgba(226, 96, 96, 0.164);
+ border-radius: 50px 4px;
+ box-shadow: 3px 8px 20px rgba(214, 29, 53, 0.76);
+ position: absolute;
+ bottom:1vw;
+ left:1vw;
+}
+
+.container {
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+.contents{
+ display: none;
+ z-index: 90;
+ background-color: white;
+ box-shadow: 1px 3px 90px 20px rgba(4, 14, 70, 0.76) ;
+ border: blue 0.5vw;
+ width: 70vw;
+ height: 70vh;
+ margin-left: 10vw;
+}
+
+.legenda{
+ columns: 2;
+ padding: 0.3vw;
+ z-index: 170;
+ border: black dashed 0.3vw;
+ width: 15%;
+ height: 15%;
+
+ position:absolute;
+ bottom:1vw;
+ right:1vw;
+}
+
+ul{
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: space-around;
+
+ padding: 0;
+ margin: 0;
+
+}
+
+li{
+ padding: 0;
+ margin: 0;
+ display: flex;
+ font-size: 1vw;
+/* align-content: stretch; */
+
+}
+
+
+
+@keyframes cycle {
+ 0% { text-shadow: rgb(43, 98, 201) 10px 10px 20px;}
+ 20% {color: darkblue;}
+ 40% {text-shadow:darkblue 10px 10px 20px;}
+ 60% {text-shadow: rgb(43, 98, 201) 10px 10px 200px;}
+ 80% { color: rgba(227, 224, 240,0);}
+ 90% {visibility: hidden;}
+ }
\ No newline at end of file