Landing-Page/index.html at main · BaconSawl/Landing-Page · GitHub

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
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <link rel="preload" fetchpriority="high" as="image" href="img/HaruUrara.png" type="image/webp">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="desciption" content="Made by: BaconSawl, for TheOdinProject, with Haru Urara theme!">
    <title>Haru Urara Ganbaru!</title>
    <link rel="icon" type="iamge/x-icon" href="img/HaruUraraChibi.png">
</head>

<body>
        <div class="header">
            <div class="LeftContainer">
                <div class="LogoContainer">
                    <img class="logo" src="img/Haru.png" alt="Sleeping Haru Urara">
                </div>
            </div>

            <div class="RightContainer">
                    <a href="https://umamusu.wiki/Haru_Urara" target="_blank">About Urara</a>
                    <img class="separator" src="img/Clover_icon.png" alt="Clover">
                    <a href="https://umamusume.com/news/" target="_blank">News</a>
                    <img class="separator" src="img/Clover_icon.png" alt="Clover">
                    <a href="https://umamusu.wiki/List_of_Characters" target="_blank">More Characters</a>
                    <img class="separator" src="img/Clover_icon.png" alt="Clover">
            </div>
        </div>

        <div class="layer1">
            <div class="bg"></div>
            <div class="layer1-container">
                <div class="layer1Left">
                    <h1>Introducing Haru Urara</h1>
                    <p>Though not blessed with much talent, she never gives up or loses her smile! Her boundless positive energy brightens the day for everyone around her.</p>
                    <button class="btn">Ooh La La~</button>
                </div>

                <div class="layer1Right">
                    <img class="layer1Image" src="img/HaruUrara.png" alt="Uraran Ittoushou♪">
                </div>
            </div>

        </div>
<div id="testColor">
        <div class="layer2">
            <div class="layer2-wrapper">
                <h1>Why don't you come down and horse-racing with your life on the line ?
                    We've got:</h1>
                <div class="cards-block">
                    <div class="card">
                        <a href="https://umamusume.com/" target="_blank"><img src="img/Gambling.jpg" alt="Horse Gambling"></a>
                        <div>
                            <p>Gambling!</p>
                        </div>
                    </div>
                    <div class="card">
                        <a href="https://www.reddit.com/r/UmaMusume/search/?q=flair%3AFanart&type=media&cId=a8c3e8ed-cce9-40d5-b2f3-475ed3efb495&iId=c3dfcfc1-73f9-4f68-926b-5c85f900bf33" target="_blank"><img src="img/Fanart.jpg" alt="Fanart"></a>
                        <div>
                            <p>Fanart!</p>
                        </div>
                    </div>
                    <div class="card">
                        <a href="https://youtu.be/CpKi1BKLNY0?si=5RN92tnhOJubuQRI" target="_blank"><img src="img/Music.gif" alt="Music"></a>
                        <div>
                            <p>Music!</p>
                        </div>
                    </div>
                    <div class="card">
                        <a href="https://www.reddit.com/r/UmaMusume/search/?q=flair%3AHumor&type=media&cId=6f60f342-4dc5-42ec-ba02-9986bf3a0582&iId=1a89e7e6-ba4b-40f1-856c-15894272e011" target="_blank"><img src="img/Humor.jpg" alt="Mango"></a>
                        <div>
                            <p>Humor!</p>
                        </div>
                    </div>
                    <div class="card">
                        <a href="img/Dontyoudare.webp"><img src="img/Interesting.webp" alt="Interesting Stuff"></a>
                        <div>
                            <p>Interesting Stuff...</p>
                        </div>
                    </div>
                    <div class="card">
                        <a href="https://vimeo.com/showcase/3932978?video=176459945" target="_blank"><img src="img/HaruDoc.jpeg" alt="Haru Urara's Documentary"></a>
                        <div>
                            <p>Special Documentary!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layer3">
            <div class="layer3-wrapper">
            <img class="stamp" src="img/UraraStamp.png" alt="LINE Haru Urara stamp">
                <div class="quote">
                    <p><br>
                        If society valued only winning, then life is constant competition.
                        Winners and losers. It's war.
                        If you feel you gave it your all and then lost, you should still be commended.
                        There are horses that don't try very hard.
                        <img class="chibi" src="img/HaruUraraChibi.png" alt="Haru Urara chibi">
                        <br>
                        <span style="color: white;font-weight: bold;-webkit-text-stroke: 5px #b84776; paint-order: stroke fill ;">Urara would always try till the end.</span>

                    </p>

                </div>
                <div class="author">
                    <p>- Dai Muneishi, Haru Urara Trainer</p>
                </div>
            </div>
        </div>

        <div class="layer4">
            <div class="layer4-wrapper">
                <div class="cta">
                    <h1>Call to action! It's time!</h1>
                    <p>Hang in there, Haru Urara! Hang in there! Haru Urara's first win is near!</p>
                </div>

                <a href="https://umamusume.com/" target="_blank"><button class="SignUpBtn">Join The Race!</button></a>

            </div>
        </div>
</div>

        <div class="footer">
            <p>Copyright © BaconSawl 2025</p>
        </div>

</body>
</html>