Spaces:
Sleeping
Sleeping
| *{ | |
| box-sizing:border-box; | |
| } | |
| body{ | |
| margin:0; | |
| background:#0f0f0f; | |
| color:white; | |
| font-family: | |
| Arial, sans-serif; | |
| } | |
| .top{ | |
| padding:20px; | |
| border-bottom: | |
| 1px solid #333; | |
| text-align:center; | |
| } | |
| .top h2{ | |
| margin:0; | |
| font-size:28px; | |
| } | |
| .top a{ | |
| color:#00ff99; | |
| text-decoration:none; | |
| } | |
| .container{ | |
| max-width:1300px; | |
| margin:auto; | |
| padding:25px; | |
| } | |
| .search{ | |
| width:100%; | |
| padding:15px; | |
| border-radius:30px; | |
| border:none; | |
| font-size:16px; | |
| margin:20px 0; | |
| } | |
| .videos{ | |
| display:grid; | |
| grid-template-columns: | |
| repeat(auto-fill,minmax(280px,1fr)); | |
| gap:25px; | |
| } | |
| .video-card{ | |
| background:#181818; | |
| border-radius:15px; | |
| overflow:hidden; | |
| transition:.3s; | |
| } | |
| .video-card:hover{ | |
| transform:scale(1.03); | |
| } | |
| .video-card a{ | |
| color:white; | |
| text-decoration:none; | |
| } | |
| .thumbnail{ | |
| height:160px; | |
| background: | |
| linear-gradient( | |
| 135deg, | |
| #222, | |
| #000 | |
| ); | |
| display:flex; | |
| justify-content:center; | |
| align-items:center; | |
| font-size:60px; | |
| } | |
| .video-card h3{ | |
| padding:15px; | |
| font-size:17px; | |
| } | |
| .watch{ | |
| max-width:1100px; | |
| margin:auto; | |
| padding:20px; | |
| } | |
| .video-container{ | |
| width:100%; | |
| } | |
| video{ | |
| width:100%; | |
| max-height:650px; | |
| background:black; | |
| border-radius:15px; | |
| } | |
| .watch h1{ | |
| font-size:25px; | |
| margin-top:20px; | |
| } | |
| .creator{ | |
| color:#aaa; | |
| } | |
| hr{ | |
| border-color:#333; | |
| } | |
| @media(max-width:600px){ | |
| .watch{ | |
| padding:10px; | |
| } | |
| video{ | |
| border-radius:8px; | |
| } | |
| } |