Add files via upload

GiraldoYeison · Oct 3, 2023 · 573f09e · 573f09e
1 parent 3b2ba4e
commit 573f09e
Show file tree

Hide file tree

Showing 15 changed files with 632 additions and 0 deletions.
diff --git a/contact-us.html b/contact-us.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Roar Cycle - Contact US Details Address Phone Number</title>
+    <meta name="description" content="Contact Details for Roar - 57 Moyglare Abbey, Dublin, w32c1k2, phone 3535465481">
+
+    <!-- This is Eric Mayers CSS reset -->
+    <link rel="stylesheet" href="css-reset.css">
+
+    <!-- This is my own stule sheet -->
+    <link rel="stylesheet" href="style.css">
+
+    <!-- Font from google font -->
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto:wght@300&display=swap" rel="stylesheet">
+
+    <!-- icons from fontawesome.com for cards -->
+    <script src="https://kit.fontawesome.com/180dd056c3.js" crossorigin="anonymous"></script>
+
+</head>
+<body>
+    <div class="container">
+        <header>
+            <div class="logo">
+                <a href="index.html">
+                    <img src="images/logo-roar-bikes.svg" alt="Logo for Bike Repair shop Roar Bikes">
+                </a>
+            </div>
+
+            <nav>
+
+                <div class="navbutton">
+                    <a href="#">Book Online</a>
+
+                    <div class="dropdown">
+                        <div class="navbutton"><a href="#">Onsite Service</a></div>
+                        <div class="navbutton"><a href="#">Parts Delivery</a></div>
+                        <div class="navbutton"><a href="#">Request Callback</a></div>
+                    </div>
+
+                </div>
+
+                <div class="navbutton">
+                    <a href="#">About</a>
+                </div>
+
+                <div class="navbutton">
+                    <a href="#">Contact</a>
+                </div>
+
+
+            </nav>
+        </header>
+
+
+        <div class="main2">
+
+            <h1>Contact us</h1>
+            <p>Do you have any questions? Please do not hesitate to contact us directly. Our team will come back to you within a matter of hours to help you.</p>
+
+            <form action="mail.php" method="post">
+
+                <div class="inputwrapper">
+                    <label for="name" class="newline" >First Name</label>
+                    <input type="text" name="name" id="name" placeholder="First Name">
+                </div>
+
+                <div class="inputwrapper">
+                    <label for="email" class="newline" >Email</label>
+                    <input type="email" name="email" id="email" placeholder="dan@example.com">
+                </div>
+
+                <div class="inputwrapper">
+                    <textarea name="message" id="message" cols="30" rows="5" placeholder="Let us know what you think" ></textarea>
+                </div>
+
+                <div class="inputwrapper">
+
+
+                    <input type="checkbox" name="email-sub" id="email-sub" value="yes-sign-me-up" checked>
+                    <label for="email-sub">Sign up for Email Newsletter</label>
+
+                </div>
+
+                <div class="inputwrapper">
+
+                    <p>How would you like to be contacted?</p>
+                    <input type="radio" name="contact-pref" id="phone" value="phone">
+                    <label for="phone" class="margin-right-a">Phone</label>
+                    <input type="radio" name="contact-pref" id="email2" value="email2">
+                    <label for="email2">Email</label>
+
+                </div>
+
+                <div class="inputwrapper">
+
+                    <select name="county" id="county">
+
+                        <option value="Not-chosen">Choose county</option>
+                        <option value="Miami">Miami</option>
+                        <option value="Kendall">Kendall</option>
+                        <option value="Sunset">Sunset</option>
+
+                    </select>
+
+
+                </div>
+
+                <input type="submit" value="Submit" class="mybutton">
+
+
+            </form>
+
+        </div>
+
+
+        <div class="cards">
+            <div class="card1">
+                <a href="#">
+                    <i class="fa-solid fa-bicycle"></i>
+                    <h2>Book Online</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil blanditiis praesentium magnam quae rerum placeat!.
+                    </p>
+                </a>
+            </div>
+            <div class="card2">
+                <a href="#">
+                    <i class="fa-solid fa-gears"></i>
+                    <h2>Service Types</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil blanditiis praesentium magnam quae rerum placeat!.</p>
+                </a>
+            </div>
+            <div class="card3">
+                <a href="#">
+                    <i class="fa-solid fa-phone"></i>
+                    <h2>Call for Advice</h2>
+                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil blanditiis praesentium magnam quae rerum placeat!.</p>
+                </a>
+            </div>
+        </div>
+
+        <div class="testimonials">
+            <div class="tbox">
+                <p>"I would like to personally thank you for your outstanding product. You guys rock! It's all good. I can't say
+                    enough about Roar Cycles."</p>
+                <p>- Tammara I.</p>
+            </div>
+
+            <div class="tbox">
+                <p>"Roar Cycles is the most valuable business resource we have EVER purchased. I will let my mum know about
+                    this, she could really make use of Roar Cycles! Roar Cycles has completely surpassed our expectations."</p>
+                <p>- Floris V.</p>
+            </div>
+
+            <div class="tbox">
+                <p>"I'm good to go. Roar Cycles is both attractive and highly adaptable. I will refer everyone I know."</p>
+                <p>- Carlin B.</p>
+            </div>
+
+            <div class="tbox">
+                <p>"Roar Cycles impressed me on multiple levels. I would gladly pay over 600 dollars for Roar Cycles. We can't understand how we've been living without Roar Cycles."</p>
+                <p>- Eve V</p>
+            </div>
+
+        </div>
+
+
+
+    </div>
+
+
+</body>
+</html>
diff --git a/css-reset.css b/css-reset.css
@@ -0,0 +1,48 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
diff --git a/images/bicycle-solid.svg b/images/bicycle-solid.svg
diff --git a/images/image-background-card1.jpg b/images/image-background-card1.jpg
diff --git a/images/image-background-card2.jpg b/images/image-background-card2.jpg
diff --git a/images/image-background-card3.jpg b/images/image-background-card3.jpg
diff --git a/images/image-bike-repair-service-a.jpg b/images/image-bike-repair-service-a.jpg
diff --git a/images/image-bike-repair-service.jpg b/images/image-bike-repair-service.jpg
diff --git a/images/image-lion-background.png b/images/image-lion-background.png
diff --git a/images/logo-roar-bikes.png b/images/logo-roar-bikes.png
diff --git a/images/logo-roar-bikes.svg b/images/logo-roar-bikes.svg