-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
128 lines (102 loc) · 12.7 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
<!DOCTYPE html>
<html>
<head>
<meta name="google-site-verification" content="FhT_z4Z8wlxj2ie9N37_IrdNQgZq8Mw3UXjdxzwVVQI" />
<meta name="theme-color" content="#bfd9cd" />
<meta name="viewport" content="initial-scale=0.1" />
</head>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link type="text/css" rel="stylesheet" href="https://samuelsellberg.github.io/style.css" />
<!-- <link type="text/css" rel="stylesheet" href="temp.css" /> -->
<link type="text/css" rel="stylesheet" href="style_H.css" />
<link href='https://fonts.googleapis.com/css?family=Prosto One' rel='stylesheet'>
<link rel="icon" type="image/x-icon" href="https://samuelsellberg.github.io/docs/assets/vectors/favicon.ico">
<body style="background: linear-gradient(to bottom right, #dfeae8, #bfd9cd); padding-left: 0; padding-right: 0">
<!-- Navbar -->
<div class="w3-top">
<div class="w3-bar w3-theme-H w3-wide w3-padding w3-card">
<a href="https://samuelsellberg.github.io/" class="w3-bar-item w3-button-H">
Samuel
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 87.988 182.813" height="30" style="vertical-align: middle">
<defs>
<clipPath id="_clipPath_UpCxxHGP2u3lraipHigpRsq4IVr8FGZd">
<rect width="87.988" height="182.813" />
</clipPath>
</defs>
<g clip-path="url(#_clipPath_UpCxxHGP2u3lraipHigpRsq4IVr8FGZd)">
<path d=" M 11.829 61.415 C 4.49 69.269 0 79.818 0 91.406 L 0 91.406 C 0 111.002 12.711 130.654 33.301 140.625 L 33.301 140.625 L 47.559 147.559 L 47.559 147.559 Q 56.836 152.051 59.863 156.055 L 59.863 156.055 L 59.863 156.055 Q 62.988 159.961 62.988 165.43 L 62.988 165.43 L 62.988 165.43 Q 62.988 169.824 58.789 173.438 L 58.789 173.438 L 58.789 173.438 Q 54.59 177.051 47.754 177.051 L 47.754 177.051 L 47.754 177.051 Q 38.77 177.051 32.959 171.875 L 32.959 171.875 L 32.959 171.875 Q 27.148 166.699 23.438 152.344 L 23.438 152.344 L 20.215 152.344 L 20.215 182.813 L 23.438 182.813 L 23.438 182.813 Q 24.609 180.469 25.488 179.785 L 25.488 179.785 L 25.488 179.785 Q 26.367 179.102 27.93 179.102 L 27.93 179.102 L 27.93 179.102 Q 29.59 179.102 34.57 180.566 L 34.57 180.566 L 34.57 180.566 Q 42.09 182.812 47.363 182.813 L 47.363 182.813 L 47.363 182.813 Q 59.375 182.812 66.943 175.391 L 66.943 175.391 L 66.943 175.391 Q 74.512 167.969 74.512 156.934 L 74.512 156.934 L 74.512 156.934 Q 74.512 148.437 70.117 142.871 L 70.117 142.871 L 70.117 142.871 Q 66.719 138.49 57.478 133.292 C 75.172 127.593 87.988 110.984 87.988 91.406 L 87.988 91.406 C 87.988 71.811 75.277 52.158 54.688 42.188 L 54.688 42.188 L 40.43 35.254 L 40.43 35.254 Q 31.152 30.762 28.125 26.758 L 28.125 26.758 L 28.125 26.758 Q 25 22.852 25 17.383 L 25 17.383 L 25 17.383 Q 25 12.988 29.199 9.375 L 29.199 9.375 L 29.199 9.375 Q 33.398 5.762 40.234 5.762 L 40.234 5.762 L 40.234 5.762 Q 49.219 5.762 55.029 10.938 L 55.029 10.938 L 55.029 10.938 Q 60.84 16.113 64.551 30.469 L 64.551 30.469 L 67.773 30.469 L 67.773 0 L 64.551 0 L 64.551 0 Q 63.379 2.344 62.5 3.027 L 62.5 3.027 L 62.5 3.027 Q 61.621 3.711 60.059 3.711 L 60.059 3.711 L 60.059 3.711 Q 58.398 3.711 53.418 2.246 L 53.418 2.246 L 53.418 2.246 Q 45.898 0 40.625 0 L 40.625 0 L 40.625 0 Q 28.613 0 21.045 7.422 L 21.045 7.422 L 21.045 7.422 Q 13.477 14.844 13.477 25.879 L 13.477 25.879 L 13.477 25.879 Q 13.477 34.375 17.871 39.941 L 17.871 39.941 L 17.871 39.941 Q 21.27 44.322 30.51 49.52 C 40.324 55.214 52.731 58.223 62.86 65.639 C 79.173 77.582 83.963 98.825 73.551 113.046 C 63.139 127.268 41.441 129.117 25.129 117.174 C 8.816 105.23 4.025 83.988 14.437 69.766 C 14.809 69.258 15.196 68.766 15.595 68.29 Q 16.783 67.006 17.728 66.697 L 17.728 66.697 L 17.728 66.697 Q 25.071 64.121 39.427 67.829 L 39.427 67.829 L 40.988 65.01 C 27.174 59.255 18.299 54.345 14.334 50.249 L 12.773 53.068 L 12.773 53.068 Q 14.255 55.229 14.428 56.329 L 14.428 56.329 L 14.428 56.329 Q 14.6 57.429 13.843 58.796 L 13.843 58.796 L 13.843 58.796 Q 13.064 59.914 11.829 61.415 Z " fill="currentColor" />
</g>
</svg>
Sellberg
</a>
<!-- Float links to the right. Hide them on small screens -->
<div class="w3-right w3-hide-small">
<a href="About3D.html" class="w3-bar-item w3-button-H">About 3D<svg width="0" height="30" style="vertical-align: middle"></svg></a>
<a href="Vision.html" class="w3-bar-item w3-button-H">Vision<svg width="0" height="30" style="vertical-align: middle"></svg></a>
<a href="Posibilities.html" class="w3-bar-item w3-button-H">Posibilities<svg width="0" height="30" style="vertical-align: middle"></svg></a>
<a href="Investment.html" class="w3-bar-item w3-button-H">Investment<svg width="0" height="30" style="vertical-align: middle"></svg></a>
</div>
</div>
</div>
<div class="w3-bar w3-theme w3-wide w3-padding">
</div>
<!-- Header -->
<header class="w3-display-container w3-wide" id="home" align="center">
<svg width="10" height="20" style="background-color: #ffffff00"></svg>
<img id="frontParallax" class="w3-image w3-wide parallax" src="assets/images/H_front.jpg" data-upperoffset="20" data-loweroffset="0">
<div class="w3-display-middle w3-margin-top w3-center" style="left: 25%; top: 30%; position: absolute">
<h1 class="w3-xxlarge w3-text-white">
<svg width="500px" style="position: absolute">
<rect x="0" y="120" height="8px" width="500px" style="fill: #77eebe; filter: drop-shadow( 0px 2px 2px #0007)"/>
<img width="500px" src="assets/vectors/HoloscreenLogoText2.svg" style="filter: drop-shadow( 0px 2px 2px #0007)"/>
<h1 class="H_text"><br>bringing Imagination<br>to Reality</h1>
</svg>
</h1>
</div>
</header>
<!-- Page content -->
<rect class="w3-black" />
<div class="w3-content w3-padding" style="max-width:1564px" align="center">
<div height="400px">
<p>
<br>
<img id="H_topLogo" width="300px" src="assets/vectors/Holoscreen.svg"/>
</p>
</div>
<h1 class="H_bigText" align="center">
Technological development is moving faster than ever and real life holographic 3D imaging is just around the corner. Meet Holoscreen; a new technology for 3D depth perception suited for all iterations of media and design. Holoscreen is a revolutionary screen technology that works just like any ordinary screen, but with the ability of unlocking an entire new dimension. <br>A screen technology that is <i>bringing Imagination to Reality</i>.
</h1>
<div align="center">
<div id="phoneDiv" width="616px" height="297px" class="H_container" align="center">
<img id="phoneScreen" class="H_screen parallax" src="assets/images/Wulingyuan2.jpg" data-upperoffset="0" data-loweroffset="-50">
<img class="H_mask" src="assets/images/Phone.png">
</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!
</p>
</div>
<div class="w3-wide" align="center">
<img class="w3-image w3-wide" src="assets/images/chess2.jpg" alt="Chess on Holoscreen Tablet" width="max" style="padding: 0px"/>
</div>
<div class="w3-content w3-padding" style="max-width:1564px" align="center"></div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!
</p>
<div align="center">
<div id="tvDiv" class="H_container" align="center">
<img id="tvScreen" class="H_screen parallax" src="assets/images/Castle.jpg" data-upperoffset="0" data-loweroffset="-50">
<img width="1500px" class="H_mask" src="assets/images/TVwStrip.png" align="center">
</div>
</div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia, molestiae quas vel sint commodi repudiandae consequuntur voluptatum laborum numquam blanditiis harum quisquam eius sed odit fugiat iusto fuga praesentium optio, eaque rerum! Provident similique accusantium nemo autem. Veritatis obcaecati tenetur iure eius earum ut molestias architecto voluptate aliquam nihil, eveniet aliquid culpa officia aut! Impedit sit sunt quaerat, odit, tenetur error, harum nesciunt ipsum debitis quas aliquid. Reprehenderit, quia. Quo neque error repudiandae fuga? Ipsa laudantium molestias eos sapiente officiis modi at sunt excepturi expedita sint? Sed quibusdam recusandae alias error harum maxime adipisci amet laborum. Perspiciatis minima nesciunt dolorem! Officiis iure rerum voluptates a cumque velit quibusdam sed amet tempora. Sit laborum ab, eius fugit doloribus tenetur fugiat, temporibus enim commodi iusto libero magni deleniti quod quam consequuntur! Commodi minima excepturi repudiandae velit hic maxime doloremque. Quaerat provident commodi consectetur veniam similique ad earum omnis ipsum saepe, voluptas, hic voluptates pariatur est explicabo fugiat, dolorum eligendi quam cupiditate excepturi mollitia maiores labore suscipit quas? Nulla, placeat. Voluptatem quaerat non architecto ab laudantium modi minima sunt esse temporibus sint culpa, recusandae aliquam numquam totam ratione voluptas quod exercitationem fuga. Possimus quis earum veniam quasi aliquam eligendi, placeat qui corporis!
</p>
<div class="w3-container w3-padding-32" id="ending" align="center">
<img src="https://samuelsellberg.github.io/docs/assets/vectors/Sigill%20-%20white.svg" alt="Samuel Sellberg Sigill" height="50" />
</div>
</div>
</body>
<script type="text/javascript" src="https://samuelsellberg.github.io/script.js"></script>
<!-- <script type="text/javascript" src="temp.js"></script> -->
</html>