Nuxt.js/Vue.js Pre-launch Landing Page Template (using BootstrapVue)
March 12, 2020Edit pages/index.vue
<template>
<div>
<b-navbar toggleable="lg" type="light" :class="[$style['alternate-bg'], $style['navbar-bg']]">
<div class="container">
<b-navbar-brand to="/">
<img src="/brand.png" width="30" height="30" class="d-inline-block align-top" alt="">
Journey
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<!--
<b-navbar-nav>
<b-nav-item to="/about">About</b-nav-item>
</b-navbar-nav>
-->
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-item to="/privacy">Privacy</b-nav-item>
</b-navbar-nav>
</b-collapse>
</div>
</b-navbar>
<div :class="[$style['alternate-bg'], $style['header-bg']]" class="py-5 text-center">
<div class="container">
<!-- <logo /> -->
<h1>
Journey
</h1>
<h4 class="text-secondary">
Simple and easy way to create a blog from your photos
</h4>
<div class="mt-5">
<div class="my-2 text-secondary">Join our early access program.</div>
<form>
<div class="form-row justify-content-md-center">
<div class="col-md-auto mb-3">
<label for="inputEmail" class="sr-only">Your email</label>
<input class="form-control" name="email" type="email" placeholder="Your email">
</div>
<div class="col-md-auto mb-3">
<button type="submit" class="btn btn-primary">Request Invite</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="py-5">
<div class="container">
<b-carousel
:interval="4000"
controls
indicators
background="#ababab"
img-width="1024"
img-height="480"
style="text-shadow: 1px 1px 2px #333;"
>
<!-- Text slides with image -->
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
></b-carousel-slide>
<!-- Slides with custom text -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=54">
<h1>Hello world!</h1>
</b-carousel-slide>
<!-- Slides with image only -->
<b-carousel-slide img-src="https://picsum.photos/1024/480/?image=58"></b-carousel-slide>
<!-- Slides with img slot -->
<!-- Note the classes .d-block and .img-fluid to prevent browser default image alignment -->
<b-carousel-slide>
<template v-slot:img>
<img
class="d-block img-fluid w-100"
width="1024"
height="480"
src="https://picsum.photos/1024/480/?image=55"
alt="image slot"
>
</template>
</b-carousel-slide>
<!-- Slide with blank fluid image to maintain slide aspect ratio -->
<b-carousel-slide caption="Blank Image" img-blank img-alt="Blank image">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros felis, tincidunt
a tincidunt eget, convallis vel est. Ut pellentesque ut lacus vel interdum.
</p>
</b-carousel-slide>
</b-carousel>
</div>
</div>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>What is Lorem Ipsum?</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="col-md-6">
<h2>Why do we use it?</h2>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.</p>
</div>
</div>
</div>
</div>
<div :class="$style['alternate-bg']" class="py-5 text-center">
<div class="container">
<h2>Request Early Invite</h2>
<form>
<div class="form-row justify-content-md-center">
<div class="my-3">Join our early access program and be the first to experience the Journey.</div>
</div>
<div class="form-row justify-content-md-center">
<div class="col-md-auto mb-3">
<label for="inputEmail" class="sr-only">Your email</label>
<input class="form-control" name="email" type="email" placeholder="Your email">
</div>
<div class="col-md-auto mb-3">
<button type="submit" class="btn btn-primary" style="position: relative;">Request Invite</button>
</div>
</div>
</form>
<div class="text-secondary">No spam. Easily unsubsribe with a single click.</div>
</div>
</div>
<div class="py-3">
<div class="container">
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/d_luaz">Twitter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://code.luasoftware.com">Blog</a>
</li>
</ul>
<div class="text-center">© <a href="https://www.luasoftware.com/" class="text-secondary">Lua Software</a></div>
</div>
</div>
</div>
</template>
<script>
export default {
head: {
title: 'Journey - create a photo blog'
}
}
</script>
<style module>
.alternate-bg {
background-color: #FBFBFB;
border-bottom: solid 1px #DEDEDE;
border-top: solid 1px #DEDEDE;
}
.navbar-bg {
border-top: 0;
border-bottom: 0;
}
.header-bg {
border-top: 0;
}
</style>
Edit layouts/default.vue
.
<template>
<div>
<nuxt />
</div>
</template>
<style>
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
font-size: 16px;
word-spacing: 1px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
</style>
- algo-trading
- algolia
- analytics
- android
- android-ktx
- android-permission
- android-studio
- apps-script
- bash
- binance
- bootstrap
- bootstrapvue
- chartjs
- chrome
- cloud-functions
- coding-interview
- contentresolver
- coroutines
- crashlytics
- crypto
- css
- dagger2
- datastore
- datetime
- docker
- eslint
- firebase
- firebase-auth
- firebase-hosting
- firestore
- firestore-security-rules
- flask
- fontawesome
- fresco
- git
- github
- glide
- godot
- google-app-engine
- google-cloud-storage
- google-colab
- google-drive
- google-maps
- google-places
- google-play
- google-sheets
- gradle
- html
- hugo
- inkscape
- java
- java-time
- javascript
- jetpack-compose
- jetson-nano
- kotlin
- kotlin-serialization
- layout
- lets-encrypt
- lifecycle
- linux
- logging
- lubuntu
- markdown
- mate
- material-design
- matplotlib
- md5
- mongodb
- moshi
- mplfinance
- mysql
- navigation
- nginx
- nodejs
- npm
- nuxtjs
- nvm
- pandas
- payment
- pip
- pwa
- pyenv
- python
- recylerview
- regex
- room
- rxjava
- scoped-storage
- selenium
- social-media
- ssh
- ssl
- static-site-generator
- static-website-hosting
- sublime-text
- ubuntu
- unit-test
- uwsgi
- viewmodel
- viewpager2
- virtualbox
- vue-chartjs
- vue-cli
- vue-router
- vuejs
- vuelidate
- vuepress
- web-development
- web-hosting
- webpack
- windows
- workmanager
- wsl
- yarn