assignment-01/index.html at main · ALAMIN761740/assignment-01 · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bangladesh 2.0</title>
    <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=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <header>
        <nav>
            <h3 class="nav-title">Bangladesh 2.0</h3>
            <a href=""><button class="btn-white" >Sign In</button></a>
        </nav>
        <div class="banner">
            <div class="banner-text">
                <h4 class="bangla">Bangladesh 2.0</h4>
                <h2 class="banner-title">Idea,innovation,vision and challenges in New Bangladesh.</h2>
                <button class="btn-green">Explore New Bangladesh</button>

            </div>
            <img class="banner-pic" src="assets/hero.png" alt="">
        </div>

    </header>


    <main>
        <section class="skills">
            <h3 class="Pillars">Pillars of "Bangladesh 2.0"</h3>

            <div class="skills-container">
                <div class="skill">
                    <img src="assets/card-icon.png" alt="">
                    <h4 class="skill-title">Innovation</h4>
                    <p class="skill-de">Dolor sit amet consectetur elit. Facilis quas, ducimus labore sequi quos </p>
                </div>
                <div class="skill">
                    <img src="assets/card-icon.png" alt="">
                    <h4 class="skill-title">Sustainability</h4>
                    <p class="skill-de">Dolor sit amet consectetur elit. Facilis quas, ducimus labore sequi quos </p>
                </div>
                <div class="skill">
                    <img src="assets/card-icon.png" alt="">
                    <h4 class="skill-title">Infrastructure</h4>
                    <p class="skill-de">Dolor sit amet consectetur elit. Facilis quas, ducimus labore sequi quos </p>
                </div>
                <div class="skill">
                    <img src="assets/card-icon.png" alt="">
                    <h4 class="skill-title">Empowerment</h4>
                    <p class="skill-de">Dolor sit amet consectetur elit. Facilis quas, ducimus labore sequi quos </p>
                </div>
            </div>

        </section>
        <section class="">
            <h3 class="Pillars">The Vision of Future</h3>
            <p class="all-p">Bangladesh 2.0 aims to redefine the nation’s trajectory by embracing cutting-edge technology, promoting inclusive growth, and ensuring sustainability. With initiatives in renewable energy, digital transformation, and robust infrastructure, the country is set to become a global model of development.</p>

        <div class="coler-container">
            <div class="skill blue">
                <img src="assets/card-icon.png" alt="">
                <h4 class="skill-title">Empowerment</h4>
                <p class="skill-de">Dolor sit amet consectetur elit. Facilis quas, ducimus labore sequi quos </p>
                <button class="btn-green btn-blue">Learn More</button>
            </div>
            <div class="skill green">
                <img src="assets/card-icon.png" alt="">
                <h4 class="skill-title">Empowerment</h4>
                <p class="skill-de">Dolor sit amet consectetur elit. Facilis quas, ducimus labore sequi quos </p>
                <button class="btn-green btn-gr">Learn More</button>
            </div>
            <div class="skill yellow">
                <img src="assets/card-icon.png" alt="">
                <h4 class="skill-title">Empowerment</h4>
                <p class="skill-de">Dolor sit amet consectetur elit. Facilis quas, ducimus labore sequi quos </p>
                <button class="btn-green btn-yellow">Learn More</button>
            </div>
        </div>
        </section>
        <section>
        <div class="Dr">
            <p style="background-image: url(assets/quote-bg.png);"  class="Dr-de">"Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis quas, ducimus labore sequi quos deserunt optio id repellendus tempora veniam amet porro corporis exercitationem numquam debitis culpa laudantium odio, velit vel minus sit? Veritatis aut maiores ducimus fugit error ex sit, dignissimos eum tempora perferendis a rem culpa ab aliquid modi? Est vitae neque esse, cumque, quam tenetur rem earum eaque mollitia modi ipsum aspernatur, dignissimos excepturi aliquam architecto soluta necessitatibus vero?"</p>
            <h3 class="drM">Dr. Muhammad Yunus</h3>
            <p>Chief Adviser of the People's Republic of Bangladesh</p>

        </div>
        </section>
        <section >
            <div >
                <h3 class="Pillars">Recent News</h3>
                <p class="Recent-News-p">Bangladesh 2.0 aims to redefine the nation’s trajectory by embracing cutting-edge technology, promoting inclusive growth, and ensuring sustainability. With initiatives in renewable energy, digital transformation, and robust infrastructure, the country is set to become a global model of development.</p>
            </div>
            <div >
                <img class="Recent-News" src="assets/satelite.png" alt="">
                <h3>Bangladesh Launches New Satellite</h3>
                <div>
                    <img src="assets/al-jazeera.png" alt="">
                </div>
            </div>

        </section>

    </main>


    <footer>

    </footer>
</body>
</html>