Browse Source

Initial released

master
Error6251 2 years ago
commit
ea1e4fcbb7
  1. 1
      .gitignore
  2. 20
      LICENSE
  3. 50
      README.md
  4. 2
      archetypes/default.md
  5. 41
      assets/js/form-handler.js
  6. 445
      assets/js/script.js
  7. 0
      assets/scss/_buttons.scss
  8. 12
      assets/scss/_common.scss
  9. 47
      assets/scss/_mixins.scss
  10. 43
      assets/scss/_typography.scss
  11. 17
      assets/scss/_variables.scss
  12. 148
      assets/scss/components/_about-section.scss
  13. 175
      assets/scss/components/_blog-section.scss
  14. 128
      assets/scss/components/_blog.scss
  15. 202
      assets/scss/components/_case_details.scss
  16. 247
      assets/scss/components/_clasic-blog.scss
  17. 275
      assets/scss/components/_contact-section.scss
  18. 162
      assets/scss/components/_contact.scss
  19. 219
      assets/scss/components/_hero-section.scss
  20. 104
      assets/scss/components/_page-title.scss
  21. 105
      assets/scss/components/_portfolio-section.scss
  22. 55
      assets/scss/components/_preloder.scss
  23. 150
      assets/scss/components/_resume-section.scss
  24. 163
      assets/scss/components/_service-section.scss
  25. 112
      assets/scss/components/_single-blog-post.scss
  26. 116
      assets/scss/components/_site-navigation.scss
  27. 142
      assets/scss/components/_skill-section.scss
  28. 144
      assets/scss/components/_testimonial-section.scss
  29. 50
      assets/scss/style.scss
  30. 36
      exampleSite/.forestry/front_matter/templates/about-template.yml
  31. 18
      exampleSite/.forestry/front_matter/templates/blog-template.yml
  32. 108
      exampleSite/.forestry/front_matter/templates/config-template.yml
  33. 33
      exampleSite/.forestry/front_matter/templates/hero-template.yml
  34. 36
      exampleSite/.forestry/front_matter/templates/portfolio-template.yml
  35. 57
      exampleSite/.forestry/front_matter/templates/resume-template.yml
  36. 31
      exampleSite/.forestry/front_matter/templates/service-template.yml
  37. 60
      exampleSite/.forestry/settings.yml
  38. 67
      exampleSite/config.toml
  39. 3
      exampleSite/content/blog/_index.md
  40. 34
      exampleSite/content/blog/benjamin-franklins-thoughts-about-new-designers.md
  41. 34
      exampleSite/content/blog/designer-conference-at-florida-2020.md
  42. 34
      exampleSite/content/blog/designers-thoughts-about-mobile-UI.md
  43. 34
      exampleSite/content/blog/how-to-become-acreative-designer.md
  44. 34
      exampleSite/content/blog/learning-from-experience.md
  45. 34
      exampleSite/content/blog/new-designers-limitations.md
  46. 34
      exampleSite/content/blog/things-you-must-know-as-a-designer.md
  47. 34
      exampleSite/content/blog/world-most-famous-app-developers-and-designers.md
  48. 34
      exampleSite/content/blog/you-must-know-this-before-becoming-a-designer.md
  49. 4
      exampleSite/content/contact/_index.md
  50. 21
      exampleSite/content/portfolio/UX-case-study-for-agriculture-app.md
  51. 21
      exampleSite/content/portfolio/case-study-one.md
  52. 21
      exampleSite/content/portfolio/event-app-case-study.md
  53. 21
      exampleSite/content/portfolio/recipe-app-ux-study.md
  54. 15
      exampleSite/data/aboutSection.yml
  55. 6
      exampleSite/data/blogSection.yml
  56. 11
      exampleSite/data/hero.yml
  57. 45
      exampleSite/data/resumeSection.yml
  58. 31
      exampleSite/data/serviceSection.yml
  59. 13
      exampleSite/data/skillSection.yml
  60. 18
      exampleSite/data/testimonialSection.yml
  61. 5
      exampleSite/resources/_gen/assets/scss/scss/style.scss_b95b077eb505d5c0aff8055eaced30ad.content
  62. 1
      exampleSite/resources/_gen/assets/scss/scss/style.scss_b95b077eb505d5c0aff8055eaced30ad.json
  63. 55
      exampleSite/static/admin/index.html
  64. 11
      exampleSite/static/images/about/about-content-svg.svg
  65. BIN
      exampleSite/static/images/about/about-img.jpg
  66. 3
      exampleSite/static/images/about/about-mask-svg.svg
  67. BIN
      exampleSite/static/images/allpost/allPost-1.jpg
  68. BIN
      exampleSite/static/images/allpost/allPost-2.jpg
  69. BIN
      exampleSite/static/images/allpost/allPost-3.jpg
  70. BIN
      exampleSite/static/images/allpost/allPost-4.jpg
  71. BIN
      exampleSite/static/images/allpost/allPost-5.jpg
  72. BIN
      exampleSite/static/images/allpost/allPost-6.jpg
  73. BIN
      exampleSite/static/images/allpost/allPost-7.jpg
  74. BIN
      exampleSite/static/images/allpost/allPost-8.jpg
  75. BIN
      exampleSite/static/images/allpost/allPost-9.jpg
  76. BIN
      exampleSite/static/images/blog/blog-1.jpg
  77. BIN
      exampleSite/static/images/blog/blog-2.jpg
  78. BIN
      exampleSite/static/images/blog/blog-3.jpg
  79. 11
      exampleSite/static/images/blog/blog-shape.svg
  80. BIN
      exampleSite/static/images/classic-blog/classic-blog-1.jpg
  81. BIN
      exampleSite/static/images/classic-blog/classic-blog-2.jpg
  82. BIN
      exampleSite/static/images/classic-blog/classic-blog-3.jpg
  83. BIN
      exampleSite/static/images/classic-blog/classic-blog-4.jpg
  84. BIN
      exampleSite/static/images/classic-blog/classic-blog-5.jpg
  85. 6
      exampleSite/static/images/contact/location.svg
  86. BIN
      exampleSite/static/images/contact/map.png
  87. 13
      exampleSite/static/images/contact/phone.svg
  88. 4
      exampleSite/static/images/contact/time.svg
  89. BIN
      exampleSite/static/images/contact/widget-logo.png
  90. BIN
      exampleSite/static/images/favicon.png
  91. BIN
      exampleSite/static/images/hero/2960351.jpg
  92. 132
      exampleSite/static/images/hero/figure-svg.svg
  93. BIN
      exampleSite/static/images/hero/hero-mask-svg.png
  94. 3
      exampleSite/static/images/hero/hero-mask-svg.svg
  95. BIN
      exampleSite/static/images/hero/popup-thumb.png
  96. BIN
      exampleSite/static/images/latest-post/latest-post-1.png
  97. BIN
      exampleSite/static/images/latest-post/latest-post-2.png
  98. BIN
      exampleSite/static/images/latest-post/latest-post-3.png
  99. BIN
      exampleSite/static/images/pin.png
  100. BIN
      exampleSite/static/images/portfolio/case-details.png
  101. Some files were not shown because too many files have changed in this diff Show More

