Create A Movie website using Html and Css with source code

By /

In today’s blog we will create a movies website like Moviesmod using HTML and CSS.

Here is the Html code

01. HTML Code :-

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MoviesMod</title>
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<header>
    <div class="header">
        <a><img src="moviesmodnew-Custom.png" alt="moviesmod"></a>
        <div class="search"> <input type="text" class="input" placeholder="Search...">
            <button class="btn">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>
</header>

<body>
    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/KzpvC4zL/image.jpg" alt="anime"></a>
            <div class="content">
                <a
                    href="post/001.html">Download
                    Night of the Living Dead Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/d1ZVPwTx/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download The Last Man on Earth Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/6Qy9ntzp/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download His Girl Friday Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/WzpYqb69/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download The General Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/NjQ8gPD4/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download The Phantom of the Opera Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/J0cyvMfW/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download Abraham Lincoln Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/T1Cdn18h/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download Angel and the Badman Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/h4yR8HzJ/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download Carnival of Souls Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/mrGv24qn/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download Charade Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/bJ8fLnjL/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download Gulliver's Travels Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/jqMYQC3Q/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download Popeye the Sailor Meets Sindbad the Sailor Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="image">
            <a
                href="post/001.html"><img
                    src="https://i.postimg.cc/76Bt7JP5/image.jpg" alt="anime"></a>
            <div class="content">
                <a href="post/001.html"
                    >Download The Hitch-Hiker Esubs WEB-DL 480p [270MB] ||
                    720p [740MB] || 1080p [1.8GB]</a>
            </div>
        </div>
    </div>
</body>

</html>
<footer>
    <div class="footer">
        <ul class="list">
            <a href="">Home</a>
            <a href="">Contact</a>
            <a href="">About Me</a>
        </ul>
    </div>
</footer>

And here’s the css code

02. CSS Code :-

* {
    padding: 0;
    margin: 0;
}

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px;
    background-image: url('wallpaperflare.com_wallpaper\ \(7\).jpg');
    background-size:cover;
    background-attachment:scroll;
    
}

header {
    background-color: rgb(17, 17, 17);
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: -10px;
    margin-bottom: 10px;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
}

.header {
    width: 220px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.header a:first-child {
    text-decoration: none;
    opacity: 1;
    justify-content: center;
}

.search .btn:hover {
    color: #fffbfb;
}

.search {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.search .input[type=text] {
    display: flex;
    padding: 6px;
    margin-top: 8px;
    font-size: 17px;
    border: none;
    border-radius: 3px;
}

.search .btn {
    display: flex;
    float: right;
    margin-top: 6px;
    padding: 7px;
    background: #8d8989;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 3px;
}


@media screen and (max-width: 00px) {
    .search-container {
        float: none;
    }

    .search .input[type=text],
    .search button {
        float: none;
        display: flex;
        text-align: left;
        width: 100%;
        margin: 0;
        padding: 15px;
    }
}

.card {
    border-radius: 7px;
    margin: 8px;
    background-color: rgb(22, 23, 24);
    width: 160px;
}

.image img {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    width: 160px;
}

.content {
    font-size: large;
    color: white;
    text-align: center;
    margin: 12px;
}

a:link,
a:visited {
    color: white;
    text-decoration: none;
}

a:hover {
    opacity: 0.6;
}

footer {
    width: 100%;
    height: 100%;
    background-color: rgb(121, 121, 121);
    margin: 0;
    padding: 0;
    border-radius: 7px;
}

.list {
    text-transform: uppercase;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
}

.list a {
    border: 1px solid black;
    margin: 12px;
    padding: 5px;
    color: white;
    background-color: rgb(19, 22, 20);
    border-radius: 8px;
}

OutPut :-

Movie-website-codejuster

Movie-website-codejuster

Movie-website-codejuster

Download Ebooks – Click Me

Download Notes – Click Me

All Govt. Exam Notes/Books – Click Me

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *