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;
            margin0;
            padding0;
        }
        ul {
            list-style-type: none;
        }
        a {
            text-decoration: none;
        }
        body {
            font-family'Rubik', sans-serif;
        }
        .container {
            width1250px;
            margin-left: auto;
            margin-right: auto;
        }
        .site-header {
            background-color#F6F6F9;
            padding-top44px;
            padding-bottom44px;
        }
        .top-header {
            display: flex;
            align-items: center;
        }
        .site-logo {
            font-weight: bold;
            font-size28px;
            line-height33px;
            color#295091;
            text-transform: uppercase;
            padding4px 8px;
            background-color#fff;
            box-shadow0px 2px 6px rgba(2022022020.25);
            border-radius5px;
            letter-spacing1px;
            margin-right: auto;
        }
        .magnifier {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width42px;
            height42px;
            background-imageurl('https://namanganliklar24.uz/img/search.png');
            background-repeat: no-repeat;
            background-size30px;
            background-position: center;
            border-radius5px;
            border: none;
            transition: width 0.1s linear;
        }
        .magnifier:focus {
            outline: none;
            width150px;
            background: none;
            background-color: white;
        }
        .languages {
            margin-left22px;
            padding11px;
            border-radius5px;
            background-color#fff;
            display: flex;
            border: none;
            align-items: center;
            position: relative;
        }
        .languages p {
            font-family'Roboto', sans-serif;
            text-transform: uppercase;
            font-weight500;
            font-size16px;
            line-height19px;
            color#535353;
        }
        .join-telegram {
            display: flex;
            align-items: center;
            padding11px;
            backgroundlinear-gradient(90deg#1E96C8 15.07%#37AEE2 85.96%);
            border-radius5px;
            margin-left24px;
        }
        .join-telegram img {
            display: block;
        }
        .join-telegram p {
            font-weight500;
            font-size16px;
            line-height19px;
            color#FFFFFF;
            margin-left5px;
        }
        .join-telegram:hover {
            backgroundlinear-gradient(90deg#37AEE2 15.07%#1E96C8 85.96%);
        }
        .sitenav-list {
            display: flex;
            align-items: center;
        }
        .sitenav {
            margin-top40px;
            background#FFFFFF;
            box-shadow0px 2px 5px rgba(1591591590.19);
            border-radius5px;
            width100%;
            padding22px;
        }
        .sitenav-list {
            display: flex;
            justify-content: space-between;
        }
        .sitenav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .sitenav-link {
            font-weight500;
            font-size19px;
            line-height23px;
            color#515151;
            transition: color 0.3s ease;
        }
        .sitenav-item::after {
            content"";
            width0%;
            height2px;
            background-color: black;
            border-radius2px;
            transformtranslateY(20px);
            transition: width 0.5s ease;
        }
        .sitenav-item:hover::after {
            width100%;
        }
        .sitenav-link:active {
            color#295091;
        }
        .news-list {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom34px;
        }
        .news-item {
            width390px;
            border-radius5px;
            margin-top18px;
        }
        .news-item a img {
            width100%;
            border-radius5px;
        }
        .news-item a p {
            font-weight500;
            font-size17px;
            line-height20px;
            margin-top11px;
            color#202020
        }
        time {
            margin-top11px;
            font-size14px;
            display: inline-block;
            line-height17px;
            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!

Comments

No comments. Be the first!
LATEST TUTORIALS
APPROVED BY CLIENTS