HTML-CSS-Coursework-Week3/index.html at master · AdvocateM/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
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
<!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>Za-class-2/Advocate-Maroga</title>
  <!-- Add a link to your css file here -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
    integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/responsive.css">
  <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
</head>

<body>
  <!-- Add your markup here -->
  <header class="hero">
    <!-- Alert Message -->
    <div class="alert">
      <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
      <strong>Reminder!</strong> The best result use 540px screen and 900px screen size
    </div>
    <!-- End -->

    <div class="container">
      <!-- Mobile Navbar -->
      <div class="navbar">
        <!-- Logo By https://logomakr.com/app/ -->
        <img src="./img/LogoMakr-1BXkbj.png" alt="logo" class="active">

        <p class="top">The best cakes in town delivered to your door</p>
        <div id="nav">
          <a href="#intro">Home</a>
          <a href="#">Buy</a>
          <a href="#">Shipping</a>
          <a href="#">Contact Us</a>
          </div>
          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
            <i class="fa fa-bars"></i>
          </a>
          </div>
      <!-- End -->


      <!-- Desktop Navbar -->
      <ul class="navbar2">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      </div>
      </header>
      <main>
        <section class="intro">
          <div class="big-cake">
            <img src="./img/case/case.jpg" alt="">
          </div>
      <div class="content">
        <h1>Welcome</h1>
        <p class="first">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad provident ipsa dolorem sint obcaecati ea nihil
          exercitationem cumque dolore eum!
        </p>
<!-- Displayed on Desktop screen -->
<p class="second">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis in voluptates nulla, quaerat animi aspernatur,
  fuga accusantium rem pariatur hic, quod omnis ratione. Cumque, odit quae. Eos laboriosam debitis soluta. Ratione sit
  pariatur enim beatae, voluptates delectus at laudantium optio sunt, magni aliquam, eum libero explicabo! Aperiam optio
  enim earum asperiores, pariatur, porro amet mollitia dignissimos nulla deserunt eius fugit?
</p>
<!-- <a href="#buy" class="btn"><i class="fas fa-gift x2"></i> BUY</a> -->
</div>
</section>


<!-- Cakes images -->
<section id="cakes">
  <div class="big-image">
    <img src="./img/case/case.jpg" alt="">
  </div>
  <div class="buy">


    <div class="grid-flex item2">
      <img src="./img/case/case1.jpg" alt="">
    </div>

    <div class="grid-flex item3">
      <img src="./img/case/case2.jpg" alt="">
    </div>

    <div class="grid-flex item4">
      <img src="./img/case/case3.jpg" alt="">
    </div>

    <div class="grid-flex item5">
      <img src="./img/case/case4.jpg" alt="">
    </div>
  </div>
    </section>

    </main>
    <footer>
    <!-- Mobile Footer -->
    <div class="container">
      <div class="footer">
        <div id="foot">
          <a href="#">Home</a>
          <a href="#">Buy</a>
          <a href="#">Shipping</a>
          <a href="#">Contact Us</a>
        </div>
        <a href="javascript:void(0);" class="icon2" onclick="x()">
          <i class="fa fa-bars fa-3x"></i>
        </a>
      </div>
    </div>
    <!-- End -->


      <!-- Desktop Footer -->
      <ul class="footer2">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
  </footer>
</body>
<!-- Hamburger nav & Footer Respond using js -->
<script src="./js/index.js">
</script>

</html>