Copyright © 2024. PICO All Rights Reserved.
Created: 06 April 2024
Latest Update: 06 April 2024
By: Vikinglab
Email: vikinglab007@gmail.com
Thank you for purchasing our theme. PICO - Personal Portfolio HTML Templete. If you have any question, please feel free to contact us.
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "PICO" folder.
You will find the
two folder one is for lite version and other is for dark version
file on the root that will be edited.
Also you will see 5 directories, css, js, fonts, logo, img and images.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
appside/
├── assets/css/
| ├── bootstrap.min.css
| ├── fontawesome.css
| ├── mobile-menu.css
| ├── aos.css
| ├── magnific-popup.css
| ├── owl.carousel.min.css
| ├── modal-video.min.css
| ├── slick-slider.css
| ├── nice-select.css
| ├── typhograpy.css
| ├── master.css
|
├── style.css
|
|
├── assets/fonts/
| ├── fa-brands-300
| ├── fa-brands-300.woff2
| ├── fa-brands-400
| ├── fa-brands-400.woff2
| ├── fa-regular-400
| ├── fa-regular-400.woff2
| ├── fa-solid-900
| ├── fa-solid-900.woff2
| ├── fa-v4compatibility
| ├── fa-v4compatibility.woff2
|
├── assets/js/
│ ├── bootstrap.min.js
| ├── fontawesome.js
│ ├── jquery-counterup.js
│ ├── jquery.magnific-popup.min.js
│ ├── jquery.nice-select.js
│ ├── jquery-3-6-0.min.js
│ ├── owl-carousel.min.js
│ ├── modal-video.min.js
│ ├── mobile-menu.js
│ ├── aos.js
│ ├── slick-slider.js
| ├── mobile-meanmenu.js
| ├── jquery-nice-select.js
| ├── waypoints.js
├── main.js
│
├── index.html
├── index1.html
├── index2.html
<!--===== HEADER STARTS =======--> <div class="preview-header-area"> <img src="assets/img/elements/header-bg.png" alt="" class="header-bg1"> <img src="assets/img/elements/footer-bg2.png" alt="" class="footer-bg2"> <img src="assets/img/elements/footer-bg.png" alt="" class="footer-bg1"> <div class="container"> <div class="row"> <div class="col-lg-8 m-auto"> <div class="preview-header-content text-center pbmit-heading-subheading animation-style2"> <img src="assets/img/logo/preview-logo.png" alt=""> <h1 data-aos="fade-up" data-aos-duration="1000">Personal Portfolio HTML Template</h1> <p class="pbmit-title">A Extraordinary & High Quality Template For Personal Portfolio</p> </div> </div> </div> <div class="row"> <div class="col-lg-6 col-md-6"> <a href="index1.html" target="_blank" data-aos="fade-up" data-aos-duration="1000"> <div class="preview-images1"> <div class="animation"> </div> <div class="preview"> <img src="assets/img/all-images/preview-img1.png" alt=""> </div> </div> </a> <div class="content text-center"> <a href="index1.html">Dark Version</a> </div> </div> <div class="col-lg-6 col-md-6"> <a href="index2.html" target="_blank"> <div class="preview-images1" data-aos="fade-up" data-aos-duration="1200"> <div class="animation"> </div> <div class="preview"> <img src="assets/img/all-images/preview-img2.png" alt=""> </div> </div> </a> <div class="content text-center"> <a href="index2.html">Light Version</a> </div> </div> </div> <div class="row"> <div class="col-lg-5 m-auto"> <div class="prerview-footer text-center pbmit-heading-subheading animation-style2"> <img src="assets/img/icons/preview-icon1.svg" alt=""> <p>Customer Support</p> <h3 class="pbmit-title">24/7 Effective & Friendly Premium Support</h3> <div class="btn-area"> <a href="https://themeforest.net/user/vikinglab/portfolio" class="download-btn">purchase now</a> </div> </div> </div> </div> </div> </div> <!--===== HEADER ENDS=======-->
.homepage1-body{ .header-section-area{ padding: 60px 0 0 0; position: relative; @media #{$xs} { padding: 150px 0 60px; } @media #{$md} { padding: 150px 0 60px; } .header-textarea{ position: relative; z-index: 1; .pbmit-heading-subheading{ h4{ font-family: var(--ztc-family-font1); font-size: var( --ztc-font-size-font-s24); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); line-height: var(--ztc-font-size-font-s24); margin-bottom: 24px; display: flex; img{ margin-top: -10px; } } h1{ font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); font-weight: var(--ztc-weight-semibold); line-height: var(--ztc-font-size-font-s64); color: var(--ztc-text-text-1); text-transform: uppercase; @media #{$xs} { font-size: var(--ztc-font-size-font-s40); line-height: var(--ztc-font-size-font-s50); } @media #{$md} { font-size: var(--ztc-font-size-font-s60); line-height: var(--ztc-font-size-font-s70); } .designer{ display: inline-block; font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s64); line-height: var(--ztc-font-size-font-s64); color: transparent; font-weight: var(--ztc-weight-semibold); text-transform: uppercase; -webkit-text-stroke: 1px var(--ztc-text-text-1); @media #{$xs} { font-size: var(--ztc-font-size-font-s40); line-height: var(--ztc-font-size-font-s50); } @media #{$md} { font-size: var(--ztc-font-size-font-s60); line-height: var(--ztc-font-size-font-s70); } } } span.marketer{ margin-top: 48px; background: var(--Button-Gradient, linear-gradient(90deg, #2CE97A 0%, #D9D314 100%)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: var(--ztc-family-font2); font-style: italic; display: inline-block; font-size: var(--ztc-font-size-font-s64); font-weight: var(--ztc-weight-semibold); line-height: var(--ztc-font-size-font-s64); color: var(--ztc-text-text-1); text-transform: uppercase; padding: 24px 30px; border-radius: 4px; position: relative; border-radius: 4px; right: -340px; @media #{$xs} { right: 0; font-size: var(--ztc-font-size-font-s32); line-height: var(--ztc-font-size-font-s42); padding: 16px; margin-top: 10px; } @media #{$md} { right: 0; padding: 16px; margin-top: 10px; } &::after{ position: absolute; content: ""; height: 100%; width: 100%; background-color: var(--ztc-bg-bg-1); z-index: -1; left: 0; top: 0; border: 1px solid var(--ztc-border-border-1); border-radius: 4px; } .elements1{ position: absolute; top: -5px; right: -5px; } .elements2{ position: absolute; top: -5px; left: -5px; } .elements3{ position: absolute; bottom: -5px; left: -5px; } .elements4{ position: absolute; bottom: -5px; right: -5px; } } } .header-pera-area{ margin-top: 48px; p{ font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s20); line-height: var(--ztc-font-size-font-s30); font-weight: var(--ztc-weight-medium); color: var(--ztc-text-text-1); opacity: 0.8; } .socila-links-area{ margin-top: 120px; position: relative; left: -80px; @media #{$xs} { margin-top: 30px; left: 0; } @media #{$md} { margin-top: 30px; left: 0; } h5{ font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s24); line-height: var(--ztc-font-size-font-s24); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); text-align: center; } ul{ justify-content: center; display: flex; li{ display: inline-block; a{ height: 52px; width: 52px; line-height: 52px; text-align: center; border-radius: 4px; display: inline-block; background: var(--ztc-text-text-5); font-size: var(--ztc-font-size-font-s26); color: var(--ztc-text-text-1); margin: 24px 14px 0 0; transition: all .4s; position: relative; z-index: 1; &::after{ position: absolute; content: ""; height: 100%; width: 100%; visibility: hidden; opacity: 0; left: 0; top: 0; z-index: -1; transition: all .4s; background: var(--Button-Gradient, linear-gradient(90deg, #2CE97A 0%, #D9D314 100%)); border-radius: 4px; } &:hover{ transform: translateY(-3px); transition: all .4s; color: var(--ztc-text-text-3); &::after{ width: 100%; transition: all .4s; visibility: visible; opacity:1; } } } } } } } } .pbmit-animation-style3{ position: relative; z-index: -2; top: -150px; left: -40px; @media #{$xs} { top: 0; left: 0; } @media #{$md} { top: 0; left: 0; } .progress-one_leftbox{ .elements3{ position: absolute; bottom: 80px; right: -100px; z-index: -1; } img{ border-radius: 4px; transition: all .4s ; @media #{$xs} { height: 100%; width: 100%; object-fit: cover; } @media #{$md} { height: 100%; width: 100%; object-fit: cover; } } } } .sidebar-main{ position: relative; .sidebar-area{ background: var(--ztc-bg-bg-1); border-radius: 4px; padding: 140px 32px 32px 32px; position: fixed; left: 100px; width: 250px; @media #{$xs} { display: none; } @media #{$md} { display: none; } @media #{$xxl} { left: 0; } .logo{ background: var(--ztc-bg-bg-2); padding: 24px 32px; position: absolute; top: 0; width: 100%; left: 0; } .list-group{ img{ filter: brightness(0) invert(1); } .list-group-item-action{ overflow: hidden; transition: all .4s; &::after{ position: absolute; content: ""; height: 100%; width: 0; background: var(--Button-Gradient, linear-gradient(90deg, #2CE97A 0%, #D9D314 100%)); left: 0; top: 0; z-index: -1; transition: all .4s; } } .list-group-item-action.active{ &::after{ left: 0; top: 0; transition: all .4s; width: 100%; } color: var(--ztc-text-text-3); transition: all .4s; img{ filter: brightness(0); } } a{ display: inline-block; background: var(--ztc-text-text-4); font-family: var(--ztc-family-font1); font-size: var(--ztc-font-size-font-s16); font-weight: var(--ztc-weight-semibold); color: var(--ztc-text-text-1); line-height: var(--ztc-font-size-font-s16); text-transform: uppercase; opacity: 0.8; border: none; margin-bottom: 20px; border-radius: 4px; img{ margin: 0 12px 0 0; } } } } } } } // HOMEPAGE1 HEADER ENDS //
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
Vikinglab