Taks18/index.html at main · CarlosPereira85/Taks18 · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
    <script src="https://kit.fontawesome.com/3c09bcb51a.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel=“stylesheet” href=“https://pro.fontawesome.com/releases/v5.10.0/css/all.css”
        integrity=“sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p” crossorigin=“anonymous” />
    <title>Tech Shop</title>
</head>

<body>

    <!-- Header -->
    <header>
        <h1>Tech <br>Shop</h1>
    </header>

    <main>
        <!-- Company Description -->
        <section class="description">
            <h2>Company Description</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta exercitationem, ducimus veritatis incidunt
                vitae maiores necessitatibus, quae, omnis quaerat quo animi nostrum quidem nulla aspernatur fugiat? Quas
                harum nihil aliquam!</p>
        </section>

        <!-- Product Cards -->
        <section class="products">
            <h2>Our Products</h2>
            <section class="cards">
                <section class="product-card">
                    <img src="images/laptop1.jpeg" alt="Laptop">
                    <p>Model: Macbook Prose <a href="#" target="_blank"></a><br>
                        Price: <strong>$695</strong>
                    </p>
                </section>
                <section class="product-card">
                    <img src="images/laptop2.jpeg" alt="Laptop">
                    <p>Model: Aces <a href="#" target="_blank"></a><br>
                        Price: <strong>$599.99</strong></p>
                </section>
                <section class="product-card">
                    <img src="images/laptop3.jpeg" alt="Laptop">
                    <p>Model: Dellight <a href="#" target="_blank"></a><br>
                        Price: <strong>$999.99</strong></p>
                </section>
            </section>
        </section>

        <!-- Product Information -->
        <section class="information">
            <h2>Our Laptops</h2>
            <table>

                <tr>
                    <th>----</th>
                    <th>Lenovo</th>
                    <th>Dell</th>
                    <th>Macbook</th>

                </tr>

                <tr>
                    <td class="border">OS</td>
                    <td>Ubunto</td>
                    <td>Microsoft</td>
                    <td>MacOS</td>

                </tr>


                <tr>
                    <td class="border">Price</td>
                    <td>$350</td>
                    <td>$450</td>
                    <td>$550</td>


                </tr>

                <tr>
                    <td class="border">Color</td>
                    <td>Black</td>
                    <td>White</td>
                    <td>Silver</td>


                </tr>

                <tr>
                    <td class="border">RAM</td>
                    <td>4GB</td>
                    <td>16GB</td>
                    <td>8GB</td>

                </tr>

            </table>

            <!-- table -->
        </section>

        <!-- Contact Form -->
        <section class="contact">
            <h2>Contact Us!</h2>
            <form action="#" method="post">
                <fieldset>


                    <label for="tell us who you are">Tell us who you are:</label>
                    <input type="text" name="tell us who you are" id="tell us who you are">
                    <label for="tell us how to contact you">Tell us how to contact you:</label>
                    <input type="text" name="tell us how to contact you" id="tell us how to contact you">
                    <label for="how can I help you?">How can I help you?</label>
                    <input type="text" name="How can I help you?" id="How can I help you?">


                    <label for="email">Email:</label>
                    <input type="email" name="email" placeholder="Please enter your email" id="email">


                    <label for="msg">Messege</label>

                    <textarea name="msg" id="msg" cols="30" rows="10"></textarea>
                    <input class=" submit-btn" placeholder="" type="submit" id="submit" value="Enviar">
                </fieldset>


            </form>
            <!-- form -->
        </section>

        <!-- Footer Links -->
        <footer>
            <h2>Do you want to follow us?</h2>
            <h3>Check out our social media pages!</h3>
            <!-- footer links -->
        </footer>
    </main>
</body>

</html>