-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsurvey-form
147 lines (136 loc) · 4.5 KB
/
survey-form
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
<!DOCTYPE html>
<html>
<style>
#page-wrapper{ position:relative;}
#header{position:fixed;
display: flex;
width:100%;
justify-content:space-around;
align-items:center;
text-align:center;
margin:auto;
font-size:50px;
font-family:"Times New Roman", Times, serif;
color:#e6b800;
top:0;
background-color: hsl(0,0%,89%); z-index:1;
@media (max-width: 300px) {
flex-wrap: wrap;
}}
#header-img{
position:relative;
width:30px; height:30px;
@media (max-width: 650px) {
margin: 0 auto;
}}
body{background-color: hsl(0,0%,89%);}
.nav-link{
text-align:right;color: black; font-size:20px;}
#title{ display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height:100px;
margin-top:70px;
font-size:30px; font-family: "Comic Sans MS", cursive, sans-serif; font-weight:800;}
#form{display: block;
flex-direction:row;
align-items: center;
justify-content: center;
text-align: center;}
[type="submit"]{ background-color:#ffff33; color: #3d3d29; border-color:black; height:24px; font-family:"Times New Roman", Times, serif; font-size:13px; }
[type="email"]{ padding:5px;background-color:white;width: 200px; height:24px; border-width:0.5px;border-color:black;}
#features1{font-family:"Times New Roman", Times, serif; font-size:4vh; font-weight:1000;}
#features2{font-family:"Times New Roman", Times, serif;font-size:2.8vh; }
#How-It-Works{display: flex;align-items: center;
justify-content: center;
text-align: center;font-family:"Times New Roman", Times, serif;font-size:2.8vh; border-style:solid;border-width:2px; padding: 10px;}
#video{position:relative;
z-index:0;
}
#plans{margin-top: 60px;
display: flex;
flex-direction:row;
justify-content: center;}
#heading-plans{background-color: hsl(0,0%,67%);width:100%}
#plan1,#plan2,#plan3{ display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 33vw;
margin: 10px;
border: 1px solid #000;
border-radius: 3px;
padding:10px;
}
#footer{ background-color: hsl(0,0%,67%); text-align:right;margin-top:40px;margin-right:40px;margin-left:40px; padding: 20px;}
</style>
<div id="page-wrapper">
<header id="header">
<img id="header-img" src="template-logo-library-bookstore-four-260nw-299085131.jpg">
DEE'S BOOKSTORE
<nav id="nav-bar">
<a href="#Features" class="nav-link"> Features</a>
<a href="#How-It-Works" class="nav-link">How It Works</a>
<a href="#Plans" class="nav-link">Plans</a>
</nav>
</header>
<p id="title">
THE ONLINE BOOK STORE
</p>
<form style="text-indent:1em"; id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email">
<input id="email" type="email" placeholder="Enter your email address">
</label> <span class="tab">
<button id="submit" type="submit">Let's Get Started</button> </span>
</form></p>
<br> <br>
<p id="Features">
<ol>
<li id="features1">Premium Hardcovers</li>
<p id="features2">We have the best hardcover books with fine quality pages.</p>
<br>
<li id="features1">Fast Shipping</li>
<p id="features2">We make sure you receive your books as soon as we can make it possible. We also provide free returns if you are not satisfied.</p> <br>
<li id="features1">Exchangeable</li>
<p id="features2">We provide books that can be exchanged once you've finished reading them.</p> </p>
<br><br>
<p id="How-It-Works">
<iframe id="video" width="640" height="360" src="https://www.youtube.com/embed/22x0dLQi_d8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <br>
The working is quite simple- you apply for a plan, according to which we send you the books. Once you've read the books you can exchange them to get the other set.</p>
<br><br>
<p id="Plans">
<div id="plans"> <div id="plan1">
<div id="heading-plans">
<h2>Plan 1</h2></div>
<br>
<ul>
<li>Rs.600</li>
<li>1 month</li>
<li>3 books</li></ul>
<button id="submit" type="submit">SELECT</button></div>
<div id="plan2">
<div id="heading-plans">
<h2>Plan 2</h2></div>
<br>
<ul>
<li>Rs.1600</li>
<li>3 months</li>
<li>9 books</li></ul>
<button id="submit" type="submit">SELECT</button></div>
<div id="plan3">
<div id="heading-plans">
<h2>Plan 3</h2></div>
<br>
<ul>
<li>Rs.6650</li>
<li>12 months</li>
<li>38 books</li></ul>
<button id="submit" type="submit">SELECT</button></h2></div></div>
</p>
<footer id="footer">
Copyright 2016, DEE'S BOOKSTORE
</footer>
</div>
</html>