+
+
+
+
+ we’re “what’s your story” (hence #WYS) and we want to hear yours! what
+ kinds of things make you special? what are some of your favorite snacks
+ or movies? what is a special talent you mighthave that you don't tell
+ people about in person? this is the beginning of us (fellow riders,
+ walkers, etc.) getting to know one another throughout our communities
+ across the US while encouraging people to get out on the trails and
+ exercise. it revolves around the idea that every stranger has a story
+ to share and we can unify communities using these diverse stories and
+ connect just like trails and maps do. if you are here right now you
+ scanned a QR code that was hung up on a nearby trail. we are happy to
+ have you here! so, go ahead and share your story and enjoy being
+ outside. YOU ARE UGLY!
+
+
+
+ these responses are not being used in any negative way
+ , just to hear stories and see how cool people are all over! you do not
+ have to share your name or where you live, it just makes your
+ responses more identifiable if you see them on the instagram.
+ every two weeks or so there will be a new question put out via
+ QR, and if you follow the instagram handle, you will know when it
+ has been posted. so, please hit the trails and head out into
+ your community and share a new tidbit about yourself.
+ i hope to publish some stories via instagram and share
+ the journeys taking place all over our country!
+
-
diff --git a/homepage/urls.py b/homepage/urls.py
new file mode 100644
index 0000000..168aced
--- /dev/null
+++ b/homepage/urls.py
@@ -0,0 +1,6 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+ path ('', views.homepage, name="homepage")
+]
diff --git a/homepage/views.py b/homepage/views.py
index 91ea44a..369ae80 100644
--- a/homepage/views.py
+++ b/homepage/views.py
@@ -1,3 +1,6 @@
from django.shortcuts import render
# Create your views here.
+
+def homepage (request):
+ return render(request, 'homepage/index.html')
diff --git a/static/css/fonts/Hanson-Bold.ttf b/static/css/fonts/Hanson-Bold.ttf
new file mode 100755
index 0000000..233bc4e
Binary files /dev/null and b/static/css/fonts/Hanson-Bold.ttf differ
diff --git a/static/css/res/banner.png b/static/css/res/banner.png
new file mode 100644
index 0000000..e75fc52
Binary files /dev/null and b/static/css/res/banner.png differ
diff --git a/static/css/styles.css b/static/css/styles.css
index 98e4827..3476c9c 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -1,26 +1,32 @@
@charset "UTF-8";
+@font-face {
+ src: url("./fonts/Hanson-Bold.ttf");
+ font-family: "Hanson-Bold"; }
+html {
+ background-color: #333; }
+
body {
overflow-y: scroll;
/* Keep scroll functionality */
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
- /* Firefox */
-}
+ /* Firefox */ }
body::-webkit-scrollbar {
- display: none;
-}
+ display: none; }
.hero {
- color: white;
+ color: #333 !important;
+ background-color: #333 !important;
background-image: url("res/hero.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
- background-attachment: fixed;
- height: 100vh;
-}
+ background-attachment: fixed; }
+ @media (max-width: 768px) {
+ .hero {
+ background-image: url("res/hero-mobile.png"); } }
.arrow {
vertical-align: bottom;
@@ -29,8 +35,7 @@ body::-webkit-scrollbar {
width: 70px;
margin: 0 auto;
margin-top: 70vh;
- height: 100px;
-}
+ height: 100px; }
.arrow:after {
content: "";
@@ -43,15 +48,39 @@ body::-webkit-scrollbar {
background-repeat: no-repeat;
-webkit-animation: 3s infinite ease;
animation: 3s infinite ease;
- animation-name: การเคลื่อนไหวที่-1;
-}
+ animation-name: การเคลื่อนไหวที่-1; }
@keyframes การเคลื่อนไหวที่-1 {
- 0%, 100% {
- top: 50px;
- }
+ 0%,
+ 100% {
+ top: 50px; }
50% {
- top: 80px;
- }
-}
+ top: 80px; } }
+.vh-50 {
+ height: 50vh; }
+
+.banner {
+ color: white;
+ background-image: url("res/banner.png");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed; }
+
+.info-col {
+ background-color: #fff; }
+
+.info-header {
+ font-family: 'Hanson-Bold','Arial',sans-serif;
+ color: white;
+ text-stroke: 3px #305899;
+ -webkit-text-stroke: 3px #305899; }
+
+.info {
+ font-family: 'Hanson-Bold','Arial',sans-serif;
+ font-size: .8em;
+ color: #2b5291; }
+
+#insta-section {
+ background-color: #333; }
/*# sourceMappingURL=styles.css.map */
diff --git a/static/css/styles.scss b/static/css/styles.scss
index 24cca52..9e12083 100644
--- a/static/css/styles.scss
+++ b/static/css/styles.scss
@@ -1,3 +1,4 @@
+// mixins
@mixin animation-keyframes {
$animation-number: 0 !default !global;
$animation-number: $animation-number + 1 !global;
@@ -10,6 +11,26 @@
}
}
+@mixin mobile {
+ @media (max-width: 768px) { @content }
+}
+
+//fonts
+@font-face {
+ src: url("./fonts/Hanson-Bold.ttf");
+ font-family: "Hanson-Bold";
+}
+
+
+// colors
+$dark-grey: #333;
+$text: #2b5291;
+$header-stroke: #305899;
+
+
+html {
+ background-color: $dark-grey;
+}
body {
overflow-y: scroll; /* Keep scroll functionality */
@@ -22,14 +43,17 @@ body::-webkit-scrollbar {
}
.hero {
- color: white;
+ color: $dark-grey !important;
+ background-color: $dark-grey !important;
background-image: url("res/hero.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
- height: 100vh;
+ @include mobile {
+ background-image: url("res/hero-mobile.png");
+ };
}
.container .arrow {
@@ -69,3 +93,42 @@ body::-webkit-scrollbar {
}
}
}
+
+
+.vh-50 {
+ height: 50vh;
+}
+
+.banner {
+ color: white;
+ background-image: url("res/banner.png");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: cover;
+ background-attachment: fixed;
+}
+
+.info-col{
+ background-color: #fff;
+}
+
+.info-header {
+ font-family: 'Hanson-Bold','Arial',sans-serif;
+ color: white;
+ text-stroke: 3px $header-stroke;
+ -webkit-text-stroke: 3px $header-stroke;
+}
+
+.info {
+ font-family: 'Hanson-Bold','Arial',sans-serif;
+ font-size: .8em;
+ color: $text;
+}
+
+#insta-section {
+ background-color: $dark-grey;
+}
+
+.insta-info {
+
+}