1
.gitignore vendored

@ -0,0 +1 @@ @@ -0,0 +1 @@
.DS_Store

20
LICENSE

@ -0,0 +1,20 @@ @@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2020 StaticMania
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

50
README.md

@ -0,0 +1,50 @@ @@ -0,0 +1,50 @@
<h1>Portio Hugo</h1>
<img src="https://user-images.githubusercontent.com/25920065/91142412-8a895c80-e6d2-11ea-93dd-5de59ce60adf.jpg" alt="screenshot" width="100%">
Portio is a simple, minimal and responsive Portfolio Hugo Theme. Portio is well organized, well-formatted and named accordingly so it’s easy to change any and all of the design. Portio is built with Bootstrap 4. You can customize it very easy to fit your needs.
## Table of Contents
- [Live Demo](#live-demo)
- [Installation](#installation)
- [Main Features](#features)
- [Support](#support)
- [Licensing](#licensing)
- [Hire](#hire)
## Live Demo
Checkout the live demo [here](https://portio-hugo.staticmania.com/)
## Installation
1. Add the repository into your Hugo Project repository as a submodule, `git submodule add git@github.com:StaticMania/portio-hugo.git themes/roxo`.
2. Copy the `.forestry`, `data`, `content`, `static`, `resources` & `config.toml` files from the `exampleSite` directory and paste it on you Hugo Project repository/directory. From the site home directory:
cp -a themes/roxo/exampleSite/\* .
3. Build your site with `hugo serve` and see the result at `http://localhost:1313/`.
## Features
- Responsive Ready.
- Powered by Bootstrap 4.
- Blog Support.
- Well formatted code.
- Easy Customization.
- Formspree Contact form.
- Google Analytics.
- Forestry Integrated.
- Crafted for Personal Portfolio
## Support
Have some question or facing any technical trouble feel free to [Contact Us](https://staticmania.com/contact/)
## Licensing
This Repository is licensed under the [MIT](https://github.com/StaticMania/portio-hugo/blob/master/LICENSE) License
## Hire
Need help to build HUGO websites with your custom requirements. Feel free to [contact](https://staticmania.com/contact/) with us. We provide custom development service for HUGO.

2
archetypes/default.md

@ -0,0 +1,2 @@ @@ -0,0 +1,2 @@
+++
+++

41
assets/js/form-handler.js

@ -0,0 +1,41 @@ @@ -0,0 +1,41 @@
window.addEventListener("DOMContentLoaded", function () {
var form = document.getElementById("contact-form");
var button = document.getElementById("contact-form-button");
var status = document.getElementById("contact-form-status");
function success() {
form.reset();
button.style = "display: none ";
status.innerHTML = "Thanks! Contact form is submitted successfully.";
}
function error() {
status.innerHTML = "Oops! There was a problem.";
}
// handle the form submission event
if (form != null) {
form.addEventListener("submit", function (ev) {
ev.preventDefault();
var data = new FormData(form);
ajax(form.method, form.action, data, success, error);
});
}
});
// helper function for sending an AJAX request
function ajax(method, url, data, success, error) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function () {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
success(xhr.response, xhr.responseType);
} else {
error(xhr.status, xhr.response, xhr.responseType);
}
};
xhr.send(data);
}

445
assets/js/script.js

@ -0,0 +1,445 @@ @@ -0,0 +1,445 @@
// Preloader
function PageLoad() {
$("body").removeClass("hidden");
TweenMax.to($(".preloader-text"), 1, {
force3D: true,
opacity: 1,
y: 0,
delay: 0.2,
ease: Power3.easeOut,
});
var width = 100,
perfData = window.performance.timing,
EstimatedTime = -(perfData.loadEventEnd - perfData.navigationStart),
time = parseInt((EstimatedTime / 500) % 50) * 70;
// Percentage Increment Animation
var PercentageID = $("#precent"),
start = 001,
end = 100,
durataion = time;
animateValue(PercentageID, start, end, durataion);
function animateValue(id, start, end, duration) {
var range = end - start,
current = start,
increment = end > start ? 1 : -1,
stepTime = Math.abs(Math.floor(duration / range)),
obj = $(id);
var timer = setInterval(function () {
current += increment;
$(obj).text(current);
if (current === end) {
clearInterval(timer);
}
}, stepTime);
}
// Fading Out Loadbar on Finised
setTimeout(function () {
TweenMax.to($(".percentage, .inner"), 0.7, {
force3D: true,
opacity: 0,
yPercent: -101,
ease: Power3.easeInOut,
});
TweenMax.to($(".preloader-wrap"), 0.7, {
force3D: true,
yPercent: -150,
delay: 0.2,
ease: Power3.easeInOut,
});
}, time);
}
$(document).ready(function () {
// preloder
PageLoad();
// change-navigation-color
$(window).scroll(function () {
if ($(document).scrollTop() > 200) {
$(".navbar").addClass("nav__color__change");
} else {
$(".navbar").removeClass("nav__color__change");
}
});
// Smooth scrolling
var scrollLink = $(".scroll");
scrollLink.click(function (e) {
e.preventDefault();
$("body,html").animate(
{
scrollTop: $(this.hash).offset().top,
},
1000
);
});
$(".navbar-nav>li>a").on("click", function () {
$(".navbar-collapse").collapse("hide");
});
// service slider
$(".service__slider").slick({
infinite: false,
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: false,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
dots: true,
},
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: true,
},
},
],
});
// skill count
$(".skill__progress").waypoint(
function () {
$(".progress-value span").each(function () {
$(this)
.prop("Counter", 0)
.animate(
{
Counter: $(this).text(),
},
{
duration: 3000,
easing: "swing",
step: function (now) {
$(this).text(Math.ceil(now));
},
}
);
});
$(".skill__progress_item").addClass("js-animation");
this.destroy();
},
{ offset: "80%" }
);
// Testimonial slider
$(".testimonial__slider").slick({
infinite: true,
slidesToShow: 2,
slidesToScroll: 1,
dots: true,
arrows: false,
autoplay: true,
autoplaySpeed: 2000,
responsive: [
{
breakpoint: 992,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
dots: true,
},
},
],
});
// Modal Popup
$(".popup-button").magnificPopup({
type: "iframe",
iframe: {
patterns: {
youtube: {
index: "youtube.com/",
id: "v=",
src: "//www.youtube.com/embed/tgbNymZ7vqY",
},
},
},
});
$(".portfolio-item-grid").masonry({
// options
itemSelector: ".portfolio-item",
// columnWidth: 200,
});
// blob animation
var tl = new TimelineMax({
yoyo: true,
repeat: -1,
});
tl.to(".blob", 3, {
attr: {
d:
"M470.3 133c45.8 42.5 75.3 104.8 60.3 152-15 47.3-74.4 79.6-120.2 110.7-45.8 31.2-78.1 61.3-116.5 67.4-38.4 6.1-83-11.7-110.2-42.8-27.1-31.2-36.9-75.8-44.7-128.1-7.8-52.3-13.5-112.4 13.6-154.9 27.2-42.5 87.3-67.4 148.5-68.5 61.1-1 123.4 21.7 169.2 64.2z",
},
})
.to(".blob", 3, {
attr: {
d:
"M452.9 141.3c41.2 47 67.6 102.8 56.3 147.4-11.3 44.5-60.4 77.8-101.6 120.6-41.1 42.8-74.4 95.3-117.3 104.9-42.9 9.7-95.4-23.4-122.1-66.2-26.7-42.9-27.4-95.4-32.6-153.2-5.2-57.7-14.8-120.7 11.9-167.7 26.6-47 89.6-78 149-74.5 59.4 3.5 115.2 41.7 156.4 88.7z",
},
})
.to(".blob", 3, {
attr: {
d:
"M423.5 172.8c30.2 33.9 43.8 80.5 42.9 126.3-.9 45.7-16.5 90.5-46.7 113.1-30.1 22.7-74.9 23.3-124.8 28.3-49.8 5.1-104.7 14.7-146.6-8-41.8-22.7-70.6-77.6-57.8-119.8 12.7-42.2 66.9-71.6 108.7-105.5 41.9-33.8 71.3-72 109.4-80.6 38.1-8.6 84.7 12.4 114.9 46.2z",
},
})
.to(".blob", 3, {
attr: {
d:
"M455.4 151.1c43.1 36.7 73.4 92.8 60.8 136.3-12.7 43.5-68.1 74.4-111.3 119.4-43.1 45-74 104.1-109.8 109-35.9 5-76.7-44.2-111.8-89.2-35.2-45-64.7-85.8-70.8-132.6-6-46.8 11.6-99.6 46.7-136.3 35.2-36.6 88-57.2 142.4-58.8 54.5-1.7 110.6 15.6 153.8 52.2z",
},
});
});
// G-Map
/**
* Created by Kausar on 06/10/2016.
*/
window.marker = null;
function initialize() {
var map;
var lat = $("#map").data("lat");
var long = $("#map").data("long");
console.log(lat, long);
var mapCenter = new google.maps.LatLng(lat, long);
var style = [
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#e9e9e9",
},
{
lightness: 17,
},
],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{
color: "#f5f5f5",
},
{
lightness: 20,
},
],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{
color: "#ffffff",
},
{
lightness: 17,
},
],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{
color: "#ffffff",
},
{
lightness: 29,
},
{
weight: 0.2,
},
],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
{
lightness: 18,
},
],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [
{
color: "#ffffff",
},
{
lightness: 16,
},
],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [
{
color: "#f5f5f5",
},
{
lightness: 21,
},
],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [
{
color: "#dedede",
},
{
lightness: 21,
},
],
},
{
elementType: "labels.text.stroke",
stylers: [
{
visibility: "on",
},
{
color: "#ffffff",
},
{
lightness: 16,
},
],
},
{
elementType: "labels.text.fill",
stylers: [
{
saturation: 36,
},
{
color: "#333333",
},
{
lightness: 40,
},
],
},
{
elementType: "labels.icon",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [
{
color: "#f2f2f2",
},
{
lightness: 19,
},
],
},
{
featureType: "administrative",
elementType: "geometry.fill",
stylers: [
{
color: "#fefefe",
},
{
lightness: 20,
},
],
},
{
featureType: "administrative",
elementType: "geometry.stroke",
stylers: [
{
color: "#fefefe",
},
{
lightness: 17,
},
{
weight: 1.2,
},
],
},
];
var mapOptions = {
// SET THE CENTER
center: mapCenter,
// SET THE MAP STYLE & ZOOM LEVEL
mapTypeId: google.maps.MapTypeId.ROADMAP,
// REMOVE ALL THE CONTROLS EXCEPT ZOOM
zoom: 13,
panControl: false,
scrollwheel: false,
zoomControl: true,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
overviewMapControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
},
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
// SET THE MAP TYPE
var mapType = new google.maps.StyledMapType(style, {
name: "Grayscale",
});
map.mapTypes.set("grey", mapType);
map.setMapTypeId("grey");
//CREATE A CUSTOM PIN ICON
var marker_image = $("#map").data("pin");
var pinIcon = new google.maps.MarkerImage(
marker_image,
null,
null,
null,
new google.maps.Size(25, 34)
);
marker = new google.maps.Marker({
position: mapCenter,
map: map,
icon: pinIcon,
title: "bizcred",
});
}
if ($("#map").length > 0) {
google.maps.event.addDomListener(window, "load", initialize);
}

