628 lines
29 KiB
HTML
628 lines
29 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html class="no-js" lang="en">
|
|||
|
|
<head>
|
|||
|
|
<title>Crafto - The Multipurpose HTML5 Template</title>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|||
|
|
<meta name="author" content="ThemeZaa">
|
|||
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
|||
|
|
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
|||
|
|
|
|||
|
|
<link rel="shortcut icon" href="images/favicon.png">
|
|||
|
|
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
|||
|
|
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
|||
|
|
|
|||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
|||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="css/vendors.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/icon.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/style.min.css" />
|
|||
|
|
<link rel="stylesheet" href="css/responsive.min.css" />
|
|||
|
|
<link rel="stylesheet" href="demos/freelancer/freelancer.css" />
|
|||
|
|
</head>
|
|||
|
|
<body data-mobile-nav-style="classic" class="custom-cursor">
|
|||
|
|
|
|||
|
|
<div class="cursor-page-inner">
|
|||
|
|
<div class="circle-cursor circle-cursor-inner"></div>
|
|||
|
|
<div class="circle-cursor circle-cursor-outer"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<header>
|
|||
|
|
|
|||
|
|
<nav class="navbar navbar-expand-lg header-transparent bg-transparent disable-fixed" data-header-hover="dark">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="col-auto col-lg-2 me-lg-0 me-auto">
|
|||
|
|
<a class="navbar-brand" href="demo-freelancer.html">
|
|||
|
|
<img src="images/demo-freelancer-logo-white.png" data-at2x="images/demo-freelancer-logo-white@2x.png" alt class="default-logo">
|
|||
|
|
<img src="images/demo-freelancer-logo-white.png" data-at2x="images/demo-freelancer-logo-white@2x.png" alt class="alt-logo">
|
|||
|
|
<img src="images/demo-freelancer-logo-white.png" data-at2x="images/demo-freelancer-logo-white@2x.png" alt class="mobile-logo">
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto col-lg-3 text-end lg-pe-0">
|
|||
|
|
<div class="header-icon">
|
|||
|
|
<a href="cdn-cgi/l/email-protection.html#e486968d858aa4808b89858d8aca878b89" class="text-white"><span class="__cf_email__" data-cfemail="d8baaab1b9b698bcb7b5b9b1b6f6bbb7b5">[email protected]</span></a>
|
|||
|
|
<div class="header-push-button hamburger-push-button icon sm-pe-15px">
|
|||
|
|
<div class="push-button">
|
|||
|
|
<span></span>
|
|||
|
|
<span></span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="push-menu hamburger-nav header-dark hamburger-menu-half bg-dark-gray md-w-60 sm-w-100" style="background-image: url('images/demo-gym-and-fitness-menu-bg.jpg')">
|
|||
|
|
<span class="close-menu text-dark-gray bg-white"><i class="fa-solid fa-xmark"></i></span>
|
|||
|
|
<div class="d-flex flex-column justify-content-center h-100 ps-18 pb-12 xxl-p-12 sm-p-20px">
|
|||
|
|
<div class="hamburger-menu menu-list-wrapper w-80 lg-w-100 lg-no-margin sm-mt-auto sm-mb-auto" data-scroll-options="{ "theme": "light" }">
|
|||
|
|
<ul class="menu-item-list fw-500 p-0">
|
|||
|
|
<li class="menu-item"><a href="demo-freelancer.html#home" class="inner-link nav-link">Home</a></li>
|
|||
|
|
<li class="menu-item"><a href="demo-freelancer.html#about" class="inner-link nav-link">About</a></li>
|
|||
|
|
<li class="menu-item"><a href="demo-freelancer.html#work" class="inner-link nav-link">Work</a></li>
|
|||
|
|
<li class="menu-item"><a href="demo-freelancer.html#expertise" class="inner-link nav-link">Expertise</a></li>
|
|||
|
|
<li class="menu-item"><a href="demo-freelancer.html#awards" class="inner-link nav-link">Awards</a></li>
|
|||
|
|
<li class="menu-item"><a href="demo-freelancer.html#contact" class="inner-link nav-link">Contact</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div class="w-90 xxl-w-100 d-none d-lg-inline-block">
|
|||
|
|
<div class="row row-cols-1 row-cols-xl-2 menu-address">
|
|||
|
|
<div class="col">
|
|||
|
|
<span class="text-white fs-16 ls-05px">Contact information</span>
|
|||
|
|
<div class="h-1px w-90 lg-w-100 bg-white-transparent-extra-light mt-15px mb-15px"></div>
|
|||
|
|
<p class="fs-15 lh-26 w-90 xl-w-100 text-white fw-300">28 New regent view road, New York, USA</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col">
|
|||
|
|
<span class="text-white fs-16 ls-05px">Connect with us</span>
|
|||
|
|
<div class="h-1px w-90 xxl-w-100 bg-white-transparent-extra-light mt-15px mb-15px"></div>
|
|||
|
|
<p class="fs-15 lh-28 w-90 xxl-w-100 lg-mb-0 fw-300"><a href="cdn-cgi/l/email-protection.html#254c4b434a655c4a5057414a48444c4b0b464a48" class="d-block text-white text-white-hover"><span class="__cf_email__" data-cfemail="c4adaaa2ab84bdabb1b6a0aba9a5adaaeaa7aba9">[email protected]</span></a><a href="tel:12345678910" class="text-white text-white-hover">+1 234 567 8910</a></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="full-screen magic-cursor ipad-top-space-margin md-p-0 round-cursor bg-base-color bg-sliding-line overflow-hidden position-relative md-h-850px sm-h-750px" id="home">
|
|||
|
|
<div id="particles-style-01" class="h-100 position-absolute left-0px top-0 w-100" data-particle="true" data-particle-options="{"particles": {"number": {"value": 15,"density": {"enable": true,"value_area": 2000}},"color": {"value": ["#000000", "#000000", "#000000", "#000000", "#000000"]},"shape": {"type": "circle","stroke":{"width":0,"color":"#000000"}},"opacity": {"value": 0.3,"random": false,"anim": {"enable": false,"speed": 1,"sync": false}},"size": {"value": 8,"random": true,"anim": {"enable": false,"sync": true}},"line_linked":{"enable":false,"distance":0,"color":"#ffffff","opacity":0.4,"width":1},"move": {"enable": true,"speed":1,"direction": "right","random": false,"straight": false}},"interactivity": {"detect_on": "canvas","events": {"onhover": {"enable": false,"mode": "repulse"},"onclick": {"enable": false,"mode": "push"},"resize": true}},"retina_detect": false}"></div>
|
|||
|
|
<img src="images/demo-freelancer-05.png" class="position-absolute top-35 left-minus-100px left-img d-none d-md-block" data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)" alt>
|
|||
|
|
<div class="container h-100">
|
|||
|
|
<div class="row align-items-start align-items-lg-center h-100">
|
|||
|
|
<div class="col-xl-6 col-lg-8 md-pt-15" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="fs-150 sm-fs-120 lh-110 text-white fw-700 ls-minus-5px"><span class="text-outline">Brian</span><i class="bi bi-arrow-up-right icon-very-medium lh-0 ms-5px"></i></div>
|
|||
|
|
<div class="ps-20">
|
|||
|
|
<div class="fs-150 sm-fs-120 text-white fw-700 ls-minus-5px">miller</div>
|
|||
|
|
<div class="top-minus-40px sm-top-minus-20px right-minus-3px sm-right-0px position-relative">
|
|||
|
|
<span class="text-white fs-13 lh-36 fw-500 bg-black ps-20px pe-20px text-uppercase d-inline-block ls-1px mb-25px ms-5px">Awards winner freelancer</span>
|
|||
|
|
<div class="fs-19 lh-26 text-black fw-500 w-65 md-w-70 sm-w-100">A creative director based in london. Create identities and <span class="fw-700 text-decoration-line-bottom-medium text-black">digital experiences.</span></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="position-absolute right-100px bottom-minus-100px w-55 md-w-60 xs-w-100 md-right-150px xs-right-0px">
|
|||
|
|
<img src="images/demo-freelancer-03.png" class="position-absolute top-20 right-minus-50px" alt data-bottom-top="transform: translateY(-150px)" data-top-bottom="transform: translateY(150px)">
|
|||
|
|
<img src="images/demo-freelancer-04.png" class="position-absolute top-50 left-150px z-index-9 animation-float" alt data-bottom-top="transform: translateY(-50px)" data-top-bottom="transform: translateY(50px)">
|
|||
|
|
<div class="atropos" data-atropos>
|
|||
|
|
<div class="atropos-scale">
|
|||
|
|
<div class="atropos-rotate">
|
|||
|
|
<div class="atropos-inner text-center">
|
|||
|
|
<div data-atropos-offset="-5" class="position-absolute left-0px right-0px">
|
|||
|
|
<img src="images/demo-freelancer-01.png" alt>
|
|||
|
|
</div>
|
|||
|
|
<img data-atropos-offset="5" class="position-relative" src="images/demo-freelancer-02.png" alt>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="about" class="big-section bg-gradient-top-very-light-gray pb-0 sm-pt-0">
|
|||
|
|
<div class="overlap-section mb-2 top-minus-40px position-relative z-index-9 md-mb-0">
|
|||
|
|
<div class="fs-335 text-white fw-700 ls-minus-10px md-ls-minus-5px text-end text-shadow-large">freelancer</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-12">
|
|||
|
|
<div class="row align-items-center mb-6" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-10">
|
|||
|
|
<span class="text-base-color fw-700 text-uppercase fs-14 ls-05px">About brian miller</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 text-end">
|
|||
|
|
<span class="text-base-color fs-14 fw-700">01</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12 mt-5px">
|
|||
|
|
<div class="separator-line-2px w-100 d-block bg-base-color"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row mb-6">
|
|||
|
|
<div class="col-xl-4 col-lg-5" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<h4 class="fw-700 ls-minus-1px mb-20px">Digital product designer focused on development.</h4>
|
|||
|
|
<p class="w-85 lg-w-100">Currently improving users experience and interface design as lead designer director at crafto theme agency.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-8 col-lg-7" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="row align-items-center border-bottom border-color-light-medium-gray mb-30px pb-30px">
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div class="fs-18 fw-600">Discover</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-9 last-paragraph-no-margin">
|
|||
|
|
<p>Working at the sweet spot between minimalism and sustainability to develop visual solutions that inform and persuade.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row align-items-center border-bottom border-color-light-medium-gray mb-30px pb-30px">
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div class="fs-18 fw-600">Prototyping</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-9 last-paragraph-no-margin">
|
|||
|
|
<p>We spend enough time to uncover business goals and client needs by understanding market trends and unlocking opportunities.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row align-items-center">
|
|||
|
|
<div class="col-md-3">
|
|||
|
|
<div class="fs-18 fw-600">Creation</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-9 last-paragraph-no-margin">
|
|||
|
|
<p>Development is heart of our business. Our skilled designers and developers make sure to deliver tried-tested efficient, scalable.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-4 row-cols-md-2" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col last-paragraph-no-margin lg-mb-30px">
|
|||
|
|
<span class="fw-600">Expertise</span>
|
|||
|
|
<p>Designing and web</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col last-paragraph-no-margin lg-mb-30px">
|
|||
|
|
<span class="fw-600">Born in</span>
|
|||
|
|
<p>London, UK</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col last-paragraph-no-margin sm-mb-30px">
|
|||
|
|
<span class="fw-600">Date of birth</span>
|
|||
|
|
<p>26 December 1984</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col last-paragraph-no-margin">
|
|||
|
|
<span class="fw-600">Education</span>
|
|||
|
|
<p>Master of design</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="work" class="pb-0">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="row align-items-center mb-6" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-10">
|
|||
|
|
<span class="text-base-color fw-700 text-uppercase fs-14 ls-05px">Latest works</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 text-end">
|
|||
|
|
<span class="text-base-color fs-14 fw-700">02</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12 mt-5px">
|
|||
|
|
<div class="separator-line-2px w-100 d-block bg-base-color"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-12 filter-content">
|
|||
|
|
<ul class="portfolio-transform portfolio-wrapper grid-loading grid grid-4col xxl-grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium" data-anime="{ "el": "childs", "translateY": [0, 0], "translateX": [0, 0], "opacity": [0,1], "duration": 800, "delay": 200, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<li class="grid-sizer"></li>
|
|||
|
|
|
|||
|
|
<li class="grid-item web digital branding">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-18.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-18.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Tailoring</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">Branding</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item digital selected">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-19.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-19.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Stream</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">Branding</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item web digital branding">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-179.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-179.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Jeremy</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">Digital</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item selected digital branding">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-21.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-21.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Truenorth</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">Identity</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item digital web branding">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-153.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-153.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Armchair</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">Brochure</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item web digital branding">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-155.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-155.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Aparthotel</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">Development</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item web digital selected branding">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-22.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-22.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Massive</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">e-Commerce</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<li class="grid-item web digital selected branding">
|
|||
|
|
<div class="portfolio-box mousetip-wrapper">
|
|||
|
|
<a href="images/portfolio-154.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
|||
|
|
<div class="portfolio-image overflow-hidden">
|
|||
|
|
<img src="images/portfolio-154.jpg" alt />
|
|||
|
|
</div>
|
|||
|
|
<div class="caption bg-base-color border-radius-4px">
|
|||
|
|
<span class="fs-17 text-white fw-500 lh-10 d-block">Cortifiel</span>
|
|||
|
|
<span class="fs-14 fw-500 text-black lh-initial">Identity</span>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="overflow-hidden position-relative half-section overlap-height pb-0">
|
|||
|
|
<div class="container-fluid overlap-gap-section">
|
|||
|
|
<div class="row position-relative">
|
|||
|
|
<div class="col swiper swiper-width-auto text-center pb-30px sm-pb-0px" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":60, "speed": 8000, "loop": true, "autoplay": { "delay":0, "disableOnInteraction": false }, "allowTouchMove": false, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper marquee-slide">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">branding.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">graphic.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">print.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">illustration.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">packaging.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">web.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">development.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-180 xl-fs-120 sm-fs-80 text-extra-medium-gray fw-600 ls-minus-8px sm-ls-minus-4px word-break-normal">branding.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-base-color bg-sliding-line position-relative pb-0">
|
|||
|
|
<div class="container-fluid overlap-section">
|
|||
|
|
<div class="row position-relative">
|
|||
|
|
<div class="col swiper swiper-width-auto text-center pb-30px sm-pb-0px" data-slider-options="{ "slidesPerView": "auto", "spaceBetween":50, "speed": 8000, "loop": true, "autoplay": { "delay":0, "disableOnInteraction": false, "reverseDirection": true }, "allowTouchMove": false, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper marquee-slide">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">photography.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">packaging.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">digital.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">interface.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">development.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">theme.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">agency.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<div class="fs-150 xl-fs-120 sm-fs-80 text-black fw-600 ls-minus-5px sm-ls-minus-4px word-break-normal">digital.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="expertise" class="container overflow-y-hidden">
|
|||
|
|
<div class="row align-items-end flex-column-reverse flex-lg-row">
|
|||
|
|
<div class="col-lg-7 position-relative overflow-hidden">
|
|||
|
|
<div class="outside-box-bottom-2 outside-box-left-5">
|
|||
|
|
<div class="atropos" data-atropos>
|
|||
|
|
<div class="atropos-scale">
|
|||
|
|
<div class="atropos-rotate">
|
|||
|
|
<div class="atropos-inner text-center overflow-visible">
|
|||
|
|
<div data-atropos-offset="-1" class="position-absolute left-0px right-0px">
|
|||
|
|
<img src="images/demo-freelancer-01.png" class="w-70" alt>
|
|||
|
|
</div>
|
|||
|
|
<img data-atropos-offset="5" class="position-relative" src="images/demo-freelancer-06.png" alt>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-5 mb-6 mt-6 md-mb-0" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<h4 class="fw-600 text-white mb-20px ls-minus-1px">We craft indelible digital experience via unique branding services.</h4>
|
|||
|
|
<p class="w-90 text-black xl-w-100">Currently improving users experience and interface design as lead designer director at crafto agency. Creating brand identities and experiences.</p>
|
|||
|
|
<div class="progress-bar-style-01 mt-14 d-block">
|
|||
|
|
|
|||
|
|
<div class="progress mb-12 sm-mb-20 bg-transparent">
|
|||
|
|
<div class="progress-bar-title d-inline-block text-black text-uppercase fs-14 fw-600">Web design</div>
|
|||
|
|
<div class="progress-bar bg-black" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" aria-label="web-design">
|
|||
|
|
<span class="progress-bar-percent text-center bg-black fs-11 lh-12 text-white">80%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="progress mb-12 sm-mb-20 bg-transparent">
|
|||
|
|
<div class="progress-bar-title d-inline-block text-black text-uppercase fs-14 fw-600">Graphic design</div>
|
|||
|
|
<div class="progress-bar bg-black" role="progressbar" aria-valuenow="98" aria-valuemin="0" aria-valuemax="100" aria-label="graphic-design">
|
|||
|
|
<span class="progress-bar-percent text-center bg-black fs-11 lh-12 text-white">98%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="progress mb-12 sm-mb-20 bg-transparent">
|
|||
|
|
<div class="progress-bar-title d-inline-block text-black text-uppercase fs-14 fw-600">Art direction</div>
|
|||
|
|
<div class="progress-bar bg-black" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" aria-label="art-direction">
|
|||
|
|
<span class="progress-bar-percent text-center bg-black fs-11 lh-12 text-white">85%</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section id="awards" class="pb-0">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12">
|
|||
|
|
<div class="row align-items-center mb-6" data-anime="{ "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-10">
|
|||
|
|
<span class="text-base-color fw-700 text-uppercase fs-14 ls-05px">Honorable awards</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 text-end">
|
|||
|
|
<span class="text-base-color fs-14 fw-700">03</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-12 mt-5px">
|
|||
|
|
<div class="separator-line-2px w-100 d-block bg-base-color"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-xl-4 col-lg-5 last-paragraph-no-margin md-mb-30px" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<h4 class="fw-700 ls-minus-1px mb-20px">Digital product designer focused on development.</h4>
|
|||
|
|
<p class="w-85 lg-w-100">Currently improving users experience and interface design as lead designer director at crafto theme agency.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-8 col-lg-7" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="row g-0">
|
|||
|
|
<div class="col-2 text-center align-self-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">9X</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-8 last-paragraph-no-margin ps-30px pe-30px pt-15px pb-15px border-start border-color-light-medium-gray">
|
|||
|
|
<p>Site of the day - <span class="fw-600 text-dark-gray">Awwwards</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 align-self-center text-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">2021</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row border-top border-color-light-medium-gray g-0">
|
|||
|
|
<div class="col-2 text-center align-self-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">2X</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-8 last-paragraph-no-margin ps-30px pe-30px pt-15px pb-15px border-start border-color-light-medium-gray">
|
|||
|
|
<p>Site of the year - <span class="fw-600 text-dark-gray">CSS Design Awards</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 align-self-center text-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">2020</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row border-top border-color-light-medium-gray g-0">
|
|||
|
|
<div class="col-2 text-center align-self-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">4X</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-8 last-paragraph-no-margin ps-30px pe-30px pt-15px pb-15px border-start border-color-light-medium-gray">
|
|||
|
|
<p>Site of the month - <span class="fw-600 text-dark-gray">Awwwards</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 align-self-center text-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">2019</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row border-top g-0">
|
|||
|
|
<div class="col-2 text-center align-self-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">3X</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-8 last-paragraph-no-margin ps-30px pe-30px pt-15px pb-15px border-start border-color-light-medium-gray">
|
|||
|
|
<p>Site of the year - <span class="fw-600 text-dark-gray">The portfolio</span></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-2 align-self-center text-center">
|
|||
|
|
<span class="text-dark-gray fs-14 fw-600">2018</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<footer id="contact" class="position-relative overflow-hidden pb-0">
|
|||
|
|
<img src="images/demo-freelancer-03.png" class="position-absolute top-0px right-minus-100px" alt>
|
|||
|
|
<div class="container position-relative">
|
|||
|
|
<img src="images/demo-freelancer-04.png" class="position-absolute top-20px right-minus-100px d-none d-md-block" alt>
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-12 position-relative">
|
|||
|
|
<div class="fs-70 md-fs-50 sm-fs-40 ls-minus-3px fw-700 text-black mb-10px sm-ls-minus-1px">Create something great.</div>
|
|||
|
|
<div class="d-inline-block">
|
|||
|
|
<i class="bi bi-envelope icon-extra-large md-icon-large me-10px text-base-color align-middle"></i>
|
|||
|
|
<a href="cdn-cgi/l/email-protection.html#e88a9a818986a88c8785898186c68b8785" class="fs-50 sm-fs-40 text-base-color fw-600 align-middle ls-minus-3px sm-ls-minus-1px"><span class="__cf_email__" data-cfemail="6d0f1f040c032d0902000c0403430e0200">[email protected]</span></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row g-0 align-items-center border-top border-2 border-color-dark-gray pt-30px mt-6 mb-3">
|
|||
|
|
<div class="col-md-7 last-paragraph-no-margin sm-mb-20px">
|
|||
|
|
<p>Development is heart of our business. Our skilled designers and developers make sure to deliver tried-tested efficient, scalable.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-5 elements-social social-text-style-01 text-start text-md-end sm-mb-20px">
|
|||
|
|
<ul class="medium-icon dark fw-600">
|
|||
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a></li>
|
|||
|
|
<li><a class="instagram" href="https://www.instagram.com" target="_blank">Ig.</a></li>
|
|||
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
|
|||
|
|
<li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|||
|
|
<a href="demo-freelancer.html#" class="scroll-top" aria-label="scroll">
|
|||
|
|
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script data-cfasync="false" src="cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="text/javascript" src="js/jquery.js"></script>
|
|||
|
|
<script type="text/javascript" src="js/vendors.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="js/main.js"></script>
|
|||
|
|
|
|||
|
|
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DND93RJKBT"></script>
|
|||
|
|
<script>
|
|||
|
|
window.dataLayer = window.dataLayer || [];
|
|||
|
|
function gtag(){dataLayer.push(arguments);}
|
|||
|
|
gtag('js', new Date());
|
|||
|
|
|
|||
|
|
gtag('config', 'G-DND93RJKBT');
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|