codedamn

Creating video metadata panel

Created by Codedamn about a year ago

0

No description provided

1 Comment

    0

    FooterLeft.jsx import React from 'react' import './FooterLeft.css'

    function FooterLeft({ channel, description, song }) { return ( <div className="footer-left"> <div className="text"> <h3>@{channel}</h3> <p>{description}</p> <div className="ticker"> <MusicNoteIcon style={{ width: '30px' }} /> <marquee direction="left" scrollamount="2"> {song} </marquee> </div> </div> </div> ); }

    export default FooterLeft;

    **FooterLeft.css**
    .footer-left {
    position: relative;
    flex-grow: 1;
    color: white;
    pointer-events: none;
    display: flex;
    margin-left: 15px;
    margin-bottom: 30px;
    

    }

    .text { width: 100%; }

    .text h3, .text p { padding-bottom: 20px; }

    .ticker { height: fit-content; width: 60%; display: flex; align-items: center; }

    .ticker marquee { display: flex; align-items: center; }

    .video::before { content: ''; display: block; box-shadow: 0 -33px 48px rgba(0, 0, 0, 0.5) inset; width: 100%; pointer-events: none; z-index: 99; height: 100%; top: 0; left: 0; position: absolute; background: transparent; } Video.css .video { background-color: white; width: 100%; height: 100%; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); scroll-snap-align: start; position: relative; }

    .player { position: absolute; object-fit: fill; top: 0; left: 0; width: 100%; height: 100%; }

    .bottom-controls { display: flex; align-items: flex-end; height: 100%; }

    this is my implemntation for these practice but i can't pass those challenges only one challenge has been passed the rest are doesn't. So, What is wrong with it?
    
    @sewasew

    Desiyalew Haregu

    @sewasew

Your comment