start screen - Githubissues

0xArina commented 4 years ago

[x] background
[x] title
[x] button

0xArina commented 4 years ago

AI file

0xArina commented 4 years ago

Will try to position everything using a test.html file

0xArina commented 4 years ago

HTML file

startScreenGif

0xArina commented 4 years ago

Links to the images used: logo: https://drive.google.com/drive/folders/1kqXeNDyDl7M-INFjKXKF4D87S-3KY34z title: https://drive.google.com/drive/folders/1kqXeNDyDl7M-INFjKXKF4D87S-3KY34z

0xArina commented 4 years ago

<!DOCTYPE html> <html> <head> <title>Start Screen test</title> <meta charset = "UTF-8"/> <style>

  @import url('https://fonts.googleapis.com/css?family=PT+Sans&display=swap');

    body{
        background-color: #D1C89D;
        text-align: center;
        margin-top: 5%;
    }   
    img{
        width: 80%;
        height: auto;
    } 
    #title{
        padding: 20px 20px;
    }
    button{
        background-color:black;
        opacity: 0.5;
        border: none;
        color: #D1C89D;
        text-align: center;
        text-decoration: none;
        width: 60%;
        height: 80px;
        font-size: 50px;
        font-family: 'PT Sans', sans-serif;
        box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.472), 0 17px 50px 0 rgba(0,0,0,0.19);
        /* to determine speed of the "hover" effect */
        transition-duration: 0.4s;
    }
    button:hover {
        opacity: 1
    }
    .responsive-width {
        font-size: 3vw;
    }
    #logo{
        padding: 40px 15px;
    }

</style> </head> `

<div id="title">
    <img src="title.png" alt="Artificium Venari"/> 
</div>

<button onclick="location.href='/objectAppears'" type="button" class="btn btn-default btn-lg btn-block responsive-width"> TO START PRESS HERE </button>

<div id="logo">
    <img src="logo.png" alt="Game by Sun Dog Studios"/>
</div>

</body>

</html>

0xArina commented 4 years ago

Shortened version:

0xArina commented 4 years ago

(probably need to delete "to")

EricLacey / BadWeather

start screen #60