Team Project
Review Request #30 — Created April 19, 2024 and updated
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 |
 Dararaksmey
|