Skip to content

Commit 0055762

Browse files
DevAbdurRDevAbdurR
committed
first commit
0 parents  commit 0055762

File tree

6 files changed

+237
-0
lines changed

6 files changed

+237
-0
lines changed

‎css/styles.css

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/* font-family: 'Source Sans Pro', sans-serif; */
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
margin: 0;
9+
font-family: 'Source Sans Pro', sans-serif;
10+
font-size: 1rem;
11+
color: #404040;
12+
text-align: center;
13+
}
14+
15+
16+
/* =================
17+
Typography
18+
================= */
19+
20+
h1 {
21+
font-size: 2.25rem;
22+
font-weight: 300;
23+
color: #fff;
24+
margin: 0;
25+
}
26+
27+
h1 + p {
28+
color: #F18119;
29+
font-weight: 900;
30+
font-size: 1.3125rem;
31+
text-transform: uppercase;
32+
margin: 0;
33+
}
34+
35+
h2 {
36+
font-size: 1.3125rem;
37+
margin: 0;
38+
}
39+
40+
h2 + p {
41+
font-weight: 900;
42+
color: #F18119;
43+
margin-top: 0;
44+
text-transform: uppercase;
45+
}
46+
47+
.top-text {
48+
font-size: 0.625rem;
49+
color: #F18119;
50+
font-weight: 900;
51+
text-transform: uppercase;
52+
order: -1;
53+
}
54+
55+
.fine-print {
56+
font-size: 0.625rem;
57+
letter-spacing: 1px;
58+
}
59+
60+
strong { font-weight: 900; }
61+
62+
63+
/* =================
64+
Intro section
65+
================= */
66+
67+
.intro {
68+
background-image: url(../images/ribs.jpg);
69+
background-blend-mode: multiply;
70+
background-size: cover;
71+
background-color: #404040;
72+
background-position: center;
73+
padding: 0 .5em 2em;
74+
display: flex;
75+
flex-direction: column;
76+
justify-content: space-between;
77+
min-height: 50vh;
78+
}
79+
80+
81+
/* =================
82+
main-content section
83+
================= */
84+
85+
.main-content {
86+
padding: 2em 1em;
87+
}
88+
89+
90+
91+
.intro > *,
92+
.main-content > * {
93+
max-width: 500px;
94+
margin-left: auto;
95+
margin-right: auto;
96+
}
97+
98+
99+
/* =================
100+
form
101+
================= */
102+
103+
.email-collector {
104+
width: 80%;
105+
max-width: 300px;
106+
}
107+
108+
input,
109+
.btn {
110+
width: 100%;
111+
border-radius: 5px;
112+
}
113+
114+
input {
115+
font-family: inherit;
116+
text-align: inherit;
117+
margin-bottom: .75em;
118+
padding: .25em;
119+
border: 1px solid #404040;
120+
}
121+
122+
.btn {
123+
display: inline-block;
124+
padding: 1em 1.5em;
125+
font-size: 0.625rem;
126+
text-transform: uppercase;
127+
font-weight: 900;
128+
letter-spacing: 1px;
129+
border: 0;
130+
cursor: pointer;
131+
}
132+
133+
.btn-primary {
134+
background: linear-gradient(to left, #ff713b, #ffa51d);
135+
color: white;
136+
}
137+
138+
/* =================
139+
media queries
140+
================= */
141+
142+
@media (min-width: 600px) {
143+
body {
144+
font-size: 1.125rem;
145+
display: flex;
146+
}
147+
148+
h1 {
149+
font-size: 3.5rem;
150+
}
151+
152+
h2,
153+
h1 + p {
154+
font-size: 1.75rem;
155+
}
156+
157+
.intro,
158+
.main-content {
159+
width: 50%;
160+
min-height: 100vh;
161+
}
162+
163+
.main-content {
164+
display: flex;
165+
flex-direction: column;
166+
justify-content: center;
167+
}
168+
}

‎images/dark-ribs.jpg

135 KB
Loading

‎images/ribs.jpg

355 KB
Loading

‎index.html

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
4+
<title>Become a BBQ master!</title>
5+
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900&display=swap" rel="stylesheet">
6+
<link href="css/styles.css" rel="stylesheet">
7+
</head>
8+
<body>
9+
<div class="intro">
10+
<h1>Learn how to make <br><strong>the best BBQ ribs</strong><br> in town</h1>
11+
<p>Join us for this live webinar</p>
12+
<p class="top-text">Mouthwateringly delicious</p>
13+
</div>
14+
15+
<div id="Main-Content" class="main-content">
16+
<h2>Become a BBQ master! </h2>
17+
<p>Register Today</p>
18+
<p>BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art! One way to speed up the process is to learn from the best. You can do just that by signing up for this free webinar!</p>
19+
20+
<form id="Email-Collector" class="email-collector" action="#" method="POST">
21+
<input name="firstName" type="text" required placeholder="First Name">
22+
<input name="emailAddress" type="email" required placeholder="Email">
23+
<button class="btn btn-primary" type="submit">Register</button>
24+
</form>
25+
26+
<p class="fine-print">We'll never share your information without your permission</p>
27+
</div>
28+
29+
<script src="index.js"></script>
30+
</body>
31+
</html>

‎index.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
let emailCollectorForm = document.getElementById("Email-Collector")
2+
emailCollectorForm.addEventListener("submit", event => {
3+
// Stop the default event behavior
4+
event.preventDefault()
5+
6+
// use FormData to get the User's name and email
7+
let ourFormData = new FormData(event.target)
8+
9+
let userFirstName = ourFormData.get("firstName")
10+
let userEmailAddress = ourFormData.get("emailAddress")
11+
12+
let updatedHtmlContent = `
13+
<h2>Congratulations, ${userFirstName}!</h2>
14+
15+
<p>You're on your way to becoming a BBQ Master!</p>
16+
17+
<p class="fine-print">You will get weekly BBQ tips sent to: ${userEmailAddress}</p>
18+
`
19+
20+
let updatedContentContainer = document.getElementById("Main-Content")
21+
updatedContentContainer.innerHTML = updatedHtmlContent
22+
})

‎text/text.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
Mouthwateringly delicious
2+
3+
Learn how to make the best BBQ ribs in town
4+
5+
Join us for this live webinar
6+
7+
Become a BBQ master!
8+
9+
Register Today
10+
11+
BBQ isn't just standing in front of your grill with it on full blast and hoping for the best. It's an art! One way to speed up the process is to learn from the best. You can do just that by signing up for this free webinar!
12+
13+
14+
15+
We'll never share your information
16+
without your permission

0 commit comments

Comments
 (0)