+
-
+
Plan efficiently your next trip to Japan
+In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et elit eget elit facilisis tristique. Nam vel iaculis mauris. Sed ullamcorper tellus erat, non ultrices sem tincidunt euism.
+
-
Niigata
-
-
- 
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/index.js b/index.js
index 9ea710f..dc35938 100644
--- a/index.js
+++ b/index.js
@@ -1,9 +1,21 @@
-import './sass/custom.scss';
-import './sass/utility.scss';
+import './sass/main.scss';
const manageLikes = () => {
- let likes = document.querySelector("[data-likes]");
- likes.innerHTML = likes.dataset.likes;
+ let likeButtons = document.querySelectorAll(".action--like");
+
+ likeButtons.forEach((likeButton) => {
+ likeButton.addEventListener('click', function() {
+ if(!this.classList.contains('is-liked')) {
+ this.classList.add("is-liked");
+ let currentCount = parseInt(this.firstChild.nextSibling.dataset.count);
+ this.firstChild.nextSibling.dataset.count = currentCount + 1;
+ } else {
+ this.classList.remove("is-liked");
+ let currentCount = parseInt(this.firstChild.nextSibling.dataset.count);
+ this.firstChild.nextSibling.dataset.count = currentCount - 1;
+ }
+ })
+ });
}
manageLikes();
\ No newline at end of file
diff --git a/package.json b/package.json
index 18d350c..00f002f 100644
--- a/package.json
+++ b/package.json
@@ -4,10 +4,24 @@
"main": "index.js",
"license": "MIT",
"dependencies": {
- "sass": "^1.14.1"
+ "sass": "^1.20.3"
},
"devDependencies": {
"node-sass": "^4.9.3",
"typescript": "^3.2.4"
- }
+ },
+ "description": "Via Yarn\r > yarn global add parcel-bundler",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/fraincs/parcel-starter.git"
+ },
+ "keywords": [],
+ "author": "",
+ "bugs": {
+ "url": "https://github.com/fraincs/parcel-starter/issues"
+ },
+ "homepage": "https://github.com/fraincs/parcel-starter#readme"
}
diff --git a/sass/_variables.scss b/sass/_variables.scss
new file mode 100644
index 0000000..bb8933f
--- /dev/null
+++ b/sass/_variables.scss
@@ -0,0 +1,39 @@
+// Font sizes
+$h1-font-size: 50px;
+$h2-font-size: 35px;
+$h3-font-size: 30px;
+$h4-font-size: 18px;
+$base-font-size: 16px;
+
+// Line heights
+$h1-line-height: 50px;
+$h2-line-height: 35px;
+$h3-line-height: 40px;
+$h4-line-height: 30px;
+$base-line-height: 24px;
+
+// Font family
+$primary-font-family: 'Lato', sans-serif;
+
+// Colors
+$primary-color: #1B7dff;
+$secondary-color: #102746;
+$white-color: #fff;
+$black-color: #000;
+
+// Gradients
+$primary-gradient: linear-gradient(274.65deg, rgba(53, 66, 103, .0001) 23.56%, #151824 86.3%);
+
+// Overlays
+$primary-overlay: rgba(21, 24, 36, .6);
+$secondary-overlay: rgba(21, 24, 36, .4);
+
+//Shadows
+$primary-box-shadow: 0px 2px 20px rgba(21, 24, 36, .16);
+
+//Gutter
+$gutter-width: 10px;
+
+//Breakpoints
+$sm-breakpoint: 767px;
+$md-breakpoint: 1160px;
\ No newline at end of file
diff --git a/sass/custom.scss b/sass/custom.scss
deleted file mode 100644
index adfbbbd..0000000
--- a/sass/custom.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-// Custom CSS
-.header {
- background-image: url("../images/city.png");
- background-repeat: no-repeat;
- background-size: 100%;
- padding: 60px 0 375px 0;
-}
-
-.footer {
- padding: 120px 0;
-}
\ No newline at end of file
diff --git a/sass/layout/_footer.scss b/sass/layout/_footer.scss
new file mode 100644
index 0000000..a82dd8b
--- /dev/null
+++ b/sass/layout/_footer.scss
@@ -0,0 +1,12 @@
+// Footer
+.footer {
+ background: black;
+ padding-top: $gutter-width * 4;
+ padding-bottom: $gutter-width * 7;
+}
+
+.footer__socials {
+ li {
+ margin-right: $gutter-width * 4;
+ }
+}
\ No newline at end of file
diff --git a/sass/layout/_header.scss b/sass/layout/_header.scss
new file mode 100644
index 0000000..367cac5
--- /dev/null
+++ b/sass/layout/_header.scss
@@ -0,0 +1,29 @@
+// Header
+.header {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ z-index: 2;
+ padding-top: $gutter-width * 3;
+ padding-bottom: $gutter-width * 3;
+}
+
+.header__nav {
+ display: flex;
+
+ li {
+ margin-left: $gutter-width * 2;
+
+ &:last-child {
+ display: none;
+ }
+ @media screen and (min-width: $sm-breakpoint) {
+ margin-left: $gutter-width * 4;
+
+ &:last-child {
+ display: block;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/sass/layout/_hero.scss b/sass/layout/_hero.scss
new file mode 100644
index 0000000..4fe5fe5
--- /dev/null
+++ b/sass/layout/_hero.scss
@@ -0,0 +1,9 @@
+// Hero
+.hero {
+ background-image: url("../images/city.jpg");
+ background-repeat: no-repeat;
+ background-size: cover;
+ min-height: 100vh;
+ padding-top: $gutter-width * 10;
+ padding-bottom: $gutter-width * 10;
+}
\ No newline at end of file
diff --git a/sass/layout/_section.scss b/sass/layout/_section.scss
new file mode 100644
index 0000000..f60b7c6
--- /dev/null
+++ b/sass/layout/_section.scss
@@ -0,0 +1,29 @@
+// Section
+section {
+ padding-top: $gutter-width * 3;
+ padding-bottom: $gutter-width * 3;
+
+ @media screen and (min-width: $sm-breakpoint) {
+ padding-top: $gutter-width * 5;
+ padding-bottom: $gutter-width * 5;
+ }
+}
+
+.full-section {
+ background-size: cover;
+ padding-top: $gutter-width * 5;
+ padding-bottom: $gutter-width * 5;
+ @media screen and (min-width: $sm-breakpoint) {
+ min-height: 525px;
+ }
+}
+
+.alternate-section {
+ padding: 10px;
+}
+
+.offset-section {
+ @media screen and (min-width: $sm-breakpoint) {
+ transform: translateY(-50%);
+ }
+}
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
new file mode 100644
index 0000000..8ffede7
--- /dev/null
+++ b/sass/main.scss
@@ -0,0 +1,31 @@
+// Variables
+@import './_variables.scss';
+
+// Layout
+@import './layout/_header.scss';
+@import './layout/_hero.scss';
+@import './layout/_section.scss';
+@import './layout/_footer.scss';
+
+// Symbols
+@import './symbols/_action.scss';
+@import './symbols/_font.scss';
+@import './symbols/_benefit.scss';
+@import './symbols/_btn.scss';
+@import './symbols/_form-field.scss';
+@import './symbols/_link.scss';
+@import './symbols/_overlay.scss';
+@import './symbols/_thumbnail.scss';
+
+// Utilities
+@import './utilities/_colors.scss';
+@import './utilities/_flex.scss';
+@import './utilities/_image.scss';
+@import './utilities/_shadow.scss';
+@import './utilities/_spacings.scss';
+@import './utilities/_text.scss';
+@import './utilities/_width.scss';
+
+* {
+ box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/sass/symbols/_action.scss b/sass/symbols/_action.scss
new file mode 100644
index 0000000..ed58d55
--- /dev/null
+++ b/sass/symbols/_action.scss
@@ -0,0 +1,37 @@
+// Action
+.action {
+ margin-left: $gutter-width;
+ cursor: pointer;
+
+ span {
+ margin-right: $gutter-width / 2;
+ &::before {
+ content: attr(data-count);
+ }
+ }
+}
+
+.action--like {
+ position: relative;
+
+ &::after {
+ content: '';
+ background-image: url('../images/heart-selected.svg');
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%) scale3d(1.75, 1.75, 1.75);
+ right: 0;
+ z-index: 2;
+ opacity: 0;
+ transition: transform 240ms ease, opacity 240ms ease;
+ }
+
+ &.is-liked {
+ &::after {
+ opacity: 1;
+ transform: translateY(-50%) scale3d(1.1, 1.1, 1.1);
+ }
+ }
+}
\ No newline at end of file
diff --git a/sass/symbols/_benefit.scss b/sass/symbols/_benefit.scss
new file mode 100644
index 0000000..a6e33f6
--- /dev/null
+++ b/sass/symbols/_benefit.scss
@@ -0,0 +1,12 @@
+// Benefit
+.benefit {
+ margin: $gutter-width * 2;
+
+ img {
+ margin-bottom: $gutter-width * 3;
+ }
+
+ p {
+ margin-top: $gutter-width;
+ }
+}
\ No newline at end of file
diff --git a/sass/symbols/_btn.scss b/sass/symbols/_btn.scss
new file mode 100644
index 0000000..17eb621
--- /dev/null
+++ b/sass/symbols/_btn.scss
@@ -0,0 +1,28 @@
+// Btn
+.btn {
+ display: inline-block;
+ background-color: $primary-color;
+ color: $white-color;
+ text-decoration: none;
+ border: 0;
+ border-radius: 4px;
+ cursor: pointer;
+ text-align: center;
+ transition: background-color 240ms ease;
+
+ &:hover {
+ background-color: $secondary-color;
+ }
+}
+
+.btn--large {
+ padding: 7.5px 24px 9.5px;
+ font-size: $base-font-size * 1.25;
+ min-width: 150px;
+}
+
+.btn--small {
+ padding: 5px 16px 8px;
+ font-size: $base-font-size;
+ min-width: 114px;
+}
\ No newline at end of file
diff --git a/sass/symbols/_font.scss b/sass/symbols/_font.scss
new file mode 100644
index 0000000..6162000
--- /dev/null
+++ b/sass/symbols/_font.scss
@@ -0,0 +1,103 @@
+// Font
+body {
+ font-family: $primary-font-family;
+ font-size: $base-font-size;
+}
+
+p {
+ margin: 0;
+}
+
+%h1 {
+ font-size: $h1-font-size *.75;
+ line-height: $h1-line-height *.75;
+ margin: 0;
+ padding: 0;
+ @media screen and (min-width: $sm-breakpoint) {
+ font-size: $h1-font-size;
+ line-height: $h1-line-height;
+ }
+}
+
+%h2 {
+ font-size: $h2-font-size *.75;
+ line-height: $h2-line-height *.75;
+ margin: 0;
+ padding: 0;
+ @media screen and (min-width: $sm-breakpoint) {
+ font-size: $h2-font-size;
+ line-height: $h2-line-height;
+ }
+}
+
+%h3 {
+ font-size: $h3-font-size *.75;
+ line-height: $h3-line-height *.75;
+ margin: 0;
+ padding: 0;
+ @media screen and (min-width: $sm-breakpoint) {
+ font-size: $h3-font-size;
+ line-height: $h3-line-height;
+ }
+}
+
+%h4 {
+ font-size: $h4-font-size *.9;
+ line-height: $h4-line-height *.9;
+ margin: 0;
+ padding: 0;
+ @media screen and (min-width: $sm-breakpoint) {
+ font-size: $h4-font-size;
+ line-height: $h4-line-height;
+ }
+}
+
+%p {
+ font-size: $base-font-size;
+ font-weight: 400;
+ line-height: $base-line-height;
+ margin: 0;
+ padding: 0;
+}
+
+.typography {
+ h1 {
+ @extend %h1;
+ }
+
+ h2 {
+ @extend %h2;
+ }
+
+ h3 {
+ @extend %h3;
+ }
+
+ h4 {
+ @extend %h4;
+ }
+
+ p {
+ @extend %p;
+ }
+}
+
+.h1 {
+ @extend %h1;
+}
+
+.h2 {
+ @extend %h2;
+}
+
+.h3 {
+ @extend %h3;
+}
+
+.h4 {
+ @extend %h4;
+}
+
+.p {
+ @extend %p;
+}
\ No newline at end of file
diff --git a/sass/symbols/_form-field.scss b/sass/symbols/_form-field.scss
new file mode 100644
index 0000000..a898713
--- /dev/null
+++ b/sass/symbols/_form-field.scss
@@ -0,0 +1,27 @@
+// Form field
+.input {
+ flex-grow: 1;
+ margin-right: $gutter-width * 3;
+
+ label {
+ font-size: $base-font-size;
+ color: $white-color;
+ font-weight: 400;
+ display: block;
+ }
+
+ input {
+ border: 0;
+ border-bottom: 1px solid $white-color;
+ background: transparent;
+ outline: 0;
+ color: white;
+ width: 100%;
+ position: relative;
+ transition: border-color 240ms ease;
+
+ &:focus {
+ border-color: $primary-color;
+ }
+ }
+}
\ No newline at end of file
diff --git a/sass/symbols/_link.scss b/sass/symbols/_link.scss
new file mode 100644
index 0000000..2030b07
--- /dev/null
+++ b/sass/symbols/_link.scss
@@ -0,0 +1,27 @@
+// Link
+.link {
+ color: $primary-color;
+ text-transform: uppercase;
+ text-decoration: none;
+ padding-right: 53px;
+ position: relative;
+
+ &::after {
+ content: '';
+ width: 33px;
+ height: 8px;
+ background-image: url('../images/arrow.svg');
+ background-size: cover;
+ position: absolute;
+ top: 50%;
+ right: 0;
+ transform: translateY(-50%);
+ transition: 240ms transform ease;
+ }
+
+ &:hover {
+ &::after {
+ transform: translate3d(-$gutter-width, -50%, 0);
+ }
+ }
+}
\ No newline at end of file
diff --git a/sass/symbols/_overlay.scss b/sass/symbols/_overlay.scss
new file mode 100644
index 0000000..840c69d
--- /dev/null
+++ b/sass/symbols/_overlay.scss
@@ -0,0 +1,61 @@
+// Overlay
+.bg-overlay {
+ position: relative;
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 0;
+ width: 100%;
+ height: 100%;
+ transition: 240ms opacity;
+ }
+
+ > * {
+ position: relative;
+ z-index: 1;
+ }
+}
+
+.bg-overlay--link {
+ display: block;
+ overflow: hidden;
+ margin: $gutter-width / 2;
+ background-size: cover;
+
+ &:hover {
+ &::before {
+ opacity: .75;
+ }
+ }
+}
+
+.bg-overlay--primary {
+ &::before {
+ background-color: $primary-overlay;
+ }
+}
+
+.bg-overlay--secondary {
+ &::before {
+ background-color: $secondary-overlay;
+ }
+}
+
+.bg-overlay--gradient {
+ &::before {
+ background: $primary-gradient;
+ }
+}
+
+.bg-overlay__title {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ padding: $gutter-width;
+ @media screen and (min-width: $sm-breakpoint) {
+ padding: $gutter-width * 3;
+ }
+}
\ No newline at end of file
diff --git a/sass/symbols/_thumbnail.scss b/sass/symbols/_thumbnail.scss
new file mode 100644
index 0000000..259b349
--- /dev/null
+++ b/sass/symbols/_thumbnail.scss
@@ -0,0 +1,45 @@
+// Thumbnail
+.thumbnail {
+ margin-top: $gutter-width * 3;
+
+ @media screen and (min-width: $sm-breakpoint) {
+ margin-left: $gutter-width;
+ margin-right: $gutter-width;
+ }
+
+ @media screen and (min-width: $md-breakpoint) {
+ margin-left: $gutter-width * 3;
+ margin-right: $gutter-width * 3;
+ }
+}
+
+.thumbnail__image {
+ position: relative;
+ padding-bottom: 100%;
+
+ > img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.thumbnail__actions {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: flex;
+ width: 100%;
+ background-color: $primary-overlay;
+ padding: $gutter-width;
+
+ > div {
+ display: flex;
+ }
+
+ img {
+ display: inline-block;
+ }
+}
\ No newline at end of file
diff --git a/sass/utilities/_colors.scss b/sass/utilities/_colors.scss
new file mode 100644
index 0000000..d6fde39
--- /dev/null
+++ b/sass/utilities/_colors.scss
@@ -0,0 +1,32 @@
+// Colors utilities
+.blue {
+ color: $primary-color;
+}
+
+.bg-blue {
+ background-color: $primary-color;
+}
+
+.dark-blue {
+ color: $secondary-color;
+}
+
+.bg-dark-blue {
+ background-color: $secondary-color;
+}
+
+.white {
+ color: $white-color;
+}
+
+.bg-white {
+ background-color: $white-color;
+}
+
+.black {
+ color: $black-color;
+}
+
+.bg-black {
+ background-color: $black-color;
+}
\ No newline at end of file
diff --git a/sass/utilities/_flex.scss b/sass/utilities/_flex.scss
new file mode 100644
index 0000000..0eb3f64
--- /dev/null
+++ b/sass/utilities/_flex.scss
@@ -0,0 +1,25 @@
+// Flex utilities
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.justify-between {
+ justify-content: space-between;
+}
+
+.justify-center {
+ justify-content: center;
+}
+
+.align-center {
+ align-items: center;
+}
+
+.align-end {
+ align-items: flex-end;
+}
+
+.direction-row-reversed {
+ flex-direction: row-reverse;
+}
\ No newline at end of file
diff --git a/sass/utilities/_image.scss b/sass/utilities/_image.scss
new file mode 100644
index 0000000..6479d0c
--- /dev/null
+++ b/sass/utilities/_image.scss
@@ -0,0 +1,25 @@
+// Image utilities
+.full-width-image {
+ display: block;
+ max-width: 100%;
+}
+
+.ratio-16-9 {
+ padding-bottom: 56.25%;
+}
+
+.ratio-8-5 {
+ padding-bottom: 62.5%;
+}
+
+.ratio-4-3 {
+ padding-bottom: 75%;
+}
+
+.ratio-3-2 {
+ padding-bottom: 66.66%;
+}
+
+.ratio-1-1 {
+ padding-bottom: 100%;
+}
\ No newline at end of file
diff --git a/sass/utilities/_shadow.scss b/sass/utilities/_shadow.scss
new file mode 100644
index 0000000..21ece1e
--- /dev/null
+++ b/sass/utilities/_shadow.scss
@@ -0,0 +1,5 @@
+// Shadow utilities
+.primary-shadow {
+ background-color: $white-color;
+ box-shadow: $primary-box-shadow;
+}
\ No newline at end of file
diff --git a/sass/utilities/_spacings.scss b/sass/utilities/_spacings.scss
new file mode 100644
index 0000000..906079e
--- /dev/null
+++ b/sass/utilities/_spacings.scss
@@ -0,0 +1,69 @@
+// Spacings utilities
+.center {
+ margin: 0 auto;
+}
+
+.mequalizer-5 {
+ margin-left: -$gutter-width / 2;
+ margin-right: -$gutter-width / 2;
+}
+
+.mequalizer-30 {
+ @media screen and (min-width: $sm-breakpoint) {
+ margin-left: -$gutter-width;
+ margin-right: -$gutter-width;
+ }
+
+ @media screen and (min-width: $md-breakpoint) {
+ margin-left: -$gutter-width * 3;
+ margin-right: -$gutter-width * 3;
+ }
+}
+
+//margins
+.ma0 {
+ margin: 0;
+}
+
+.mt1 {
+ margin-top: $gutter-width;
+}
+
+.mt2 {
+ margin-top: $gutter-width*2;
+}
+
+.mt3 {
+ margin-top: $gutter-width*3;
+}
+
+.mt4 {
+ margin-top: $gutter-width*4;
+}
+
+.mr1 {
+ margin-right: $gutter-width;
+}
+
+.ml1 {
+ margin-left: $gutter-width;
+}
+
+//padding
+.pa0 {
+ padding: 0;
+}
+
+.p4 {
+ @media screen and (min-width: $sm-breakpoint) {
+ padding: $gutter-width * 4;
+ }
+}
+
+.p6 {
+ padding: $gutter-width * 4 $gutter-width * 2;
+
+ @media screen and (min-width: $sm-breakpoint) {
+ padding: $gutter-width * 6;
+ }
+}
\ No newline at end of file
diff --git a/sass/utilities/_text.scss b/sass/utilities/_text.scss
new file mode 100644
index 0000000..522692f
--- /dev/null
+++ b/sass/utilities/_text.scss
@@ -0,0 +1,20 @@
+// Text utilities
+.ttu {
+ text-transform: uppercase;
+}
+
+.list {
+ list-style-type: none;
+}
+
+.no-underline {
+ text-decoration: none;
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-uppercase {
+ text-transform: uppercase;
+}
\ No newline at end of file
diff --git a/sass/utilities/_width.scss b/sass/utilities/_width.scss
new file mode 100644
index 0000000..9495b69
--- /dev/null
+++ b/sass/utilities/_width.scss
@@ -0,0 +1,52 @@
+// Width utilities
+.w-100 {
+ width: 100%;
+}
+
+.w-75 {
+ width: 75%;
+}
+
+.w-66 {
+ width: 100%;
+ @media screen and (min-width: $sm-breakpoint) {
+ width: 66.66%;
+ }
+}
+
+.w-50 {
+ width: 100%;
+ @media screen and (min-width: $sm-breakpoint) {
+ width: 50%;
+ }
+}
+
+.w-33 {
+ width: 100%;
+ @media screen and (min-width: $sm-breakpoint) {
+ width: 33.33%;
+ }
+}
+
+.w-25 {
+ width: 25%;
+}
+
+.w-17 {
+ width: 100%;
+ @media screen and (min-width: $sm-breakpoint) {
+ width: 16.67%;
+ }
+}
+
+.w-100 {
+ width: 100%;
+}
+
+// max-widths
+// 1st step in the max width scale @todo add more max widths to the scale
+.mw1 {
+ max-width: 1100px;
+ padding-left: $gutter-width;
+ padding-right: $gutter-width;
+}
\ No newline at end of file
diff --git a/sass/utility.scss b/sass/utility.scss
deleted file mode 100644
index 499e3ae..0000000
--- a/sass/utility.scss
+++ /dev/null
@@ -1,104 +0,0 @@
-// Utility classes
-// flex
-.flex {
- display: flex;
-}
-
-.justify-between {
- justify-content: space-between;
-}
-
-// spacings
-.center {
- margin: 0 auto
-}
-
-// margin all 0
-.ma0 {
- margin: 0;
-}
-// padding all 0
-.pa0 {
- padding: 0;
-}
-
-// widths in %
-.w-100 {
- width: 100%;
-}
-
-.w-75 {
- width: 75%;
-}
-
-.w-66 {
- width: 66.66%;
-}
-
-.w-50 {
- width: 50%;
-}
-
-.w-33 {
- width: 33.33%;
-}
-
-.w-25 {
- width: 25%;
-}
-
-.w-100 {
- width: 100%;
-}
-
-// max-widths
-// 1st step in the max width scale @todo add more max widths to the scale
-.mw1 {
- max-width: 1100px;
-}
-
-// colors
-.blue {
- color: #1B7DFF;
-}
-
-.bg-blue {
- background-color: #1B7DFF;
-}
-
-.dark-blue {
- color: #151824;
-}
-
-.bg-dark-blue {
- background-color: #151824;
-}
-
-.white {
- color: #FFF;
-}
-
-.bg-white {
- background-color: #FFF;
-}
-
-.black {
- color: #000;
-}
-
-.bg-black {
- background-color: #000;
-}
-
-// text
-.ttu {
- text-transform: uppercase;
-}
-
-.list {
- list-style-type: none;
-}
-
-.no-underline {
- text-decoration: none;
-}
diff --git a/yarn.lock b/yarn.lock
index 2571eea..fa12e60 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1465,9 +1465,9 @@ sass-graph@^2.2.4:
scss-tokenizer "^0.2.3"
yargs "^7.0.0"
-sass@^1.14.1:
- version "1.14.1"
- resolved "https://registry.yarnpkg.com/sass/-/sass-1.14.1.tgz#6f7b083b880104caa19e45841cdb0889d9bdadbf"
+sass@^1.20.3:
+ version "1.20.3"
+ resolved "https://registry.yarnpkg.com/sass/-/sass-1.20.3.tgz#18284a7bac6eab9cbb80453288473194f29efb84"
dependencies:
chokidar "^2.0.0"
+
+
+
+
+
- Plan less, travel more
+
+
+
+
+ 
+
+
+ Benefit 1
+Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend la.
+
+
+
+ 
+
+
+ Benefit 2
+Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend la.
+
+
+ 
+
+
+ Benefit 3
+Fusce vehicula dolor arcu, sit amet blandit dolor mollis nec. Donec viverra eleifend la.
+
-
+ Osaka
-
-
-
- 
+
+
+
+
+
-
-
+
+
+
+
+
-
+
+ 
+
+
+
+
Feature 1 vivamus adipiscing fermentum quam volutpat
++ “Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, + erat a elementum rutrum, neque sem pretium metus, + quis mollis nisl nunc et massa. Donec viverra eleifend la.” +
+
+
+
+ 
+
+
+
+
+ Justin Wong
+Digital nomad
+
+
+
+
+
+ 
+
+
+
+
+ Feature 2 vivamus adipiscing fermentum quam volutpat
++ “Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, + erat a elementum rutrum, neque sem pretium metus, + quis mollis nisl nunc et massa. Donec viverra eleifend la.” +
+
+
+
+ 
+
+
+
+
+ Alexis Beesly
+Yoga Teacher
+
+ See how it works
+ +
+
+
+
+
+
+ Get inspired for your next trip
+
+ View more
+
+
+
+
+
+
+
+ Mount Fuji
+ +
+
+
+ Kyoto
+ +
+
+
+
+
+
+ Learn about Japan
+
+ View more
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ nagoya
+
+
+
+
+
+
+
+
+
+
+
+
+ + Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. + Quisque volutpat augue enim, + pulvinar lobortis nibh lacinia at. Vestibulum. +
+ See full article +
+
+
+
+
+ 
+
+
+
+
+
+
+ Niigata
+
+
+
+
+
+
+
+
+
+
+
+
+ + Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. + Quisque volutpat augue enim, + pulvinar lobortis nibh lacinia at. Vestibulum. +
+ See full article +
+
+
+
+
+ 
+
+
+
+
+
+
+ osaka
+
+
+
+
+
+
+
+
+
+
+
+
+ + Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. + Quisque volutpat augue enim, + pulvinar lobortis nibh lacinia at. Vestibulum. +
+ See full article +