HTML-CSS-Coursework-Week3/index.html at 7ac332654a8d74a355ce77cd1b388c5d2eea8f10 · 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
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
<!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" />
    <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=Comfortaa:wght@500&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Julius+Sans+One&display=swap"
      rel="stylesheet"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"
      rel="stylesheet"
    />
  </head>

  <body>
    <header>
      <div id="logo">
        <img src="/design/white_logo.png" alt="Logo" />
      </div>
      <div id="parag">
        <h1>The best cakes in town delivered to your door</h1>
      </div>
    </header>
    <main class="content">
      <div class="frist">
        <article id="article">
          <h2>Welcome</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet congue dui.
            Maecenas quis magna enim. Ut dignissim facilisis tortor, nec volutpat neque placerat
            volutpat. Praesent venenatis cursus dui malesuada volutpat. Vivamus in convallis magna.
            Phasellus iaculis velit nibh, id fermentum sapien accumsan nec. Phasellus dictum nulla
            sit amet dui auctor, eu pharetra libero tempus. Donec vulputate sem vel nibh tristique,
            vitae placerat ipsum gravida. Vivamus vulputate eros et nulla accumsan, in porta sapien
            commodo. Vivamus ultrices sit amet sapien id facilisis. Phasellus sed efficitur diam,
            nec gravida ipsum. Sed vitae fermentum libero, sed accumsan arcu. Vivamus semper tellus
            eu lectus ultricies, at sollicitudin augue scelerisque. Donec fermentum velit orci, id
            mollis augue facilisis mattis. Pellentesque scelerisque felis in viverra dapibus.
          </p>
        </article>
        <div id="large_img">
          <p class="price">
            Cake <br />
            $10.99
          </p>
          <img src="/design/big_cake.jpg" alt="Big_cakes" />
        </div>
      </div>
      <div class="small_images">
        <div id="small_img1">
          <p class="price">
            Cake <br />
            $10.99
          </p>
          <img src="/design/1.jpeg" alt="Cake_1" />
        </div>
        <div id="small_img2">
          <p class="price">
            Cake <br />
            $10.99
          </p>
          <img src="/design/2.jpeg" alt="Cake_2" />
        </div>
        <div id="small_img3">
          <p class="price">
            Cake <br />
            $10.99
          </p class="price">
          <img src="/design/3.jpg" alt="Cake_3" />
        </div>
          <div id="small_img4">
            <p class="price">
              Cake <br />
              $10.99
            </p>
            <img src="/design/4.jpg" alt="Cake_4" />
          </div>
      </div>
      <div class="ad">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet congue dui. Maecenas quis magna enim. Ut dignissim facilisis tortor, nec volutpat neque placerat volutpat. Praesent venenatis cursus dui malesuada volutpat. Vivamus in convallis magna. Phasellus iaculis velit nibh, id fermentum sapien accumsan nec. Phasellus dictum nulla sit amet dui auctor, eu pharetra libero tempus. </p>
        <img src="/design/My project-1(3).png" alt="Ad Image">
      </div>
    </main>
    <footer>
      <div id="contact_section">
        <h3>Contact us:</h3>
        <p>+123456789 <br>
          <a href="#">tasty.cakes@email.com</a>
        </p>
      </div>
      <div id="visitus_section">
        <h3>Visit us:</h3>
        <p>
          1 Tasty Cake Str. <br />
          Glasgow <br />
          G00 0AA
        </p>
        <p></p>
      </div>
    </footer>
  </body>
</html>