inital commit
11
app_config.py
Normal file
@@ -0,0 +1,11 @@
|
||||
from flask import Flask
|
||||
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
|
||||
|
||||
|
||||
if __name__ == "__main__":
|
||||
app.jinja_env.auto_reload = True
|
||||
app.run(debug=True)
|
||||
119
static/css/slick.css
Normal file
@@ -0,0 +1,119 @@
|
||||
/* Slider */
|
||||
.slick-slider
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-khtml-user-select: none;
|
||||
-ms-touch-action: pan-y;
|
||||
touch-action: pan-y;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.slick-list
|
||||
{
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.slick-list:focus
|
||||
{
|
||||
outline: none;
|
||||
}
|
||||
.slick-list.dragging
|
||||
{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
.slick-slider .slick-track,
|
||||
.slick-slider .slick-list
|
||||
{
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-moz-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
-o-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.slick-track
|
||||
{
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.slick-track:before,
|
||||
.slick-track:after
|
||||
{
|
||||
display: table;
|
||||
|
||||
content: '';
|
||||
}
|
||||
.slick-track:after
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
.slick-loading .slick-track
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.slick-slide
|
||||
{
|
||||
display: none;
|
||||
float: left;
|
||||
|
||||
height: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
[dir='rtl'] .slick-slide
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
.slick-slide img
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-slide.slick-loading img
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
.slick-slide.dragging img
|
||||
{
|
||||
pointer-events: none;
|
||||
}
|
||||
.slick-initialized .slick-slide
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
.slick-loading .slick-slide
|
||||
{
|
||||
visibility: hidden;
|
||||
}
|
||||
.slick-vertical .slick-slide
|
||||
{
|
||||
display: block;
|
||||
|
||||
height: auto;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.slick-arrow.slick-hidden {
|
||||
display: none;
|
||||
}
|
||||
861
static/css/style.css
Normal file
@@ -0,0 +1,861 @@
|
||||
/*
|
||||
* Author by FreeHTML5.co
|
||||
* Twitter: https://twitter.com/fh5co
|
||||
* Facebook: https://fb.com/fh5co
|
||||
* URL: https://freehtml5.co
|
||||
*/
|
||||
/* Fonts */
|
||||
@font-face {
|
||||
font-family: 'Calisto-MT';
|
||||
src: url(../fonts/Calisto-MT.ttf); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Calisto-MT-Italic';
|
||||
src: url(../fonts/Calisto-MT-Italic.ttf); }
|
||||
|
||||
@font-face {
|
||||
font-family: 'Calisto-MT-Bold';
|
||||
src: url(../fonts/Calisto-MT-Bold.ttf); }
|
||||
|
||||
/* Colors */
|
||||
/* Universal style */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Calisto-MT"; }
|
||||
|
||||
.site-container {
|
||||
width: 1115px;
|
||||
margin: 0 auto; }
|
||||
@media (max-width: 1250px) {
|
||||
.site-container {
|
||||
width: 90%; } }
|
||||
|
||||
.universal-h2 {
|
||||
font-size: 48px;
|
||||
text-align: center;
|
||||
color: #222; }
|
||||
@media (max-width: 1250px) {
|
||||
.universal-h2 {
|
||||
font-size: 38px; } }
|
||||
@media (max-width: 668px) {
|
||||
.universal-h2 {
|
||||
font-size: 30px; } }
|
||||
|
||||
.universal-h2-bckg {
|
||||
background-image: url("../images/double-line.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom; }
|
||||
|
||||
/* Universal style end */
|
||||
/* Includes */
|
||||
.site-navigation {
|
||||
position: absolute;
|
||||
top: 4.6%;
|
||||
width: 100%;
|
||||
z-index: 2; }
|
||||
|
||||
.site-navigation-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between; }
|
||||
|
||||
.main-navigation {
|
||||
color: #fff;
|
||||
display: none;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #000;
|
||||
opacity: 0.9; }
|
||||
.main-navigation .main-navigation__ul {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 3%;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 7px;
|
||||
background-color: #c18f59; }
|
||||
.main-navigation .main-navigation__ul li {
|
||||
margin-bottom: 20px;
|
||||
list-style: none; }
|
||||
.main-navigation .main-navigation__ul a {
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
transition: 0.3s ease; }
|
||||
.main-navigation .main-navigation__ul a:hover {
|
||||
color: #777; }
|
||||
@media (max-width: 1150px) {
|
||||
.main-navigation {
|
||||
opacity: 0.94; } }
|
||||
|
||||
/* Navigation burger */
|
||||
.burger-container {
|
||||
cursor: pointer;
|
||||
z-index: 3; }
|
||||
|
||||
.bar1, .bar2, .bar3 {
|
||||
width: 30px;
|
||||
height: 3px;
|
||||
background-color: #c18f59;
|
||||
margin: 6px 0;
|
||||
transition: 0.4s; }
|
||||
|
||||
.change .bar1 {
|
||||
transform: rotate(-45deg) translate(-6px, 6px);
|
||||
background-color: #c18f59; }
|
||||
|
||||
.change .bar2 {
|
||||
opacity: 0;
|
||||
background-color: #c18f59; }
|
||||
|
||||
.change .bar3 {
|
||||
transform: rotate(45deg) translate(-6px, -7px);
|
||||
background-color: #c18f59; }
|
||||
|
||||
.stop-scroll {
|
||||
overflow: hidden; }
|
||||
|
||||
/* Navigation burger end */
|
||||
.fh5co-top-banner {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
background-image: url("../images/top-banner-bckg.jpg");
|
||||
background-position: center;
|
||||
background-size: cover; }
|
||||
.fh5co-top-banner::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
opacity: 0.9; }
|
||||
.fh5co-top-banner .site-container {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
@media (max-width: 1600px) {
|
||||
.fh5co-top-banner {
|
||||
padding-top: 180px; } }
|
||||
@media (max-width: 1250px) {
|
||||
.fh5co-top-banner {
|
||||
padding-top: 130px; } }
|
||||
@media (max-width: 520px) {
|
||||
.fh5co-top-banner {
|
||||
padding-top: 105px; } }
|
||||
@media (min-width: 1600px) {
|
||||
.fh5co-top-banner {
|
||||
min-height: 100vh; } }
|
||||
|
||||
.top-banner__inner {
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
.top-banner__inner .top-banner__text {
|
||||
margin-left: 54px; }
|
||||
@media (max-width: 1250px) {
|
||||
.top-banner__inner .top-banner__text {
|
||||
width: 35%; } }
|
||||
@media (max-width: 768px) {
|
||||
.top-banner__inner .top-banner__text {
|
||||
width: 50%;
|
||||
margin-left: 20px; } }
|
||||
@media (max-width: 520px) {
|
||||
.top-banner__inner .top-banner__text {
|
||||
width: 65%;
|
||||
margin-bottom: 20px;
|
||||
margin-left: 0; } }
|
||||
.top-banner__inner .top-banner__text p {
|
||||
margin-bottom: 42px;
|
||||
color: #777; }
|
||||
@media (max-width: 768px) {
|
||||
.top-banner__inner .top-banner__text p {
|
||||
margin-bottom: 25px;
|
||||
font-size: 14px; } }
|
||||
.top-banner__inner .top-banner__h2 {
|
||||
font-size: 74px;
|
||||
letter-spacing: 3px;
|
||||
color: #fff;
|
||||
font-family: "Calisto-MT-Bold"; }
|
||||
@media (max-width: 1250px) {
|
||||
.top-banner__inner .top-banner__h2 {
|
||||
font-size: 50px; } }
|
||||
@media (max-width: 768px) {
|
||||
.top-banner__inner .top-banner__h2 {
|
||||
font-size: 35px; } }
|
||||
.top-banner__inner .top-banner__text-up .top-banner__h2 {
|
||||
margin-top: 15px; }
|
||||
@media (max-width: 768px) {
|
||||
.top-banner__inner .top-banner__text-up .top-banner__h2 {
|
||||
margin-top: 0; } }
|
||||
.top-banner__inner .top-banner__text-down {
|
||||
margin-bottom: 20px;
|
||||
padding-left: 27%; }
|
||||
.top-banner__inner .top-banner__text-down .top-banner__h2 {
|
||||
margin-bottom: 10px; }
|
||||
@media (max-width: 768px) {
|
||||
.top-banner__inner .top-banner__text-down .top-banner__h2 {
|
||||
margin-bottom: 0; } }
|
||||
.top-banner__inner .top-banner__image {
|
||||
font-size: 0; }
|
||||
@media (max-width: 1250px) {
|
||||
.top-banner__inner .top-banner__image {
|
||||
width: 50%; }
|
||||
.top-banner__inner .top-banner__image img {
|
||||
width: 100%; } }
|
||||
@media (max-width: 520px) {
|
||||
.top-banner__inner .top-banner__image {
|
||||
width: 65%;
|
||||
margin-bottom: 20px; } }
|
||||
@media (max-width: 520px) {
|
||||
.top-banner__inner {
|
||||
flex-direction: column; } }
|
||||
|
||||
.brand-span {
|
||||
font-size: 14px;
|
||||
color: #c18f59; }
|
||||
|
||||
.brand-button {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
color: #c18f59;
|
||||
border: 1px solid #fff;
|
||||
transition: 0.3s ease; }
|
||||
.brand-button:hover, .brand-button:focus {
|
||||
color: #777; }
|
||||
|
||||
.fh5co-about-me {
|
||||
position: relative;
|
||||
margin: 193px 0 199px; }
|
||||
@media (max-width: 1250px) {
|
||||
.fh5co-about-me {
|
||||
margin: 150px 0; } }
|
||||
@media (max-width: 992px) {
|
||||
.fh5co-about-me {
|
||||
margin: 125px 0; } }
|
||||
|
||||
.about-me-bckg {
|
||||
position: absolute;
|
||||
background-image: url("../images/about-me-bckg.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
height: 500px;
|
||||
top: -75px;
|
||||
right: 0;
|
||||
height: calc(100% + 150px);
|
||||
width: 70%;
|
||||
z-index: -1; }
|
||||
.about-me-bckg:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
opacity: 0.7; }
|
||||
@media (max-width: 992px) {
|
||||
.about-me-bckg {
|
||||
width: 100%;
|
||||
padding-bottom: 15px; } }
|
||||
|
||||
.about-me-inner {
|
||||
display: flex;
|
||||
justify-content: space-between; }
|
||||
@media (max-width: 992px) {
|
||||
.about-me-inner {
|
||||
flex-direction: column;
|
||||
align-items: center; } }
|
||||
|
||||
.about-me-slider {
|
||||
position: relative; }
|
||||
.about-me-slider .slick-arrow {
|
||||
position: absolute;
|
||||
bottom: -18%; }
|
||||
.about-me-slider .slick-prev {
|
||||
left: 40%; }
|
||||
@media (max-width: 520px) {
|
||||
.about-me-slider .slick-prev {
|
||||
left: 34%; } }
|
||||
.about-me-slider .slick-next {
|
||||
right: 40%; }
|
||||
@media (max-width: 520px) {
|
||||
.about-me-slider .slick-next {
|
||||
right: 34%; } }
|
||||
|
||||
.span-arrow {
|
||||
padding: 10px 15px;
|
||||
cursor: pointer;
|
||||
color: #c18f59;
|
||||
border: 1px solid #c18f59;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s ease; }
|
||||
.span-arrow:hover {
|
||||
color: #fff;
|
||||
border-color: #fff; }
|
||||
|
||||
.portfolio-wrapper {
|
||||
width: 390px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
background-color: #fff; }
|
||||
.portfolio-wrapper .portfolio__img {
|
||||
font-size: 0; }
|
||||
.portfolio-wrapper .portfolio__img img {
|
||||
width: 100%; }
|
||||
.portfolio-wrapper .portfolio__bottom {
|
||||
padding: 35px 0 95px;
|
||||
background-color: #f5f5f5; }
|
||||
@media (max-width: 992px) {
|
||||
.portfolio-wrapper .portfolio__bottom {
|
||||
padding: 25px 0; } }
|
||||
.portfolio-wrapper .portfolio__name {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 23px; }
|
||||
@media (max-width: 992px) {
|
||||
.portfolio-wrapper .portfolio__name {
|
||||
margin-bottom: 10px; } }
|
||||
.portfolio-wrapper .portfolio__name span {
|
||||
font-size: 90px;
|
||||
line-height: 75px;
|
||||
color: #c18f59;
|
||||
font-family: "Calisto-MT-Bold"; }
|
||||
@media (max-width: 992px) {
|
||||
.portfolio-wrapper .portfolio__name span {
|
||||
font-size: 65px;
|
||||
line-height: 62px; } }
|
||||
.portfolio-wrapper p {
|
||||
padding: 0 10%;
|
||||
line-height: 25px;
|
||||
font-style: italic;
|
||||
color: #777; }
|
||||
@media (max-width: 620px) {
|
||||
.portfolio-wrapper p {
|
||||
font-size: 15px;
|
||||
line-height: 20px; } }
|
||||
@media (max-width: 992px) {
|
||||
.portfolio-wrapper {
|
||||
margin-bottom: 20px; } }
|
||||
@media (max-width: 620px) {
|
||||
.portfolio-wrapper {
|
||||
width: 250px; } }
|
||||
|
||||
.about-me__text {
|
||||
width: 44%;
|
||||
margin-right: 80px;
|
||||
text-align: center; }
|
||||
.about-me__text .universal-h2 {
|
||||
color: #fff;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 25px; }
|
||||
.about-me__text p {
|
||||
margin-bottom: 35px;
|
||||
line-height: 24px;
|
||||
color: #c18f59; }
|
||||
.about-me__text p span {
|
||||
font-size: 48px;
|
||||
color: #fff; }
|
||||
@media (max-width: 620px) {
|
||||
.about-me__text p {
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 19px; } }
|
||||
.about-me__text h4 {
|
||||
margin-bottom: 7px;
|
||||
font-size: 25px;
|
||||
color: #c18f59; }
|
||||
.about-me__text .p-white {
|
||||
margin-bottom: 0;
|
||||
color: #fff; }
|
||||
@media (max-width: 1250px) {
|
||||
.about-me__text {
|
||||
width: 48%;
|
||||
margin-right: 40px; } }
|
||||
@media (max-width: 992px) {
|
||||
.about-me__text {
|
||||
width: 100%;
|
||||
margin-right: 0; } }
|
||||
|
||||
.slick-slide:focus {
|
||||
outline: none; }
|
||||
|
||||
.fh5co-books {
|
||||
margin-bottom: 122px; }
|
||||
.fh5co-books .universal-h2 {
|
||||
margin-bottom: 50px;
|
||||
padding-bottom: 20px; }
|
||||
.fh5co-books .books-brand-button {
|
||||
text-align: center; }
|
||||
.fh5co-books .books-brand-button .brand-button {
|
||||
font-size: 16px;
|
||||
text-transform: none;
|
||||
border-color: #c18f59; }
|
||||
.fh5co-books .books-brand-button .brand-button:hover {
|
||||
border-color: #777; }
|
||||
@media (max-width: 1250px) {
|
||||
.fh5co-books {
|
||||
margin-bottom: 60px; } }
|
||||
|
||||
.books {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 70px; }
|
||||
@media (max-width: 559px) {
|
||||
.books {
|
||||
justify-content: space-around; } }
|
||||
|
||||
.single-book {
|
||||
margin-bottom: 20px;
|
||||
text-align: center; }
|
||||
.single-book .single-book__img {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-size: 0; }
|
||||
.single-book .single-book__img .single-book_download {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
transition: 0.3s ease; }
|
||||
.single-book .single-book__img .single-book_download img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1; }
|
||||
.single-book .single-book__img:hover .single-book_download {
|
||||
visibility: visible;
|
||||
opacity: 0.7; }
|
||||
.single-book .single-book__title {
|
||||
margin: 19px 0 18px;
|
||||
font-size: 18px; }
|
||||
.single-book .single-book__price {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
color: #c18f59; }
|
||||
@media (max-width: 1250px) {
|
||||
.single-book {
|
||||
margin-right: 10px; }
|
||||
.single-book:last-child {
|
||||
margin-right: 0; } }
|
||||
|
||||
.rating {
|
||||
margin-top: 8px;
|
||||
unicode-bidi: bidi-override;
|
||||
direction: rtl; }
|
||||
.rating span {
|
||||
font-size: 23px;
|
||||
color: #ffd200;
|
||||
cursor: pointer; }
|
||||
.rating > span:hover:before, .rating > span:hover ~ span:before {
|
||||
content: "\2605";
|
||||
position: absolute; }
|
||||
|
||||
.fh5co-counter {
|
||||
position: relative;
|
||||
margin-bottom: 122px;
|
||||
padding: 100px 0;
|
||||
background-image: url("../images/book-bckg.jpg");
|
||||
background-size: cover;
|
||||
background-position: center; }
|
||||
.fh5co-counter::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #c18f59;
|
||||
opacity: 0.9; }
|
||||
.fh5co-counter .site-container {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
@media (max-width: 850px) {
|
||||
.fh5co-counter {
|
||||
padding: 50px 0 20px;
|
||||
margin-bottom: 50px; } }
|
||||
|
||||
.counter-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap; }
|
||||
|
||||
.single-count {
|
||||
width: 23%;
|
||||
text-align: center;
|
||||
color: #fff; }
|
||||
.single-count span {
|
||||
display: block;
|
||||
margin-bottom: 25px;
|
||||
font-size: 40px;
|
||||
font-weight: 900; }
|
||||
.single-count p {
|
||||
font-size: 20px;
|
||||
text-transform: uppercase; }
|
||||
@media (max-width: 850px) {
|
||||
.single-count {
|
||||
width: 48%;
|
||||
margin-bottom: 30px; }
|
||||
.single-count .count {
|
||||
font-size: 35px;
|
||||
margin-bottom: 15px; } }
|
||||
@media (max-width: 500px) {
|
||||
.single-count {
|
||||
width: 100%;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #fff; } }
|
||||
|
||||
.single-count__text {
|
||||
display: flex;
|
||||
justify-content: center; }
|
||||
.single-count__text img {
|
||||
margin-right: 20px; }
|
||||
|
||||
.fh5co-blog {
|
||||
margin-bottom: 175px; }
|
||||
.fh5co-blog .universal-h2 {
|
||||
margin-bottom: 55px;
|
||||
padding-bottom: 20px; }
|
||||
@media (max-width: 620px) {
|
||||
.fh5co-blog {
|
||||
margin-bottom: 105px; } }
|
||||
|
||||
.blog-inner {
|
||||
display: flex;
|
||||
justify-content: space-between; }
|
||||
|
||||
.blog-slider .slick-slide {
|
||||
margin: 0 15px; }
|
||||
|
||||
.blog-slider .slick-list {
|
||||
margin: 0 -15px; }
|
||||
|
||||
.single-blog {
|
||||
display: flex !important; }
|
||||
.single-blog .single-blog__img {
|
||||
width: 50%;
|
||||
font-size: 0; }
|
||||
.single-blog .single-blog__text {
|
||||
width: 50%;
|
||||
padding: 7%;
|
||||
border: 3px solid #f5f5f5;
|
||||
border-left: 0; }
|
||||
.single-blog .single-blog__text h4 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 24px;
|
||||
line-height: 33px; }
|
||||
.single-blog .single-blog__text span {
|
||||
display: block;
|
||||
margin-bottom: 15px;
|
||||
font-size: 14px;
|
||||
color: #c18f59;
|
||||
font-family: "Calisto-MT-Bold"; }
|
||||
.single-blog .single-blog__text p {
|
||||
color: #777;
|
||||
line-height: 21px; }
|
||||
@media (max-width: 992px) {
|
||||
.single-blog .single-blog__text {
|
||||
padding: 5%; }
|
||||
.single-blog .single-blog__text h4 {
|
||||
margin-bottom: 3px;
|
||||
font-size: 20px;
|
||||
line-height: 24px; }
|
||||
.single-blog .single-blog__text p {
|
||||
font-size: 14px;
|
||||
line-height: 19px; } }
|
||||
@media (max-width: 420px) {
|
||||
.single-blog .single-blog__text {
|
||||
padding: 3%; }
|
||||
.single-blog .single-blog__text h4 {
|
||||
font-size: 16px; }
|
||||
.single-blog .single-blog__text span {
|
||||
margin-bottom: 7px;
|
||||
font-size: 12px; }
|
||||
.single-blog .single-blog__text p {
|
||||
font-size: 13px;
|
||||
line-height: 16px; } }
|
||||
.single-blog:nth-child(even) h4 {
|
||||
color: #c18f59; }
|
||||
@media (max-width: 1250px) {
|
||||
.single-blog .single-blog__img img {
|
||||
width: 100%;
|
||||
height: 100%; } }
|
||||
|
||||
.blog-slider {
|
||||
position: relative; }
|
||||
.blog-slider .slick-arrow {
|
||||
position: absolute;
|
||||
bottom: -22%; }
|
||||
.blog-slider .slick-prev {
|
||||
left: 45.5%; }
|
||||
@media (max-width: 1250px) {
|
||||
.blog-slider .slick-prev {
|
||||
left: 40%; } }
|
||||
@media (max-width: 520px) {
|
||||
.blog-slider .slick-prev {
|
||||
left: 35%; } }
|
||||
.blog-slider .slick-next {
|
||||
right: 45.5%; }
|
||||
@media (max-width: 1250px) {
|
||||
.blog-slider .slick-next {
|
||||
right: 40%; } }
|
||||
@media (max-width: 520px) {
|
||||
.blog-slider .slick-next {
|
||||
right: 35%; } }
|
||||
.blog-slider .span-arrow:hover {
|
||||
color: #777;
|
||||
border-color: #777; }
|
||||
|
||||
.fh5co-quotes {
|
||||
position: relative;
|
||||
padding: 135px 0 172px;
|
||||
text-align: center;
|
||||
background-image: url("../images/quotes-bckg.jpg");
|
||||
background-position: center;
|
||||
background-size: cover; }
|
||||
.fh5co-quotes::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
opacity: 0.9; }
|
||||
.fh5co-quotes .site-container {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.fh5co-quotes .universal-h2 {
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: 30px;
|
||||
color: #fff !important; }
|
||||
.fh5co-quotes p {
|
||||
width: 43%;
|
||||
margin: 0 auto 45px;
|
||||
color: #fff;
|
||||
line-height: 24px; }
|
||||
@media (max-width: 620px) {
|
||||
.fh5co-quotes p {
|
||||
font-size: 14px;
|
||||
line-height: 19px; } }
|
||||
.fh5co-quotes img {
|
||||
margin: 0 auto 5px; }
|
||||
.fh5co-quotes h4 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 25px;
|
||||
color: #c18f59; }
|
||||
.fh5co-quotes .slick-arrow {
|
||||
bottom: -8%; }
|
||||
.fh5co-quotes .slick-prev {
|
||||
left: 45.5%; }
|
||||
@media (max-width: 1150px) {
|
||||
.fh5co-quotes .slick-prev {
|
||||
left: 34%; } }
|
||||
.fh5co-quotes .slick-next {
|
||||
right: 45.5%; }
|
||||
@media (max-width: 1150px) {
|
||||
.fh5co-quotes .slick-next {
|
||||
right: 34%; } }
|
||||
@media (max-width: 1150px) {
|
||||
.fh5co-quotes {
|
||||
padding: 75px 0 95px; }
|
||||
.fh5co-quotes p {
|
||||
width: 90%; } }
|
||||
|
||||
.fh5co-social {
|
||||
position: relative;
|
||||
padding: 63px 0;
|
||||
background-image: url("../images/social-bckg.jpg");
|
||||
background-size: cover;
|
||||
background-position: center; }
|
||||
.fh5co-social::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #c18f59;
|
||||
opacity: 0.9; }
|
||||
.fh5co-social .site-container {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
@media (max-width: 620px) {
|
||||
.fh5co-social {
|
||||
padding: 40px 0; } }
|
||||
|
||||
.social {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center; }
|
||||
.social h5 {
|
||||
font-size: 24px;
|
||||
color: #fff; }
|
||||
@media (max-width: 620px) {
|
||||
.social {
|
||||
flex-direction: column; } }
|
||||
|
||||
.social-icons a {
|
||||
position: relative;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
padding: 13px 23px;
|
||||
margin-right: 10px;
|
||||
transition: 0.3s ease; }
|
||||
.social-icons a:hover {
|
||||
background-color: #777;
|
||||
border-color: transparent; }
|
||||
|
||||
.social-icons img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%); }
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.social-icons {
|
||||
margin: 35px 0; } }
|
||||
|
||||
.site-footer {
|
||||
padding-top: 120px;
|
||||
background-color: #343434; }
|
||||
@media (max-width: 1250px) {
|
||||
.site-footer {
|
||||
padding-top: 60px; } }
|
||||
|
||||
.footer-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 95px; }
|
||||
.footer-inner h5 {
|
||||
margin-bottom: 30px;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
color: #fff; }
|
||||
@media (max-width: 1250px) {
|
||||
.footer-inner {
|
||||
padding-bottom: 50px;
|
||||
flex-direction: column;
|
||||
align-items: center; } }
|
||||
|
||||
.footer-info {
|
||||
width: 50%;
|
||||
display: flex; }
|
||||
.footer-info .footer-info__left {
|
||||
margin-right: 45px; }
|
||||
.footer-info .footer-info__left img {
|
||||
margin-bottom: 10px; }
|
||||
.footer-info .footer-info__left p {
|
||||
color: #c18f59; }
|
||||
@media (max-width: 620px) {
|
||||
.footer-info .footer-info__left {
|
||||
margin-right: 0;
|
||||
margin-bottom: 20px; } }
|
||||
.footer-info .footer-info__right p {
|
||||
margin-bottom: 15px;
|
||||
color: #aaa; }
|
||||
.footer-info .footer-info__right .footer-phone {
|
||||
font-size: 14px; }
|
||||
.footer-info .footer-info__right .social-icons {
|
||||
margin-top: 27px; }
|
||||
.footer-info .footer-info__right .social-icons a {
|
||||
padding: 9px 19px; }
|
||||
@media (max-width: 1250px) {
|
||||
.footer-info {
|
||||
width: 100%;
|
||||
margin-bottom: 20px; } }
|
||||
@media (max-width: 620px) {
|
||||
.footer-info {
|
||||
flex-direction: column;
|
||||
align-items: center; } }
|
||||
|
||||
.footer-contact-form {
|
||||
width: 50%; }
|
||||
.footer-contact-form .contact-form__input {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px; }
|
||||
.footer-contact-form .contact-form__input input {
|
||||
width: 40%;
|
||||
padding: 20px;
|
||||
border: 1px solid #404040;
|
||||
background-color: #282828;
|
||||
color: #c18f59; }
|
||||
.footer-contact-form .contact-form__input input::placeholder {
|
||||
color: #aaa; }
|
||||
@media (max-width: 1250px) {
|
||||
.footer-contact-form .contact-form__input input {
|
||||
width: 45%; } }
|
||||
@media (max-width: 520px) {
|
||||
.footer-contact-form .contact-form__input input {
|
||||
width: 100%; } }
|
||||
.footer-contact-form textarea {
|
||||
box-sizing: border-box;
|
||||
height: 90px;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
border: 1px solid #404040;
|
||||
background-color: #282828;
|
||||
resize: none;
|
||||
color: #c18f59; }
|
||||
.footer-contact-form .submit-button {
|
||||
padding: 19px 50px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
background-color: #c18f59;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s ease; }
|
||||
.footer-contact-form .submit-button:hover {
|
||||
background-color: #777; }
|
||||
@media (max-width: 1250px) {
|
||||
.footer-contact-form {
|
||||
width: 100%; } }
|
||||
|
||||
.footer-bottom {
|
||||
padding: 25px 0;
|
||||
background-color: #2d2d2d; }
|
||||
|
||||
.footer-bottom-inner {
|
||||
display: flex;
|
||||
justify-content: space-between; }
|
||||
.footer-bottom-inner p {
|
||||
color: #777; }
|
||||
.footer-bottom-inner a {
|
||||
color: #c18f59;
|
||||
text-decoration: none;
|
||||
transition: 0.3s ease; }
|
||||
.footer-bottom-inner a:hover {
|
||||
color: #777; }
|
||||
.footer-bottom-inner .footer-bottom__img img {
|
||||
margin-right: 25px; }
|
||||
.footer-bottom-inner .footer-bottom__img img:last-child {
|
||||
margin-right: 0; }
|
||||
@media (max-width: 992px) {
|
||||
.footer-bottom-inner {
|
||||
flex-direction: column;
|
||||
align-items: center; }
|
||||
.footer-bottom-inner p {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px; } }
|
||||
BIN
static/font/77982264.ttf
Normal file
BIN
static/font/Calisto-MT-Bold.ttf
Normal file
BIN
static/font/Calisto-MT-Italic.ttf
Normal file
BIN
static/font/Calisto-MT.ttf
Normal file
BIN
static/img/about-me-bckg.jpg
Normal file
|
After Width: | Height: | Size: 56 KiB |
BIN
static/img/about-me.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
static/img/blog1.jpg
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
static/img/blog2.jpg
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
static/img/book-bckg.jpg
Normal file
|
After Width: | Height: | Size: 40 KiB |
BIN
static/img/books-1.jpg
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
static/img/books-2.jpg
Normal file
|
After Width: | Height: | Size: 8.0 KiB |
BIN
static/img/books-3.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
static/img/books-4.jpg
Normal file
|
After Width: | Height: | Size: 18 KiB |
BIN
static/img/counter-1.png
Normal file
|
After Width: | Height: | Size: 310 B |
BIN
static/img/counter-2.png
Normal file
|
After Width: | Height: | Size: 320 B |
BIN
static/img/counter-3.png
Normal file
|
After Width: | Height: | Size: 299 B |
BIN
static/img/counter-4.png
Normal file
|
After Width: | Height: | Size: 284 B |
40
static/img/double-line.svg
Normal file
@@ -0,0 +1,40 @@
|
||||
<svg id="Sep" xmlns="http://www.w3.org/2000/svg" width="62" height="5" viewBox="0 0 62 5">
|
||||
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
|
||||
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
|
||||
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<rdf:Description rdf:about=""/>
|
||||
</rdf:RDF>
|
||||
</x:xmpmeta>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?xpacket end="w"?></metadata>
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #c18f59;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path id="Sep_" data-name="Sep " class="cls-1" d="M21.5,5V4h40V5h-40Z"/>
|
||||
<path id="Sep-2" data-name="Sep" class="cls-1" d="M0.5,1V0h40V1H0.5Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
39
static/img/download.svg
Normal file
@@ -0,0 +1,39 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="27" viewBox="0 0 19 27">
|
||||
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
|
||||
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
|
||||
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<rdf:Description rdf:about=""/>
|
||||
</rdf:RDF>
|
||||
</x:xmpmeta>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?xpacket end="w"?></metadata>
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
fill: #fff;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<path class="cls-1" d="M7.6-.007V19.827L0,12.325v5.3l9.5,9.378L19,17.628v-5.3l-7.6,7.5V-0.007H7.6Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
BIN
static/img/footer-dhl.png
Normal file
|
After Width: | Height: | Size: 367 B |
BIN
static/img/footer-fedex.png
Normal file
|
After Width: | Height: | Size: 301 B |
BIN
static/img/footer-img.jpg
Normal file
|
After Width: | Height: | Size: 6.3 KiB |
BIN
static/img/footer-mastercard.png
Normal file
|
After Width: | Height: | Size: 527 B |
BIN
static/img/footer-paypal.png
Normal file
|
After Width: | Height: | Size: 341 B |
BIN
static/img/footer-visa.png
Normal file
|
After Width: | Height: | Size: 331 B |
BIN
static/img/quotes-bckg.jpg
Normal file
|
After Width: | Height: | Size: 111 KiB |
42
static/img/quotes.svg
Normal file
@@ -0,0 +1,42 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="39" height="34" viewBox="0 0 39 34">
|
||||
<metadata><?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
|
||||
<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 5.6-c142 79.160924, 2017/07/13-01:06:39 ">
|
||||
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<rdf:Description rdf:about=""/>
|
||||
</rdf:RDF>
|
||||
</x:xmpmeta>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<?xpacket end="w"?></metadata>
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1 {
|
||||
font-size: 85px;
|
||||
fill: #c18f59;
|
||||
text-anchor: middle;
|
||||
font-family: "Calisto MT";
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<text id="_" data-name="“" class="cls-1" x="20" y="60"><tspan x="20">“</tspan></text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/img/site-logo.png
Normal file
|
After Width: | Height: | Size: 912 B |
BIN
static/img/social-bckg.jpg
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
static/img/social-dribble.png
Normal file
|
After Width: | Height: | Size: 282 B |
BIN
static/img/social-pinterest.png
Normal file
|
After Width: | Height: | Size: 258 B |
BIN
static/img/social-twitter.png
Normal file
|
After Width: | Height: | Size: 229 B |
BIN
static/img/social-youtube.png
Normal file
|
After Width: | Height: | Size: 224 B |
BIN
static/img/top-banner-author.jpg
Normal file
|
After Width: | Height: | Size: 125 KiB |
BIN
static/img/top-banner-bckg.jpg
Normal file
|
After Width: | Height: | Size: 133 KiB |
5
static/js/jquery.min.js
vendored
Normal file
76
static/js/main.js
Normal file
@@ -0,0 +1,76 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
|
||||
/* Navigation burger onclick side navigation show */
|
||||
$('.burger-container').on('click', function() {
|
||||
$('.main-navigation').toggle('slow');
|
||||
|
||||
if($('#myBtn').hasClass('change')) {
|
||||
$('body').addClass('stop-scroll');
|
||||
} else {
|
||||
$('body').removeClass('stop-scroll');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/* About me slider */
|
||||
$('.about-me-slider').slick({
|
||||
slidesToShow: 1,
|
||||
prevArrow: '<span class="span-arrow slick-prev"><</span>',
|
||||
nextArrow: '<span class="span-arrow slick-next">></span>'
|
||||
});
|
||||
|
||||
/* Blog slider */
|
||||
$('.blog-slider').slick({
|
||||
slidesToShow: 2,
|
||||
prevArrow: '<span class="span-arrow slick-prev"><</span>',
|
||||
nextArrow: '<span class="span-arrow slick-next">></span>',
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 768,
|
||||
settings: {
|
||||
slidesToShow: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
var counta = 0;
|
||||
|
||||
$(window).scroll(function(e){
|
||||
|
||||
|
||||
/* Onscroll number counter */
|
||||
var statisticNumbers = $('.single-count');
|
||||
if(statisticNumbers.length) {
|
||||
var oTop = statisticNumbers.offset().top - window.innerHeight;
|
||||
if (counta == 0 && $(window).scrollTop() > oTop) {
|
||||
$('.count').each(function() {
|
||||
var $this = $(this),
|
||||
countTo = $this.attr('data-count');
|
||||
$({
|
||||
countNum: $this.text()
|
||||
}).animate({
|
||||
countNum: countTo
|
||||
},
|
||||
|
||||
{
|
||||
duration: 2000,
|
||||
easing: 'swing',
|
||||
step: function() {
|
||||
$this.text(Math.floor(this.countNum));
|
||||
},
|
||||
complete: function() {
|
||||
$this.text(this.countNum);
|
||||
}
|
||||
});
|
||||
});
|
||||
counta = 1;
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
1
static/js/slick.min.js
vendored
Normal file
346
templates/index.html
Normal file
@@ -0,0 +1,346 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
Author by FreeHTML5.co
|
||||
Twitter: https://twitter.com/fh5co
|
||||
Facebook: https://fb.com/fh5co
|
||||
URL: https://freehtml5.co
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="css/slick.css">
|
||||
<title>Author</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="site-navigation">
|
||||
<div class="site-navigation-inner site-container">
|
||||
<img src="./images/site-logo.png" alt="site logo">
|
||||
<div class="main-navigation">
|
||||
<ul class="main-navigation__ul">
|
||||
<li><a href="#">Homepage</a></li>
|
||||
<li><a href="#">Page 1</a></li>
|
||||
<li><a href="#">Page 2</a></li>
|
||||
<li><a href="#">Page 3</a></li>
|
||||
<li><a href="#">Page 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="myBtn" class="burger-container" onclick="myFunction(this)">
|
||||
<div class="bar1"></div>
|
||||
<div class="bar2"></div>
|
||||
<div class="bar3"></div>
|
||||
</div>
|
||||
<script>
|
||||
function myFunction(x) {
|
||||
x.classList.toggle("change");
|
||||
}
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Navigation end -->
|
||||
|
||||
<!-- Top banner -->
|
||||
<section class="fh5co-top-banner">
|
||||
<div class="top-banner__inner site-container">
|
||||
<div class="top-banner__image">
|
||||
<img src="./images/top-banner-author.jpg" alt="author image">
|
||||
</div>
|
||||
<div class="top-banner__text">
|
||||
<div class="top-banner__text-up">
|
||||
<span class="brand-span">Hello! I'm</span>
|
||||
<h2 class="top-banner__h2">Jhone</h2>
|
||||
</div>
|
||||
<div class="top-banner__text-down">
|
||||
<h2 class="top-banner__h2">Smith</h2>
|
||||
<span class="brand-span">Author, Writer, Traveler</span>
|
||||
</div>
|
||||
<p>One Man. One Mission. Can He Go Beyond?One Man. One Mission. Can He Go Beyond?</p>
|
||||
<a href="#" class="brand-button">Read bio > </a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Top banner end -->
|
||||
|
||||
<!-- About me -->
|
||||
<section class="fh5co-about-me">
|
||||
<div class="about-me-inner site-container">
|
||||
<article class="portfolio-wrapper">
|
||||
<div class="portfolio__img">
|
||||
<img src="./images/about-me.jpg" class="about-me__profile" alt="about me profile picture">
|
||||
</div>
|
||||
<div class="portfolio__bottom">
|
||||
<div class="portfolio__name">
|
||||
<span>J</span>
|
||||
<h2 class="universal-h2">hone Smith</h2>
|
||||
</div>
|
||||
<p>Jhone Smith is a short story author, novelist, and award-winning poet.</p>
|
||||
</div>
|
||||
</article>
|
||||
<div class="about-me__text">
|
||||
<div class="about-me-slider">
|
||||
<div class="about-me-single-slide">
|
||||
<h2 class="universal-h2 universal-h2-bckg">About me</h2>
|
||||
<p><span>H</span> e has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and the British Fantasy Society journal Dark Horizons. He is also CEO of a company, specializing in custom book publishing and social media marketing services, have created a community for authors to learn and connect.He has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and have created a community for authors to learn and connect.</p>
|
||||
<h4>Author</h4>
|
||||
<p class="p-white">See me</p>
|
||||
</div>
|
||||
<div class="about-me-single-slide">
|
||||
<h2 class="universal-h2 universal-h2-bckg">About me 2</h2>
|
||||
<p><span>H</span> e has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and the British Fantasy Society journal Dark Horizons. He is also CEO of a company, specializing in custom book publishing and social media marketing services, have created a community for authors to learn and connect.He has work appearing or forthcoming in over a dozen venues, including Buzzy Mag, The Spirit of Poe, and have created a community for authors to learn and connect.</p>
|
||||
<h4>Author</h4>
|
||||
<p class="p-white">See me</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about-me-bckg"></div>
|
||||
</section>
|
||||
<!-- About me end -->
|
||||
|
||||
<!-- Books and CD -->
|
||||
<section class="fh5co-books">
|
||||
<div class="site-container">
|
||||
<h2 class="universal-h2 universal-h2-bckg">New Books And CD</h2>
|
||||
<div class="books">
|
||||
<div class="single-book">
|
||||
<a href="#" class="single-book__img">
|
||||
<img src="./images/books-1.jpg" alt="single book and cd">
|
||||
<div class="single-book_download">
|
||||
<img src="./images/download.svg" alt="book image">
|
||||
</div>
|
||||
</a>
|
||||
<h4 class="single-book__title">Olivani</h4>
|
||||
<span class="single-book__price">$15.00</span>
|
||||
<!-- star rating -->
|
||||
<div class="rating">
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
</div>
|
||||
<!-- star rating end -->
|
||||
</div>
|
||||
<div class="single-book">
|
||||
<a href="#" class="single-book__img">
|
||||
<img src="./images/books-2.jpg" alt="single book and cd">
|
||||
<div class="single-book_download">
|
||||
<img src="./images/download.svg" alt="book image">
|
||||
</div>
|
||||
</a>
|
||||
<h4 class="single-book__title">Molleon’s Life</h4>
|
||||
<span class="single-book__price">$22.00</span>
|
||||
<!-- star rating -->
|
||||
<div class="rating">
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
<span>☆</span>
|
||||
</div>
|
||||
<!-- star rating end -->
|
||||
</div>
|
||||
<div class="single-book">
|
||||
<a href="#" class="single-book__img">
|
||||
<img src="./images/books-3.jpg" alt="single book and cd">
|
||||
<div class="single-book_download">
|
||||
<img src="./images/download.svg" alt="book image">
|
||||
</div>
|
||||
</a>
|
||||
<h4 class="single-book__title">Love is Love</h4>
|
||||
<span class="single-book__price">$25.00</span>
|
||||
</div>
|
||||
<div class="single-book">
|
||||
<a href="#" class="single-book__img">
|
||||
<img src="./images/books-4.jpg" alt="single book and cd">
|
||||
<div class="single-book_download">
|
||||
<img src="./images/download.svg" alt="book image">
|
||||
</div>
|
||||
</a>
|
||||
<h4 class="single-book__title">Give Me Also</h4>
|
||||
<span class="single-book__price">$30.00</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="books-brand-button">
|
||||
<a href="#" class="brand-button">View more</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Books and CD end -->
|
||||
|
||||
<!-- Counter -->
|
||||
<div class="fh5co-counter counters">
|
||||
<div class="counter-inner site-container">
|
||||
<div class="single-count">
|
||||
<span class="count" data-count="50">0</span>
|
||||
<div class="single-count__text">
|
||||
<img src="./images/counter-1.png" alt="counter icon">
|
||||
<p>Books</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-count">
|
||||
<span class="count" data-count="600">0</span>
|
||||
<div class="single-count__text">
|
||||
<img src="./images/counter-2.png" alt="counter icon">
|
||||
<p>Pages</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-count">
|
||||
<span class="count" data-count="2000">0</span>
|
||||
<div class="single-count__text">
|
||||
<img src="./images/counter-3.png" alt="counter icon">
|
||||
<p>Sales</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-count">
|
||||
<span class="count" data-count="125">0</span>
|
||||
<div class="single-count__text">
|
||||
<img src="./images/counter-4.png" alt="counter icon">
|
||||
<p>Awards</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Counter -->
|
||||
|
||||
<!-- Blog -->
|
||||
<section class="fh5co-blog">
|
||||
<div class="site-container">
|
||||
<h2 class="universal-h2 universal-h2-bckg">My Blog</h2>
|
||||
<div class="blog-slider blog-inner">
|
||||
<div class="single-blog">
|
||||
<div class="single-blog__img">
|
||||
<img src="./images/blog1.jpg" alt="blog image">
|
||||
</div>
|
||||
<div class="single-blog__text">
|
||||
<h4>The Journey Under the Waves</h4>
|
||||
<span>On August 28, 2015</span>
|
||||
<p>Quisque vel sapi nec lacus adipis cing bibendum nullam porta lites laoreet aliquam.velitest, tempus a ullamcorper et, lacinia mattis mi. Cras arcu nulla, blandit id cursus et, ultricies eu leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-blog">
|
||||
<div class="single-blog__img">
|
||||
<img src="./images/blog2.jpg" alt="blog image">
|
||||
</div>
|
||||
<div class="single-blog__text">
|
||||
<h4>The Journey Under the Waves</h4>
|
||||
<span>On August 28, 2015</span>
|
||||
<p>Quisque vel sapi nec lacus adipis cing bibendum nullam porta lites laoreet aliquam.velitest, tempus a ullamcorper et, lacinia mattis mi. Cras arcu nulla, blandit id cursus et, ultricies eu leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="single-blog">
|
||||
<div class="single-blog__img">
|
||||
<img src="./images/blog2.jpg" alt="blog image">
|
||||
</div>
|
||||
<div class="single-blog__text">
|
||||
<h4>The Journey Under the Waves</h4>
|
||||
<span>On August 28, 2015</span>
|
||||
<p>Quisque vel sapi nec lacus adipis cing bibendum nullam porta lites laoreet aliquam.velitest, tempus a ullamcorper et, lacinia mattis mi. Cras arcu nulla, blandit id cursus et, ultricies eu leo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blog end -->
|
||||
|
||||
<!-- Quotes -->
|
||||
<section class="fh5co-quotes">
|
||||
<div class="site-container">
|
||||
<div class="about-me-slider">
|
||||
<div>
|
||||
<h2 class="universal-h2 universal-h2-bckg">What People Are Saying</h2>
|
||||
<p>“Pudding croissant cake candy canes fruitcake sweet roll pastry gummies sugar plum. Tart pastry danish soufflé donut bear claw chocolate cake marshmallow chupa chups. Jelly danish gummi bears cake donut powder chocolate cake. Bonbon soufflé lollipop biscuit dragée jelly-o. Wafer pastry pudding tiramisu chocolate bar croissant cake. Pie caramels gummies danish.”</p>
|
||||
<img src="./images/quotes.svg" alt="quotes svg">
|
||||
<h4>David Dixon</h4>
|
||||
<p>Reader</p>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="universal-h2 universal-h2-bckg">What People Are Saying 2</h2>
|
||||
<p>“Pudding croissant cake candy canes fruitcake sweet roll pastry gummies sugar plum. Tart pastry danish soufflé donut bear claw chocolate cake marshmallow chupa chups. Jelly danish gummi bears cake donut powder chocolate cake. Bonbon soufflé lollipop biscuit dragée jelly-o. Wafer pastry pudding tiramisu chocolate bar croissant cake. Pie caramels gummies danish.”</p>
|
||||
<img src="./images/quotes.svg" alt="quotes svg">
|
||||
<h4>David Dixon</h4>
|
||||
<p>Reader</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quotes end -->
|
||||
|
||||
<!-- Social -->
|
||||
<section class="fh5co-social">
|
||||
<div class="site-container">
|
||||
<div class="social">
|
||||
<h5>Follow me!!</h5>
|
||||
<div class="social-icons">
|
||||
<a href="#" target="_blank"><img src="./images/social-twitter.png" alt="social icon"></a>
|
||||
<a href="#" target="_blank"><img src="./images/social-pinterest.png" alt="social icon"></a>
|
||||
<a href="#" target="_blank"><img src="./images/social-youtube.png" alt="social icon"></a>
|
||||
<a href="#" target="_blank"><img src="./images/social-twitter.png" alt="social icon"></a>
|
||||
</div>
|
||||
<h5>Share it!</h5>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Social -->
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="site-footer">
|
||||
<div class="site-container">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-info">
|
||||
<div class="footer-info__left">
|
||||
<img src="./images/footer-img.jpg" alt="about me image">
|
||||
<p>Read more about me</p>
|
||||
</div>
|
||||
<div class="footer-info__right">
|
||||
<h5>Get In Touch</h5>
|
||||
<p class="footer-phone">Phone: +958734902847</p>
|
||||
<p>Email : Jhone@Example.com</p>
|
||||
<div class="social-icons">
|
||||
<a href="#" target="_blank"><img src="./images/social-twitter.png" alt="social icon"></a>
|
||||
<a href="#" target="_blank"><img src="./images/social-pinterest.png" alt="social icon"></a>
|
||||
<a href="#" target="_blank"><img src="./images/social-youtube.png" alt="social icon"></a>
|
||||
<a href="#" target="_blank"><img src="./images/social-twitter.png" alt="social icon"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-contact-form">
|
||||
<h5>Contact Form</h5>
|
||||
<form class="contact-form">
|
||||
<div class="contact-form__input">
|
||||
<input type="text" name="name" placeholder="Name">
|
||||
<input type="email" name="email" placeholder="Email">
|
||||
</div>
|
||||
<textarea></textarea>
|
||||
<input type="submit" name="submit" value="Submit" class="submit-button">
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<div class="site-container footer-bottom-inner">
|
||||
<p>© 2019 Author | Design by <a href="https://freehtml5.co/" target="_blank">freehtml5.co</a> | All rights Reserved.</p>
|
||||
<div class="footer-bottom__img">
|
||||
<img src="./images/footer-mastercard.png" alt="footer image">
|
||||
<img src="./images/footer-paypal.png" alt="footer image">
|
||||
<img src="./images/footer-visa.png" alt="footer image">
|
||||
<img src="./images/footer-fedex.png" alt="footer image">
|
||||
<img src="./images/footer-dhl.png" alt="footer image">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Footer end -->
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/slick.min.js"></script>
|
||||
<script src="js/main.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||