HTML-Challenges-Abed/Abdulrahman-Ghassa-HTML_2.html at master · Abed-Dev93/HTML-Challenges-Abed · 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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HTML-2</title>
    <style>
        body {
            width: 90%;
            margin: 10px auto;
        }

        .ai-header {
            background-color: rgb(29, 41, 41);
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .brand-header {
            height: 200px;
            width: 200px;
            border-radius: 50%;
            align-self: flex-start;
        }

        .header-nav {
            width: 60%;
            display: flex;
            justify-content: space-between;
        }

        .nav-links {
            text-decoration: none;
            font-size: 1.7em;
            color: white;
            margin: 20px;
            text-transform: capitalize;
        }

        .header-nav a:hover {
            color: orangered;
        }

        .ai-description {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 1.4em;
        }

        .ai-definition,
        .ai-cause,
        .ai-future,
        .ai-in-lebanon {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            margin: 20px;
        }

        .ai-definition-title,
        .ai-cause-title,
        .ai-future-title,
        .ai-in-lebanon-title {
            align-self: center;
            font-size: 2em;
            text-transform: capitalize;
        }

        .ai-definition-img,
        .ai-cause-img,
        .ai-future-img,
        .ai-in-lebanon-img {
            width: 650px;
            height: 463px;
            border-radius: 10%;
        }

        .ai-unordered-cause {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            list-style-type: none;
        }

        .ai-unordered-cause-list {
            margin: 15px;
            padding: 25px 25px 25px 25px;
            border: 4px solid yellow;
            font-family: monospace, sans-serif;
            font-weight: bold;
            color: #fff;
            border-radius: 30%;
            height: 135px;
            width: 285px;
            text-align: center;
        }

        .ai-unordered-cause-list-1 {
            background-color: blueviolet;
        }

        .ai-unordered-cause-list-2 {
            background-color: orangered;
        }

        .ai-unordered-cause-list-3 {
            background-color: olivedrab;
        }

        .ai-unordered-cause-list-4 {
            background-color: royalblue;
        }

        .ai-unordered-cause-list-5 {
            background-color: grey;
        }

        .ai-footer {
            background-color: rgb(29, 41, 41);
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 200px;
        }

        .ai-footer-title {
            color: #fff;
        }

        .copyright {
            color: yellow;
        }

        .input-search,
        .button-search {
            padding: 10px;
            margin: 3px;
        }

        .button-search {
            background-color: blue;
            color: white;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <header class="ai-header">
        <img class="brand-header" src="img/html-2-1.jpeg">
        <nav class="header-nav">
            <a class="nav-links" href="#ai">what is AI?</a>
            <a class="nav-links" href="#why">why?</a>
            <a class="nav-links" href="#future">future of AI</a>
            <a class="nav-links" href="#ai-lebanon">AI in lebanon</a>
        </nav>
    </header>
    <main class="ai-description">
        <article class="ai-definition" id="ai">
            <h2 class="ai-definition-title">what is artificial intelligence?</h2>
            <img class="ai-definition-img" src="img/html-2-2.jpg" alt="AI Definition">
            <p class="ai-definition-text">
                <Strong>Artificial intelligence (AI)</Strong> is the intelligence of <q>machines or software</q>, as opposed to the intelligence
                of human beings or animals. <em>AI applications</em> include advanced web search engines <em>(e.g., Google Search),
                recommendation systems (used by YouTube, Amazon, and Netflix)</em>, understanding human speech <em>(such as Siri
                and Alexa), self-driving cars (e.g., Waymo), generative or creative tools (ChatGPT and AI art), and
                competing at the highest level in strategic games (such as chess and Go)</em>.

                <b>Artificial intelligence</b> was founded as an <u><i>academic discipline</i></u> in 1956. The field went through
                multiple cycles of optimism followed by disappointment and loss of funding, but after 2012,
                when deep learning surpassed all previous <u>AI techniques</u>, there was a vast increase in funding and
                interest.
            </p>
        </article>
        <article class="ai-cause" id="why">
            <h2 class="ai-cause-title">why to use AI?</h2>
            <img class="ai-cause-img" src="img/html-2-3.jpeg" alt="Uses of AI"><br>
            <ul class="ai-unordered-cause">
                <li class="ai-unordered-cause-list ai-unordered-cause-list-1">automates repetitive learning<br>and
                    discovery through data</li>
                <li class="ai-unordered-cause-list ai-unordered-cause-list-2">adapts through progress-<br>ive learning
                    algorithms</li>
                <li class="ai-unordered-cause-list ai-unordered-cause-list-3">achieves incredible accuracy</li>
                <li class="ai-unordered-cause-list ai-unordered-cause-list-4">gets the most out of data</li>
                <li class="ai-unordered-cause-list ai-unordered-cause-list-5">facilitates our lifestyle</li>
            </ul>
        </article>
        <article class="ai-future" id="future">
            <h2 class="ai-future-title">the future of AI</h2>
            <img class="ai-future-img" src="img/html-2-4.jpg" alt="Future Of AI">
            <p class="ai-future-text">
                <strong>The digital revolution</strong> has already changed how people <u>live</u>, <u>work</u>, and
                <u>communicate</u>. And it’s only just
                getting started. But the same technologies that have <b>the potential</b> to help billions of people
                live
                happier, healthier, and more productive lives are also creating new challenges for citizens and
                governments around the world. From election meddling to data breaches and cyberattacks, recent events
                have shown that technology is changing how we think about <em>privacy, national security, and maybe even
                    democracy itself</em>. In this project, we examine <b>challenges in five key areas</b> that will
                shape the future of
                the digital age: justice system, impact on democracy, global security and international conflict, the
                impact of automations and AI on the jobs marketplace, identity, and privacy.
            </p>
        </article>
        <article class="ai-in-lebanon" id="ai-lebanon">
            <h2 class="ai-in-lebanon-title">AI in lebanon</h2>
            <img class="ai-in-lebanon-img" src="img/html-2-5.jpg" alt="AI in Lebanon">
            <p class="ai-in-lebanon-text">
                <b>The United Nations</b> is engaged in enhancing the use of new technologies for <em>sustainable
                    development</em>. In September 2018, the <b>United Nations Secretary-General</b> launched a Strategy
                on New
                Technologies. It includes a commitment to support member states in building capacities and promoting
                dialogue on normative and cooperation frameworks. <b>ESCWA</b>, through its technical cooperation
                program, is
                committed to provide <em>technical assistance</em> to its member states to boost national efforts
                towards the
                achievement of <u>the 2030 Development Agenda</u>.

                <strong>The Ministry of State of Investment and Technology Affairs in Lebanon</strong> requested the
                assistance of <b>ESCWA</b>
                to develop a national strategy on <strong>artificial intelligence</strong> (AI) for the country. This
                meeting will be
                convened to stimulate discussion among national stakeholders. These discussions will provide a current
                assessment of the national context of AI and enable the collection of information from represented
                entities on their needs, plans and focus areas that should be included in the draft <em><u>AI
                        strategy</u></em>.
            </p>
        </article>
    </main>
    <footer class="ai-footer">
        <h3 class="ai-footer-title">Copyright <span class="copyright">&copy;</span> 2023-2024</h3>
        <form class="search-for" action="https://www.google.com/search" method="get">
            <input class="input-search" type="text" placeholder="search.." name="search">
            <button class="button-search" type="submit">Search</button>
        </form>
    </footer>
</body>

</html>