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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cake page</title>
    <link rel="stylesheet" href="/css/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=Bebas+Neue&family=Roboto&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/97841cab25.js" crossorigin="anonymous"></script>
</head>

<body>

    <header>
        <nav class="navbar">
            <div class="logo">
                <img src="https://cdn-icons-png.flaticon.com/512/2401/2401414.png" alt="logo">
            </div>
            <div class="bar">
                <div class="logo-menu"><i class="fa-solid fa-bars"></i></div>
                <p class="ads">The best cake in town delivered to your door</p>
            </div>
        </nav>
        <div class="row">

            <ul class="menu">
                <li><a class="muath" href="#">HOME</a></li>
                <li><a class="muath" href="#">CAKES</a></li>
                <li><a class="muath" href="#">ORDERING</a></li>
                <li><a href="#">LESSONS</a></li>
                <li><a href="#">ABOUT</a></li>
            </ul>
        </div>
    </header>
    <hr>
    <div class="container">
        <div class="content">
            <div class="details"> <img class="cake-3" src="/images/cake3.avif" alt=""></div>

            <div class="details">
                <h1>Welcome</h1>
                <p>
                    With a wide selection of cakes, we are certain we have the perfect cake to match
                    your tastes. For birthdays or general gatherings, our celebration cakes are perfect to get your
                    attendees in the mood.
                </p>
            </div>
            <div class="details"><img src="/images/cake2.avif" alt=""></div>
            <div class="details"><img src="/images/cake4.jpg" alt=""></div>
            <div class="details"><img src="/images/cake5.jpg" alt=""></div>
            <div class="details"><img src="/images/cake6.jpg" alt=""></div>
        </div>

    </div>
    <footer class="footer">
        <ul class="logos-footer">
            <li><a href=""> Facebook <i class="fa-brands fa-facebook"></i> </a> </li>
            <li><a href="">Instagram<i class="fa-brands fa-instagram"></i></a></li>
            <li><a href="">Twitter<i class="fa-brands fa-twitter"></i></a></li>
        </ul>
        <p class="copyrights">© 2023 Muath Al-Awadhi</Al-Awadhi></p>

    </footer>

</body>

</html>