DLithe/t3.html at main · theziya/DLithe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!-- Web Series.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Series - Netflix</title>
    <style>
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #111;
            color: rgb(230, 20, 20);
        }

        header {
            padding: 1rem;
            background-color: #111;
            text-align: center;
        }

        nav {
            background-color: #111;
            padding: 10px;
            text-align: center;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
        }

        nav ul li {
            margin: 0 20px;
        }

        nav ul li a {
            text-decoration: none;
            color: white;
            font-weight: bold;
            font-size: 16px;
        }

        section {
            padding: 20px;
            text-align: left;
        }

        section h2 {
            margin-bottom: 20px;
        }

        .movie-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
            justify-content: center;
        }

        .movie-card {
            width: 200px;
            background-color: #333;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            transition: transform 0.3s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .movie-card:hover {
            transform: scale(1.05);
        }

        .movie-card img {
            width: 100%;
            height: 280px;
            object-fit: cover;
            border-bottom: 2px solid #e50914;
        }

        .movie-card h3 {
            padding: 10px;
            font-size: 14px;
        }

        footer {
            text-align: center;
            padding: 1rem;
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #111;
        }
    </style>
</head>
<body>

    <header>
        <h1>Netflix</h1>
    </header>

    <nav>
        <ul>
            <li><a href="C:\Users\ZIYA\OneDrive\Desktop\new.html">Home</a></li>
            <li><a href="C:\Users\ZIYA\OneDrive\Desktop\dlithe\DLithe\frontend-development\t2.html">Movies</a></li>
            <li><a href="#t3">Web Series</a></li>
        </ul>
    </nav>

    <section id="Web Series">
        <h2>Web Series</h2>
        <div class="movie-container">
            <!-- Example Movie Card -->
            <div class="movie-card">
                <img src="c:\Users\ZIYA\Saved Games\Downloads\WhatsApp Image 2023-11-27 at 12.29.59 PM (3).jpeg" alt="Movie Title">
                <h3>Movie Title</h3>
            </div>
            <!-- Add more movie cards as needed -->
        </div>
    </section>

    <footer>
        <p>&copy; 2023 Netflix</p>
    </footer>
</body>
</html>