HTML-CSS-Coursework-Week3/index.html at 78e49246f7961a7f1c8929bf9c9b004cc71d9f87 · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!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>
    <!-- Add a link to your css file here -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      <header>
        <div class="top-header">
          <img src="pics/cake_2.svg" class="logo-img" />
            <nav class="navbar">
              <div class="navbar-container container">
                  <input type="checkbox" name="" id="">
                    <div class="hamburger-lines">
                        <span class="line line1"></span>
                        <span class="line line2"></span>
                        <span class="line line3"></span>
                    </div>
                      <ul class="menu-items">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#cakes">Cakes</a></li>
                        <li><a href="#orderin">Order In</a></li>
                        <li><a href="#lessons">Lessons</a></li>
                        <li><a href="#about">About</a></li>
                        <li><a href="#contact">Contact</a></li>
                      </ul>
                    </div>
            </nav>
          </div>
        <div class="header-section">
          <p>The best cakes in town delivered to your door</p>
        </div>
      </header>

  <div class="grid-container">
      <section class="about-section">
        <div class="about-container">
          <h1>
          Cakes Co <br />
          Welcomes You
        </h1>
        <p>
          Walking into our bakery means being immediately greeted by a
          delightful<br />
          smell of freshly baked treats that no one can resist. As a
          neighborhood<br />
          bakery that serves the local community, we are committed to using the
          <br />
          best ingredients and serving you delicious, handcrafted baked goods.<br />
          We have used the same recipes for generations, keeping true to the
          original<br />
          creations and signature products you know and love. Our dedicated
          bakers<br />
          will make sure to always have your favorites, so come on in and have a
          bite!<br />
        </p>
      </div>
      </section>
      <section >
        <div class="bigimg-container">
        <img src="sections1.png" alt="cake" class="cake0">
        </div>
      </section>

      <section class="images-container">
        <div class="lemon-cake">
           <img src="pics/a3.png" alt="lemon-cake "  class="cake1"/></div>
          <div class="levender-cake">
             <img src="pics/a2.png" alt="levender-cake" class="cake2 "/>
          </div>
          <div class="orange-cake">
            <img src="pics/a4.png" alt="orange-cake" class="cake3"/>
          </div>
          <div class="avokado-cake">
             <img src="pics/avokado1.png" alt="avokado-cake" class="cake4"/>
          </div>
      </section>
  </div>
      <footer>
          <section id="contact">
              <div class="form-container">
                <h2>Contact Us</h2>
                <input type="text" placeholder="Your Name" />
                <input type="email" placeholder="E-Mail" />
                <textarea
                  cols="30"
                  rows="6"
                  placeholder="Type Your Message"
                ></textarea>
                <a href="#" class="btn btn-primary">Submit</a>
              </div>
            </div>
          </section>
          <section class="social media">

          </section>
        </footer>

  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function () {
      // Add smooth scrolling to all links
      $("a").on("click", function (event) {
        // Make sure this.hash has a value before overriding default behavior
        if (this.hash !== "") {
          // Prevent default anchor click behavior
          event.preventDefault();

          // Store hash
          var hash = this.hash;

          // Using jQuery's animate() method to add smooth page scroll
          // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
          $("html, body").animate(
            {
              scrollTop: $(hash).offset().top,
            },
            800,
            function () {
              // Add hash (#) to URL when done scrolling (default click behavior)
              window.location.hash = hash;
            }
          );
        } // End if
      });
    });
  </script>
</html>