0
assets/scss/_buttons.scss

12
assets/scss/_common.scss

@ -0,0 +1,12 @@ @@ -0,0 +1,12 @@
// html{
// scroll-behavior: smooth;
// }
body {
background: $body-color;
}
.section{
padding: 100px 0;
}

47
assets/scss/_mixins.scss

@ -0,0 +1,47 @@ @@ -0,0 +1,47 @@
@mixin mobile-s{
@media(max-width:375px){
@content;
}
}
@mixin mobile-xs{
@media(max-width:400px){
@content;
}
}
@mixin mobile{
@media(max-width:575px){
@content;
}
}
@mixin tablet{
@media(max-width:767px){
@content;
}
}
@mixin desktop{
@media(max-width:991px){
@content;
}
}
@mixin desktop-lg{
@media(max-width:1200px){
@content;
}
}
@mixin desktop-xl{
@media(max-width:1400px){
@content;
}
}
@mixin desktop-4k{
@media(min-width:2000px){
@content;
}
}
@mixin size($size){
width: $size; height: $size;
}

43
assets/scss/_typography.scss

@ -0,0 +1,43 @@ @@ -0,0 +1,43 @@
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900|Yeseva+One&display=swap');
// body{
// font-family: $primary-font;
// font-size: 16px;
// color: $text-color;
// }
// h1, h2, h3, h4, h5, h6{
// font-family: $secondary-font;
// font-weight: 600;
// color: $text-color-dark;
// }
// p{
// font-size: 16px;
// color: $text-color;
// }
// h1{
// font-size: 60px;
// }
// h2{
// font-size: 50px;
// }
// h3{
// font-size: 30px;
// }
// h4{
// font-size: 25px;
// }
// h5{
// font-size: 18px;
// }
// h6{
// font-size: 15px;
// font-weight: 300;
// }

