-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
107 lines (102 loc) · 5.52 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unicorn Description</title>
<style>
.center {
display: flex;
flex-wrap: wrap; /* Allows items to wrap onto the next line */
justify-content: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
.model {
flex: 1 1 100%; /* Adjusts the basis to 100% on smaller screens */
max-width: 600px; /* Maximum width of each iframe */
height: 800px; /* Fixed height */
border: none;
margin: 10px;
}
h1 {
text-align: center;
color: purple;
}
p {
margin: 0 20px; /* Adds horizontal margin for better text alignment on small screens */
font-size: large;
line-height: 30px;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<audio id="myAudio" style="display: none;">
<source src="sound.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
<script>
window.onload = function() {
var audio = document.getElementById('myAudio');
audio.play()
.catch(error => console.log('Audio play failed:', error));
};
</script>
<div class="center">
<img src="Ludenso-logo.png" width="80%" height="auto" alt="Ludenso-logo">
<div style="text-align: center;">
<img src="https://www.pamperedponies.co.uk/wp-content/uploads/2018/06/Unicorn-Party7.jpg" width="80%" height="auto">
</div>
<h1>What is a Unicorn?</h1>
<p style="margin-bottom: 30px;">Unicorns are mythical creatures depicted as horses with a single, spiraling horn on their foreheads. Known for their pure white coats, unicorns symbolize purity, grace, and magical powers such as healing and neutralizing poison. Legends often state that only those who are pure of heart can interact with these majestic beings.</p>
<p>The anatomy of a unicorn, a mythical creature from folklore and literature, combines equine and fantastical elements.
Traditionally described as horse-like with a single spiraled horn, or alicorn, unicorns possess unique anatomical features. The alicorn, made of a keratin-like substance, is believed to have magical properties such as purifying water and healing ailments. It is structurally integrated into the unicorn's skull, supported by a robust cranial base.
</p>
<div style="height:400px; width:90%; overflow: hidden; margin: 30px">
<iframe src="https://ludensoexplore.com/ModelViewer/?experienceUid=42d291b0-2370-447d-b5d3-08dc8eaf0d6a&enrichmentUid=b6b359d8-b292-4623-bc84-8a7bad901560"
title="horse"
style="height:100%; width:100%; border:none;" <!-- Ensures no border around the iframe -->
scrolling="no"
allowfullscreen>
</iframe>
</div>
<img src="Horse_QR.png" alt="Horse QR code" style="height:200px; width:200px">
<br>
<p>Young unicorns do not possess their iconic horns at birth. Instead, they must embark on a quest or series of trials to earn and grow their horns. These quests are designed to test the unicorn's purity, courage, and wisdom. During their journey, unicorns may face challenges that require them to demonstrate kindness, empathy, and resilience.</p>
<div style="height:400px; width:90%; overflow: hidden; margin: 30px">
<iframe src="https://ludensoexplore.com/ModelViewer/?experienceUid=649bfa73-a016-4e5e-b5d1-08dc8eaf0d6a&enrichmentUid=55d688d3-d072-422b-8cdd-b0745c84fa7e"
title="Unicorn 3D model viewer"
style="height:100%; width:100%; border:none;" <!-- Ensures no border around the iframe -->
scrolling="no"
allowfullscreen>
</iframe>
</div>
<img src="anatomy.png" alt="Horse QR code" style="height:200px; width:200px">
<p>Unicorns have a powerful build similar to horses, with well-developed limbs and a strong neck. Their efficient cardiovascular and respiratory systems enable swift, enduring movement. Their skin is often depicted as smooth and radiant, possibly serving as camouflage or protection.
</p>
<br>
<div style="height:400px; width:90%; overflow: hidden; margin: 30px">
<iframe src="https://ludensoexplore.com/ModelViewer/?experienceUid=ee2cb3dc-d76d-492a-b5d2-08dc8eaf0d6a&enrichmentUid=3d85caba-ac25-42cf-9d6b-304815158101"
title="skull horse"
style="height:100%; width:100%; border:none;" <!-- Ensures no border around the iframe -->
scrolling="no"
allowfullscreen>
</iframe>
</div>
<img src="skull_horse.png" alt="Horse QR code" style="height:200px; width:200px">
<br>
<iframe src="https://ludensoexplore.com/?downloadExperienceUid=6993ad15-8976-4729-b5cf-08dc8eaf0d6a&quizUid=66d08168-164e-4063-d66a-08dc8ebb94f4"
title="Anatomy of a Unicorn"
style="background: none transparent; border: none; overflow: hidden; width: 600px; height: 800px"
scrolling="no"
allow="*"
allowtransparency="true"
allowfullscreen>
</iframe>
</div>
</body>
</html>