HTML-CSS-Coursework-Week3/index.html at b32f9fa759524a998a923f97ba336070a8a989f2 · CodeYourFuture/HTML-CSS-Coursework-Week3 · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Responsive Cake webpage</title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>

    <title>Cake site</title>
  <div class="div1">
    <header>
      <h1>Cake Site</h1>
    </header>

    <nav>
        <img class="Cake-image" src="https://cdn.shopify.com/s/files/1/0272/5848/6851/products/red-velvet-cake-864292.jpg" alt="Image of a cake" />
      <ul class="list">
        <li><a href="file:///home/bk/Documents/GitHub/HTML-CSS-Coursework-Week3-Cake/index.html"><button type="button">Home</button></a></li>
        <li><a href="google.com"><button type="button">About Us</button></a></li>
        <li><a href="instagram.com"><button type="button">Contact</button></a></li>
      </ul>
      <p class="site-info">This is a website about cakes. YES, about cakes. kldajklsajdlkasjdklasjdklasjlkdjsalkdjlksajdlkasjdlksajdlksa.</p>
      </nav>
</div>

    <main>
      <div class="first-div">
      <h1 class="welcome">WELCOME</h1>
      <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, libero at commodo luctus, sapien enim tempor libero, vel congue nisi nisi id dui. Fusce euismod quis sapien vel malesuada. Aliquam tincidunt sapien at ipsum rhoncus, vitae bibendum magna blandit.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, libero at commodo luctus, sapien enim tempor libero, vel congue nisi nisi id dui. Fusce euismod quis sapien vel malesuada. Aliquam tincidunt sapien at ipsum rhoncus, vitae bibendum magna blandit.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, libero at commodo luctus, sapien enim tempor libero, vel congue nisi nisi id dui. Fusce euismod quis sapien vel malesuada. Aliquam tincidunt sapien at ipsum rhoncus, vitae bibendum magna blandit.
      </p>
      <img class="cake-image2" src="https://cdn.shopify.com/s/files/1/0272/5848/6851/products/red-velvet-cake-864292.jpg" alt="Image 2 of cake" />
    </div>
      <div class="cake-line">
        <ul class="list1">
        <li><img class="cake-image3" src="https://cdn.shopify.com/s/files/1/0272/5848/6851/products/red-velvet-cake-864292.jpg" alt="Image 3 of cake" /></li>
        <li><img class="cake-image4" src="https://cdn.shopify.com/s/files/1/0272/5848/6851/products/red-velvet-cake-864292.jpg" alt="Image 4 of cake" /></li>
        </ul>
        <!-- <div class="cake-line"> -->
            <ul class="list2">
            <li><img class="cake-image3" src="https://cdn.shopify.com/s/files/1/0272/5848/6851/products/red-velvet-cake-864292.jpg" alt="Image 3 of cake" /></li>
            <li><img class="cake-image4" src="https://cdn.shopify.com/s/files/1/0272/5848/6851/products/red-velvet-cake-864292.jpg" alt="Image 4 of cake" /></li>
            </ul>
            </div>
        </main>


    <footer>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, libero at commodo luctus, sapien enim tempor libero, vel congue nisi nisi id dui. Fusce euismod quis sapien vel malesuada. Aliquam tincidunt sapien at ipsum rhoncus, vitae bibendum magna blandit.
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </footer>

    </body>
</html>