17
assets/scss/_variables.scss

@ -0,0 +1,17 @@ @@ -0,0 +1,17 @@
//site color variables
$body-color: #fff;
$primary-color: #5D78FF;
$secondary-color: #282F49;
$text-color: #9D9EA5;
$text-color-dark: #00113E;
$site-ease: cubic-bezier(0.36, 0.03, 0, 0.91);
$gray: #F7F9FF;
$dark-gray: #646569;
// solid colors
$white: #fff;
$black: #000;
// Font Variables
$primary-font: 'Yeseva One', cursive;
$secondary-font: 'Poppins', sans-serif;

148
assets/scss/components/_about-section.scss

@ -0,0 +1,148 @@ @@ -0,0 +1,148 @@
.about {
overflow: hidden;
&_header {
margin-bottom: 60px;
span {
display: block;
font-size: 20px;
font-family: $secondary-font;
margin: 0 0 30px 0;
}
h1 {
margin: 0 0 20px 0;
font-size: 55px;
font-family: $primary-font;
color: $secondary-color;
line-height: 1;
}
p {
margin: 0;
font-size: 18px;
font-family: $secondary-font;
color: #7e7e8a;
line-height: 30px;
}
}
&_content {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
&-thumb {
width: 45%;
position: relative;
@include desktop {
width: 100%;
}
.about-svg {
position: absolute;
top: -11%;
left: -17%;
z-index: -1;
height: 150px;
animation: move_top 4s infinite;
@include tablet {
top: -7%;
left: -16%;
}
img {
height: 100%;
width: 100%;
}
}
.about_content-thumb-image {
img {
height: 100%;
width: 100%;
&.about_mask_svg {
mask: url(../images/about/about-mask-svg.svg);
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: contain;
-webkit-mask-position: center center;
}
}
}
}
&-inner {
width: 55%;
padding: 60px 50px;
background: #1b2031;
border-radius: 20px;
margin-left: -60px;
position: relative;
@include desktop {
padding: 25px;
}
@include desktop {
width: 100%;
margin-left: 0;
margin-top: 30px;
}
&-blob {
position: absolute;
top: -55%;
right: -22%;
z-index: -1;
width: 400.369px;
height: 362.909px;
svg {
width: 140%;
}
@include tablet {
display: none;
}
}
h3 {
margin: 0 0 35px 0;
color: $white;
font-family: $primary-font;
}
p {
margin: 0 0 35px 0;
font-size: 15px;
font-family: $secondary-font;
color: $white;
font-weight: 400;
line-height: 30px;
@include desktop {
font-size: 14px;
line-height: 26px;
}
}
ul {
margin: 0;
padding: 0;
li {
list-style: none;
display: inline-block;
a {
display: block;
padding: 15px 30px;
text-decoration: none;
color: $white;
border-radius: 7px;
transition: all 0.3s ease;
border: 1px solid #60636f;
background: transparent;
&.active {
background-color: $primary-color;
border: 1px solid transparent;
}
&:hover {
border: 1px solid #425fee;
background: #425fee;
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
transform: scale(1.03);
}
}
&:not(:last-child) {
margin-right: 10px;
@include mobile-s {
margin-bottom: 10px;
}
}
}
}
}
}
}

