Hi! I'am Mark Hernandez
I'am a freelance, front designer & web programmer. I serve a variety of website design services to meet your needs. With more than 7 years of experience in the field of website design will make your website become professional and SEO friendly.
-
Date of birth: 1 may 1990
-
Email: support@domain.com
-
Phone: +1-234-456-7890
-
Location: Amphitheatre, Mountain View 3465, USA
HTML
CSS
JS
PHP
SASS
<!-- =========={ PROGRESS }========== -->
<div id="progress" class="section pt-6 pt-md-7 pb-5 pb-md-6 bg-light-dark">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="me-2">
<h2 class="fw-bold mb-3"><span class="fw-light">Hi! I'am</span> Mark Hernandez</h2>
<p>I'am a freelance, front designer & web programmer. I serve a variety of website design services to meet your needs. With more than 7 years of experience in the field of website design will make your website become professional and SEO friendly.</p>
<ul class="list-unstyled">
<li>
<div class="pb-2">
<p>
<!-- <i class="fas fa-calendar me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="80" width="416" height="384" rx="48" ry="48" style="fill:none;stroke:currentColor;stroke-linejoin:round;stroke-width:32px"/><path d="M397.82,80H114.18C77.69,80,48,110.15,48,147.2V208H64c0-16,16-32,32-32H416c16,0,32,16,32,32h16V147.2C464,110.15,434.31,80,397.82,80Z"/><circle cx="296" cy="232" r="24"/><circle cx="376" cy="232" r="24"/><circle cx="296" cy="312" r="24"/><circle cx="376" cy="312" r="24"/><circle cx="136" cy="312" r="24"/><circle cx="216" cy="312" r="24"/><circle cx="136" cy="392" r="24"/><circle cx="216" cy="392" r="24"/><circle cx="296" cy="392" r="24"/><line x1="128" y1="48" x2="128" y2="80" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="384" y1="48" x2="384" y2="80" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<span class="fw-bold">Date of birth:</span> 1 may 1990
</p>
</div>
</li>
<li>
<p>
<!-- <i class="fas fa-envelope me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1" fill="currentColor" viewBox="0 0 512 512"><rect x="48" y="96" width="416" height="320" rx="40" ry="40" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="112 160 256 272 400 160" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<span class="fw-bold">Email:</span> support@domain.com
</p>
</li>
<li>
<p>
<!-- <i class="fas fa-phone fas-rotate-90 me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1" fill="currentColor" viewBox="0 0 512 512"><path d="M451,374c-15.88-16-54.34-39.35-73-48.76C353.7,313,351.7,312,332.6,326.19c-12.74,9.47-21.21,17.93-36.12,14.75s-47.31-21.11-75.68-49.39-47.34-61.62-50.53-76.48,5.41-23.23,14.79-36c13.22-18,12.22-21,.92-45.3-8.81-18.9-32.84-57-48.9-72.8C119.9,44,119.9,47,108.83,51.6A160.15,160.15,0,0,0,83,65.37C67,76,58.12,84.83,51.91,98.1s-9,44.38,23.07,102.64,54.57,88.05,101.14,134.49S258.5,406.64,310.85,436c64.76,36.27,89.6,29.2,102.91,23s22.18-15,32.83-31a159.09,159.09,0,0,0,13.8-25.8C465,391.17,468,391.17,451,374Z" style="fill:none;stroke:currentColor;stroke-miterlimit:10;stroke-width:32px"/></svg>
<span class="fw-bold">Phone:</span> +1-234-456-7890
</p>
</li>
<li>
<p>
<!-- <i class="fas fa-map-marker-alt me-2"></i> -->
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" class="me-1" fill="currentColor" viewBox="0 0 512 512"><path d="M256,48c-79.5,0-144,61.39-144,137,0,87,96,224.87,131.25,272.49a15.77,15.77,0,0,0,25.5,0C304,409.89,400,272.07,400,185,400,109.39,335.5,48,256,48Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="256" cy="192" r="48" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
<span class="fw-bold">Location:</span> Amphitheatre, Mountain View 3465, USA
</p>
</li>
</ul>
</div>
</div>
<div class="col-lg-6 col-xl-5 offset-xl-1">
<!-- progresss bar -->
<div class="progress-line-trigger">
<div class="my-4">
<div class="progress-header">
<h6 class="progress-title">HTML</h6>
</div>
<div class="progress-area mb-3">
<div class="progress-bar" data-percent="83"></div>
</div>
</div>
<div class="mb-4">
<div class="progress-header">
<h6 class="progress-title">CSS</h6>
</div>
<div class="progress-area mb-3">
<div class="progress-bar" data-percent="95"></div>
</div>
</div>
<div class="mb-4">
<div class="progress-header">
<h6 class="progress-title">JS</h6>
</div>
<div class="progress-area mb-3">
<div class="progress-bar" data-percent="63"></div>
</div>
</div>
<div class="mb-4">
<div class="progress-header">
<h6 class="progress-title">PHP</h6>
</div>
<div class="progress-area mb-3">
<div class="progress-bar" data-percent="73"></div>
</div>
</div>
<div class="mb-4">
<div class="progress-header">
<h6 class="progress-title">SASS</h6>
</div>
<div class="progress-area mb-3">
<div class="progress-bar" data-percent="83"></div>
</div>
</div>
</div><!-- end progress bar -->
</div>
</div>
</div>
</div><!-- End progress -->
Our Statistic
We are solid Company and have million clients
UI/UX
SEO
Web
Apps
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
More Statistic
<!-- =========={ PROGRESS }========== -->
<div id="progress" class="section py-6 py-md-7 bg-body">
<div class="container">
<header class="text-center mx-auto mb-6">
<h2 class="h3 fw-bold"><span class="fw-light">Our</span> Statistic</h2>
<hr class="divider my-4 bg-warning border-warning">
<p class="lead text-muted">We are solid Company and have million clients</p>
</header>
<div class="row">
<div class="col-md-6 progress-vertical-trigger">
<div class="row">
<!-- Vertical Progress Bar -->
<div class="col-3 text-center">
<div class="progress-vertical rounded mb-3">
<div class="progress-vertical-line" data-percent="73"></div>
</div>
<p class="h6">UI/UX</p>
</div>
<!-- Vertical Progress Bar -->
<div class="col-3 text-center">
<div class="progress-vertical rounded mb-3">
<div class="progress-vertical-line" data-percent="53"></div>
</div>
<p class="h6">SEO</p>
</div>
<!-- Vertical Progress Bar -->
<div class="col-3 text-center">
<div class="progress-vertical rounded mb-3">
<div class="progress-vertical-line" data-percent="83"></div>
</div>
<p class="h6">Web</p>
</div>
<!-- Vertical Progress Bar -->
<div class="col-3 text-center">
<div class="progress-vertical rounded mb-3">
<div class="progress-vertical-line" data-percent="93"></div>
</div>
<p class="h6">Apps</p>
</div>
</div>
</div>
<div class="col-md-5 ms-md-auto">
<p class="lead mb-4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
<a href="#" class="btn btn-warning hover-button-up">
More Statistic
<svg class="bi bi-graph-up ms-2" width="1rem" height="1rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h1v16H0V0zm1 15h15v1H1v-1z"></path>
<path fill-rule="evenodd" d="M14.39 4.312L10.041 9.75 7 6.707l-3.646 3.647-.708-.708L7 5.293 9.959 8.25l3.65-4.563.781.624z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M10 3.5a.5.5 0 01.5-.5h4a.5.5 0 01.5.5v4a.5.5 0 01-1 0V4h-3.5a.5.5 0 01-.5-.5z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
</div><!-- End progress-->