html5-css3-challenge/contact.html at main · jaumeserr/html5-css3-challenge · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Home</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;600&display=swap" rel="stylesheet">
    <script src="js/main.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <div class="wrapper">
                <h1>My homepage</h1>
                <input type="text" placeholder="Discover news, articles" />
                <nav>
                    <a href="./index.html">Home</a>
                    <a href="#">Contact</a>
                </nav>
            </div>
        </header>
        <main class="form">
            <div class="wrapper align-top">
                <div>
                    <section>
                        <h3>Let's Connect</h3>
                        <p>Theme comes with a pre-made contact form component. You can integrate this form with serverless services such as Formspree, Getform, FormKeep and others to receive form submissions via email.</p>
                        <form class="box">
                            <div class="grid-form">
                                <div>
                                    <label>Name</label>
                                    <input type="text" placeholder="Type Name...">
                                </div>
                                <div>
                                    <label>Company Name</label>
                                    <input type="text" placeholder="Type Company name...">
                                </div>
                                <div>
                                    <label>Email</label>
                                    <input type="email" placeholder="Type email...">
                                </div>
                                <div>
                                    <label>Phone Number</label>
                                    <input type="text" placeholder="Type a phone number...">
                                </div>
                                <div class="fullWidth">
                                    <label>Subject</label>
                                    <input type="text" placeholder="Type a subject...">
                                </div>
                                <div class="fullWidth">
                                    <label>Your Message</label>
                                    <textarea>Enter your message...</textarea>
                                </div>
                                <div>
                                    <button class="primary">Submit</button>
                                </div>
                            </div>
                        </form>
                    </section>
                </div>
                <div>
                    <aside>
                        <h3>Our Commitment</h3>
                        <div class="box">
                            <p>We take our commitment to our users seriously. If you need our help with your project, have questions about how to use the site or are experiencing any technical difficulties, please do not hesitate to contact us.</p>
                        </div>
                        <h3>Advertise With Us</h3>
                        <div class="box">
                            <p>Interested in working together?</p>
                            <p>Suspendisse potenti. Mauris mollis diam tempus ut.</p>
                            <div class="contact">
                                <p>+1 (888) 888-8888<br>email@example.com<br>Barcelona, BCN</p>
                            </div>
                        </div>
                    </aside>
                </div>
            </div>
        </main>
        <footer>
            <div class="wrapper">
                <div>
                    <p>Jaume Serradell</p>
                    <p>© 2020, All Rights Reserved.</p>
                    <p>Powered by Jaume</p>
                </div>
                <div>
                    <p>Quick Links</p>
                    <a href="#">Advertise with us</a>
                    <a href="#">About Us</a>
                    <a href="#">Contact Us</a>
                </div>
                <div>
                    <p>Legal Stuff</p>
                    <a href="#">Privacy Notice</a>
                    <a href="#">Cookie Policy</a>
                    <a href="#">Terms Of Use</a>
                </div>
                <div>
                    <p>Social Media</p>
                    <a href="#">Whatsapp</a>
                    <a href="#">Instagram</a>
                    <a href="#">Twitter</a>
                </div>
            </div>
        </footer>
    </div>
</body>
</html>