175
assets/scss/components/_blog-section.scss

@ -0,0 +1,175 @@ @@ -0,0 +1,175 @@
.blog{
position: relative;
margin-bottom: 30px;
&__shape{
position: absolute;
top: 11%;
right: 12%;
height: 300px;
width: 300px;
img{
animation: rotate 25s infinite linear;
height: 100%;
width: 100%;
}
@include desktop{
display: none;
}
}
&__header{
span{
font-size: 20px;
font-family: $secondary-font;
color: $secondary-color;
position: relative;
display: block;
margin: 0 0 20px 30px;
&::before{
position: absolute;
content: '';
height: 2px;
width: 20px;
top: 50%;
left: -20px;
transform: translateX(-50%);
background: $secondary-color;
}
}
h1{
margin: 0 0 30px 0;
font-size: 50px;
font-family: $primary-font;
color: $secondary-color;
line-height: 50px;
}
p{
margin: 0 0 0 0;
font-family: $secondary-font;
color: $secondary-color;
font-size: 18px;
line-height: 26px;
}
}
&__header_button{
position: relative;
width: 100%;
height: 100%;
a{
position: absolute;
bottom: 0;
right: 0;
display: inline-block;
padding: 15px 40px;
background: #fff;
border: 1px solid #E4E6EB;
border-radius: 7px;
font-family: $secondary-font;
text-decoration: none;
font-size: 17px;
color: #282F49;
transition: all .3s ease;
transform: scale(1);
@include desktop{
position: relative;
margin-top: 30px;
}
&:hover{
background: $primary-color;
border: 1px solid transparent;
color: #fff;
transform: scale(1.03);
box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
}
}
}
&__item{
position: relative;
margin-bottom: 20px;
@include desktop{
margin-bottom: 130px;
}
&-thumb{
width: 90%;
height: 100%;
overflow: hidden;
border-radius: 20px;
@include desktop{
width: 80%;
margin: 0 auto;
}
img{
height: 100%;
width: 100%;
transition: all .3s ease;
}
}
&-content{
background: #ffffff;
position: absolute;
bottom: -100px;
left: 40px;
padding: 30px;
border-radius: 20px;
box-shadow: 0px 20px 40px 0px rgba(50,65,141,0.12);
@include desktop{
left: 0;
}
span{
font-size: 16px;
font-family: $secondary-font;
color: $primary-color;
margin: 0 0 20px 40px;
position: relative;
display: block;
line-height: 1;
&::before{
position: absolute;
content: '';
top: 50%;
left: -40px;
height: 1px;
width: 20px;
background: #282F49;
transform: translateY(-50%);
}
}
a{
font-size: 22px;
font-family: $primary-font;
line-height: 30px;
color: $secondary-color;
margin: 0;
display: block;
text-decoration: none;
transition: all .3s ease;
&:hover{
color: $primary-color;
}
}
}
&:hover{
.blog__item-thumb img{
transform: scale(1.1);
}
}
}
.mobile{
display: none;
}
@include desktop {
.desktop{
display: none;
}
.mobile{
display: block;
text-align: center;
}
}
}
@keyframes rotate{
from {
-webkit-transform: rotate(0deg);
} to {
-webkit-transform: rotate(360deg);
}
}

