-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (149 loc) · 7.62 KB
/
index.html
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
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>#100DaysOfProse</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.13.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic"
rel="stylesheet" type="text/css" />
<!-- Third party plugin CSS-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"
rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">#100DaysOfProse</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#rules">Rules</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#commit">Start</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#faq">FAQ</a></li>
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://twitter.com/rgottleber"><i
class="fab fa-2x fa-twitter-square"></i></a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold">#100DaysOfProse
</h1>
<hr class="divider my-4" />
</div>
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 font-weight-light mb-5">The Official Website of the Challenge
</p>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">Welcome!</h2>
<hr class="divider light my-4" />
<p class="text-white-50 mb-4">Here you can learn the rules,
get answers to your questions by reading the FAQ,
and find out more about the community that’s growing around the challenge.
</p>
<a class="btn btn-light btn-xl js-scroll-trigger" href="#rules">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Rules -->
<section class="page-section" id="rules">
<div class="container">
<h2 class="text-center mt-0">There Are Three Rules</h2>
<hr class="divider my-4" />
<div class="row">
<div class="col-lg-4 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-clock text-primary mb-4"></i>
<h3 class="h4 mb-2">Write</h3>
<p class="text-muted mb-0">Write a minimum of an hour every day.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 text-center">
<div class="mt-5">
<i class="fab fa-4x fa-twitter text-primary mb-4"></i>
<h3 class="h4 mb-2">Share</h3>
<p class="text-muted mb-0">Tweet your progress on using #100DaysOfProse hashtag.</p>
</div>
</div>
<div class="col-lg-4 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-users text-primary mb-4"></i>
<h3 class="h4 mb-2">Connect</h3>
<p class="text-muted mb-0">Each day, reach out to at least two people on Twitter who are also
doing the challenge.</p>
</div>
</div>
</div>
<div class="row justify-content-center mt-4">
<div class="col-lg-8 text-center">
<a class="btn btn-dark btn-xl js-scroll-trigger" href="#commit">Get Started!</a>
</div>
</div>
</div>
</div>
</section>
<!-- Call to action-->
<section class="page-section bg-dark text-white" id="commit">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mb-4">Publicly Commit To The Challenge</h2>
<p class="text-muted mb-4">If you made the decision to commit to the challenge:
Click here to tweet it to the world, making yourself
accountable and taking your resolve to the next level!</p>
<a class="btn btn-light btn-xl"
href="https://twitter.com/intent/tweet?url=https%3A%2F%2F100DaysOfProse.com&text=I%27m%20publicly%20committing%20to%20the%20100DaysOfProse%20Challenge%20starting%20today%21%20Learn%20More%20and%20Join%20me%21%20hey%20@rgottleber&hashtags=100DaysOfProse">Tweet</a>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section class="page-section" id="faq">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="mb-4">Frequently Asked Questions</h2>
<p class="text-muted mb-4">As questions come in you can find them here</p>
</div>
</div>
</div>
</section>
<!-- Footer-->
<footer class="bg-light py-5">
<div class="container">
<div class="small text-center text-muted">Copyright © 2020 100DaysOfProse</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>