inital commit

This commit is contained in:
alex danamir
2020-12-13 23:15:46 +03:00
parent 416a1b9b34
commit 0f89efd754
43 changed files with 1540 additions and 0 deletions

0
app.py Normal file
View File

11
app_config.py Normal file
View 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
View 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
View 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

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
static/font/Calisto-MT.ttf Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
static/img/about-me.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
static/img/blog1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
static/img/blog2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

BIN
static/img/book-bckg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
static/img/books-1.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/img/books-2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
static/img/books-3.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

BIN
static/img/books-4.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

BIN
static/img/counter-1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 310 B

BIN
static/img/counter-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 320 B

BIN
static/img/counter-3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 299 B

BIN
static/img/counter-4.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 284 B

View 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
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 367 B

BIN
static/img/footer-fedex.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 B

BIN
static/img/footer-img.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 527 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 341 B

BIN
static/img/footer-visa.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 331 B

BIN
static/img/quotes-bckg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

42
static/img/quotes.svg Normal file
View 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

Binary file not shown.

After

Width:  |  Height:  |  Size: 912 B

BIN
static/img/social-bckg.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 258 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 229 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 125 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 133 KiB

5
static/js/jquery.min.js vendored Normal file

File diff suppressed because one or more lines are too long

76
static/js/main.js Normal file
View 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

File diff suppressed because one or more lines are too long

346
templates/index.html Normal file
View 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>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</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">Molleons Life</h4>
<span class="single-book__price">$22.00</span>
<!-- star rating -->
<div class="rating">
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</span>
<span>&#9734;</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>