128
assets/scss/components/_blog.scss

@ -0,0 +1,128 @@ @@ -0,0 +1,128 @@
.blog {
&__item {
position: relative;
margin-bottom: 120px;
&-thumb {
width: 90%;
height: 100%;
@include desktop {
width: 80%;
margin: 0 auto;
}
img {
height: 100%;
width: 100%;
border-radius: 20px;
}
}
&-content {
background: #ffffff;
position: absolute;
bottom: -100px;
left: 40px;
padding: 30px;
border-radius: 20px;
box-shadow: 0px 20px 40px 0px rgba(50, 65, 141, 0.12);
@include desktop {
left: 0;
}
span {
font-size: 16px;
font-family: $secondary-font;
color: $primary-color;
margin: 0 0 20px 40px;
position: relative;
display: block;
line-height: 1;
&::before {
position: absolute;
content: "";
top: 50%;
left: -40px;
height: 1px;
width: 20px;
background: #282f49;
transform: translateY(-50%);
}
}
a {
font-size: 22px;
font-family: $primary-font;
line-height: 30px;
color: $secondary-color;
margin: 0;
display: block;
text-decoration: none;
transition: all 0.3s ease;
&:hover {
color: $primary-color;
}
}
}
}
&__pagination {
width: 100%;
position: relative;
height: 80px;
margin-top: 40px;
.pagination {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
li {
a {
transition: all 0.3s ease;
border-radius: 10px !important;
box-shadow: 0 20px 40px 0 rgba(50, 65, 141, 0.12);
height: 80px;
width: 80px;
text-decoration: none;
font-family: $primary-font;
font-size: 20px;
color: $secondary-color;
transition: all 0.3s ease;
display: inline-block;
text-align: center;
line-height: 80px;
position: relative;
border: none;
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
path {
fill: #000;
}
}
}
&:hover {
a {
background: $primary-color;
color: $white;
svg {
path {
fill: $white;
}
}
}
}
&:not(:last-child) {
margin-right: 34px;
}
&.active {
a {
background: $primary-color;
color: $white;
svg {
path {
fill: $white;
}
}
}
}
}
}
}
}

