WebDevJournal/contact.html at master · Tom-A-Watson/WebDevJournal · 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
<!doctype html><!--HTML5 doctype declaration -->
<html lang="en"><!--default language of the document content -->

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
    <link rel="stylesheet" media="screen and (min-width: 947px) and (max-width: 1920px)" href="css/index.css">
    <link rel="stylesheet" media="screen and (min-width: 601px) and (max-width: 946px)" href="css/tablet.css">
    <link rel="stylesheet" media="screen and (min-width: 320px) and (max-width: 600px)" href="css/smartphone.css">
    <title>Contact Me</title>
</head>

<!--Start of body-->
<body>

    <h1 id="Contact-Title"class="All-Titles">Contact me</h1>

<nav class="Nav-Bar"><!--The primary navigation of the website-->
    <ul>
        <li id="LJ-Button"><a href='index.html'>Learning Journal</a></li>
        <li id="Tutorial-Button"><a href="tutorial.html">Tutorial</a></li>
        <li id="Contact-Button"><a href="#">Contact me</a></li>
    </ul>
</nav>

        <h2 id="Contact-Sub-Title" class="All-Sub-Titles">Confused about something?</h2>

<main>
    <div class="Contact-Form-Layout">
        <p>Reach out using this form so that I can assist you!</p>
        <form id="Contact-Form" action="/processing-form-page" method="post"> <!--Dummy contact form-->
            <fieldset id="group1">
                <legend>Your Details (required)</legend>
                    <label>First name&nbsp</label>
                    <input type="text" class="Gen-Text-Fields" placeholder="e.g. Bob" required/>
                    <label>Surname&nbsp</label>
                    <input type="text" class="Gen-Text-Fields" placeholder="e.g. Smith" required/>
                    <label>Email&nbsp</label>
                    <input type="email" class="Gen-Text-Fields" placeholder="e.g. bobsmith@example.com" required/>
            </fieldset>
            <fieldset id="group2">
                <legend>Your Experience (optional)</legend>
                    <label for="Website-XP">Did you enjoy the website?</legend>
                        <br>
                    <label>Yes&nbsp<input type="radio" name="Details1" value="Yes"/></label>
                    <label>No&nbsp<input type="radio" name="Details1" value="No"/></label>
                    <label>Kind of&nbsp<input type="radio" name="Details1" value="Kind-Of"/></label>
                        <br>
                        <br>
                    <label for="Usage">Was the website easy to use?</label>
                        <br>
                    <label>Yes&nbsp<input type="radio" name="Details2" value="Yes"/></label>
                    <label>No&nbsp<input type="radio" name="Details2" value="No"/></label>
                    <label>Kind of&nbsp<input type="radio" name="Details2" value="Kind-Of"/></label>
                    <br>
                    <br>
                    <label for="comment">Any further comments:</label>
                    <textarea></textarea>
                    <input type="submit" value="Submit" id="Submit-Button"/>
            </fieldset>
        </form>
    </div>
</main>

<!--References only (still in the container)-->
<div class="Menu-Container">
    <div class="Left-Container Container-Styles">
        <h2 class="References">References:</h2>

        <a href="https://developer.mozilla.org/en-US/">
            <img id="MDN-Site-Reference" src="images/mdnreference.jpg" alt="MDN Site Reference">
        </a>
        <a href="https://www.w3schools.com/">
            <img id="W3s-Site-Reference" src="images/w3schoolsref.jpg" alt="W3schools Site Reference">
        </a>
        <a href="https://stackoverflow.com/">
            <img id="SOF-Site-Reference" src="images/stackoverflowref.png" alt="StackOverflow Site Reference">
        </a>
        <a href="https://www.fabriziovanmarciano.com/button-styles/">
            <img id="FVM-Site-Reference" src="images/fvmref.jpg" alt="Fabrizio Van Marciano Site Reference">
        </a>
    </div>
</div>

</body>
</html>