Team Project

Review Request #30 — Created April 19, 2024 and updated

Information

test1-lin

Reviewers

Netflix Hover card

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover</title>
<link rel="stylesheet" href="../src/css/test/o-test1-lin.css">
</head>
<body>
<div class = "container">
<div class="thumbnail">
<img src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABag5LVqOpq1g_7V8t1p3mtvuq0Ack7_uRh115F3FA24_9zLKlKz45skWHzLKacHdFNRKCQ4RxsQaez5ox1LnWBqy7anjGZAxES0.webp?r=615" alt=" The flash"/>
</div>
<div class="cards">
<ul>
<div>
<li>
<img class="card1" src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABaCW6OKjkartIKvcC3qDSntX8wZyJOPkob3AV4I-43AbBLTfPVYJbvh1U6dm6uXi_dOV4vF2MBv4Du0dtccsaC1_0OtYYt27HYA.webp?r=c00 " alt="Hotel Transylvania3"/>
</li>

                <li>
                    <img class="card2" src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABdgzd-qDTW-wijUOhdYDJVupaoznG9aqG5NV1aE7qtTlvwOUiHaAVy5JExMyeptWZd9ZQ1EW6sLaa4uMLMH6270bL2fIulDrHtj-ifuMoxskoNOkG1rdrafW03aF_OBp3AKu.jpg?r=3ec" alt="BloodHounds"/>
                </li>

                <li>
                    <img class="card3" src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABf674lqN8RakPsm0QaaxepYUyXdSilV_NEdCIO5iHs8FEPJ9TtAt69dycqglBSBeXrpbdUE7zgZnrKf0J4jNTgwR8GLCSZRB-yg.webp?r=52e"alt="The batman"/>
                </li>

                <li>
                    <img class="card4" src="https://occ-0-64-58.1.nflxso.net/dnm/api/v6/Qs00mKCpRvrkl3HZAN5KwEL1kpE/AAAABR_tdJxgviYmjxHTq8kU7qncjzCey5MTxAShdMfbv12cL2XiwXNfwwrXMQQ-WiqmkxiLZtCvF8lXpf-NtoQmeebfDxFFOuELlaw.webp?r=b9e" alt="Black ADAM"/>
                </li>
            </div>
        </ul>
    </div>
</div>

</body>
</html>

test1-lin.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

body{
background-color: black;
}

.thumbnail img{
height: 700px;
width: 1920px;
}

.cards ul{
list-style-type: none;
display: inline-block;

}

.cards li{
display: inline-block;
position: relative;
margin-right: 7px;
top: -50px;
cursor: pointer;
}
li:hover{
opacity: 1;
}

.card1{
padding-left: 60px;
}

Description From Last Updated

Keep up a good work lin and try your besy

DararaksmeyDararaksmey
Dararaksmey
  1. 
      
    1. I have seen and review the code.

  2. Keep up a good work lin and try your besy

  3. 
      
Loading...