HTML-CSS-Coursework-Week3/index.html at 7b035af79edba3347a678118988f56e37f08c67e · 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
<!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="index.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Add a link to your css file here -->
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>

<body>
  <!-- Add your markup here -->

  <header>
    <!--Header part-->
    <article class="head">
      <img src="img/cream-removebg-preview.png" class="head-pic" alt="ice cream photo">
    <div>
      <p>The best cakes in town delivered to your door</p>
    </div>
  </article>


    <nav>
      <input type="checkbox" id="check">
      <label for="check" class="checkbtn">
        <i class="fa fa-bars"> </i>
      </label>
      <ul class="nav-menu">
        <li><a class="active" href="index.html"> HOME</a></li>
        <li><a href="#"> CAKES</a></li>
        <li><a href="#"> ORDERIN</a></li>
        <li><a href="#"> LESSONS</a></li>
        <li><a href="#"> ABOUT</a></li>
      </ul>
    </nav>
  </header>
  <main class="container">
    <section class="hero">
      <img src="img/cake layers.webp" class="hero-pic" alt="birthday cake two layers">
      <div class="hero-text">
        <h2 id="intro">Welcome</h2>
        <p>Welcome in our website about cakes and ice cream</p>
        <p>
          Welcome to the world of ice cream! Indulge in a sweet and creamy
          treat that's perfect for any occasion. From classic flavors like
          vanilla and chocolate to more unique options like mint chocolate
          chip and rocky road, there's something for everyone. Whether you
          prefer your ice cream in a cone, a bowl, or as a sundae, we have
          you covered. Browse our selection and find your new favorite
          flavor today!
        </p>

      </div>


    </section>


    <section class="mid-content" >
      <img src="img/web_unicorn_cake-removebg-preview.png" class="mid-cake-pic" alt="web_unicorn_cake photo" />
      </section>
      <section class="mid-content">
        <img src="img/cakeb-removebg-preview.png" class="mid-cake-pic" alt="cake photo" />
      </section>
      <section class="mid-content">
        <img src="img/istockphoto--removebg-preview.png" class="mid-cake-pic" alt="ice-cream-in-paper-cup photo" />
      </section>
      <section class="mid-content">
      <img src="img/pastry.jpg" class="mid-cake-pic" alt="pastries photo" />
    </section>
  </main>
  <footer>
    <div class="social-menu">
      <ol class="menu-footer">
        <li> <a href="#" target="_blank" title="youtube"><i class="fa fa-youtube"></i></a></li>
        <li> <a href="#" target="_blank" title="facebook"><i class="fa fa-facebook"></i></a></li>
        <li> <a href="#" target="_blank" title="twitter"><i class="fa fa-twitter"></i></a></li>
        <li> <a href="#" target="_blank" title="instagram"><i class="fa fa-instagram"></i></a></li>
      </ol>

    </div>

    <p>&copy;2023 TeCH</p>
  </footer>
  </div>
</body>

</html>