Patrick - vCard / Resume / CV Template
By: beshleyua
Thank you for your purchase. If you have any questions, mail me to - beshleygame@mail.ru
File structure
After unpacking archive, you'll see this structure:
main/
│
├──doc/
├──template/
│──│──css/
│──│──│──animate.css
│──│──│──basic.css
│──│──│──layout.css
│──│──│──blogs.css
│──│──│──line-awesome.css
│──│──│──magnific-popup.css
│──│──│──simplebar.css
│──│──│──rtl.css
│──│──│──theme-colors/
│──│──fonts/
│──│──images/
│──│──js/
│──│──│──scripts.js
│──│──│──imagesloaded.pkgd.js
│──│──│──jquery.min.js
│──│──│──jquery.validate.js
│──│──│──magnific-popup.js
│──│──│──masonry.pkgd.js
│──│──│──masonry-filter.js
│──│──│──jquery.mb.YTPlayer.js
│──│──│──simplebar.js
│──│──│──typed.js
│──│──│──particles.js
│──│──│──particles-setting.js
│──│──less/
│──│──│──basic.less
│──│──│──layout.less
│──│──│──blogs.less
│──│──│──setting.less
│──│──│──theme-colors/
│──│──mailer/
│──│──│──feedback.php
│──│──│──form_setting.php
│──│──index.html
│──│──index-rtl.html
│──│──index-bgcolor.html
│──│──index-bgcolor-rtl.html
│──│──index-particles.html
│──│──index-particles-rtl.html
│──│──index-video.html
│──│──index-video-rtl.html
│──│──blog-post.html
│──│──blog-post-rtl.html
-
css - all CSS for pages
- basic.css - CSS for basic styles
- layout.css - CSS for template layout
- blogs.css - CSS for blog post
- rtl.css - CSS for rtl support
- theme-colors/ - CSS files for template colors
-
less - all LESS for pages
- setting.less - LESS for setting template
- basic.less - LESS for basic styles
- layout.less - LESS for template layout
- blogs.less - LESS for template Blog
-
js - all JS for pages
- scripts.js - Main JS for template
Settings
For editing the template you can use following settings, folder "/less/setting.less" .
To change the color of the template, just add a line to the "head":
<link rel="stylesheet" href="css/theme-colors/green.css" /> - (green.css, blue.css, orange.css, red.css, purple.css, pink.css)
| Name |
Value |
Description |
| Colors setting for template elements |
| @bg |
#242425 |
Bg color |
| @bg2 |
#181818 |
Bg extra color |
| @default-color |
#a9a9a9 |
Default color |
| @extra-color |
#777 |
Extra color |
| @dark-color |
#181818 |
Dark color |
| @light-color |
#c9c9c9 |
Light color |
| @white-color |
#fff |
White color |
| @active-color |
#5ac24e |
template color |
| @error-color |
red |
Error field color |
| Fonts setting for template |
| @default-font |
'Poppins' |
Default font for template |
| @logo-font |
'Cormorant Garamond' |
Logo font for template |
| Sizes setting for template |
| @large-size |
20px |
Large Size |
| @default-size |
16px |
Default Size |
| @small-size |
14px |
Small Size |
| @extra-small-size |
12px |
Extra Small Size |
| @extra2-small-size |
11px |
Extra Small Size |
| @title-size |
66px |
Title Size |
| @subtitle-size |
20px |
Subtitle Size |
| @h1-size |
26px |
H1 Size |
| @h2-size |
24px |
H2 Size |
| @h3-size |
22px |
H3 Size |
| @h4-size |
20px |
H4 Size |
| @h5-size |
18px |
H5 Size |
| @h6-size |
16px |
H6 Size |
| @large-icon-size |
50px |
Large icons size |
| @default-icon-size |
40px |
Default icons size |
| @default-letter-spacing |
0em |
Default Letter Spacing |
| @extra-letter-spacing |
0.04em |
Extra Letter Spacing |
| @line-height |
1.7 |
Default Line-height for text |
Colors Schemes
Just add "green.css (or blue.css, orange.css, red.css, pink.css, purple.css)" at the end of the tag <head>, on .html file:
<link rel="stylesheet" href="css/theme-colors/green.css" />
<link rel="stylesheet" href="css/theme-colors/blue.css" />
<link rel="stylesheet" href="css/theme-colors/orange.css" />
<link rel="stylesheet" href="css/theme-colors/pink.css" />
<link rel="stylesheet" href="css/theme-colors/purple.css" />
<link rel="stylesheet" href="css/theme-colors/red.css" />
RTL Version
Just add "rtl.css" at the end of the tag <head>, on .html file:
<link rel="stylesheet" href="css/rtl.css" />
Include of fonts
To use fonts, you must add one tag 'link' from section below to head section.
<link href="https://fonts.googleapis.com/cssfamily=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
Next step is to set the @default-font option with using settings table.
Contact Form PHP
To modify the form is submitted, you can use the following settings, folders "/mailer/form_setting.php" and "/mailer/feedback.php"
HTML structure
<!DOCTYPE html>
<html lang="en">
<head>
<!--
Basic
-->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Patrick - vCard / Resume / CV Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="vCard & Resume Template" />
<meta name="keywords" content="vcard, resposnive, resume, personal, card, cv, cards, portfolio" />
<meta name="author" content="beshleyua" />
<!--
Load Fonts
-->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,300i,400,400i,500,500i,600,600i,700,700i&subset=cyrillic" rel="stylesheet">
<!--
Load CSS
-->
<link rel="stylesheet" href="css/basic.css" />
<link rel="stylesheet" href="css/layout.css" />
<link rel="stylesheet" href="css/blogs.css" />
<link rel="stylesheet" href="css/line-awesome.css" />
<link rel="stylesheet" href="css/magnific-popup.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="css/simplebar.css" />
<!-- theme colors -->
<link rel="stylesheet" href="css/theme-colors/green.css" />
<!--<link rel="stylesheet" href="css/theme-colors/blue.css" />-->
<!--<link rel="stylesheet" href="css/theme-colors/red.css" />-->
<!--<link rel="stylesheet" href="css/theme-colors/orange.css" />-->
<!--<link rel="stylesheet" href="css/theme-colors/pink.css" />-->
<!--<link rel="stylesheet" href="css/theme-colors/purple.css" />-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--
Favicons
-->
<link rel="shortcut icon" href="images/favicons/favicon.ico">
</head>
<body>
<div class="page">
<!--
Preloader
-->
<div class="preloader">
<div class="centrize full-width">
<div class="vertical-center">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
</div>
<!--
Header
-->
<header class="header">
<!-- logo -->
<div class="logo">
<a href="#"><span>P</span></a>
</div>
<!-- menu -->
<div class="top-menu">
<ul>
<li class="active">
<a href="#home-card">
<span class="icon la la-home"></span>
<span class="link">Home</span>
</a>
</li>
<li>
<a href="#about-card">
<span class="icon la la-user"></span>
<span class="link">About</span>
</a>
</li>
<li>
<a href="#resume-card">
<span class="icon la la-gear"></span>
<span class="link">Resume</span>
</a>
</li>
<li>
<a href="#works-card">
<span class="icon la la-eye"></span>
<span class="link">Portfolio</span>
</a>
</li>
<li>
<a href="#blog-card">
<span class="icon la la-newspaper-o"></span>
<span class="link">Blog</span>
</a>
</li>
<li>
<a href="#contacts-card">
<span class="icon la la-envelope"></span>
<span class="link">Contacts</span>
</a>
</li>
</ul>
</div>
<!-- Started socials -->
<div class="social">
<a target="_blank" href="https://dribbble.com/"><span class="icon la la-dribbble"></span></a>
<a target="_blank" href="https://facebook.com/"><span class="icon la la-facebook"></span></a>
<a target="_blank" href="https://github.com/"><span class="icon la la-github"></span></a>
<a target="_blank" href="https://stackoverflow.com/"><span class="icon la la-stack-overflow"></span></a>
</div>
</header>
<!--
Container
-->
<div class="container">
<!--
Card - Started
-->
<div class="card-inner card-started active" id="home-card">
<!-- Started Background -->
<div class="slide" style="background-image: url(images/bg.jpg);"></div>
<div class="centrize full-width">
<div class="vertical-center">
<!-- Started titles -->
<div class="title"><span>Patrick</span> Johansson</div>
<div class="subtitle">
I am
<div class="typing-title">
<p>a <strong>web developer.</strong></p>
<p>a <strong>blogger.</strong></p>
<p>a <strong>freelancer.</strong></p>
<p>a <strong>photographer.</strong></p>
</div>
<span class="typed-title"></span>
</div>
</div>
</div>
</div>
<!--
Card - About
-->
<div class="card-inner" id="about-card">
<div class="row card-container">
...
</div>
</div>
<!--
Card - Resume
-->
<div class="card-inner" id="resume-card">
<div class="row card-container">
...
</div>
</div>
<!--
Card - Works
-->
<div class="card-inner" id="works-card">
<div class="row card-container">
...
</div>
</div>
<!--
Card - Blog
-->
<div class="card-inner" id="blog-card">
<div class="row card-container">
...
</div>
</div>
<!--
Card - Contacts
-->
<div class="card-inner" id="contacts-card">
<div class="row card-container">
...
</div>
</div>
<!--
Lines Grid
-->
<div class="lines-grid">
<div class="row">
<div class="col col-m-12 col-t-6 col-d-4 col-d-lg-3"></div>
<div class="col col-m-12 col-t-6 col-d-4 col-d-lg-3">
<div class="lines">
<div class="line-1"></div>
<div class="line-2" style="animation-delay: 10s;"></div>
</div>
</div>
<div class="col col-m-12 col-t-6 col-d-4 col-d-lg-3">
<div class="lines">
<div class="line-1"></div>
</div>
</div>
<div class="col col-m-0 col-t-0 col-d-0 col-d-lg-3">
<div class="lines">
<div class="line-1"></div>
<div class="line-2" style="animation-delay: 0s;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
jQuery Scripts
-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.magnific-popup.js"></script>
<script src="js/imagesloaded.pkgd.js"></script>
<script src="js/masonry.pkgd.js"></script>
<script src="js/masonry-filter.js"></script>
<script src="js/simplebar.js"></script>
<script src="js/typed.js"></script>
<!--
Google map api
-->
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<!--
Main Scripts
-->
<script src="js/scripts.js"></script>
</body>
</html>
HTML structure of "About" section
<!--
Card - About
-->
<div class="card-inner" id="about-card">
<div class="row card-container">
<!--
Card Wrap
-->
<div class="card-wrap col col-m-12 col-t-12 col-d-8 col-d-lg-6" data-simplebar>
<!-- About Image -->
<div class="card-image col col-m-12 col-t-12 col-d-4 col-d-lg-6" style="background-image: url(images/profile.jpg);"></div>
<!--
Inner Top
-->
<div class="content inner-top">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<div class="title-bg">About Me</div>
<div class="text">
<p>
<strong>Hello, I’m a Patrick</strong>, web-developer based on Paris. <br />
I have rich experience in web site design & building <br />
and customization. Also I am good at <strong>html, css, <br />
wordpress, php, jquery, bootstrap.</strong>
</p>
</div>
<div class="circle-bts">
<a href="#"><span><i class="icon la la-download"></i>Download CV</span></a>
<a href="#"><i class="icon la la-github"></i></a>
<a href="#"><i class="icon la la-stack-overflow"></i></a>
<a href="#"><i class="icon la la-skype"></i></a>
</div>
</div>
</div>
</div>
<!--
Services
-->
<div class="content services">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- title -->
<div class="title"><span>Our</span> Services</div>
</div>
</div>
<!-- service items -->
<div class="row service-items">
<!-- service item -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="service-item card-box">
<div class="icon"><i class="la la-html5"></i></div>
<div class="name">Web Development</div>
<p>
Modern and mobile-ready website that will help of your marketing.
</p>
</div>
</div>
...
</div>
</div>
<!--
Price Tables
-->
<div class="content pricing">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- title -->
<div class="title"><span>Pricing</span> Tables</div>
</div>
</div>
<!-- pricing items -->
<div class="row pricing-items">
<!-- pricing item -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="pricing-item card-box">
<div class="icon"><i class="la la-tachometer"></i></div>
<div class="name">Basic</div>
<div class="amount">
<span class="dollar">$</span>
<span class="number">22</span>
<span class="period">hour</span>
</div>
<div class="feature-list">
<ul>
<li>Web Development</li>
<li>Advetising</li>
<li>Game Development</li>
<li class="disable">Music Writing</li>
<li class="disable">Photography <strong>new</strong></li>
</ul>
</div>
<div class="lnks">
<a href="#" class="lnk">Buy <span>Basic</span></a>
</div>
</div>
</div>
...
</div>
</div>
<!--
Fun Fact
-->
<div class="content fuct">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- title -->
<div class="title"><span>Fun</span> Facts</div>
</div>
</div>
<!-- fuct items -->
<div class="row fuct-items">
<!-- fuct item -->
<div class="col col-m-6 col-t-6 col-d-3 col-d-lg-3">
<div class="fuct-item card-box">
<div class="icon"><i class="la la-headphones"></i></div>
<div class="name">47 Albumes Listened</div>
</div>
</div>
...
</div>
</div>
<!--
Clients
-->
<div class="content clients">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- title -->
<div class="title"><span>Our</span> Clients</div>
</div>
</div>
<!-- client items -->
<div class="row client-items">
<!-- client item -->
<div class="col col-m-6 col-t-6 col-d-3 col-d-lg-3">
<div class="client-item card-box">
<div class="image">
<a target="_blank" href="https://www.google.com">
<img src="images/clients/client_1.png" alt="" />
</a>
</div>
</div>
</div>
...
</div>
</div>
</div>
</div>
</div>
HTML structure of "Resume" section
<!--
Card - Resume
-->
<div class="card-inner" id="resume-card">
<div class="row card-container">
<!--
Card Wrap
-->
<div class="card-wrap col col-m-12 col-t-12 col-d-8 col-d-lg-6" data-simplebar>
<!-- Resume Image -->
<div class="card-image col col-m-12 col-t-12 col-d-4 col-d-lg-6" style="background-image: url(images/profile2.jpg);"></div>
<!--
Inner Top
-->
<div class="content inner-top">
<div class="row">
<div class=" col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<div class="title-bg">Resume</div>
</div>
</div>
</div>
<!--
Resume
-->
<div class="content resume">
<div class="row">
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<!-- title -->
<div class="title"><span>My</span> Experience</div>
<!-- resume items -->
<div class="resume-items card-box">
<!-- resume item -->
<div class="resume-item">
<div class="name">Web Development</div>
<div class="date">2013-Present <span>|</span> Facebook Inc.</div>
<p>
Collaborate with creative and development teams on the execution of ideas.
</p>
</div>
...
</div>
</div>
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<!-- title -->
<div class="title"><span>My</span> Education</div>
<!-- resume items -->
<div class="resume-items card-box">
<!-- resume item -->
<div class="resume-item">
<div class="name">Art University</div>
<div class="date">2006-2008 <span>|</span> New York</div>
<p>
Bachelor's Degree in Computer Science ABC Technical Institute, Jefferson, Missouri
</p>
</div>
...
</div>
</div>
</div>
</div>
<!--
Skills
-->
<div class="content skills">
<div class="row">
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<!-- title -->
<div class="title"><span>Personal</span> Skills</div>
<!-- skills -->
<div class="skills-list card-box">
<ul>
<li>
<div class="name">Communication</div>
<div class="progress">
<div class="percentage" style="width:90%;"></div>
</div>
</li>
<li>
<div class="name">Team Work</div>
<div class="progress">
<div class="percentage" style="width:65%;"></div>
</div>
</li>
<li>
<div class="name">Leadership</div>
<div class="progress">
<div class="percentage" style="width:75%;"></div>
</div>
</li>
<li>
<div class="name">Language</div>
<div class="progress">
<div class="percentage" style="width:85%;"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<!-- title -->
<div class="title"><span>Professional</span> Skills</div>
<!-- skills -->
<div class="skills-list card-box">
<ul>
<li>
<div class="name">WordPress</div>
<div class="progress">
<div class="percentage" style="width:90%;"></div>
</div>
</li>
<li>
<div class="name">PHP / MYSQL</div>
<div class="progress">
<div class="percentage" style="width:65%;"></div>
</div>
</li>
<li>
<div class="name">HTML / CSS / JS</div>
<div class="progress">
<div class="percentage" style="width:95%;"></div>
</div>
</li>
<li>
<div class="name">Photoshop</div>
<div class="progress">
<div class="percentage" style="width:85%;"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
HTML structure of "Portfolio" section
<!--
Card - Works
-->
<div class="card-inner" id="works-card">
<div class="row card-container">
<!--
Card Wrap
-->
<div class="card-wrap col col-m-12 col-t-12 col-d-8 col-d-lg-6" data-simplebar>
<!-- Work Image -->
<div class="card-image col col-m-12 col-t-12 col-d-4 col-d-lg-6" style="background-image: url(images/profile3.jpg);"></div>
<!--
Inner Top
-->
<div class="content inner-top">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<div class="title-bg">Portfolio</div>
</div>
</div>
</div>
<!--
Works
-->
<div class="content works">
<div class="row">
<div class="col col-m-12 col-t-5 col-d-5 col-d-lg-5">
<!-- title -->
<div class="title"><span>My</span> Portfolio</div>
</div>
<div class="col col-m-12 col-t-7 col-d-7 col-d-lg-7">
<!-- filters -->
<div class="filter-menu filter-button-group">
<div class="f_btn active">
<label><input type="radio" name="fl_radio" value="grid-item" />All</label>
</div>
<div class="f_btn">
<label><input type="radio" name="fl_radio" value="photo" />Photo</label>
</div>
<div class="f_btn">
<label><input type="radio" name="fl_radio" value="video" />Video</label>
</div>
<div class="f_btn">
<label><input type="radio" name="fl_radio" value="music" />Music</label>
</div>
<div class="f_btn">
<label><input type="radio" name="fl_radio" value="design" />Design</label>
</div>
</div>
</div>
</div>
<!-- work items -->
<div class="row grid-items">
<!-- work item photo -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6 grid-item photo">
<div class="box-item card-box">
<div class="image">
<a href="images/works/work1.jpg" class="has-popup-image">
<img src="images/works/work1.jpg" alt="" />
<span class="info">
<span class="icon la la-camera-retro"></span>
</span>
</a>
</div>
<div class="desc">
<a href="images/works/work1.jpg" class="name has-popup-image">Motorcycle Helmet</a>
<div class="category">Photo</div>
</div>
</div>
</div>
<!-- work item video -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6 grid-item video">
<div class="box-item card-box">
<div class="image">
<a href="https://vimeo.com/97102654" class="has-popup-video">
<img src="images/works/work2.jpg" alt="" />
<span class="info">
<span class="icon la la-video-camera"></span>
</span>
</a>
</div>
<div class="desc">
<a href="https://vimeo.com/97102654" class="name has-popup-video">Minimalism Shapes</a>
<div class="category">Video</div>
</div>
</div>
</div>
<!-- work item music -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6 grid-item music">
<div class="box-item card-box">
<div class="image">
<a href="https://w.soundcloud.com/player/?visual=true&url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F221650664&show_artwork=true" class="has-popup-music">
<img src="images/works/work3.jpg" alt="" />
<span class="info">
<span class="icon la la-music"></span>
</span>
</a>
</div>
<div class="desc">
<a href="#" class="name has-popup">Staircase</a>
<div class="category">Music</div>
</div>
</div>
</div>
<!-- work item design -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6 grid-item design">
<div class="box-item card-box">
<div class="image">
<a href="#popup-1" class="has-popup-media">
<img src="images/works/work4.jpg" alt="" />
<span class="info">
<span class="icon la la-image"></span>
</span>
</a>
</div>
<div class="desc">
<a href="#popup-1" class="name has-popup-media">Mobile Application</a>
<div class="category">Design</div>
</div>
<div id="popup-1" class="popup-box mfp-fade mfp-hide">
<div class="content">
<div class="image">
<img src="images/works/work4.jpg" alt="">
</div>
<div class="desc">
<div class="post-box">
<h1>Mobile Application</h1>
<div class="blog-detail">Design</div>
<div class="blog-content">
<p>
So striking at of to welcomed resolved. Northward by described up household therefore
attention. Excellence decisively nay man yet impression for contrasted remarkably.
</p>
<p>
Forfeited you engrossed but gay sometimes explained. Another as studied it to evident.
Merry sense given he be arise. Conduct at an replied removal an amongst. Remaining
determine few her two cordially admitting old.
</p>
<blockquote>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
Curae; Pellentesque suscipit.
</blockquote>
<p>
Tiled say decay spoil now walls meant house. My mr interest thoughts screened of outweigh
removing. Evening society musical besides inhabit ye my. Lose hill well up will he over on.
Increasing sufficient everything men him admiration unpleasing sex.
</p>
<ul class="list-style">
<li>Greatest properly off ham exercise all.</li>
<li>Unsatiable invitation its possession nor off.</li>
<li>All difficulty estimating unreserved increasing the solicitude.</li>
</ul>
<p>
Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means
up civil do an offer wound of.
</p>
</div>
<a href="#" class="button">
<span class="text">View Project</span>
<span class="arrow"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
HTML structure of "Blog" section
<!--
Card - Blog
-->
<div class="card-inner" id="blog-card">
<div class="row card-container">
<!--
Card Wrap
-->
<div class="card-wrap col col-m-12 col-t-12 col-d-8 col-d-lg-6" data-simplebar>
<!-- Blog Image -->
<div class="card-image col col-m-12 col-t-12 col-d-4 col-d-lg-6" style="background-image: url(images/profile4.jpg);"></div>
<!--
Inner Top
-->
<div class="content inner-top">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<div class="title-bg">My Blog</div>
</div>
</div>
</div>
<!--
Blog
-->
<div class="content blog">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- title -->
<div class="title"><span>My</span> Blog</div>
</div>
</div>
<!-- blog items -->
<div class="row">
<!-- blog item -->
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<div class="box-item card-box">
<div class="image">
<a href="blog-post.html">
<img src="images/blog/blog1.jpg" alt="" />
<span class="info">
<span class="icon la la-newspaper-o"></span>
</span>
<span class="date"><strong>20</strong>Jun</span>
</a>
</div>
<div class="desc">
<a href="blog-post.html" class="name">By spite about do of do allow blush</a>
<div class="category">Design</div>
</div>
</div>
</div>
...
</div>
</div>
</div>
</div>
</div>
HTML structure of "Contacts" section
<!--
Card - Contacts
-->
<div class="card-inner" id="contacts-card">
<div class="row card-container">
<!--
Card Wrap
-->
<div class="card-wrap col col-m-12 col-t-12 col-d-8 col-d-lg-6" data-simplebar>
<!-- Map -->
<div class="card-image col col-m-12 col-t-12 col-d-4 col-d-lg-6">
<div class="map" id="map"></div>
</div>
<!--
Inner Top
-->
<div class="content inner-top">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<div class="title-bg">Contacts</div>
</div>
</div>
</div>
<!--
Contacts Info
-->
<div class="content contacts-info">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- title -->
<div class="title"><span>Get</span> in Touch</div>
</div>
</div>
<!-- contacts items -->
<div class="row contacts-items">
<!-- contacts item -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="contacts-item card-box">
<div class="icon"><i class="la la-map-marker"></i></div>
<div class="name">Address</div>
<p>
France, Paris.
</p>
</div>
</div>
<!-- contacts item -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="contacts-item card-box">
<div class="icon"><i class="la la-at"></i></div>
<div class="name">Email</div>
<p>
adlard@example.com
</p>
</div>
</div>
<!-- contacts item -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="contacts-item card-box">
<div class="icon"><i class="la la-phone"></i></div>
<div class="name">Phone</div>
<p>
+123 654 78900
</p>
</div>
</div>
<!-- contacts item -->
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="contacts-item card-box">
<div class="icon"><i class="la la-check-square"></i></div>
<div class="name">Freelance</div>
<p>
Available
</p>
</div>
</div>
</div>
</div>
<!--
Contacts Form
-->
<div class="content contacts-form">
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- title -->
<div class="title"><span>Contact</span> Form</div>
</div>
</div>
<div class="row">
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<!-- form -->
<div class="contact_form card-box">
<form id="cform" method="post">
<div class="row">
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="group-val">
<input type="text" name="name" placeholder="Full Name" />
</div>
</div>
<div class="col col-m-12 col-t-6 col-d-6 col-d-lg-6">
<div class="group-val">
<input type="text" name="email" placeholder="Email Address" />
</div>
</div>
<div class="col col-m-12 col-t-12 col-d-12 col-d-lg-12">
<div class="group-val">
<textarea name="message" placeholder="Your Message"></textarea>
</div>
</div>
</div>
<div class="align-left">
<a href="#" class="button" onclick="$('#cform').submit(); return false;">
<span class="text">Send Message</span>
<span class="icon"><i class="la la-arrow-right"></i></span>
</a>
</div>
</form>
<div class="alert-success">
<p>Thanks, your message is sent successfully.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Icons
In this template are defined some of classes for icons, your can see all icons here - https://icons8.com/line-awesome
Sourse & Credits
Scripts
Fonts
Images
Any Images or logos used in previews are not included in this item or final purchase.