202
assets/scss/components/_case_details.scss

@ -0,0 +1,202 @@ @@ -0,0 +1,202 @@
.case-details {
padding: 200px 0 100px 0;
.svg-img {
position: absolute;
top: 30%;
left: -7%;
animation: move_top 5s infinite linear;
@include desktop {
display: none;
}
}
.animate-shape {
position: absolute;
top: 29%;
right: 4%;
height: 300px;
width: 300px;
svg {
width: 100%;
}
@include desktop {
display: none;
}
}
.animate-pattern {
position: absolute;
top: 46%;
right: 12%;
height: 100px;
width: 100px;
animation: move_top 3s infinite linear;
img {
height: 100%;
width: 100%;
}
@include desktop {
display: none;
}
}
&-title {
font-size: 50px;
line-height: 60px;
font-family: $primary-font;
color: $secondary-color;
margin: 0 0 50px 0;
}
p {
font-family: $secondary-font;
color: #7e7e8a;
font-size: 16px;
line-height: 34px;
margin: 0 0 30px 0;
}
&-info {
display: flex;
justify-content: space-around;
background: $secondary-color;
border-radius: 20px;
padding: 65px 0;
margin: 70px 0 80px 0;
@include mobile {
flex-direction: column;
padding: 30px 0;
}
.case-details-info-item {
position: relative;
&:not(:last-child) {
&::before {
position: absolute;
content: "";
width: 1px;
height: 100%;
top: 0;
right: -80px;
background: rgba($color: $white, $alpha: 0.1);
@include desktop {
right: -45px;
}
@include tablet {
right: -15px;
}
@include mobile {
display: none;
}
}
@include mobile {
margin-bottom: 30px;
}
}
}
h5 {
margin: 0 0 10px 0;
font-size: 20px;
color: $white;
font-family: $primary-font;
}
p {
margin: 0;
}
}
&-service {
margin-bottom: 90px;
h3 {
font-family: $primary-font;
color: $secondary-color;
font-size: 25px;
margin: 0 0 25px 0;
}
p {
margin: 0;
}
}
&-thumb {
margin: 0 0 90px 0;
border-radius: 30px;
overflow: hidden;
img {
height: 100%;
max-width: 100%;
border-radius: 20px;
}
}
&-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 50px;
.previous,
.next {
.icon {
line-height: 0;
}
.content {
span {
display: block;
font-family: $secondary-font;
color: #7e7e8a;
font-size: 15px;
line-height: 1;
margin-bottom: 5px;
}
h5 {
font-family: $primary-font;
font-size: 20px;
margin: 0;
line-height: 1;
a {
text-decoration: none;
color: $secondary-color;
transition: all 0.3s ease;
&:hover {
color: $primary-color;
}
}
}
}
}
.previous {
display: flex;
align-items: center;
.icon {
margin-right: 15px;
}
}
.social {
@include mobile {
display: none;
}
ul {
margin: 0;
padding: 0;
li {
list-style: none;
display: inline-block;
a {
display: block;
text-decoration: none;
color: #7e7e8a;
font-size: 20px;
transition: all 0.3s ease;
&:hover {
color: $primary-color;
}
}
&:not(:last-child) {
margin-right: 25px;
}
}
}
}
.next {
display: flex;
align-items: center;
.icon {
margin-left: 15px;
}
.content {
text-align: right;
}
}
}
}

