107 770
Assignments Done
100%
Successfully Done
In June 2024
Physics help
Your physics assignments can be a real challenge, and the due date can be really close — feel free to use our assistance and get the desired result.
Physics
 Math help
Be sure that math assignments completed by our experts will be error-free and done according to your instructions specified in the submitted order form.
Math
 Programming help
Our experts will gladly share their knowledge and help you with programming projects. Keep up with the world’s newest programming trends.
Programming

Answer to Question #209539 in HTML/JavaScript Web Application for gowtham

Question #209539

In this assignment, let's build a Articles Page by applying the concepts we learned till now. You can use the Bootstrap concepts and CCBP UI Kit as well.


  • When clicked on each category card, the page should display the List of Topics.
  • Try to achieve the design as close as possible.
1
Expert's answer
2021-06-23T02:57:32-0400
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Namanganliklar 24</title>
    <link rel="stylesheet" href="styles/styles.css">
    <style>
        html {
            box-sizing: border-box;
        }
        *, *::after, *::before {
            box-sizing: inherit;
            margin: 0;
            padding: 0;
        }
        ul {
            list-style-type: none;
        }
        a {
            text-decoration: none;
        }
        body {
            font-family: 'Rubik', sans-serif;
        }
        .container {
            width: 1250px;
            margin-left: auto;
            margin-right: auto;
        }
        .site-header {
            background-color: #F6F6F9;
            padding-top: 44px;
            padding-bottom: 44px;
        }
        .top-header {
            display: flex;
            align-items: center;
        }
        .site-logo {
            font-weight: bold;
            font-size: 28px;
            line-height: 33px;
            color: #295091;
            text-transform: uppercase;
            padding: 4px 8px;
            background-color: #fff;
            box-shadow: 0px 2px 6px rgba(202, 202, 202, 0.25);
            border-radius: 5px;
            letter-spacing: 1px;
            margin-right: auto;
        }
        .magnifier {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 42px;
            height: 42px;
            background-image: url('https://namanganliklar24.uz/img/search.png');
            background-repeat: no-repeat;
            background-size: 30px;
            background-position: center;
            border-radius: 5px;
            border: none;
            transition: width 0.1s linear;
        }
        .magnifier:focus {
            outline: none;
            width: 150px;
            background: none;
            background-color: white;
        }
        .languages {
            margin-left: 22px;
            padding: 11px;
            border-radius: 5px;
            background-color: #fff;
            display: flex;
            border: none;
            align-items: center;
            position: relative;
        }
        .languages p {
            font-family: 'Roboto', sans-serif;
            text-transform: uppercase;
            font-weight: 500;
            font-size: 16px;
            line-height: 19px;
            color: #535353;
        }
        .join-telegram {
            display: flex;
            align-items: center;
            padding: 11px;
            background: linear-gradient(90deg, #1E96C8 15.07%, #37AEE2 85.96%);
            border-radius: 5px;
            margin-left: 24px;
        }
        .join-telegram img {
            display: block;
        }
        .join-telegram p {
            font-weight: 500;
            font-size: 16px;
            line-height: 19px;
            color: #FFFFFF;
            margin-left: 5px;
        }
        .join-telegram:hover {
            background: linear-gradient(90deg, #37AEE2 15.07%, #1E96C8 85.96%);
        }
        .sitenav-list {
            display: flex;
            align-items: center;
        }
        .sitenav {
            margin-top: 40px;
            background: #FFFFFF;
            box-shadow: 0px 2px 5px rgba(159, 159, 159, 0.19);
            border-radius: 5px;
            width: 100%;
            padding: 22px;
        }
        .sitenav-list {
            display: flex;
            justify-content: space-between;
        }
        .sitenav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .sitenav-link {
            font-weight: 500;
            font-size: 19px;
            line-height: 23px;
            color: #515151;
            transition: color 0.3s ease;
        }
        .sitenav-item::after {
            content: "";
            width: 0%;
            height: 2px;
            background-color: black;
            border-radius: 2px;
            transform: translateY(20px);
            transition: width 0.5s ease;
        }
        .sitenav-item:hover::after {
            width: 100%;
        }
        .sitenav-link:active {
            color: #295091;
        }
        .news-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 34px;
        }
        .news-item {
            width: 390px;
            border-radius: 5px;
            margin-top: 18px;
        }
        .news-item a img {
            width: 100%;
            border-radius: 5px;
        }
        .news-item a p {
            font-weight: 500;
            font-size: 17px;
            line-height: 20px;
            margin-top: 11px;
            color: #202020
        }
        time {
            margin-top: 11px;
            font-size: 14px;
            display: inline-block;
            line-height: 17px;
            color: #6B6D97;
        }
    </style>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&family=Rubik:wght@400;500;700&display=swap"
        rel="stylesheet">
</head>
<body>
    <header class="site-header">
        <div class="container">
            <div class="top-header">
                <a class="site-logo" href="index.html">Namanganliklar24</a>
                <form action="#" method="GET" class="search">
                    <input class="magnifier" type="search">
                </form>
                <div class="languages">
                    <p>En</p>
                </div>
                <a href="#" class="join-telegram">
                    <img src="https://namanganliklar24.uz/img/tg.png" alt="telegram-icon">
                    <p>Subscribe</p>
                </a>
            </div>
            <nav class="sitenav">
                <ul class="sitenav-list">
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Uzbekistan</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">World</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Economy</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Poltics</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">General</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Technology</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Sport</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Culture</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Incidents</a></li>
                    <li class="sitenav-item"><a href="#" class="sitenav-link">Tourism</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <div class="container">
        <main class="site-main">
            <section class="news">
                <ul class="news-list">
                    <li class="news-item">
                        <a href="#" class="news-link">
                            <img src="https://namanganliklar24.uz/storage/posts/April2021/sKN7ZruVYomL0g9lCBHx.jpg" alt="news-picture">
                            <p>The body of a minor girl was found in the Big Namangan canal. He is said to have been pushed into the water by his bride</p>
                            <time>13:24 / 12.04.2021</time>
                        </a>
                    </li>
                    <li class="news-item">
                        <a href="#" class="news-link">
                            <img src="https://namanganliklar24.uz/storage/posts/April2021/XvBMTGgDyO6XQkzCpMRr.jpg" alt="news-picture">
                            <p>Does vaccination break the fast? The Muslim Board of Uzbekistan responded</p>
                            <time>13:24 / 12.04.2021</time>
                        </a>
                    </li>
                    <li class="news-item">
                        <a href="#" class="news-link">
                            <img src="https://namanganliklar24.uz/storage/posts/March2021/K1NmAQRNzAPiMlLRKIBT.jpg" alt="news-picture">
                            <p>Lithuania suspends vaccination over AstraZeneca deaths</p>
                            <time>13:24 / 12.04.2021</time>
                        </a>
                    </li>
                    <li class="news-item">
                        <a href="#" class="news-link">
                            <img src="https://namanganliklar24.uz/storage/posts/October2020/amNzAcDfrPrU5GGTuLX9.jpg" alt="news-picture">
                            <p>Several weapons were found in the house of a 24-year-old citizen in Tashkent</p>
                            <time>13:24 / 12.04.2021</time>
                        </a>
                    </li>
                    <li class="news-item">
                        <a href="#" class="news-link">
                            <img src="https://namanganliklar24.uz/storage/posts/October2020/0kC5VrfvvkljJEP5DfcP.jpg" alt="news-picture">
                            <p>MIB explains why $ 13,000 was not collected from a woman who liked herself in Namangan region</p>
                            <time>13:24 / 12.04.2021</time>
                        </a>
                    </li>
                    <li class="news-item">
                        <a href="#" class="news-link">
                            <img src="https://namanganliklar24.uz/storage/posts/October2020/55CCJJoFcjDkguM4rKW0.jpg" alt="news-picture">
                            <p>“Why 50 thousand meat? Sell it for 45,000 soums, ”said the governor of Namangan region</p>
                            <time>13:24 / 12.04.2021</time>
                        </a>
                    </li>
                </ul>
            </section>
        </main>
    </div>
</body>
</html>

Need a fast expert's response?

Submit order

and get a quick answer at the best price

for any assignment or question with DETAILED EXPLANATIONS!

Place free inquiry
Calculate the price
Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Leave a comment

Related Questions

Our fields of expertise
10 years of AssignmentExpert
LATEST TUTORIALS
New on Blog
APPROVED BY CLIENTS
Finding a professional expert in "partial differential equations" in the advanced level is difficult. You can find this expert in "Assignmentexpert.com" with confidence. Exceptional experts! I appreciate your help. God bless you!
Canada #340153 on Dec 2023