soundCards/style.css at main · scnkera/soundCards · 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
body{
    /* margin: 0 auto; */
    padding: 25px;
    background: linear-gradient(0deg, rgba(254,254,253,1) 0%, rgba(242,232,207,1) 100%);
    height: 100%;
    /* min-width: 600px; */
}

#instructions{
    font-family: "Roboto Slab", cursive;
    font-weight: bold;
    font-style: italic;
    h1{
        font-size: 50px;
        font-weight: bold;
        text-shadow: 1px 1px rgb(101, 79, 27);
    }
    p{
        font-size: 25px;
    }
}

.col-4{
    height: 350px;
    padding: 20px 10px;
}

.sound-card{
    border: 1px solid rgb(228, 206, 154);
    width: 100%;
    height: 100%;
    border-radius: 25px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    /* background image styling */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.sound-card:hover {
    transform: scale(1.1);
}

#cat_button {
    background-image: url("./static/cat-img.png");
}

#dog_button {
    background-image: url("./static/dog-img.png");
}

#lion_button {
    background-image: url("./static/lion-img.png");
}

#lightning_button {
    background-image: url("./static/lightning-img.png");
}

#rain_button {
    background-image: url("./static/rain-img.png");
}

#tornado_button {
    background-image: url("./static/tornado-img.png");
}