247
assets/scss/components/_clasic-blog.scss

@ -0,0 +1,247 @@ @@ -0,0 +1,247 @@
.classicBlog{
&__item{
position: relative;
margin-bottom: 150px;
&-thumb{
width: 88%;
height: 100%;
@include desktop{
width: 80%;
margin: 0 auto;
}
img{
height: 100%;
width: 100%;
border-radius: 20px;
}
}
&-content{
margin-right: 18px;
background: #ffffff;
position: absolute;
bottom: -100px;
left: 40px;
padding: 30px 50px 30px 40px;
border-radius: 20px;
box-shadow: 0px 20px 40px 0px rgba(50,65,141,0.12);
@include desktop{
left: 0;
}
@include mobile{
padding: 25px;
}
span{
font-size: 16px;
font-family: $secondary-font;
color: $primary-color;
margin: 0 0 20px 40px;
position: relative;
display: block;
line-height: 1;
@include mobile{
font-size: 14px;
}
&::before{
position: absolute;
content: '';
top: 50%;
left: -40px;
height: 1px;
width: 20px;
background: #282F49;
transform: translateY(-50%);
}
}
a{
font-size: 28px;
font-family: $primary-font;
line-height: 40px;
color: $secondary-color;
margin: 0;
display: block;
text-decoration: none;
transition: all .3s ease;
@include mobile{
font-size: 20px;
line-height: 28px;
}
&:hover{
color: $primary-color;
}
}
}
}
&__pagination{
width: 100%;
position: relative;
height: 80px;
margin-top: 40px;
@include desktop{
margin-bottom: 100px;
}
.pagination{
position: absolute;
top: 15px;
left: 0;
li{
height: 80px;
width: 80px;
box-shadow: 0 20px 40px 0 rgba(50,65,141,0.12);
border-radius: 10px;
position: relative;
transition: all .3s ease;
cursor: pointer;
a{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-decoration: none;
font-family: $primary-font;
font-size: 20px;
color: $secondary-color;
transition: all .3s ease;
svg{
path{
fill: #000;
}
}
}
&:hover{
background: $primary-color;
a{
color: $white;
svg{
path{
fill: $white;
}
}
}
}
&:not(:last-child){
margin-right: 34px;
}
&.active{
background: $primary-color;
a{
color: $white;
svg{
path{
fill: $white;
}
}
}
}
}
}
}
&__sidebar{
&:not(:first-child){
margin: 40px 0 20px 0;
}
.form-search{
.form-group{
position: relative;
.form-control{
height: 70px;
padding: 10px 30px;
border: none;
box-shadow: 0 20px 40px rgba(50, 65, 141, .12);
border-radius: 10px;
color: #7E7E8A;
font-family: $secondary-font;
font-size: 16px;
}
.search-icon{
position: absolute;
right: 30px;
top: 50%;
</