HTML5/allCoffee.html at master · thesparrow/HTML5 · 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
<!DOCTYPE html>
<html>

<head>
       <title>Welcome to Joe's Coffee Store!</title>
    <link rel="stylesheet" href="style/style.css" type="text/css" />
    <script src="scripts/dragAndDrop.js"></script>
</head>
<body>
    <header>
        <div>
            <a class="headerlogo" href="index.html">
                <img src="images/logo.png" />
            </a>
            <span id="headername">Joe's Coffee Store</span>
        </div>
    </header>
    <nav class="backgroundgradient">
        <ul>
            <li><a class="navlink" href="index.html">Home</a></li>
            <li><a class="navlink" href="blog.html">Blog</a></li>
            <li><a class="navlink" href="allcoffees.html">Our coffees</a></li>
            <li><a class="navlink" href="accessories.html">Accessories</a></li>
            <li><a class="navlink" href="Gifts.html">Gifts</a></li>
            <li><a class="navlink" href="findus.html">Find us</a></li>
            <li><a class="navlink" href="checkout.html">Checkout</a></li>

        </ul>
    </nav>

    <div id="welcomeimage">
        <img src="images/coffeeheader.jpg" />
    </div>
    <div id="coffeeofthemonth">
        <img src="images/cotm.jpg" />
    </div>

    <section class="allcoffees">
        <header class="blockheader">
            <span>Espresso coffee beans</span>
        </header>
        <article class="productarticlewide" id="coffee-1" data-price="10.00">
            <img id="coffee1" class="productarticlewidethumbnail" src="Images/coffee/coffee1.jpg" />
            <div class="productarticlewidecontent">
                <header>
                    <span class="productarticlewidename">Coffee 1</span>
                </header>
                <p class="productarticlewidedescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis vehicula nibh, at blandit turpis ultricies vel. Phasellus tristique, arcu vitae ullamcorper cursus, ipsum nisi rutrum augue, quis consectetur enim libero ac ante. </p>
                <p class="productarticlewideprice">€10</p>

            </div>
        </article>
        <article class="productarticlewide" id="coffee-2" data-price="15.00">
            <img id="coffee2" class="productarticlewidethumbnail" src="Images/coffee/coffee1.jpg" />
            <div class="productarticlewidecontent">
                <header>
                    <span class="productarticlewidename">Coffee 1</span>
                </header>
                <p class="productarticlewidedescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis vehicula nibh, at blandit turpis ultricies vel. Phasellus tristique, arcu vitae ullamcorper cursus, ipsum nisi rutrum augue, quis consectetur enim libero ac ante. </p>
                <p class="productarticlewideprice">€15</p>

            </div>
        </article>
        <article class="productarticlewide" id="coffee-3" data-price="12.00">
            <img id="coffee3" class="productarticlewidethumbnail" src="Images/coffee/coffee1.jpg" />
            <div class="productarticlewidecontent">
                <header>
                    <span class="productarticlewidename">Coffee 1</span>
                </header>
                <p class="productarticlewidedescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis vehicula nibh, at blandit turpis ultricies vel. Phasellus tristique, arcu vitae ullamcorper cursus, ipsum nisi rutrum augue, quis consectetur enim libero ac ante. </p>
                <p class="productarticlewideprice">€12</p>

            </div>
        </article>
        <article class="productarticlewide" id="coffee-4" data-price="10.00">
            <img id="coffee4" class="productarticlewidethumbnail" src="Images/coffee/coffee1.jpg" />
            <div class="productarticlewidecontent">
                <header>
                    <span class="productarticlewidename">Coffee 1</span>
                </header>
                <p class="productarticlewidedescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis vehicula nibh, at blandit turpis ultricies vel. Phasellus tristique, arcu vitae ullamcorper cursus, ipsum nisi rutrum augue, quis consectetur enim libero ac ante. </p>
                <p class="productarticlewideprice">€10</p>

            </div>
        </article>
    </section>
    <div id="shoppingcart">
        <header class="blockheader"><span>Shopping cart</span></header>
        <ul></ul>
    </div>
    <script>
    document.addEventListener("DOMContentLoaded", AddDragAndDropHandlers(), false);
    </script>
</body>

</html>