Answer to Question #281929 in HTML/JavaScript Web Application for Aniket pandey

Question

Answer to Question #281929 in HTML/JavaScript Web Application for Aniket pandey

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #281929

Logos Section

In this assignment, let's build a Logos Section by applying the concepts we learned till now.

Refer to the below images.

The following images illustrate all device sizes, from extra small to extra large.

Extra Small (Size < 576px) and Small (Size >= 576px):

Medium (Size >= 768px), Large (Size >= 992px) and Extra Large (Size >= 1200px):

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }
        a {
            color: inherit;
            text-decoration: none;
            outline: none;
            padding: 0 8px;
        }
        header {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: rgba(225, 243, 197, .5);
        }
        .big_banner {
            width: 100%;
            height: 600px;
            overflow: hidden;
            background: url('https://store-images.s-microsoft.com/image/apps.33193.14231476019366538.f6d15044-d1fd-4d92-9714-ce2fd5139e20.cc144557-3931-4cf6-be58-51f53be328bc?mode=scale&q=90&h=1080&w=1920') no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .big_banner-text {
            width: 60%;
            text-align: center;
            font-size: 24px;
            color: #ffffff;
            z-index: 2;
        }
        .big_banner-bg {
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background-color: #000000;
            opacity: 0.35;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo_text">
                    Logo
                </div>
            </div>
            <nav>
                <a href="#">Text</a>
                <a href="#">Text</a>
                <a href="#">Text</a>
            </nav>
        </header>
        <div class="big_banner">
            <div class="big_banner-bg"></div>
            <div class="big_banner-text">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum sequi eligendi est voluptate vero qui reprehenderit, sit blanditiis praesentium eos aut et dolore nulla voluptatum, neque repellat suscipit reiciendis numquam?
            </div>
        </div>
    </div>
</body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #281929 in HTML/JavaScript Web Application for Aniket pandey

Comments

Leave a comment

Related Questions