Add template engine
This commit is contained in:
Chris Jean-Marie
parent
ac45f957c7
commit
0361cf049e
|
|
@ -29,6 +29,54 @@ version = "0.5.2"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "23b62fc65de8e4e7f52534fb52b0f3ed04746ae267519eef2a83941e8085068b"
|
||||
|
||||
[[package]]
|
||||
name = "askama"
|
||||
version = "0.11.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "fb98f10f371286b177db5eeb9a6e5396609555686a35e1d4f7b9a9c6d8af0139"
|
||||
dependencies = [
|
||||
"askama_derive",
|
||||
"askama_escape",
|
||||
"askama_shared",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "askama_derive"
|
||||
version = "0.11.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "87bf87e6e8b47264efa9bde63d6225c6276a52e05e91bf37eaa8afd0032d6b71"
|
||||
dependencies = [
|
||||
"askama_shared",
|
||||
"proc-macro2",
|
||||
"syn",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "askama_escape"
|
||||
version = "0.10.3"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "619743e34b5ba4e9703bba34deac3427c72507c7159f5fd030aea8cac0cfe341"
|
||||
|
||||
[[package]]
|
||||
name = "askama_shared"
|
||||
version = "0.12.2"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "bf722b94118a07fcbc6640190f247334027685d4e218b794dbfe17c32bf38ed0"
|
||||
dependencies = [
|
||||
"askama_escape",
|
||||
"humansize",
|
||||
"mime",
|
||||
"mime_guess",
|
||||
"nom",
|
||||
"num-traits",
|
||||
"percent-encoding",
|
||||
"proc-macro2",
|
||||
"quote",
|
||||
"serde",
|
||||
"syn",
|
||||
"toml",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "async-lock"
|
||||
version = "2.5.0"
|
||||
|
|
@ -442,6 +490,12 @@ version = "1.0.2"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "c4a1e36c821dbe04574f602848a19f742f4fb3c98d40449f11bcad18d6b17421"
|
||||
|
||||
[[package]]
|
||||
name = "humansize"
|
||||
version = "1.1.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "02296996cb8796d7c6e3bc2d9211b7802812d36999a51bb754123ead7d37d026"
|
||||
|
||||
[[package]]
|
||||
name = "hyper"
|
||||
version = "0.14.17"
|
||||
|
|
@ -475,6 +529,7 @@ checksum = "1aab8fc367588b89dcee83ab0fd66b72b50b72fa1904d7095045ace2b0c81c35"
|
|||
name = "jean-marie"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"askama",
|
||||
"async-session",
|
||||
"axum",
|
||||
"serde",
|
||||
|
|
@ -548,6 +603,22 @@ version = "0.3.16"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "2a60c7ce501c71e03a9c9c0d35b861413ae925bd979cc7a4e30d060069aaac8d"
|
||||
|
||||
[[package]]
|
||||
name = "mime_guess"
|
||||
version = "2.0.4"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4192263c238a5f0d0c6bfd21f336a313a4ce1c450542449ca191bb657b4642ef"
|
||||
dependencies = [
|
||||
"mime",
|
||||
"unicase",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "minimal-lexical"
|
||||
version = "0.2.1"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "68354c5c6bd36d73ff3feceb05efa59b6acb7626617f4962be322a825e61f79a"
|
||||
|
||||
[[package]]
|
||||
name = "mio"
|
||||
version = "0.8.0"
|
||||
|
|
@ -570,6 +641,17 @@ dependencies = [
|
|||
"winapi",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "nom"
|
||||
version = "7.1.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "1b1d11e1ef389c76fe5b81bcaf2ea32cf88b62bc494e19f493d0b30e7a930109"
|
||||
dependencies = [
|
||||
"memchr",
|
||||
"minimal-lexical",
|
||||
"version_check",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "ntapi"
|
||||
version = "0.3.7"
|
||||
|
|
@ -958,6 +1040,15 @@ dependencies = [
|
|||
"tokio",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "toml"
|
||||
version = "0.5.8"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a31142970826733df8241ef35dc040ef98c679ab14d7c3e54d827099b3acecaa"
|
||||
dependencies = [
|
||||
"serde",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "tower"
|
||||
version = "0.4.12"
|
||||
|
|
@ -1081,6 +1172,15 @@ version = "1.15.0"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "dcf81ac59edc17cc8697ff311e8f5ef2d99fcbd9817b34cec66f90b6c3dfd987"
|
||||
|
||||
[[package]]
|
||||
name = "unicase"
|
||||
version = "2.6.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "50f37be617794602aabbeee0be4f259dc1778fabe05e2d67ee8f79326d5cb4f6"
|
||||
dependencies = [
|
||||
"version_check",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "unicode-xid"
|
||||
version = "0.2.2"
|
||||
|
|
|
|||
|
|
@ -13,4 +13,5 @@ tokio = { version = "1.0", features = ["full"] }
|
|||
tracing = "0.1"
|
||||
tracing-subscriber = { version="0.3", features = ["env-filter"] }
|
||||
uuid = { version = "0.8", features = ["v4", "serde"] }
|
||||
async-session = "3.0.0"
|
||||
async-session = "3.0.0"
|
||||
askama = "0.11"
|
||||
|
|
|
|||
36
src/main.rs
36
src/main.rs
|
|
@ -1,20 +1,20 @@
|
|||
use askama::Template;
|
||||
use async_session::{MemoryStore, Session, SessionStore as _};
|
||||
use axum::{
|
||||
async_trait,
|
||||
extract::{Extension, FromRequest, RequestParts, TypedHeader},
|
||||
extract::{self, Extension, FromRequest, Path, RequestParts, TypedHeader},
|
||||
headers::Cookie,
|
||||
http::{
|
||||
self,
|
||||
header::{HeaderMap, HeaderValue},
|
||||
StatusCode,
|
||||
},
|
||||
response::IntoResponse,
|
||||
response::{Html, IntoResponse, Response},
|
||||
routing::{get, post},
|
||||
Json, Router,
|
||||
};
|
||||
use serde::{Deserialize, Serialize};
|
||||
use std::net::SocketAddr;
|
||||
|
||||
use uuid::Uuid;
|
||||
|
||||
const AXUM_SESSION_COOKIE_NAME: &str = "axum_session";
|
||||
|
|
@ -34,6 +34,7 @@ async fn main() {
|
|||
// build our application with a route
|
||||
let app = Router::new()
|
||||
// `GET /` goes to `root`
|
||||
.route("/greet/:name", get(greet))
|
||||
.route("/", get(handler))
|
||||
.layer(Extension(store));
|
||||
|
||||
|
|
@ -157,3 +158,32 @@ impl UserId {
|
|||
Self(Uuid::new_v4())
|
||||
}
|
||||
}
|
||||
|
||||
async fn greet(extract::Path(name): extract::Path<String>) -> impl IntoResponse {
|
||||
let template = HelloTemplate { name };
|
||||
HtmlTemplate(template)
|
||||
}
|
||||
|
||||
#[derive(Template)]
|
||||
#[template(path = "index.html")]
|
||||
struct HelloTemplate {
|
||||
name: String,
|
||||
}
|
||||
|
||||
struct HtmlTemplate<T>(T);
|
||||
|
||||
impl<T> IntoResponse for HtmlTemplate<T>
|
||||
where
|
||||
T: Template,
|
||||
{
|
||||
fn into_response(self) -> Response {
|
||||
match self.0.render() {
|
||||
Ok(html) => Html(html).into_response(),
|
||||
Err(err) => (
|
||||
StatusCode::INTERNAL_SERVER_ERROR,
|
||||
format!("Failed to render template. Error: {}", err),
|
||||
)
|
||||
.into_response(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,215 @@
|
|||
<!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="">
|
||||
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
|
||||
|
||||
<title>Jean-Marie Family Website</title>
|
||||
|
||||
<!-- Additional CSS Files -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.css">
|
||||
<link rel="stylesheet" href="assets/css/templatemo-breezed.css">
|
||||
<link rel="stylesheet" href="assets/css/owl-carousel.css">
|
||||
<link rel="stylesheet" href="assets/css/lightbox.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ***** Preloader Start ***** -->
|
||||
<div id="preloader">
|
||||
<div class="jumper">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ***** Preloader End ***** -->
|
||||
|
||||
|
||||
<!-- ***** Header Area Start ***** -->
|
||||
<header class="header-area header-sticky">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<nav class="main-nav">
|
||||
<!-- ***** Logo Start ***** -->
|
||||
<a href="/" class="logo">
|
||||
Home
|
||||
</a>
|
||||
<!-- ***** Logo End ***** -->
|
||||
<!-- ***** Menu Start ***** -->
|
||||
<ul class="nav">
|
||||
<li class="scroll-to-section"><a href="#top" class="active">Home</a></li>
|
||||
<li class="scroll-to-section"><a href="#about">About</a></li>
|
||||
<li class="scroll-to-section"><a href="#projects">Projects</a></li>
|
||||
<li class="submenu">
|
||||
<a href="javascript:;">Drop Down</a>
|
||||
<ul>
|
||||
<li><a href="">About Us</a></li>
|
||||
<li><a href="">Features</a></li>
|
||||
<li><a href="">FAQ's</a></li>
|
||||
<li><a href="">Blog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="scroll-to-section"><a href="#contact-us">Contact Us</a></li>
|
||||
<li class=""><a href="/auth/google">Login</a></li>
|
||||
<div class="search-icon">
|
||||
<a href="#search"><i class="fa fa-search"></i></a>
|
||||
</div>
|
||||
</ul>
|
||||
<a class='menu-trigger'>
|
||||
<span>Menu</span>
|
||||
</a>
|
||||
<!-- ***** Menu End ***** -->
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- ***** Header Area End ***** -->
|
||||
|
||||
<!-- ***** Search Area ***** -->
|
||||
<div id="search">
|
||||
<button type="button" class="close">×</button>
|
||||
<form id="contact" action="#" method="get">
|
||||
<fieldset>
|
||||
<input type="search" name="q" placeholder="SEARCH KEYWORD(s)" aria-label="Search through site content">
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<button type="submit" class="main-button">Search</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div id="content">{% block content %}{% endblock content %}</div>
|
||||
<!-- ***** Contact Us Area Starts ***** -->
|
||||
<section class="section" id="contact-us">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-4 col-xs-12">
|
||||
<div class="left-text-content">
|
||||
<div class="section-heading">
|
||||
<h6>Contact Us</h6>
|
||||
<h2>Feel free to keep in touch with us!</h2>
|
||||
</div>
|
||||
<ul class="contact-info">
|
||||
<li><img src="assets/images/contact-info-01.png" alt="">010-020-0860</li>
|
||||
<li><img src="assets/images/contact-info-02.png" alt="">info@company.com</li>
|
||||
<li><img src="assets/images/contact-info-03.png" alt="">www.company.com</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-8 col-md-8 col-xs-12">
|
||||
<div class="contact-form">
|
||||
<form id="contact" action="" method="get">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<fieldset>
|
||||
<input name="name" type="text" id="name" placeholder="Your Name *" required="">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<fieldset>
|
||||
<input name="phone" type="text" id="phone" placeholder="Your Phone" required="">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<fieldset>
|
||||
<input name="email" type="email" id="email" placeholder="Your Email *" required="">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-12">
|
||||
<fieldset>
|
||||
<input name="subject" type="text" id="subject" placeholder="Subject">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<fieldset>
|
||||
<textarea name="message" rows="6" id="message" placeholder="Message" required=""></textarea>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-lg-12">
|
||||
<fieldset>
|
||||
<button type="submit" id="form-submit" class="main-button-icon">Send Message Now <i class="fa fa-arrow-right"></i></button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ***** Contact Us Area Ends ***** -->
|
||||
|
||||
<!-- ***** Footer Start ***** -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-xs-12">
|
||||
<div class="left-text-content">
|
||||
<p>Copyright © 2020 Breezed Co., Ltd.
|
||||
|
||||
- Design: <a rel="nofollow noopener" href="https://templatemo.com">TemplateMo</a></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-xs-12">
|
||||
<div class="right-text-content">
|
||||
<ul class="social-icons">
|
||||
<li><p>Follow Us</p></li>
|
||||
<li><a rel="nofollow" href="https://fb.com/templatemo"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a rel="nofollow" href="https://fb.com/templatemo"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a rel="nofollow" href="https://fb.com/templatemo"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a rel="nofollow" href="https://fb.com/templatemo"><i class="fa fa-dribbble"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="assets/js/jquery-2.1.0.min.js"></script>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<script src="assets/js/popper.js"></script>
|
||||
<script src="assets/js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Plugins -->
|
||||
<script src="assets/js/owl-carousel.js"></script>
|
||||
<script src="assets/js/scrollreveal.min.js"></script>
|
||||
<script src="assets/js/waypoints.min.js"></script>
|
||||
<script src="assets/js/jquery.counterup.min.js"></script>
|
||||
<script src="assets/js/imgfix.min.js"></script>
|
||||
<script src="assets/js/slick.js"></script>
|
||||
<script src="assets/js/lightbox.js"></script>
|
||||
<script src="assets/js/isotope.js"></script>
|
||||
|
||||
<!-- Global Init -->
|
||||
<script src="assets/js/custom.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(function() {
|
||||
var selectedClass = "";
|
||||
$("p").click(function(){
|
||||
selectedClass = $(this).attr("data-rel");
|
||||
$("#portfolio").fadeTo(50, 0.1);
|
||||
$("#portfolio div").not("."+selectedClass).fadeOut();
|
||||
setTimeout(function() {
|
||||
$("."+selectedClass).fadeIn();
|
||||
$("#portfolio").fadeTo(50, 1);
|
||||
}, 500);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<br>
|
||||
<p>This will be a site for sharing of public and private information for the extended Jean-Marie family.</p>
|
||||
<div>
|
||||
<h2>Web links</h2>
|
||||
<h3>Fonts</h3>
|
||||
<ul>
|
||||
<li><a href="https://fonts.google.com">Google fonts</a></li>
|
||||
<li><a href="https://www.fontspace.com">Font Space</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endblock content %}
|
||||
|
|
@ -0,0 +1,393 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
Hello {{ name }}
|
||||
<!-- ***** Main Banner Area Start ***** -->
|
||||
<div class="main-banner header-text" id="top">
|
||||
<div class="Modern-Slider">
|
||||
<!-- Item -->
|
||||
<div class="item">
|
||||
<div class="img-fill">
|
||||
<img src="assets/images/slide-01.jpg" alt="">
|
||||
<div class="text-content">
|
||||
<h3>Welcome to the</h3>
|
||||
<h5>Jean-Marie Family Website</h5>
|
||||
<a href="#" class="main-stroked-button">Learn More</a>
|
||||
<a href="#" class="main-filled-button">Get It Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Item -->
|
||||
<!-- Item -->
|
||||
<div class="item">
|
||||
<div class="img-fill">
|
||||
<img src="assets/images/slide-02.jpg" alt="">
|
||||
<div class="text-content">
|
||||
<h3>Welcome to the</h3>
|
||||
<h5>Jean-Marie Family Website</h5>
|
||||
<a href="#" class="main-stroked-button">Read More</a>
|
||||
<a href="#" class="main-filled-button">Take Action</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Item -->
|
||||
<!-- Item -->
|
||||
<div class="item">
|
||||
<div class="img-fill">
|
||||
<img src="assets/images/slide-03.jpg" alt="">
|
||||
<div class="text-content">
|
||||
<h3>Welcome to the</h3>
|
||||
<h5>Jean-Marie Family Website</h5>
|
||||
<a href="#" class="main-stroked-button">Learn More</a>
|
||||
<a href="#" class="main-filled-button">Get It Now</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // Item -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-down scroll-to-section"><a href="#about"><i class="fa fa-arrow-down"></i></a></div>
|
||||
<!-- ***** Main Banner Area End ***** -->
|
||||
|
||||
<!-- ***** About Area Starts ***** -->
|
||||
<section class="section" id="about">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 col-md-6 col-xs-12">
|
||||
<div class="left-text-content">
|
||||
<div class="section-heading">
|
||||
<h6>About Us</h6>
|
||||
<h2>We work with top brands and startups</h2>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="service-item">
|
||||
<img src="assets/images/service-item-01.png" alt="">
|
||||
<h4>Top Notch</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="service-item">
|
||||
<img src="assets/images/service-item-01.png" alt="">
|
||||
<h4>Robust</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="service-item">
|
||||
<img src="assets/images/contact-info-03.png" alt="">
|
||||
<h4>Reliable</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6">
|
||||
<div class="service-item">
|
||||
<img src="assets/images/contact-info-03.png" alt="">
|
||||
<h4>Up-to-date</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<a href="#" class="main-button-icon">
|
||||
Learn More <i class="fa fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 col-md-6 col-xs-12">
|
||||
<div class="right-text-content">
|
||||
<p><a rel="nofollow noopener" href="https://templatemo.com/tm-543-breezed" target="_parent">Breezed HTML Template</a> is provided by TemplateMo for absolutely free of charge. You can download, edit and use this for your non-commercial and commercial websites.
|
||||
<br><br>Redistributing this template as a downloadable ZIP file on any template collection website is strictly prohibited. You will need to talk to us if you want to redistribute this template. Thank you.
|
||||
<br><br>This is a Bootstrap v4.3.1 CSS layout. Do you like it? You can feel free to <a rel="nofollow noopener" href="https://templatemo.com/contact" target="_parent">talk to us</a> if you have anything.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ***** About Area Ends ***** -->
|
||||
|
||||
<!-- ***** Features Big Item Start ***** -->
|
||||
<section class="section" id="features">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
|
||||
<div class="features-item">
|
||||
<div class="features-icon">
|
||||
<img src="assets/images/features-icon-1.png" alt="">
|
||||
</div>
|
||||
<div class="features-content">
|
||||
<h4>Initial Work</h4>
|
||||
<p>Proin euismod sem ut diam ultricies, ut faucibus velit ultricies. Nam eu turpis quam. Duis ac condimentum eros.</p>
|
||||
<a href="#" class="text-button-icon">
|
||||
Learn More <i class="fa fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" data-scroll-reveal="enter bottom move 30px over 0.6s after 0.4s">
|
||||
<div class="features-item">
|
||||
<div class="features-icon">
|
||||
<img src="assets/images/features-icon-1.png" alt="">
|
||||
</div>
|
||||
<div class="features-content">
|
||||
<h4>Master Planning</h4>
|
||||
<p>Proin euismod sem ut diam ultricies, ut faucibus velit ultricies. Nam eu turpis quam. Duis ac condimentum eros.</p>
|
||||
<a href="#" class="text-button-icon">
|
||||
Learn More <i class="fa fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12" data-scroll-reveal="enter right move 30px over 0.6s after 0.4s">
|
||||
<div class="features-item">
|
||||
<div class="features-icon">
|
||||
<img src="assets/images/features-icon-1.png" alt="">
|
||||
</div>
|
||||
<div class="features-content">
|
||||
<h4>Smooth Execution</h4>
|
||||
<p>Proin euismod sem ut diam ultricies, ut faucibus velit ultricies. Nam eu turpis quam. Duis ac condimentum eros.</p>
|
||||
<a href="#" class="text-button-icon">
|
||||
Learn More <i class="fa fa-arrow-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ***** Features Big Item End ***** -->
|
||||
|
||||
<!-- ***** Features Big Item Start ***** -->
|
||||
<section class="section" id="subscribe">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 offset-lg-2">
|
||||
<div class="section-heading">
|
||||
<h6>Subscribe Newsletters</h6>
|
||||
<h2>Don’t miss this chance!</h2>
|
||||
</div>
|
||||
<div class="subscribe-content">
|
||||
<p>Vivamus suscipit blandit nibh, in cursus mi. Proin vel blandit metus, et auctor elit. Vivamus tincidunt tristique convallis. Ut nec odio vel arcu euismod semper nec ac sem.</p>
|
||||
<div class="subscribe-form">
|
||||
<form id="subscribe-now" action="" method="get">
|
||||
<div class="row">
|
||||
<div class="col-md-8 col-sm-12">
|
||||
<fieldset>
|
||||
<input name="email" type="text" id="email" placeholder="Enter your email..." required="">
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-12">
|
||||
<fieldset>
|
||||
<button type="submit" id="form-submit" class="main-button">Subscribe Now</button>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ***** Features Big Item End ***** -->
|
||||
|
||||
|
||||
<!-- ***** Projects Area Starts ***** -->
|
||||
<section class="section" id="projects">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-3">
|
||||
<div class="section-heading">
|
||||
<h6>Our Projects</h6>
|
||||
<h2>Some of our latest projects</h2>
|
||||
</div>
|
||||
<div class="filters">
|
||||
<ul>
|
||||
<li class="active" data-filter="*">All</li>
|
||||
<li data-filter=".des">Web Design</li>
|
||||
<li data-filter=".dev">Web Development</li>
|
||||
<li data-filter=".gra">Graphics</li>
|
||||
<li data-filter=".tsh">Artworks</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="filters-content">
|
||||
<div class="row grid">
|
||||
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 all des">
|
||||
<div class="item">
|
||||
<a href="assets/images/project-big-item-01.jpg" data-lightbox="image-1" data-title="Our Projects"><img src="assets/images/project-item-01.jpg" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 all dev">
|
||||
<div class="item">
|
||||
<a href="assets/images/project-big-item-02.jpg" data-lightbox="image-1" data-title="Our Projects"><img src="assets/images/project-item-02.jpg" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 all gra">
|
||||
<div class="item">
|
||||
<a href="assets/images/project-big-item-03.jpg" data-lightbox="image-1" data-title="Our Projects"><img src="assets/images/project-item-03.jpg" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 all tsh">
|
||||
<div class="item">
|
||||
<a href="assets/images/project-big-item-04.jpg" data-lightbox="image-1" data-title="Our Projects"><img src="assets/images/project-item-04.jpg" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 all dev">
|
||||
<div class="item">
|
||||
<a href="assets/images/project-big-item-05.jpg" data-lightbox="image-1" data-title="Our Projects"><img src="assets/images/project-item-05.jpg" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 all des">
|
||||
<div class="item">
|
||||
<a href="assets/images/project-big-item-06.jpg" data-lightbox="image-1" data-title="Our Projects"><img src="assets/images/project-item-06.jpg" alt=""></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ***** Projects Area Ends ***** -->
|
||||
|
||||
<!-- ***** Testimonials Starts ***** -->
|
||||
<section class="section" id="testimonials">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="section-heading">
|
||||
<h6>Digital Team</h6>
|
||||
<h2>young and talented members</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-12 col-md-12 col-sm-12 mobile-bottom-fix-big" data-scroll-reveal="enter left move 30px over 0.6s after 0.4s">
|
||||
<div class="owl-carousel owl-theme">
|
||||
<div class="item author-item">
|
||||
<div class="member-thumb">
|
||||
<img src="assets/images/member-item-01.jpg" alt="">
|
||||
<div class="hover-effect">
|
||||
<div class="hover-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>.01 White Cheese</h4>
|
||||
<span>Digital Marketer</span>
|
||||
</div>
|
||||
<div class="item author-item">
|
||||
<div class="member-thumb">
|
||||
<img src="assets/images/member-item-04.jpg" alt="">
|
||||
<div class="hover-effect">
|
||||
<div class="hover-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>.02 Snow Mary</h4>
|
||||
<span>Site Analyst</span>
|
||||
</div>
|
||||
<div class="item author-item">
|
||||
<div class="member-thumb">
|
||||
<img src="assets/images/member-item-02.jpg" alt="">
|
||||
<div class="hover-effect">
|
||||
<div class="hover-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>.03 Johnny Egg</h4>
|
||||
<span>Digital Influencer</span>
|
||||
</div>
|
||||
<div class="item author-item">
|
||||
<div class="member-thumb">
|
||||
<img src="assets/images/member-item-05.jpg" alt="">
|
||||
<div class="hover-effect">
|
||||
<div class="hover-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>.04 Catherine Phyu</h4>
|
||||
<span>Co Founder</span>
|
||||
</div>
|
||||
<div class="item author-item">
|
||||
<div class="member-thumb">
|
||||
<img src="assets/images/member-item-03.jpg" alt="">
|
||||
<div class="hover-effect">
|
||||
<div class="hover-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>.05 Shao Lynn</h4>
|
||||
<span>Chief Marketing</span>
|
||||
</div>
|
||||
|
||||
<div class="item author-item">
|
||||
<div class="member-thumb">
|
||||
<img src="assets/images/member-item-04.jpg" alt="">
|
||||
<div class="hover-effect">
|
||||
<div class="hover-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>.06 Emma Honey</h4>
|
||||
<span>Digital Influencer</span>
|
||||
</div>
|
||||
|
||||
<div class="item author-item">
|
||||
<div class="member-thumb">
|
||||
<img src="assets/images/member-item-06.jpg" alt="">
|
||||
<div class="hover-effect">
|
||||
<div class="hover-content">
|
||||
<ul>
|
||||
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
|
||||
<li><a href="#"><i class="fa fa-rss"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>.07 Oliva Sofie</h4>
|
||||
<span>Website Analyst</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- ***** Testimonials Ends ***** -->
|
||||
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue