MrGithubby / MusicBoxProject

0 stars 0 forks source link

Add "Do you Know this Song" Widget #30

Closed MrGithubby closed 2 months ago

Ashleighjg commented 2 months ago

Image

Ashleighjg commented 2 months ago

HTML

Information:

Song Name

Artist Name

CoverArt/Img

Genre

Release date

Album name

    <section class="question-box pure-u-1 pure-u-md-3-4">
        <div class="next-buttons">
            <button class="button-xlarge pure-button">Get another Random song -></button>
            <br>
            <br>
            <button class="button-xlarge pure-button">Look at your saved playlist -></button>
        </div>
        <div class="question-widget">
            <div class="content pure-u-md--5">
                <h2 class="widget-subhead">Do you know this song?:</h2>
                <div class="YesNo-buttons">
                    <button class="button-secondary pure-button">Yes</button>
                    <button class="button-secondary pure-button">No</button>
                </div> 
            </div>
        </div>         
    </section>

.button-secondary { background: rgb(66, 184, 221); }

.button-xlarge { background: rgb(66, 184, 221);

}

.widget-subhead { text-transform: uppercase; color: #292828; border-bottom: 1px solid #eee; padding: 0.4em 0; font-size: 80%; font-weight: 500; letter-spacing: 0.1em; }

.question-widget { text-transform: uppercase; padding: .5em; border: 1px solid black; font-family: Georgia, "Cambria", serif; line-height: 1.8em; font-size: 90%; margin:0 40px; color: black; background: rgb(225, 227, 228); width: 400px; height: 170px

}

.photo-box { position: relative; float: right; width: 200px; height: 200px; background: rgb(225, 227, 228); border: 1px solid black; }

.next-buttons { position: relative; float: right; }

Ashleighjg commented 2 months ago

https://github.com/MrGithubby/MusicBoxProject/pull/40