Add the template in the project
Added the template of landing page in the project and customise it
This commit is contained in:
karemarsy
parent
b8277a7023
commit
a782395cda
@ -61,3 +61,244 @@ body {
|
||||
.table-wrapper {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
Colours
|
||||
#FFFFFF - White
|
||||
#4c82fc - Mustard
|
||||
#4c82fc - Green
|
||||
*/
|
||||
|
||||
.has-text-primary {
|
||||
color: #4c82fc !important;
|
||||
}
|
||||
|
||||
.has-mustard-bg {
|
||||
background-color: #4c82fc;
|
||||
}
|
||||
|
||||
.has-blue-bg {
|
||||
background-color: #4c82fc;
|
||||
}
|
||||
|
||||
.has-white-mustard-gradient {
|
||||
background: rgb(255, 255, 255);
|
||||
background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%);
|
||||
background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(76, 130, 252, 1) 50%, rgba(76, 130, 252, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#4c82fc", GradientType=1);
|
||||
}
|
||||
|
||||
@media(max-width: 1024px) {
|
||||
.has-white-mustard-gradient {
|
||||
background: rgb(255, 255, 255);
|
||||
background: -moz-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%);
|
||||
background: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%);
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(76, 130, 252, 1) 25%, rgba(76, 130, 252, 1) 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#4c82fc", GradientType=1);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Typography
|
||||
*/
|
||||
|
||||
@import url('https://fonts.googleapis.com/css?family=Calistoga|Open+Sans&display=swap');
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: 'Calistoga';
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
p,
|
||||
a,
|
||||
span {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media(max-width: 767px) {
|
||||
p {
|
||||
max-width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
Links
|
||||
*/
|
||||
.a-menu {
|
||||
letter-spacing: 3px;
|
||||
text-transform: uppercase;
|
||||
transition: opacity 1s ease;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.a-menu:hover {
|
||||
opacity: 1;
|
||||
color: #000000 !important;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Wrapper
|
||||
*/
|
||||
.section .container,
|
||||
.hero .hero-body,
|
||||
.hero .hero-head {
|
||||
width: 1200px;
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Some aesthetic improvements
|
||||
*/
|
||||
nav {
|
||||
padding-top: 20px;
|
||||
max-height: 50px;
|
||||
}
|
||||
|
||||
.paragraph {
|
||||
width: 600px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Hero
|
||||
*/
|
||||
.burger {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
.hero-body {
|
||||
background-image: url(../img/hero.png);
|
||||
background-size: 30%;
|
||||
background-position: 80% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.hero-body p {
|
||||
width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Button
|
||||
*/
|
||||
.btn {
|
||||
margin-top: 20px;
|
||||
border-radius: 50px;
|
||||
border: none;
|
||||
padding: 10px 30px;
|
||||
transition: opacity 1s ease;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/*
|
||||
Twitter Feed
|
||||
*/
|
||||
#twitter-feed .columns {
|
||||
margin: 0px;
|
||||
}
|
||||
@media(max-width: 1024px) {
|
||||
margin: 0px 10px;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.box .icon {
|
||||
margin-top: -10px;
|
||||
color: #4c82fc !important;
|
||||
transition: color 0.5s ease;
|
||||
}
|
||||
|
||||
.box .icon:hover {
|
||||
color: #4c82fc !important;
|
||||
}
|
||||
#twitter-feed .container .is-size-7 {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/*
|
||||
Features
|
||||
*/
|
||||
.feature-img {
|
||||
max-width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-flow: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.column h3,
|
||||
.column p {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media(max-width: 1024px) {
|
||||
.reverse-row-order {
|
||||
flex-direction: column-reverse;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Newsletter
|
||||
*/
|
||||
#newsletter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#newsletter p {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
padding: 15px;
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
.newsletter-input {
|
||||
border: none;
|
||||
border-bottom: 2px solid #4c82fc;
|
||||
border-radius: 0% !important;
|
||||
box-shadow: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#newsletter .field {
|
||||
width: 400px;
|
||||
max-width: 80%;
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Footer
|
||||
*/
|
||||
#footer p {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #FFFFFF !important;
|
||||
}
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<section class="hero is-medium is-dark is-bold">
|
||||
<%
|
||||
=begin%>
|
||||
<section class="hero is-medium is-dark is-bold">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="title is-family-secondary has-text-weight-bold">
|
||||
@ -10,3 +12,237 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<%
|
||||
=end%>
|
||||
|
||||
|
||||
|
||||
<!-- Wrapper -->
|
||||
<div id="wrapper" class="has-text-centered-mobile">
|
||||
|
||||
<!-- Hero -->
|
||||
<section id="hero" class="hero is-medium">
|
||||
<div class="hero-head">
|
||||
<nav class="navbar">
|
||||
<div class="container">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item">
|
||||
<h3 class="logo has-text-primary is-size-4">Fancy App</h3>
|
||||
</a></div>
|
||||
|
||||
<div class="navbar-menu">
|
||||
|
||||
<div class="navbar-end">
|
||||
<a class="a-menu is-size-7 navbar-item">
|
||||
home
|
||||
</a>
|
||||
<a class="a-menu is-size-7 navbar-item">
|
||||
about
|
||||
</a>
|
||||
<a class="a-menu is-size-7 navbar-item">
|
||||
features
|
||||
</a>
|
||||
<a class="a-menu is-size-7 navbar-item">
|
||||
contact
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<span class="navbar-burger burger" data-target="navbarMenuHeroA">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<h1 class="has-text-primary is-size-1 is-size-3-mobile">
|
||||
An engaging headline
|
||||
</h1>
|
||||
<p class="">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
</p>
|
||||
<button class="btn has-mustard-bg has-text-white is-size-7 a-menu">
|
||||
try it now
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END Hero -->
|
||||
|
||||
<!-- Twitter Feed -->
|
||||
<section id="twitter-feed" class="section has-white-mustard-gradient">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64 ">
|
||||
<img src="img/twitter-profile-guy.jpg" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Some guy</strong> <small>@someguy</small> <small>5m</small>
|
||||
<br>
|
||||
Frist time I used @fancyapp, was like the first time I listened to The Beatles. Christmas came early, I guess.
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" aria-label="reply">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-reply" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="retweet">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-retweet" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="like">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="box">
|
||||
<article class="media">
|
||||
<div class="media-left">
|
||||
<figure class="image is-64x64 ">
|
||||
<img src="img/twitter-profile-girl.jpg" alt="Image">
|
||||
</figure>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Some girl</strong> <small>@somegirl</small> <small>5m</small>
|
||||
<br>
|
||||
Fancy App is the answer to all your problems, all praise the #fancyappgod!
|
||||
</p>
|
||||
</div>
|
||||
<nav class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<a class="level-item" aria-label="reply">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-reply" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="retweet">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-retweet" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="level-item" aria-label="like">
|
||||
<span class="icon is-small">
|
||||
<i class="fas fa-heart" aria-hidden="true"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END Twitter Feed -->
|
||||
|
||||
<!-- Features -->
|
||||
<section id="features" class="section has-mustard-bg has-text-white">
|
||||
<div class="container">
|
||||
<div class="columns reverse-row-order">
|
||||
<div class="column">
|
||||
<h3 class="is-size-3">
|
||||
Open Source, all the way
|
||||
</h3>
|
||||
<p class=" paragraph">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="feature-img" src="img/feature1.png" alt="feature" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
|
||||
<div class="column">
|
||||
<img class="feature-img" src="img/feature2.png" alt="feature" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<h3 class="is-size-3">
|
||||
Second Exciting Feature</h3>
|
||||
<p class=" paragraph">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="columns reverse-row-order">
|
||||
|
||||
<div class="column">
|
||||
<h3 class="is-size-3">
|
||||
Third Feature, Wow</h3>
|
||||
<p class=" paragraph">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img class="feature-img" src="img/feature3.png" alt="feature" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END Features -->
|
||||
<!-- Newsletter -->
|
||||
<section id="newsletter" class="section">
|
||||
<div class="container">
|
||||
<h3 class="is-size-3">
|
||||
Newsletter or Call to Action</h3>
|
||||
<p class="">
|
||||
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
|
||||
</p>
|
||||
<div class="field newsletter-field">
|
||||
<div class="control">
|
||||
<input class="input newsletter-input" type="text" placeholder="mail@example.com">
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn has-mustard-bg has-text-white is-size-7 a-menu">
|
||||
sign up now
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- END Newsletter -->
|
||||
<!-- Footer -->
|
||||
<section id="footer" class="section has-blue-bg">
|
||||
<div class="container has-text-centered">
|
||||
<a href="" class="is-size-4 social-link">
|
||||
<i class="fab fa-twitter"></i>
|
||||
</a>
|
||||
<a href="" class="is-size-4 social-link">
|
||||
<i class="fab fa-github"></i>
|
||||
</a>
|
||||
<a href="" class="is-size-4 social-link">
|
||||
<i class="fab fa-dev"></i>
|
||||
</a>
|
||||
<p class="has-text-white is-size-7">
|
||||
Built with <i class="fas fa-heart"></i> and <a href="">Bulma</a>, by <a href="">@hellobetkowski</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user