learning_web_dev/learn_float.html at main · PaulLemaron/learning_web_dev · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Free web contents">
    <meta http-equiv="refresh" content="15">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="learn_float.css">
    <title>Learning floats</title>
</head>
<body>
    <h2>CSS Layout floats</h2>
    <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p>

      <p></p>  Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)
    <header>
        <h2>Cities</h2>
    </header>
    <section>
        <nav>
            <ul>
                <li><a href="Nairobi.html">This is about Nairobi</a> </li>
                <li><a href="#"></a> Kitengela</li>
                <li><a href="#"></a> Kajiado</li>
            </ul>
        </nav>

        <article>
            <h1>Nairobi</h1>
            <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants</p>
            <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
        </article>
    </section>
    <footer>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d255282.3237489202!2d36.707311198074194!3d-1.3032050561780195!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f1172d84d49a7%3A0xf7cf0254b297924c!2sNairobi!5e0!3m2!1sen!2ske!4v1655366168167!5m2!1sen!2ske" width="400" height="250" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </footer>
</body>
</html>