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 + + + + + + + +
+

PRACTICAL
VISIONS

+
+ +
+ +
+ +
+ +
+ +
+
+

daghe

+
+
+ + + + + + \ 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