LP-Form/index.html at master · iurianu/LP-Form · 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
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/AboutPage">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="bookmark icon" type="image/png" href="assets/images/favicon.png">

        <title>Form Landing Page</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
        <link rel="stylesheet" href="assets/styles/style.css">
	</head>

	<body class="container-fluid">
		<header class="row">
			<nav class="container d-flex" id="navbar-brand">
				<a href="#" rel="tag" title="Fake Company Logo" style="display: block;">
					<img class="logo" src="assets/images/fake-logo.png" alt="Fake Company Logo">
				</a>
			</nav>
			<div class="home-banner w-100"></div>
		</header>

		<section class="row flex-column text-center" id="hero-section">
			<h1>Lorem ipsum dolor</h1>
			<blockquote class="container">
				<p>This is a landing page created with Twitter Bootstrap 4, using HTML5 elements, and SCSS/Compass style processing. <br>All 3rd party files (images, and fonts) were chosen to be free to use, so there are no copyright issues!</p>
				<p>It uses Ruby SASS for SCSS, and the php $mail function on form submission. </p>
			</blockquote>
		</section>

        <main class="row w-100">
            <h2 class="text-center">All types of form elements:</h2>
            <form class="container-lg">
                <fieldset class="" id="radios">
                    <legend>Do you see the squares below? They're, in fact, customized radio boxes!</legend>
                    <ul>
                        <li>
                            <label class="checkcontainer">One
                                <input type="radio" name="radio" value="One">
                                <span class="radiobtn"></span>
                            </label>
                        </li>
                        <li>
                            <label class="checkcontainer">Two
                                <input type="radio" name="radio" value="Two">
                                <span class="radiobtn"></span>
                            </label>
                        </li>
                        <li>
                            <label class="checkcontainer">Three
                                <input type="radio" name="radio" value="Three">
                                <span class="radiobtn"></span>
                            </label>
                        </li>
                    </ul>
                </fieldset>
            </form>
        </main>

		<footer class="row">
		</footer>

        <aside class="script-section">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
        </aside>
	</body>

</html>