In today’s digital age, having a personal portfolio website is not just a luxury; it’s a necessity. Whether you’re a creative professional, a developer, or someone looking to make a mark in your industry, a personal portfolio website is your online business card. Create Personal Portfolio Website It’s a space where you can showcase your work, share your story, and connect with potential clients or employers. But where do you start? This article will guide you through the process of creating a stunning and effective personal portfolio website.
Table of Contents
What is a Personal Portfolio Website?
A personal portfolio website is an online platform where individuals showcase their work, skills, achievements, and personal brand. It serves as a digital resume, portfolio, and business card, all in one. Whether you’re a freelancer, designer, developer, writer, or any professional, a personal portfolio website can help you stand out in your field.
Importance of a Personal Portfolio Website
In today’s digital age, having an online presence is crucial. A personal portfolio website offers numerous benefits:
- Professionalism: Demonstrates your commitment and professionalism.
- Accessibility: Potential clients or employers can access your work anytime.
- Control: You have complete control over the content and presentation.
- Networking: Enhances your networking opportunities and can attract collaborations.
Benefits of Having a Personal Portfolio Website
- Showcase Your Work: Highlight your best projects and achievements.
- Build Your Brand: Establish a personal brand and online identity.
- Increase Visibility: Improve your visibility in search engines and social media.
- Boost Credibility: Gain credibility and trust from potential clients or employers.
- Grow Your Audience: Attract a wider audience and potential clients.
Planning Your Portfolio Website
Define Your Goals
Before you start building your website, it’s essential to define your goals. Ask yourself:
- What do you want to achieve with your website?
- Who is your target audience?
- What kind of content do you want to showcase?
Identify Your Target Audience
Understanding your target audience is crucial for creating relevant and engaging content. Consider:
- Who are they?
- What are their needs and preferences?
- How can you address their pain points?
Choose the Right Platform
There are several platforms to choose from, each with its pros and cons. Some popular options include:
- WordPress: Highly customizable and widely used.
- Wix: User-friendly with drag-and-drop functionality.
- Squarespace: Elegant designs and ease of use.
- Behance: Great for creatives to showcase portfolios.
Selecting a Domain Name
Your domain name is your website’s address. Tips for choosing a domain name:
- Keep it Simple: Easy to remember and spell.
- Relevant: Reflects your name or brand.
- Unique: Stand out from the competition.
Designing the Layout
A well-designed layout enhances user experience. Key elements to consider:
- Navigation: Simple and intuitive.
- Responsive Design: Mobile-friendly and adaptable to different devices.
- Visual Hierarchy: Prioritize important content.
- Consistency: Maintain a consistent design throughout.
Creating a Content Plan
A content plan helps you organize and structure your content. Consider:
- Types of Content: Projects, blog posts, testimonials, etc.
- Content Calendar: Schedule for creating and publishing content.
- SEO Strategy: Keywords, meta descriptions, and other SEO practices.
Building Your Portfolio Website
Setting Up Your Domain and Hosting
Once you have chosen your platform and domain name, the next step is to set up your domain and hosting. Popular hosting providers include Bluehost, SiteGround, and HostGator.
HTML
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi">
<title>Personal Portfolio</title>
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="stylesheet" href="css/font-awesome-pro.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/scroll_button.css">
<link rel="stylesheet" href="css/spacing.css">
<link rel="stylesheet" href="css/plugin.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body class="home_2">
<!--================================
PRELOADER START
=================================-->
<div class="preloader">
<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<path id="svg" d="M0,1005S175,995,500,995s500,5,500,5V0H0Z"></path>
</svg>
<h5 class="preloader-text">Loading</h5>
</div>
<!--================================
PRELOADER END
=================================-->
<!--================================
SCROLL BUTTON END
=================================-->
<nav class="main_menu_2">
<span class="menu_2_icon">
<i class="fa-light fa-bars bar_icon-staggered bar_icon"></i>
<i class="fa-light fa-xmark close_icon"></i>
</span>
<a class="logo_2" href="index_2.html">
<img src="images/logo2.png" alt="AC" class="img-fluid w-100">
</a>
<ul id="list-example" class="list-group">
<li>
<a class="list-group-item list-group-item-action text_hover_animaiton" href="#banner">
<span><img src="svg/home-2.svg" alt="icon" class="img-fluid w-100 svg"></span>Home
</a>
</li>
<li>
<a class="list-group-item list-group-item-action text_hover_animaiton" href="#about">
<span><img src="svg/clipboard.svg" alt="icon" class="img-fluid w-100 svg"></span>About Me
</a>
</li>
<li>
<a class="list-group-item list-group-item-action text_hover_animaiton" href="#service">
<span><img src="svg/briefcase.svg" alt="icon" class="img-fluid w-100 svg"></span>
Service
</a>
</li>
<li>
<a class="list-group-item list-group-item-action text_hover_animaiton" href="#skills">
<span><img src="svg/path.svg" alt="icon" class="img-fluid w-100 svg"></span>
skills
</a>
</li>
<li>
<a class="list-group-item list-group-item-action text_hover_animaiton" href="#portfolio">
<span><img src="svg/messages-1.svg" alt="icon" class="img-fluid w-100 svg"></span>
portfolio
</a>
</li>
<li>
<a class="list-group-item list-group-item-action text_hover_animaiton" href="#blog">
<span><img src="svg/quote-down-square.svg" alt="icon" class="img-fluid w-100 svg"></span>
blog
</a>
</li>
<li>
<a class="list-group-item list-group-item-action text_hover_animaiton" href="#contact">
<span><img src="svg/user-square.svg" alt="icon" class="img-fluid w-100 svg"></span>
Contact
</a>
</li>
</ul>
</nav>
<!--================================
SCROLL BUTTON END
=================================-->
<div class="main">
<div data-bs-spy="scroll" data-bs-target="#list-example" data-bs-smooth-scroll="true" class="scrollspy-example"
tabindex="0">
<!--================================
BANNER 2 START
=================================-->
<section id="banner" class="tf__banner_2 banner" style="background: url(images/bg/banner_bg2.png)">
<div class="container">
<div class="row justify-content-between">
<div class="col-xxl-6 col-md-9 col-lg-7">
<div class="tf__banner_text">
<h1>
Hi, I'm ZYAN! Creative
<span class="cd-headline rotate-1">
<!-- ANIMATE TEXT VALUES: zoom, rotate-1, letters type, letters rotate-2, loading-bar, slide, clip, letters rotate-3, letters scale, push, -->
<span class="cd-words-wrapper">
<b class="is-visible">Designer</b>
<b>Coder</b>
<b>Player</b>
</span>
</span>
</h1>
<p>
I'm a passionate UI/UX designer with a mission to create
delightful and intuitive digital experiences. With a strong
foundation in design principles and a keen eye for detail, I
specialize in translating complex ideas into user-friendly
interfaces that captivate and engage.
</p>
<ul>
<li>
<a class="common_btn" href="#">Download Cv
<i class="fa-solid fa-arrow-down-to-line"></i></a>
</li>
<li>
<a class="banner_video_btn play_btn" href="https://www.youtube.com/watch?v=B-ytMSuwbf8"><i
class="fa-sharp fa-solid fa-circle-play"></i> Watch
the Video</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!--================================
BANNER 2 END
=================================-->
<!--================================
ABOUT 2 START
=================================-->
<section id="about" class="tf__about_2 pt_130 xs_pt_80">
<div class="container">
<div class="row">
<div class="col-xl-9 col-lg-9">
<div class="tf__section_heading mb_40">
<h5 class="has-animation">ABOUT Me</h5>
<h2 class="has-animation">
Crafting stories through design and innovation
</h2>
</div>
</div>
</div>
<div class="row justify-content-between">
<div class="col-xl-6 col-lg-6">
<div class="tf__about_text_2">
<ul>
<li>
<div class="top fade_bottom" data-trigerId="about">
<div class="img">
<img src="images/icon/about_1.png" alt="about" class="img-fluid w-100">
</div>
<div>
<h3>My Ambition</h3>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet
</p>
</div>
</div>
</li>
<li>
<div class="top fade_bottom" data-trigerId="about">
<div class="img">
<img src="images/icon/about_2.png" alt="about" class="img-fluid w-100">
</div>
<div>
<h3>My Purpose</h3>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__about_img tf__about_img_2">
<img src="images/about_img_2.jpg" alt="ZYAN" class="img-fluid w-100">
<div class="tf__about_img_text">
<i class="fa-sharp fa-solid fa-award"></i>
<h4>15+ <span>Years Of Experience</span></h4>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================================
ABOUT 2 END
=================================-->
<!--================================
SERVICE 2 START
=================================-->
<section id="service" class="tf__service_2 pt_130 xs_pt_80 animation">
<div class="container">
<div class="row">
<div class="col-xl-9 col-lg-9 m-auto">
<div class="tf__section_heading mb_40">
<h5 class="has-animation">MY serivce</h5>
<h2 class="has-animation">
Bringing your vision to life with precision and passion
</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="tf__single_service_2 fade_left" data-trigerId="service">
<div class="text">
<span>
<img src="svg/mobile-programming.svg" alt="service" class="img-fluid w-100 svg">
<i class="icon-app-development"></i>
</span>
<h3>Website Design</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
</p>
</div>
<a href="#">Read More</a>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="tf__single_service_2 fade_left active" data-trigerId="service">
<div class="text">
<span>
<img src="svg/pen-tool-2.svg" alt="service" class="img-fluid w-100 svg">
</span>
<h3>Logo Design</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
</p>
</div>
<a href="#">Read More</a>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="tf__single_service_2 fade_left" data-trigerId="service">
<div class="text">
<span>
<img src="svg/mobile.svg" alt="service" class="img-fluid w-100 svg">
</span>
<h3>Apps Development</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore
</p>
</div>
<a href="#">Read More</a>
</div>
</div>
</div>
</div>
</section>
<!--================================
SERVICE 2 END
=================================-->
<!--================================
SKILLS 2 START
=================================-->
<section id="skills" class="tf__skills_2 pt_115 xs_pt_75 pb_120 xs_pb_80 mt_165 xs_mt_80">
<div class="container">
<div class="row">
<div class="col-xl-9 col-lg-9 m-auto">
<div class="tf__section_heading mb_30">
<h5 class="has-animation">MY Skills</h5>
<h2 class="has-animation">
Crafting Stories through Design and Imagination
</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xxl-8 col-xl-10 m-auto">
<ul class="nav nav-pills mb_30" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
type="button" role="tab" aria-controls="pills-home" aria-selected="true">
Download Cv <i class="fa-solid fa-arrow-down-to-line"></i>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
type="button" role="tab" aria-controls="pills-profile" aria-selected="false">
Education
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact"
type="button" role="tab" aria-controls="pills-contact" aria-selected="false">
Biography
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill"
data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled"
aria-selected="false">
Experience
</button>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab"
tabindex="0">
<div class="row">
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>Creative Agency</h3>
<h2>Framer Designer & Developer</h2>
<h4>2019 - Present</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
<div class="tf__team_skills_bar_single">
<p>Performence</p>
<div id="bar1" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="80"></span>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>Apple Technology</h3>
<h2>Web Application Manager</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
<div class="tf__team_skills_bar_single">
<p>Performence</p>
<div id="bar2" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="90"></span>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>Softech Agency</h3>
<h2>Wordpress and End Developer</h2>
<h4>2014 - 2018</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
<div class="tf__team_skills_bar_single">
<p>Performence</p>
<div id="bar3" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="75"></span>
</div>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>Kent State University</h3>
<h2>Master Degree Of information Technology</h2>
<h4>2005 - 2009</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
<div class="tf__team_skills_bar_single">
<p>Performence</p>
<div id="bar4" class="barfiller">
<div class="tipWrap">
<span class="tip"></span>
</div>
<span class="fill" data-percentage="70"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab"
tabindex="0">
<div class="row education">
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>MBA</h3>
<h2>University of Dhaka</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>BBA</h3>
<h2>University of Dhaka</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>HSC</h3>
<h2>Govt Bangla College</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>SSC</h3>
<h2>Govt Bangla College</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab"
tabindex="0">
<div class="row education">
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>MBA</h3>
<h2>University of Dhaka</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>BBA</h3>
<h2>University of Dhaka</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>HSC</h3>
<h2>Govt Bangla College</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>SSC</h3>
<h2>Govt Bangla College</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab"
tabindex="0">
<div class="row education">
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>MBA</h3>
<h2>University of Dhaka</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>BBA</h3>
<h2>University of Dhaka</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>HSC</h3>
<h2>Govt Bangla College</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6">
<div class="tf__single_skill_2 fade_bottom" data-trigerId="skills">
<h3>SSC</h3>
<h2>Govt Bangla College</h2>
<h4>2009 - 2012</h4>
<p>
Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit sed thisnquia
consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================================
SKILLS 2 END
=================================-->
<!--================================
PORTFOLIO 2 START
=================================-->
<section id="portfolio" class="tf__portfolio tf__portfolio_2 mt_120 xs_mt_80">
<div class="container">
<div class="row">
<div class="col-xl-10 col-lg-9 mb_30">
<div class="tf__section_heading">
<h5 class="has-animation">my recent Portfolio</h5>
<h2 class="has-animation">
Elevate your brand to new heights with our portfolio
expertise
</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-sm-6">
<a href="https://www.youtube.com/watch?v=B-ytMSuwbf8" class="tf__portfolio_item play_btn"
data-cursor="Watch <br> video">
<img src="images/portfolio/5.png" alt="portfolio" class="img-fluid w-100">
<div class="text">
<h4>sheet metal bending</h4>
<p>youtube</p>
</div>
</a>
</div>
<div class="col-xl-6 col-sm-6">
<a class="tf__portfolio_item play_btn" href="https://vimeo.com/132528823" data-cursor="Watch <br> video">
<img src="images/portfolio/6.png" alt="portfolio" class="img-fluid w-100">
<div class="text">
<h4>sheet metal bending</h4>
<p>Vimeo</p>
</div>
</a>
</div>
<div class="col-xl-4 col-sm-6">
<a href="https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F159967086&show_artwork=true&maxwidth=1020&maxheight=1000&auto_play=1"
class="tf__portfolio_item play_btn" data-cursor="Audio <br> sound">
<img src="images/portfolio/7.png" alt="portfolio" class="img-fluid w-100">
<div class="text">
<h4>sheet metal bending</h4>
<p>soundcloud</p>
</div>
</a>
</div>
<div class="col-xl-4 col-sm-6">
<a href="images/portfolio/8.png" class="tf__portfolio_item image_popup" data-cursor="View <br> Image">
<img src="images/portfolio/8.png" alt="portfolio" class="img-fluid w-100">
<div class="text">
<h4>sheet metal bending</h4>
<p>Image</p>
</div>
</a>
</div>
<div class="col-xl-4 col-sm-6">
<a href="#details-popup" class="tf__portfolio_item details" data-cursor="Details <br> View">
<img src="images/portfolio/9.png" alt="portfolio" class="img-fluid w-100">
<div class="text">
<h4>sheet metal bending</h4>
<p>Modalbox</p>
</div>
</a>
<div class="mfp-fade mfp-hide" id="details-popup">
<div class="content">
<div class="img">
<img src="images/portfolio/9.png" alt="">
</div>
<div class="des">
<span class="category">Modalbox</span>
<h4 class="popup_title">Mobile Application</h4>
<p>
We live in a world where we need to move quickly and
iterate on our ideas as flexibly as possible. Building
mockups strikes the ideal balance between true-life
representation of the end product and ease of
modification.
</p>
<div class="details_quot_text">
<p>
ished fact that a reader will be distrol acted bioii
the.ished fact that a reader .
</p>
<h4>By Insuzu Litarnit</h4>
</div>
<p>
Mockups are useful both for the creative phase of the
project - for instance when you're trying to figure out
your user flows or the proper visual hierarchy - and the
production phase when they will represent the target
product. Making mockups a part of your creative and
development process allows you to quickly and easily
ideate.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================================
PORTFOLIO 2 END
=================================-->
<!--================================
BRAND START
=================================-->
<div class="tf__brand mt_120 xs_mt_80">
<div class="row">
<div class="col-12">
<div class="marquee_animi">
<ul>
<li>* PHP</li>
<li>* Pyrhon</li>
<li>* design</li>
<li>* world</li>
<li>* Development</li>
</ul>
</div>
</div>
</div>
</div>
<!--================================
BRAND END
=================================-->
<!--================================
BLOG 2 START
=================================-->
<section id="blog" class="tf__blog_2 pt_120 xs_pt_80 pb_120 xs_pb_80">
<div class="container">
<div class="row">
<div class="col-xl-8 m-auto mb_30">
<div class="tf__section_heading">
<h5 class="has-animation">all blog</h5>
<h2 class="has-animation">
Rafting Unique Experiences Inspiring Connections
</h2>
</div>
</div>
</div>
<div class="row animation">
<div class="col-xl-4 col-md-6">
<div class="tf__slingle_blog_2 fade_left" data-trigerId="blog">
<a href="blog_details.html" data-cursor="Read <br> More" class="tf__blog_img_2">
<img src="images/blog/4.jpg" alt="blog" class="img-fluid w-100">
<span>10 June</span>
</a>
<div class="tf__blog_text_2">
<ul>
<li>
<i class="fa-sharp fa-solid fa-circle-user"></i> By
admin
</li>
<li>
<i class="fa-sharp fa-solid fa-comments"></i> Comments
(05)
</li>
</ul>
<a class="title" href="blog_details.html">Where Passion and Purpose Collide</a>
<p>
Lorem Ipsum is simply dummy text of the printing and types
etting in our company here thisn designers give me more
design here […]
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="tf__slingle_blog_2 fade_left" data-trigerId="blog">
<a href="blog_details.html" data-cursor="Read <br> More" class="tf__blog_img_2">
<img src="images/blog/5.jpg" alt="blog" class="img-fluid w-100">
<span>10 June</span>
</a>
<div class="tf__blog_text_2">
<ul>
<li>
<i class="fa-sharp fa-solid fa-circle-user"></i> By
admin
</li>
<li>
<i class="fa-sharp fa-solid fa-comments"></i> Comments
(05)
</li>
</ul>
<a class="title" href="blog_details.html">Where Passion and Purpose Collide</a>
<p>
Lorem Ipsum is simply dummy text of the printing and types
etting in our company here thisn designers give me more
design here […]
</p>
</div>
</div>
</div>
<div class="col-xl-4 col-md-6">
<div class="tf__slingle_blog_2 fade_left" data-trigerId="blog">
<a href="blog_details.html" data-cursor="Read <br> More" class="tf__blog_img_2">
<img src="images/blog/6.jpg" alt="blog" class="img-fluid w-100">
<span>10 June</span>
</a>
<div class="tf__blog_text_2">
<ul>
<li>
<i class="fa-sharp fa-solid fa-circle-user"></i> By
admin
</li>
<li>
<i class="fa-sharp fa-solid fa-comments"></i> Comments
(05)
</li>
</ul>
<a class="title" href="blog_details.html">Where Passion and Purpose Collide</a>
<p>
Lorem Ipsum is simply dummy text of the printing and types
etting in our company here thisn designers give me more
design here […]
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================================
BLOG 2 END
=================================-->
<!--================================
CONTACT 2 START
=================================-->
<section id="contact" class="tf__contact_2 pt_95 xs_pt_45">
<div class="container">
<div class="row animation">
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="tf__contact_2_text fade_left" data-trigerId="contact">
<span>
<img src="svg/voice_phone.svg" alt="contact" class="img-fluid w-100 svg">
</span>
<h3>Phone</h3>
<p>
Loram ipsum eros justo, posuer oborti viverra laor house of
street
</p>
<a href="callto:12345664746846">123-45664-746846</a>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="tf__contact_2_text fade_left" data-trigerId="contact">
<span>
<img src="svg/map_issue.svg" alt="contact" class="img-fluid w-100 svg">
</span>
<h3>Location</h3>
<p>
Dhaka 102, m eros justo, posuer oborti viverra laor house of
street
</p>
<a href="#">View on map</a>
</div>
</div>
<div class="col-xl-4 col-md-6 col-lg-4">
<div class="tf__contact_2_text fade_left" data-trigerId="contact">
<span>
<img src="svg/send_mail.svg" alt="contact" class="img-fluid w-100 svg">
</span>
<h3>Monday - Sunday</h3>
<p>
Dhaka 102, m eros justo, posuer oborti viverra laor house of
street
</p>
<a href="mailto:[email protected]">[email protected]</a>
</div>
</div>
</div>
<div class="contact_form_2">
<form>
<div class="row">
<div class="col-lg-6">
<input type="text" placeholder="Your Name Here">
</div>
<div class="col-lg-6">
<input type="text" placeholder="Subject">
</div>
<div class="col-lg-12">
<input type="email" placeholder="Email">
</div>
<div class="col-12">
<textarea rows="5" placeholder="Your Message Here"></textarea>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
</div>
</section>
<!--================================
CONTACT 2 END
=================================-->
<!--================================
FOOTER 2 START
=================================-->
<div class="footer_2_copyright_area mt_120 xs_mt_80">
<div class="container">
<div class="row">
<div class="col-12">
<div class="tf__footer_copyright">
<p>© AC 2023 | All Rights Reserved</p>
<ul>
<li>
<a href="#" class="text_hover_animaiton">Trams & Condition</a>
</li>
<li>
<a href="#" class="text_hover_animaiton">Privacy Policy</a>
</li>
<li>
<a href="#" class="text_hover_animaiton">Sitemap</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--================================
FOOTER 2 END
=================================-->
<!--================================
SCROLL BUTTON START
=================================-->
<div class="progress active">
<svg class="progress-svg" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"></path>
</svg>
</div>
<!--================================
SCROLL BUTTON END
=================================-->
<!--================================
CURSOR START
=================================-->
<div id="magic-cursor">
<div id="ball"></div>
</div>
<!--================================
CURSOR END
=================================-->
</div>
</div>
<script src="js/plugin.js"></script>
<!--scroll button js-->
<script src="js/scroll_button.js"></script>
<!--sticky sidebar js-->
<script src="js/sticky_sidebar.js"></script>
<!-- Gsap -->
<script src="js/animation.js"></script>
<!--main/custom js-->
<script src="js/main.js"></script>
</body>
</html>
CSS
More CSS Files Can you Download all Files Scroll Down And Click Now Download
/*
***************************************
#081b29
#00abf0
***************************************
CSS INDEX
===================================
01. GLOBAL CSS
02. HOME PAGE 1
03. HOME PAGE 2
04. BLOG LIST
05. BLOG DETAILS
06. CONTACT
/*==============================
GLOBAL CSS START
===============================*/
@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
:root {
--colorPrimary: #00f2f4;
--bgColor: #09101a;
--bodyBg: #02050a;
--colorWhite: #ffffff;
--colorBlack: #02050a;
--ratingColor: #ffba08;
--bodyColor: #a2a2a2;
--PrimaryFont: "Poppins", sans-serif;
--secondaryFont: "Open Sans", sans-serif;
}
* {
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
ul,
ol,
li {
list-style: none;
margin: 0;
padding: 0;
color: var(--colorWhite);
}
a {
display: inline-block;
text-decoration: none;
color: var(--colorWhite);
}
a:hover {
text-decoration: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
color: var(--colorWhite);
}
p,
span {
font-size: 16px;
font-weight: 400;
line-height: 1.7;
margin: 0;
color: var(--bodyColor);
}
body {
overflow-x: hidden;
scroll-behavior: smooth;
font-family: var(--PrimaryFont);
background: var(--bodyBg);
color: var(--colorWhite);
}
img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
input,
textarea {
width: 100%;
padding: 12px 20px;
outline: none;
resize: none;
border: none;
border-radius: 0;
font-size: 16px;
font-weight: 300;
}
input::placeholder,
textarea::placeholder {
color: #a6a6ac;
}
button {
border: none;
}
.common_btn {
display: inline-flex;
padding: 20px 40px;
justify-content: center;
align-items: center;
gap: 10px;
background: var(--colorPrimary);
color: var(--colorBlack);
font-weight: 500;
transition: all 0.3s linear 0s;
}
.common_btn:hover {
background: #141c27;
color: var(--colorWhite);
}
.tf__section_heading h5 {
font-size: 20px;
font-weight: 500;
letter-spacing: 1.4px;
text-transform: uppercase;
text-align: center;
margin-bottom: 15px;
color: var(--colorPrimary);
}
.tf__section_heading h2 {
text-align: center;
font-size: 50px;
font-weight: 600;
line-height: 1.3;
}
.tf__breadcrumb {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
padding: 240px 0px 157px 0px;
}
.tf__breadcrum_text {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.tf__breadcrum_text h1 {
font-size: 50px;
font-weight: 700;
}
.tf__breadcrum_text ul li a {
font-size: 18px;
transition: all linear 0.3s;
}
.page-breadcrumb {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.page-breadcrumb li {
font-size: 20px;
font-weight: 500;
position: relative;
z-index: 1;
}
.page-breadcrumb li,
.page-breadcrumb li a {
color: var(--colorWhite);
}
.page-breadcrumb li:not(:last-child) {
margin-right: 45px;
}
.page-breadcrumb li:not(:last-child)::before,
.page-breadcrumb li:not(:last-child)::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
right: calc(-45px / 2);
top: 50%;
-webkit-transform: translate(50%, -50%);
-ms-transform: translate(50%, -50%);
transform: translate(50%, -50%);
border: 2px solid var(--colorPrimary);
border-radius: 50%;
z-index: -2;
}
.page-breadcrumb li:not(:last-child)::before {
width: 5px;
height: 5px;
border: none;
z-index: -1;
background-color: var(--colorPrimary);
}
.tf__breadcrum_text ul li i {
margin-top: 8px;
}
.tf__breadcrum_text ul li a:hover,
.tf__breadcrum_text ul li a.active {
color: var(--colorPrimary);
}
.tf__breadcrum_text ul li:last-child a::after {
display: none;
}
.tf__pagination nav ul {
gap: 10px;
}
.tf__pagination nav ul li a {
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px !important;
padding: 0;
background: #151c25;
border-radius: 50% !important;
border: none;
color: var(--bodyColor);
font-weight: 500;
transition: all linear 0.3s;
}
.tf__pagination nav ul li a:hover,
.tf__pagination nav ul li a.active {
background: var(--colorPrimary) !important;
color: var(--colorBlack) !important;
}
.tf__pagination nav ul li .page-link:focus {
box-shadow: none;
background: var(--colorPrimary) !important;
color: var(--colorBlack) !important;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background: transparent !important;
}
::-webkit-scrollbar {
width: 8px;
/* background-color: #f1f1f1; */
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #2d2d2d;
transition: opacity 0.2s ease-in-out;
}
*::-moz-selection {
background: #2d2d2d;
transition: opacity 0.2s ease-in-out;
color: #f1f1f1;
text-shadow: none;
}
::-moz-selection {
background: #2d2d2d;
transition: opacity 0.2s ease-in-out;
color: #f1f1f1;
text-shadow: none;
}
::selection {
background: #2d2d2d;
transition: opacity 0.2s ease-in-out;
color: #f1f1f1;
text-shadow: none;
}
/*==============================
GLOBAL CSS END
===============================*/
/*==============================
HOME PAGE 1 START
===============================*/
.main_menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 999;
}
.main_menu .main_menu_bg {
position: relative;
z-index: 1;
}
.main_menu .main_menu_bg::after {
position: absolute;
content: "";
width: 97%;
height: 100%;
background: #141c27;
top: 0;
left: 20px;
z-index: -1;
}
.main_menu .navbar-brand {
width: 180px;
height: 80px;
margin: 0;
padding: 0;
}
.main_menu .navbar-nav .nav-item {
position: relative;
}
.main_menu .navbar-nav .nav-item .nav-link {
color: var(--colorWhite);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
margin: 0;
line-height: 12px;
transition: all linear 0.3s;
font-family: var(--PrimaryFont);
letter-spacing: 1px;
padding: 32px 20px;
}
.main_menu .navbar-nav .nav-item .nav-link i {
font-size: 14px;
margin-left: 3px;
}
.main_menu .navbar-nav .nav-item .nav-link:hover,
.main_menu .navbar-nav .nav-item .nav-link.active {
color: var(--colorPrimary);
}
.main_menu .toggle_icon {
display: block;
cursor: pointer;
width: 80px;
height: 80px;
line-height: 80px;
font-size: 30px;
text-align: center;
background: var(--colorPrimary);
color: var(--colorBlack);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.main_menu .toggle_icon i {
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.main_menu .toggle_icon:hover {
/* color: var(--colorWhite); */
}
.main_menu .droap_menu {
position: absolute;
width: 200px;
top: 100%;
left: 0;
background: var(--colorWhite);
max-height: 450px;
overflow: hidden;
overflow-y: auto;
box-shadow: rgb(0 0 0 / 15%) 0px 4px 14px;
padding-left: 0;
opacity: 0;
z-index: 99;
visibility: hidden;
transform: scaleY(0.3);
transform-origin: top;
transition: all linear 0.2s;
-webkit-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
-o-transition: all linear 0.2s;
}
.main_menu .droap_menu li {
margin-left: 0;
line-height: 30px;
}
.main_menu .droap_menu li a {
color: var(--colorBlack);
font-size: 15px;
font-weight: 400;
display: block;
border-bottom: 1px solid #2c73651a;
padding: 7px 20px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.droap_menu li a:hover,
.droap_menu li a.active {
background: var(--colorPrimary);
border-color: #ffffff6e;
}
.main_menu .nav-item:hover .droap_menu {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.offcanvas {
background: var(--bgColor);
z-index: 99999;
}
.offcanvas .offcanvas-header {
padding-bottom: 0;
background: #141c27;
padding: 25px;
}
.offcanvas .offcanvas-header .offcanvas-logo {
width: 110px;
}
.offcanvas .btn-close {
background: var(--colorPrimary);
color: var(--colorBlack);
width: 40px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-align: center;
padding: 0;
border-radius: 50%;
top: 18px;
opacity: 1;
transition: all linear 0.3s;
}
.offcanvas .offcanvas-body .offcanvas_title {
font-size: 20px;
margin: 20px 0;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.offcanvas .btn-close:hover {
color: var(--colorWhite);
background: #09101a;
}
.offcanvas-content-box {
margin-top: 40px;
}
.offcanvas .offcanvas-body .offcanvas_form {
padding: 0;
}
.offcanvas .offcanvas-body .offcanvas_contact_form {
margin-top: 80px;
}
.offcanvas .offcanvas-body .offcanvas_contact_form .offcanvas_title {
margin: 0;
}
.offcanvas .offcanvas-body {
padding: 30px;
}
.offcanvas .offcanvas-body::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.offcanvas .offcanvas-body {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.tf__toggle_link {
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
margin-top: 30px;
padding: 30px;
}
.tf__toggle_link h3 {
font-size: 22px;
font-weight: 600;
margin-bottom: 30px;
}
.tf__toggle_link ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.tf__toggle_link ul li a {
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: #ffffff1a;
border-radius: 50%;
font-size: 16px;
font-weight: 400;
color: var(--colorWhite);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__toggle_link ul li a:hover {
background: var(--colorPrimary);
color: var(--colorBlack);
}
/* for small device start */
.navbar-toggler {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background: var(--colorPrimary);
padding: 0;
font-size: 16px;
margin-right: 12px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
border-radius: 0;
}
.navbar-toggler .close_icon {
display: none;
}
.navbar-toggler:focus {
box-shadow: none;
}
.navbar-toggler.show .bar_icon {
display: none;
}
.navbar-toggler.show .close_icon {
display: block;
}
.tf__main_menu .navbar-brand {
margin-left: 12px;
}
/* for small device end */
/* menu end */
/* banner start */
.tf__banner {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
height: 100vh;
padding-top: 80px;
}
.tf__banner div {
height: 100%;
}
.tf__banner_text {
display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: 35px;
}
.tf__banner_text h1 {
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 30px;
}
.tf__banner_text h1,
.tf__banner_text h1 span {
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
line-height: 1.2;
}
.tf__banner_text h1 span {
color: var(--colorPrimary);
}
/* .tf__banner_text h3 {
font-size: 40px;
font-weight: 700;
text-transform: capitalize;
margin-top: 25px;
margin-bottom: 35px;
} */
.tf__banner_text p {
font-weight: 500;
margin-bottom: 65px;
}
.tf__banner_text ul {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 28px;
}
.tf__banner_text ul li a {
margin-right: 30px;
}
.banner_video_btn {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
text-transform: capitalize;
transition: all linear 0.3s;
}
.banner_video_btn i {
color: var(--colorPrimary);
font-size: 20px;
transition: all linear 0.3s;
font-size: 50px;
}
.tf__banner_img {
display: flex;
align-items: center;
}
.tf__banner_img .img {
height: 585px;
position: relative;
padding: 35px;
z-index: 1;
}
.tf__banner_img .img::after {
position: absolute;
content: "";
background: url(../images/shapes/banner_shape.png);
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
animation: bannerAnimi1 linear 1s infinite alternate;
-webkit-animation: bannerAnimi1 linear 1s infinite alternate;
}
@keyframes bannerAnimi1 {
from {
top: 5px;
}
to {
top: 0;
}
}
/* banner end */
/* service start */
.tf__single_service {
padding: 0px 40px 40px 40px;
position: relative;
border: 3px solid #191919;
margin-top: 62px;
}
.tf__single_service span {
display: block;
text-align: center;
margin: 0 auto;
position: relative;
top: -46px;
width: 100px;
}
.tf__single_service h3 {
font-size: 20px;
font-weight: 500;
text-align: center;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.tf__single_service p {
text-align: center;
font-size: 16px;
font-weight: 500;
line-height: 28px;
}
/* service end */
/* about start */
.tf__about .tf__section_heading h5,
.tf__about .tf__section_heading h2 {
text-align: left;
}
.tf__about_text {
padding-left: 130px;
padding-right: 150px;
position: relative;
}
.tf__about_text::after {
position: absolute;
content: "";
width: 100px;
height: 2px;
background: var(--bodyColor);
top: 10px;
left: 0;
}
.tf__about_text p {
margin-bottom: 95px;
}
.tf__about_img {
width: 395px;
height: 475px;
position: relative;
z-index: 1;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 50px;
}
.tf__about_img::after {
position: absolute;
content: "";
background: var(--colorPrimary);
width: 95%;
height: 80%;
top: -20px;
right: -20px;
z-index: -1;
}
.tf__about_img_text {
background: #232323;
padding: 15px 30px;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
position: relative;
top: -45px;
left: 50%;
transform: translateX(-50%);
}
.tf__about_img_text i {
width: 65px;
height: 65px;
text-align: center;
line-height: 65px;
background: #fff1;
border-radius: 50%;
font-size: 40px;
margin-right: 10px;
}
.tf__about_img_text h4 {
font-size: 16px;
font-weight: 600;
}
.tf__about_img_text h4 span {
display: block;
color: var(--colorWhite);
font-weight: 500;
margin-top: 5px;
}
/* about end */
/* design start */
.tf__design_text {
margin-top: 85px;
}
.tf__design_text h2 {
font-size: 128px;
font-weight: 600;
line-height: 60px;
}
.tf__design_text h2 span {
font-size: 60px;
font-weight: 600;
color: var(--colorWhite);
line-height: unset;
}
.tf__design_text p {
margin-top: 40px;
margin-bottom: 20px;
}
.tf__design_counter {
background: var(--bgColor);
margin-top: 25px;
text-align: center;
padding: 40px;
}
.tf__design_counter .icon {
display: block;
width: 100px;
margin: 0 auto;
margin-bottom: 15px;
}
.tf__design_counter h3 {
font-size: 40px;
font-style: normal;
font-weight: 700;
}
.tf__design_counter h3 span {
/* */
font-size: 40px;
font-style: normal;
font-weight: 700;
color: var(--colorWhite);
}
.tf__design_counter p {
font-size: 18px;
color: var(--colorWhite);
}
.tf__design_form {
background: var(--bgColor);
padding: 60px;
}
.tf__design_form h2 {
font-size: 40px;
margin-bottom: 25px;
}
.tf__design_form form input,
.tf__design_form form textarea {
margin-top: 30px;
background: none;
border: 1px solid var(--colorPrimary);
padding: 22px 20px;
color: var(--colorWhite);
font-size: 16px;
font-weight: 500;
}
.tf__design_form form button {
margin-top: 25px;
}
/* design end */
/* skills start */
.tf__skills {
background: var(--bgColor);
}
.tf__single_skills {
margin-bottom: 80px;
}
.tf__single_skills span {
font-size: 18px;
display: inline-block;
border: 1px solid var(--colorPrimary);
padding: 11px 24px;
color: var(--colorPrimary);
}
.tf__single_skills h3 {
font-size: 30px;
font-weight: 600;
margin-top: 20px;
margin-bottom: 10px;
}
.tf__single_skills p {
font-size: 16px;
font-weight: 500;
}
.tf__team_skills_bar_single {
background: #151c25;
margin-bottom: 50px;
}
.tf__team_skills_bar_single p {
padding-left: 40px;
padding-top: 15px;
padding-bottom: 15px;
color: var(--colorWhite);
}
/* skills end */
/* portfolio start */
.tf__portfolio h5,
.tf__portfolio h2 {
text-align: left;
}
.tf__portfolio_item {
height: 550px;
margin-top: 25px;
overflow: hidden;
position: relative;
display: block;
width: 100%;
}
.tf__portfolio_item .text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 30px;
background: rgb(2, 5, 10);
background: linear-gradient(
0deg,
rgba(2, 5, 10, 1) 0%,
rgba(2, 5, 10, 0.5802696078431373) 61%,
rgba(2, 5, 10, 0) 100%
);
transform: scaleY(0);
transform-origin: bottom;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-webkit-transform: scaleY(0);
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
}
.tf__portfolio_item .text h4 {
text-transform: capitalize;
font-size: 20px;
font-weight: 700;
margin-bottom: 10px;
}
.tf__portfolio_item .text p {
position: relative;
text-transform: capitalize;
padding-left: 60px;
}
.tf__portfolio_item .text p::after {
position: absolute;
content: "";
background: var(--colorPrimary);
width: 50px;
height: 1px;
top: 12px;
left: 0;
}
.tf__portfolio_item:hover .text {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
/* portfolio end */
/* testimonial start */
.tf__single_testimonial {
padding: 30px 90px 30px 30px;
border: 2px solid #333f4d;
position: relative;
margin: 65px 12px 0px 12px;
}
.tf__single_testimonial .img {
width: 100px;
height: 100px;
position: absolute;
top: -50px;
right: 50px;
}
.tf__single_testimonial .img img {
border-radius: 50%;
}
.tf__single_testimonial .rating {
color: var(--ratingColor);
}
.tf__single_testimonial .rating i {
margin-right: 5px;
}
.tf__single_testimonial h3 {
font-size: 22px;
font-weight: 500;
margin-top: 17px;
margin-bottom: 10px;
}
.tf__single_testimonial h5 {
font-size: 14px;
font-style: normal;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--bodyColor);
}
.tf__single_testimonial .description {
font-size: 16px;
font-style: normal;
font-weight: 500;
position: relative;
margin-top: 20px;
}
.tf__single_testimonial .description::after {
position: absolute;
content: "";
background: url(../images/icon/quot.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 50px;
height: 35px;
top: 5px;
right: -65px;
}
/* testimonial end */
/* brand start */
.tf__brand {
background: var(--colorPrimary);
}
.tf__brand ul {
display: flex;
padding: 25px 0px 30px 0px;
}
.tf__brand ul li {
-webkit-text-stroke: 1px var(--colorBlack);
-webkit-text-fill-color: transparent;
font-size: 110px;
font-weight: 700;
text-transform: uppercase;
padding-left: 20px;
}
/* brand end */
/* blog start */
.tf__blog .row {
position: relative;
}
.tf__blog .tf__section_heading h5,
.tf__blog .tf__section_heading h2 {
text-align: left;
}
.tf__slingle_blog {
margin-top: 25px;
}
.tf__blog_img {
height: 380px;
overflow: hidden;
width: 100%;
}
.tf__blog_img img {
transition: all linear 0.3s;
}
.tf__blog_text {
width: 90%;
padding: 30px;
background: var(--bgColor);
text-align: center;
position: relative;
left: 50%;
top: -76px;
transform: translateX(-50%);
}
.tf__blog_text span {
background: var(--colorPrimary);
color: var(--colorBlack);
font-size: 16px;
padding: 13px 17px;
width: 200px;
font-weight: 500;
display: inline-block;
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
}
.tf__blog_text ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
margin-top: 15px;
margin-bottom: 10px;
}
.tf__blog_text ul li i {
color: var(--colorPrimary);
margin-right: 5px;
}
.tf__blog_text a {
display: block;
font-size: 20px;
font-weight: 600;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__blog_text a:hover {
color: var(--colorPrimary);
}
.tf__slingle_blog:hover img {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
}
.tf__blog .common_btn {
position: absolute;
top: -100px;
right: 12px;
width: auto;
}
/* blog end */
/* subscribe start */
.tf__subscribe {
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.tf__subscribe_overlay {
background: #000000e3;
}
.tf__subscribe_text h3 {
text-align: center;
font-size: 30px;
font-weight: 600;
letter-spacing: 1px;
margin-bottom: 35px;
text-transform: uppercase;
}
.tf__subscribe_text form {
position: relative;
}
.tf__subscribe_text form input {
border: 1px solid var(--colorPrimary);
padding: 27px 25px;
color: var(--colorWhite);
font-size: 16px;
font-weight: 500;
background: #131313;
}
.tf__subscribe_text form button {
position: absolute;
top: 8px;
right: 8px;
}
/* subscribe end */
/* footer start */
main {
position: relative;
z-index: 5;
}
.footer {
background: var(--bodyBg);
position: relative;
}
.tf__footer_content {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.tf__footer_content .icon {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
background: var(--colorPrimary);
border-radius: 50%;
padding: 20px;
margin-right: 35px;
}
.tf__footer_content .text {
width: 67%;
}
.tf__footer_content .text h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
}
.tf__footer_content .text p,
.tf__footer_content .text a {
color: var(--bodyColor);
display: block;
font-size: 16px;
font-weight: 400;
line-height: 30px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__footer_content .text a:hover {
color: var(--colorPrimary);
}
.tf__footer_copyright {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-top: 1px solid #fff1;
margin-top: 75px;
padding: 35px 0px;
}
.tf__footer_copyright ul {
display: flex;
flex-wrap: wrap;
gap: 60px;
}
.tf__footer_copyright ul li a,
.tf__footer_copyright p {
opacity: 0.5;
}
.tf__footer_copyright ul li a:hover {
color: var(--colorPrimary);
opacity: 1;
}
/* footer end */
/*==============================
HOME PAGE 1 START
===============================*/
/*==============================
HOME PAGE 2 START
===============================*/
.main_menu_2 {
width: 250px;
height: 100vh;
position: fixed;
border-right: 2px solid #151c25;
top: 0;
left: 0;
background: var(--bgColor);
z-index: 999;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.main_menu_2::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.main_menu_2 {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.main_menu_2 .logo_2 {
background: #151c25;
padding: 50px;
}
.main_menu_2 .logo_2 img
{
filter: hue-rotate(22deg);
}
.main_menu_2 ul {
padding: 30px;
max-height: 730px;
overflow: hidden;
overflow-y: auto;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.main_menu_2 ul::-webkit-scrollbar {
width: 5px;
}
.main_menu_2 ul::-webkit-scrollbar-thumb {
background: var(--colorPrimary);
}
.main_menu_2 ul li a {
border-radius: 5px !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
display: block;
margin-top: 30px;
font-weight: 500;
font-size: 14px;
line-height: 12px;
text-transform: uppercase;
color: var(--bodyColor);
letter-spacing: 1px;
padding: 0;
background: none !important;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.main_menu_2 ul li a span {
display: inline-block;
width: 60px;
height: 60px;
padding: 15px;
line-height: 25px;
text-align: center;
border-radius: 5px;
margin-right: 17px;
font-size: 24px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.main_menu_2 ul li a span {
background: #222831;
/* filter: brightness(10); */
}
.main_menu_2 ul li a span {
background: #222831;
/* filter: brightness(10); */
}
.main_menu_2 ul li a span svg,
.main_menu_2 ul li a span img {
filter: brightness(10) !important;
}
.main_menu_2 ul li a:hover,
.main_menu_2 ul li a.active {
color: var(--colorPrimary);
}
.main_menu_2 ul li a:hover svg,
.main_menu_2 ul li a.active svg,
.main_menu_2 ul li a:hover img,
.main_menu_2 ul li a.active img {
filter: unset !important;
}
.main_menu_2 ul li a:hover span,
.main_menu_2 ul li a.active span {
background: var(--colorPrimary);
}
.tf__banner_2 {
height: 100vh;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
position: relative;
}
.tf__banner_2 div {
height: 100%;
}
.tf__banner_text_2 {
justify-content: end;
padding-bottom: 100px;
}
.tf__banner_text_2 ul {
margin-bottom: 0;
}
.tf__banner_text_2 p {
font-weight: 500;
margin-bottom: 40px;
}
.tf__about_2 .tf__section_heading h5,
.tf__about_2 .tf__section_heading h2 {
text-align: left;
}
.tf__about_text_2 ul li {
margin-top: 80px;
}
.tf__about_text_2 ul li .top {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.tf__about_text_2 ul li .top .img {
width: 120px;
height: 120px;
margin-right: 30px;
filter: hue-rotate(30deg);
}
.tf__about_text_2 ul li .top h3 {
font-size: 30px;
font-weight: 600;
margin-top: 20px;
}
.tf__about_text_2 ul li p {
font-weight: 500;
line-height: 28px;
margin-top: 15px;
}
.tf__about_img_2 {
width: 570px;
height: 640px;
margin-left: auto;
margin-right: 0;
margin-top: 90px;
}
.tf__about_img_2 img {
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.tf__about_img_2 .tf__about_img_text {
background: var(--colorPrimary);
left: auto;
right: auto;
transform: translate(0);
margin-left: auto;
float: right;
border-radius: 4px;
padding: 30px;
top: -90px;
}
.tf__about_img_2 .tf__about_img_text i {
background: var(--colorWhite);
border-radius: 4px;
color: var(--colorPrimary);
}
.tf__about_img_2 .tf__about_img_text h4 {
color: var(--colorBlack);
font-size: 40px;
font-weight: 700;
line-height: 1;
}
.tf__about_img_2 .tf__about_img_text h4 span {
color: var(--colorBlack);
font-size: 20px;
font-weight: 600;
}
.tf__about_img_2::after {
display: none;
}
.tf__about_img_2::before {
position: absolute;
content: "";
background: url(../images/shapes/about_shapes.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 250px;
height: 250px;
top: -40px;
right: -50px;
z-index: -1;
animation: aboutAmini linear 2s infinite alternate;
-webkit-animation: aboutAmini linear 2s infinite alternate;
filter: hue-rotate(30deg);
}
@keyframes aboutAmini {
from {
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
to {
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
}
.tf__service_2 .tf__section_heading h5 {
color: var(--colorPrimary);
}
.tf__single_service_2 {
position: relative;
}
.tf__single_service_2 .text {
margin-top: 165px;
background: var(--bgColor);
padding: 40px;
border-radius: 5px;
position: relative;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__single_service_2 .text span {
display: block;
width: 100px;
height: 100px;
background: var(--colorPrimary);
padding: 12px;
border-radius: 5px;
position: absolute;
top: -50px;
left: 40px;
}
.tf__single_service_2 .text span path {
stroke: var(--bodyBg);
}
.tf__single_service_2 .text h3 {
font-size: 20px;
font-weight: 500;
margin-top: 40px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.tf__single_service_2 a {
border: 1px solid var(--colorPrimary);
padding: 15px 30px;
border-radius: 5px;
transition: all linear 0.3s;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
z-index: -1;
}
.tf__single_service_2 a:hover {
color: var(--colorBlack);
background-color: var(--colorPrimary);
}
.tf__single_service_2.active .text {
margin-top: 65px;
}
.tf__single_service_2.active a {
bottom: -100px;
z-index: 1;
}
.tf__skills_2 {
background: var(--bgColor);
}
.tf__skills_2 .nav {
justify-content: center;
}
.tf__skills_2 .nav .nav-item button {
text-transform: capitalize;
color: var(--colorWhite);
margin: 5px 10px;
font-weight: 500;
border-radius: 5px;
background: #141c27;
font-size: 16px;
padding: 18px 40px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__skills_2 .nav .nav-item button i {
margin-left: 10px;
}
.tf__skills_2 .nav .nav-item button:hover,
.tf__skills_2 .nav .nav-item button.active {
background: var(--colorPrimary);
color: var(--colorBlack);
}
.tf__single_skill_2 {
border: 1px solid #e3e3e310;
border-radius: 5px;
padding: 40px 40px 40px 70px;
margin-top: 25px;
}
.tf__single_skill_2 h3 {
font-size: 16px;
font-weight: 500;
border-bottom: 1px solid var(--colorPrimary);
display: inline-block;
padding-right: 30px;
padding-bottom: 12px;
position: relative;
margin-bottom: 20px;
}
.tf__single_skill_2 h3::after {
position: absolute;
content: "f101";
font-family: "Font Awesome 6 Pro";
font-weight: 600;
font-size: 14px;
color: var(--colorPrimary);
top: 2px;
left: -30px;
}
.tf__single_skill_2 h2 {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
}
.tf__single_skill_2 h4 {
font-size: 16px;
font-weight: 500;
margin-bottom: 25px;
}
.tf__single_skill_2 p {
font-size: 16px;
font-weight: 500;
line-height: 28px;
margin-bottom: 25px;
}
.tf__single_skill_2 .tf__team_skills_bar_single {
margin: 0;
background: none;
}
.tf__single_skill_2 .tf__team_skills_bar_single p {
padding: 0;
margin-bottom: 20px;
}
.tf__single_skill_2 .tf__team_skills_bar_single .barfiller {
background: #141c27;
}
.barfiller .fill {
background: var(--colorPrimary);
}
.tf__single_skill_2 .tf__team_skills_bar_single .tip::after {
position: absolute;
content: "";
background: url(../images/skills_shape.html);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 40px;
height: 40px;
top: -7px;
right: -4px;
}
.tf__single_skill_2 .barfiller .tip {
margin-top: -43px;
font-size: 13px;
}
.tf__skills_2 .education .tf__single_skill_2 p {
margin-bottom: 0;
}
.tf__portfolio_2 .tf__portfolio_item {
height: auto;
}
.tf__portfolio_2 .tf__portfolio_item img {
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
}
.tf__portfolio_2 .tf__section_heading h5 {
color: var(--colorPrimary);
}
.tf__blog_2 {
background: var(--bgColor);
}
.tf__slingle_blog_2 {
margin-top: 25px;
}
.tf__blog_img_2 {
height: 350px;
position: relative;
width: 100%;
}
.tf__blog_img_2 img {
border-radius: 5px;
}
.tf__blog_img_2 span {
border-radius: 5px;
background: var(--colorPrimary);
display: inline-block;
padding: 10px 20px;
color: var(--bgColor);
font-weight: 500;
position: absolute;
top: 20px;
right: 20px;
text-transform: uppercase;
font-size: 14px;
box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.04);
letter-spacing: 0.3px;
}
.tf__blog_text_2 .title {
display: block;
font-size: 20px;
font-weight: 500;
margin: 15px 0;
line-height: 26px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__blog_text_2 .title:hover {
color: var(--colorPrimary);
}
.tf__blog_text_2 ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px;
margin: 15px 0;
}
.tf__blog_text_2 ul li {
font-size: 14px;
font-weight: 400;
}
.tf__blog_text_2 ul li i {
color: var(--colorPrimary);
margin-right: 5px;
}
.tf__blog_text_2 .read_btn {
font-size: 16px;
font-weight: 500;
line-height: 22px;
text-transform: capitalize;
border: 1px solid var(--colorPrimary);
border-radius: 5px;
padding: 17px 20px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__blog_text_2 .read_btn i {
margin-left: 15px;
}
.tf__blog_text_2 .read_btn:hover {
background: var(--colorPrimary);
color: var(--colorBlack);
}
.tf__contact_2_text {
padding: 60px;
background: var(--bgColor);
margin-top: 25px;
text-align: center;
border: 1px solid #e3e3e310;
}
.tf__contact_2_text span {
display: block;
width: 70px;
height: 70px;
margin: 0 auto;
filter: hue-rotate(30deg);
}
.tf__contact_2_text h3 {
font-size: 20px;
margin: 30px 0 15px;
}
.tf__contact_2_text p {
font-size: 16px;
font-weight: 500;
line-height: 28px;
margin-bottom: 23px;
}
.tf__contact_2_text a {
font-size: 16px;
font-weight: 500;
display: block;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__contact_2_text a:hover {
color: var(--colorPrimary);
}
.contact_form_2 {
text-align: center;
margin-top: 40px;
}
.contact_form_2 form input::placeholder,
.contact_form_2 form textarea::placeholder {
color: var(--colorWhite);
}
.contact_form_2 form input,
.contact_form_2 form textarea {
background: none;
border: 1px solid #00f2f4;
border-radius: 5px;
margin-top: 20px;
padding: 17px 20px;
color: var(--colorWhite);
}
.contact_form_2 form button {
border-radius: 5px;
background: var(--colorPrimary);
color: var(--colorBlack);
padding: 18px 67px;
margin-top: 15px;
font-size: 16px;
font-weight: 500;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.contact_form_2 form button:hover {
background: var(--colorWhite);
}
.footer_2_copyright_area .tf__footer_copyright {
margin-top: 0;
}
.main {
padding-left: 250px;
}
/* for mobile menu start */
.menu_2_icon {
position: absolute;
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
background: var(--colorPrimary);
top: 10px;
right: -60px;
cursor: pointer;
color: var(--colorBlack);
font-size: 24px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
display: none;
}
.menu_2_icon.show_icon {
background: #151c25;
color: var(--colorWhite);
}
.menu_2_icon .close_icon {
display: none;
}
.menu_2_icon.show_icon .bar_icon {
display: none;
}
.menu_2_icon.show_icon .close_icon {
display: inline-block;
}
/* for mobile menu end */
/*==============================
HOME PAGE 2 END
===============================*/
/*==============================
BLOG LIST START
===============================*/
.tf__blog_list_item {
margin-bottom: 80px;
}
.tf__blog_list_img {
position: relative;
height: 440px;
width: 100%;
}
.tf__blog_list_img span {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: var(--bgColor);
text-transform: capitalize;
padding: 15px 20px;
border-radius: 20px 20px 0px 0px;
border-bottom: 2px solid var(--colorPrimary);
line-height: 1.6;
position: absolute;
left: 40px;
bottom: -20px;
}
.tf__blog_list_img span b {
font-size: 20px;
font-weight: 500;
}
.tf__blog_list_text {
border-bottom: 1px solid #e3e3e320;
}
.tf__blog_list_text a {
font-size: 30px;
font-weight: 500;
margin-top: 50px;
line-height: 1.5;
transition: all linear 0.3s;
}
.tf__blog_list_text a:hover {
color: var(--colorPrimary);
}
.tf__blog_list_text p {
margin: 20px 0px 35px;
}
.tf__sidebar_item {
padding: 40px;
background: var(--bgColor);
}
.tf__sidebar_item h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 30px;
}
.tf__sidebar_search form {
position: relative;
}
.tf__sidebar_search form input {
background: #151c25;
padding: 18px 20px;
color: var(--colorWhite);
}
.tf__sidebar_search form button {
position: absolute;
top: 18px;
right: 25px;
background: none;
color: var(--colorWhite);
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__sidebar_search form button:hover {
color: var(--colorPrimary);
}
.tf__sidebar_category ul li a {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-top: 15px;
transition: all linear 0.3s;
}
.tf__sidebar_category ul li a span {
font-weight: 500;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__sidebar_category ul li a:hover {
color: var(--colorPrimary);
}
.tf__sidebar_category ul li a:hover span {
color: var(--colorPrimary);
}
.tf__sidebar_comments ul li {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.tf__sidebar_comments ul li .img {
width: 80px;
height: 80px;
margin-right: 20px;
}
.tf__sidebar_comments ul li .text {
width: 70%;
}
.tf__sidebar_comments ul li .text a {
font-weight: 500;
display: block;
margin-bottom: 10px;
transition: all linear 0.3s;
}
.tf__sidebar_comments ul li .text a:hover {
color: var(--colorPrimary);
}
.tf__sidebar_comments ul li .text p {
font-weight: 500;
}
.tf__sidebar_gallery ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tf__sidebar_gallery ul li {
width: 105px;
height: 105px;
overflow: hidden;
}
.tf__sidebar_gallery ul li a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
.tf__sidebar_gallery ul li a .gal_img_overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-size: 20px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
background: #55e6a594;
transform: scale(0.8);
opacity: 0;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
-ms-transform: scale(0.8);
-o-transform: scale(0.8);
}
.tf__sidebar_gallery ul li:hover .gal_img_overlay {
opacity: 1;
color: var(--bodyBg);
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
}
.tf__sidebar_tags ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tf__sidebar_tags ul li a {
font-size: 14px;
font-weight: 400;
border-radius: 5px;
background: #151c25;
padding: 9px 14px;
text-transform: capitalize;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__sidebar_tags ul li a:hover {
background: var(--colorPrimary);
color: var(--colorBlack);
}
/*==============================
BLOG LIST END
===============================*/
/*==============================
BLOG DETAILS START
===============================*/
.tf__blog_details_img {
height: 460px;
}
.blog_details_header {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 30px;
margin-top: 40px;
}
.blog_details_header li {
font-size: 16px;
font-weight: 600;
}
.blog_details_header li span {
text-transform: capitalize;
background: var(--colorPrimary);
padding: 10px 20px;
display: inline-block;
color: var(--colorBlack);
}
.tf__blog_details_text h2 {
font-size: 40px;
margin-top: 40px;
}
.tf__blog_details_text p {
margin-top: 32px;
}
.details_quot_text {
background: var(--bgColor);
padding: 50px;
margin-top: 57px;
margin-bottom: 35px;
position: relative;
}
.details_quot_text p {
margin: 0;
}
.details_quot_text h4 {
font-size: 16px;
font-weight: 600;
margin-top: 25px;
}
.details_quot_text::after {
position: absolute;
content: "";
width: 2px;
height: 60%;
background: var(--colorPrimary);
top: 50%;
left: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
}
.details_center_img {
height: 290px;
overflow: hidden;
margin-top: 25px;
}
.details_blog_share {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding-top: 50px;
}
.details_blog_share h4 {
font-size: 20px;
}
.details_blog_share .share_icon {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.details_blog_share .social_share {
gap: 10px;
margin-right: 40px;
}
.details_blog_share .social_share li a {
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
background: #151c25;
font-size: 14px;
transition: all linear 0.3s;
}
.details_blog_share .social_share li a:hover {
background: var(--colorPrimary);
color: var(--colorBlack);
}
.details_blog_share .tags {
gap: 20px;
}
.details_blog_share .tags li a {
font-size: 14px;
font-weight: 400;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.details_blog_share .tags li a:hover {
color: var(--colorPrimary);
text-decoration: underline;
text-underline-offset: 5px;
}
.next_prev_button {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-top: 1px solid #e3e3e329;
border-bottom: 1px solid #e3e3e329;
margin-top: 30px;
padding: 45px 0px;
}
.next_prev_button li:last-child a p,
.next_prev_button li:last-child a p span {
text-align: right;
}
.next_prev_button li {
flex-basis: 50%;
max-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
min-height: 35px;
}
.next_prev_button li a {
display: flex;
flex-direction: column;
}
.next_prev_button li a i {
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.previous_post {
padding-right: 10px;
}
.next_post {
padding-left: 10px;
text-align: right;
}
.next_prev_button li a p {
font-weight: 500;
text-transform: uppercase;
font-size: 14px;
color: var(--colorPrimary);
letter-spacing: 0.9px;
margin-bottom: 10px;
}
.next_prev_button li a h5 {
font-size: 18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.next_prev_button li a p span {
margin-top: 5px;
display: block;
text-transform: unset;
}
.next_prev_button li a:hover i {
color: var(--colorPrimary);
}
.tf__details_bloger {
background: var(--bgColor);
padding: 50px;
margin-top: 100px;
position: relative;
}
.tf__details_bloger h3 {
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 26px;
}
.tf__details_bloger span {
font-size: 14px;
font-style: normal;
font-weight: 400;
display: block;
text-transform: uppercase;
margin: 5px 0 15px;
letter-spacing: 0.6px;
color: var(--colorPrimary);
}
.tf__details_bloger a {
display: inline-block;
margin-top: 20px;
transition: all linear 0.3s;
-webkit-transition: all linear 0.3s;
-moz-transition: all linear 0.3s;
-ms-transition: all linear 0.3s;
-o-transition: all linear 0.3s;
}
.tf__details_bloger a:hover {
color: var(--colorPrimary);
}
.tf__details_bloger .img {
width: 100px;
height: 100px;
position: absolute;
top: -40px;
right: 50px;
}
.tf__details_bloger .img img {
border-radius: 50%;
}
.tf__input_comment h2 {
font-size: 40px;
font-weight: 700;
text-transform: capitalize;
margin-bottom: 10px;
}
.tf__input_comment form input,
.tf__input_comment form textarea {
margin-top: 30px;
background: none;
border: 1px solid var(--colorPrimary);
padding: 22px 20px;
color: var(--colorWhite);
font-size: 16px;
font-weight: 500;
}
.tf__input_comment form button {
margin-top: 25px;
width: 100%;
}
.tf__subscribe_2 .tf__subscribe_overlay {
background: #0000;
}
.tf__subscribe_2 .tf__subscribe_text form input {
background: var(--bgColor);
}
/*==============================
BLOG DETAILS END
===============================*/
/*==============================
CONTACT START
===============================*/
.tf__section_heading.left h2,
.tf__section_heading.left h5 {
text-align: left;
}
.tf__contact_form_area h2 {
font-size: 40px;
margin-bottom: 30px;
}
.tf__contact_form_area form {
background: var(--bgColor);
padding: 0px 40px 40px 40px;
}
.tf__contact_form_area form input,
.tf__contact_form_area form textarea {
border-bottom: 1px solid #333f4d;
background: none;
padding: 20px 0px;
margin-top: 45px;
color: var(--colorWhite);
}
.tf__contact_form_area form button {
width: 100%;
margin-top: 35px;
}
.tf__contact_map {
width: 100%;
height: 100%;
}
.tf__contact_map iframe {
width: 100%;
height: 100%;
}
/*==============================
CONTACT END
===============================*/
/*==============================
TEXT ANIMATION START
===============================*/
.text_hover_animaiton {
line-height: 15px;
}
.text_hover_animaiton:hover {
--y: -8px;
}
.text_hover_animaiton:hover .menu-text div {
--m: calc(16px * -1);
}
.hover_black .menu-text {
text-shadow: 0 16px 0 var(--colorBlack);
}
.menu-text {
display: -webkit-box;
display: -ms-flexbox;
overflow: hidden;
text-shadow: 0 16px 0 var(--colorPrimary);
display: flex;
}
.menu-text div {
display: block;
backface-visibility: hidden;
transition: -webkit-transform 0.4s ease;
transition: transform 0.4s ease;
transition: transform 0.4s ease, -webkit-transform 0.4s ease;
transform: translateY(var(--m)) translateZ(0);
}
.text_hover_animaiton:hover .menu-text div:nth-child(1) {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(2) {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(3) {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(4) {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(5) {
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(6) {
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(7) {
-webkit-transition-delay: 0.35s;
transition-delay: 0.35s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(8) {
-webkit-transition-delay: 0.4s;
transition-delay: 0.4s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(9) {
-webkit-transition-delay: 0.45s;
transition-delay: 0.45s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(10) {
-webkit-transition-delay: 0.5s;
transition-delay: 0.5s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(11) {
-webkit-transition-delay: 0.55s;
transition-delay: 0.55s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(12) {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(13) {
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(14) {
-webkit-transition-delay: 75s;
transition-delay: 0.75s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(15) {
-webkit-transition-delay: 0.8s;
transition-delay: 0.8s;
}
.text_hover_animaiton:hover .menu-text div:nth-child(16) {
-webkit-transition-delay: 0.85s;
transition-delay: 0.85s;
}
.zyan_animation[data-animation-type="fadeIn"] {
opacity: 0.7;
}
/*==============================
TEXT ANIMATION END
===============================*/
/*==============================
PRELOADER START
===============================*/
body.loaded {
overflow: hidden !important;
height: 100% !important;
}
.preloader {
position: fixed;
z-index: 10;
height: 100vh;
width: 100%;
left: 0;
top: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: transparent;
z-index: 99999999999999;
}
.preloader svg {
position: absolute;
top: 0;
width: 100vw;
height: 110vh;
fill: #1a1a1a;
}
h5.preloader-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
color: #333;
}
@media (max-width: 1040px) {
h5.preloader-text {
font-size: 60px;
}
}
h5.preloader-text::after {
content: "Loading";
position: absolute;
left: 0;
top: 0;
color: var(--colorPrimary);
animation: move 2s infinite alternate;
}
@keyframes move {
from {
clip-path: circle(50px at 0% 50%);
}
to {
clip-path: circle(50px at 100% 50%);
}
}
/*==============================
PRELOADER END
===============================*/
/*==============================
MEGIC CURSOR START
===============================*/
.anim_line {
display: block;
overflow: hidden;
}
#magic-cursor {
position: relative;
z-index: 9999;
}
@media (max-width: 1040px) {
#magic-cursor {
display: none;
}
}
#ball {
position: fixed;
display: block;
left: 0;
top: 0;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border: 2px solid #fff;
border-radius: 50%;
pointer-events: none;
opacity: 1;
}
.ball-drag,
.ball-view,
.ball-gallery {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
font-size: 20px;
color: #000;
height: 100%;
}
.ball-view {
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
padding: 0 5px;
color: #222;
height: 100%;
text-align: center;
font-weight: 500;
text-transform: capitalize;
}
/*==============================
MEGIC CURSOR END
===============================*/
/*==============================
POPUP END
===============================*/
.zyan-popup .mfp-content {
width: 500px;
margin: 0 auto;
background: var(--bodyBg);
}
@media (max-width: 575px) {
.zyan-popup .mfp-content {
width: 90%;
}
}
.des {
padding: 30px 40px;
}
.des .popup_title {
margin-bottom: 20px;
}
.des .details_quot_text {
margin: 20px 0 !important;
padding: 20px 30px;
}
.des .category {
text-transform: uppercase;
color: var(--colorPrimary);
letter-spacing: 1px;
margin: 5px 0;
display: block;
font-size: 14px;
}
/*==============================
POPUP END
===============================*/
.intro_page {
width: 100%;
height: 100vh;
clear: both;
float: left;
position: relative;
}
.intro_page .intro_title {
width: 100%;
float: left;
position: relative;
z-index: 5;
text-align: center;
padding: 130px 0px 120px 0px;
}
.intro_page .intro_title span {
display: block;
}
.intro_page .intro_title img {
max-width: 150px;
margin-bottom: 15px;
}
.intro_page .intro_title .image_logo {
display: inline-block;
position: relative;
}
.intro_page .intro_title .image_logo .version {
position: absolute;
top: -5px;
right: -65px;
color: var(--colorPrimary);
font-weight: 700;
font-size: 20px;
}
.intro_page .intro_bg {
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.intro_page .demo {
position: relative;
z-index: 3;
width: 100%;
max-width: 60%;
margin: 0px auto;
text-align: center;
}
.intro_page .demo .demo-item {
margin: 0px 0px 88px 0px;
width: 100%;
float: left;
}
.intro_page .demo .demo-item {
font-size: 30px;
font-weight: 800;
text-transform: uppercase;
margin-bottom: 52px;
}
.intro_page .demo .demo-item {
position: relative;
}
.intro_page .demo .demo-item {
width: 100%;
height: auto;
clear: both;
float: left;
position: relative;
}
.intro_page .demo .demo-item {
position: relative;
top: 0px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.intro_page .demo .demo-item:hover {
top: -10px;
}
.intro_page .demo .demo-item img {
box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.15);
/* border-radius: 15px;*/
margin-bottom: 15px;
}
.intro_page .demo .demo-item .mini {
font-size: 17px;
font-weight: 700;
text-transform: uppercase;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.intro_page .demo .demo-item:hover .mini {
color: var(--colorPrimary);
}
.intro_page .coming h3 {
color: rgba(181, 181, 181, 1);
padding: 50px 0;
}
.intro_page .intro_space {
width: 100%;
float: left;
height: 120px;
}
JavaScript
More JavaScript Files Can you Download all Files Scroll Down And Click Now Download
function _0x269e(){const _0x5e749f=['203046DyVKNY','none','48lqJYWu','.progressx20path','WebkitTransition','querySelector','active','add','classList','652977WcBaFc','smooth','.progress','203445sAvIuN','transition','strokeDasharray','strokeDashoffset','remove','4956940IJrpbd','2047358iIxlVK','scrollY','onscroll','style','offsetHeight','8120SzLSwm','91StWBbf','onclick','body','649788LFEgDy'];_0x269e=function(){return _0x5e749f;};return _0x269e();}function _0x40be(_0x1abf41,_0x146f22){const _0x269ee5=_0x269e();return _0x40be=function(_0x40be28,_0x35711b){_0x40be28=_0x40be28-0x131;let _0x27a023=_0x269ee5[_0x40be28];return _0x27a023;},_0x40be(_0x1abf41,_0x146f22);}(function(_0x2e93bb,_0x766407){const _0x41ef36=_0x40be,_0x2df982=_0x2e93bb();while(!![]){try{const _0x30d897=parseInt(_0x41ef36(0x137))/0x1+parseInt(_0x41ef36(0x14a))/0x2+parseInt(_0x41ef36(0x144))/0x3+parseInt(_0x41ef36(0x133))/0x4+-parseInt(_0x41ef36(0x149))/0x5+parseInt(_0x41ef36(0x138))/0x6*(parseInt(_0x41ef36(0x134))/0x7)+-parseInt(_0x41ef36(0x13a))/0x8*(parseInt(_0x41ef36(0x141))/0x9);if(_0x30d897===_0x766407)break;else _0x2df982['push'](_0x2df982['shift']());}catch(_0x452d96){_0x2df982['push'](_0x2df982['shift']());}}}(_0x269e,0xb8b3b),!function(_0x41d8d8){'use strict';const _0x2403c7=_0x40be;let _0x28923c=document[_0x2403c7(0x13d)](_0x2403c7(0x143)),_0x59fd02=document['querySelector'](_0x2403c7(0x13b)),_0x36a671=_0x59fd02['getTotalLength']();_0x59fd02['style'][_0x2403c7(0x145)]=_0x59fd02[_0x2403c7(0x131)][_0x2403c7(0x13c)]=_0x2403c7(0x139),_0x59fd02[_0x2403c7(0x131)][_0x2403c7(0x146)]=_0x36a671,_0x59fd02[_0x2403c7(0x131)][_0x2403c7(0x147)]=_0x36a671,_0x59fd02['getBoundingClientRect'](),_0x59fd02[_0x2403c7(0x131)][_0x2403c7(0x145)]=_0x59fd02['style'][_0x2403c7(0x13c)]='stroke-dashoffsetx2010msx20linear';let _0x3e2b0d=()=>{const _0x4b5e9e=_0x2403c7;let _0x1cd881=window[_0x4b5e9e(0x14b)],_0x277bed=document[_0x4b5e9e(0x136)][_0x4b5e9e(0x132)],_0x33a34d=window['innerHeight'];_0x59fd02['style']['strokeDashoffset']=_0x36a671-_0x1cd881*_0x36a671/(_0x277bed-_0x33a34d),_0x1cd881>0x32?_0x28923c[_0x4b5e9e(0x140)][_0x4b5e9e(0x13f)](_0x4b5e9e(0x13e)):_0x28923c['classList'][_0x4b5e9e(0x148)](_0x4b5e9e(0x13e));};_0x28923c[_0x2403c7(0x135)]=function(){const _0x3d5adc=_0x2403c7;window['scrollTo']({'top':0x0,'behavior':_0x3d5adc(0x142)});},window[_0x2403c7(0x14c)]=()=>{_0x3e2b0d();},_0x3e2b0d();}(jQuery));
Download Link
Choosing a Website Builder
Depending on your technical skills and preferences, choose a website builder that suits your needs. Popular options include WordPress, Wix, and Squarespace.
Selecting a Template or Theme
Templates and themes provide a starting point for your design. Choose one that aligns with your brand and goals.
Customizing Your Website
Personalize your website by customizing the template or theme. Focus on:
- Colors and Fonts: Reflect your brand identity.
- Images and Graphics: Use high-quality visuals.
- Layout and Structure: Ensure easy navigation and readability.
Adding Essential Pages
Your portfolio website should include the following essential pages:
- Home: Introduction and overview.
- About: Your background and story.
- Portfolio: Showcase your best work.
- Services: Describe the services you offer.
- Blog: Share your insights and knowledge.
- Contact: Provide ways for visitors to reach you.
Showcasing Your Work
Curating Your Best Projects
Select and showcase your best projects. Focus on quality over quantity.
Writing Compelling Case Studies
Case studies provide detailed insights into your projects. Include:
- Project Overview: Goals and objectives.
- Process: Steps and methods used.
- Results: Outcomes and impact.
Using High-Quality Images
High-quality images enhance the visual appeal of your website. Use professional photography or design software to create stunning visuals.
Adding Testimonials and Reviews
Testimonials and reviews build credibility. Ask your clients or colleagues for feedback and display them prominently on your website.
Including Client Logos and Brands
If you have worked with well-known clients or brands, display their logos on your website to build trust and credibility.
Optimizing for SEO
Conducting Keyword Research
Identify relevant keywords that your target audience is searching for. Use tools like Google Keyword Planner or SEMrush.
On-Page SEO Techniques
Optimize your website’s content and structure for search engines. Key techniques include:
- Title Tags: Include your main keywords.
- Meta Descriptions: Write compelling meta descriptions.
- Headings: Use H1, H2, and H3 tags appropriately.
- Alt Text: Add alt text to images.
Off-Page SEO Strategies
Build your website’s authority with off-page SEO strategies. Consider:
- Backlinks: Get links from reputable websites.
- Social Media: Share your content on social media platforms.
- Guest Blogging: Write guest posts for other blogs.
Technical SEO Best Practices
Ensure your website is technically sound for search engines. Focus on:
- Site Speed: Optimize your website’s loading speed.
- Mobile-Friendliness: Ensure your website is mobile-friendly.
- Secure Connection: Use HTTPS for security.
Promoting Your Portfolio
Leveraging Social Media
Use social media platforms to promote your portfolio. Share your work, engage with your audience, and join relevant communities.
Networking and Collaborations
Build your network by attending industry events, joining online communities, and collaborating with other professionals.
Email Marketing Campaigns
Create an email list and send regular updates to your subscribers. Share new projects, blog posts, and other relevant content.
Utilizing Online Communities
Join online communities related to your field. Participate in discussions, share your work, and provide value.
Paid Advertising Options
Consider paid advertising options like Google Ads or social media ads to increase your visibility.