<!DOCTYPE html>
<!--[if IE 7]><html class="no-js ie7 oldie" lang="en-US"> <![endif]-->
<!--[if IE 8]><html class="no-js ie8 oldie" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<head>
<meta charset="utf-8">
<!-- TITLE OF SITE-->
<title> Al Rayhan </title>
<!-- META TAG -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CV, Portfolio, Resume">
<meta name="author" content="Md. Siful Islam, Desiver Web">
<!-- FAVICON -->
<link rel="icon" href="assets/images/favicon.ico">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/images/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-icon-114x114.png">
<!-- ========================================
Stylesheets
==========================================-->
<!-- MATERIALIZE CORE CSS -->
<link href="assets/css/materialize.min.css" rel="stylesheet">
<!-- ADDITIONAL CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- FONTS -->
<link href='//fonts.googleapis.com/css?family=Roboto:400,100,300,700,400italic,700italic' rel='stylesheet' type='text/css'>
<!--FONTAWESOME CSS-->
<link href="assets/icons/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- CUSTOM STYLE -->
<link href="assets/css/nav.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<!-- RESPONSIVE CSS-->
<link href="assets/css/responsive.css" rel="stylesheet">
<!-- COLORS -->
<!--<link rel="alternate stylesheet" href="assets/css/colors/red.css" title="red">-->
<!--<link rel="alternate stylesheet" href="assets/css/colors/purple.css" title="purple">-->
<!--<link rel="alternate stylesheet" href="assets/css/colors/orange.css" title="orange">-->
<!--<link rel="alternate stylesheet" href="assets/css/colors/green.css" title="green">-->
<!--<link rel="stylesheet" href="assets/css/colors/lime.css" title="lime">-->
<!--[if lt IE 9]><script src="assets/js/ie8-responsive-file-warning.js"></script><![endif] -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Start Container-->
<div class="container">
<!-- row -->
<div class="row">
<!-- =========================================
SIDEBAR
==========================================-->
<!-- Start Sidebar -->
<aside class="col l4 m12 s12 sidebar z-depth-1" id="sidebar">
<!-- Sidebar row -->
<div class="row">
<!-- top section -->
<div class="heading">
<!-- ====================
IMAGE
==========================-->
<div class="feature-img">
<a href="index.html"><img src="assets/images/profile-img.jpg" class="responsive-img" alt=""></a>
</div>
<!-- =========================================
NAVIGATION
==========================================-->
<div class=" nav-icon">
<nav>
<div class="nav-wrapper">
<ul id="nav-mobile" class="side-nav">
<li><a href="index.html">Resume</a></li>
<li><a href="project.html">Projects</a></li>
<li><a href="cover-latter.html">Cover Latter</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse "><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
</div>
<!-- ========================================
NAME AND TAGLINE
==========================================-->
<div class="title col s12 m12 l9 right wow fadeIn" data-wow-delay="0.1s">
<h2>Al Rayhan</h2> <!-- title name -->
<span>UI & UX Expert</span> <!-- tagline -->
</div>
</div>
<!-- sidebar info -->
<div class="col l12 m12 s12 sort-info sidebar-item">
<div class="row">
<div class="col m12 s12 l3 icon"> <!-- icon -->
<i class="fa fa-user"></i>
</div>
<div class="col m12 s12 l9 info wow fadeIn a1" data-wow-delay="0.1s" > <!-- text -->
<div class="section-item-details">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua . Ld do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
</div>
</div>
</div>
</div>
<!-- MOBILE NUMBER -->
<div class="col l12 m12 s12 mobile sidebar-item">
<div class="row">
<div class="col m12 s12 l3 icon">
<i class="fa fa-phone"></i> <!-- icon -->
</div>
<div class="col m12 s12 l9 info wow fadeIn a2" data-wow-delay="0.2s" >
<div class="section-item-details">
<div class="personal">
<h4><a href="tel:555-555-5555">(111)-333-4444</a></h4> <!-- Number -->
<span>mobile</span>
</div>
<div class="work">
<h4><a href="tel:555-555-5555">(121)-323-3494</a></h4> <!-- Number -->
<span>work</span>
</div>
</div>
</div>
</div>
</div>
<!-- EMAIL -->
<div class="col l12 m12 s12 email sidebar-item ">
<div class="row">
<div class="col m12 s12 l3 icon">
<i class="fa fa-envelope"></i> <!-- icon -->
</div>
<div class="col m12 s12 l9 info wow fadeIn a3" data-wow-delay="0.3s">
<div class="section-item-details">
<div class="personal">
<h4><a href="mailto:someone@example.com">mail@alrayhan.com</a></h4> <!-- Email -->
<span>personal</span>
</div>
<div class="work">
<h4><a href="mailto:someone@example.com">ar@deviserweb.com</a></h4> <!-- Email -->
<span>work</span> <br>
</div>
</div>
</div>
</div>
</div>
<!-- ADDRESS -->
<div class="col l12 m12 s12 address sidebar-item ">
<div class="row">
<div class="col l3 m12 s12 icon">
<i class="fa fa-home"></i> <!-- icon -->
</div>
<div class="col m12 s12 l9 info wow fadeIn a4" data-wow-delay="0.4s">
<div class="section-item-details">
<div class="address-details"> <!-- address -->
<h4>24 Golden Tower <span>(2nd floor)</span><br>
Amborkhana, Sylhet.<br>
<span>SYL-3RF87W</span></h4>
</div>
</div>
</div>
</div>
</div>
<!-- SKILLS -->
<div class="col l12 m12 s12 skills sidebar-item" >
<div class="row">
<div class="col m12 l3 s12 icon">
<i class="fa fa-calendar-o"></i> <!-- icon -->
</div>
<!-- Skills -->
<div class="col m12 l9 s12 skill-line a5 wow fadeIn" data-wow-delay="0.5s">
<h3>Professional Skills </h3>
<span>Adobe Photoshop</span>
<div class="progress">
<div class="determinate"> 70% </div>
</div>
<span>HTML</span>
<div class="progress">
<div class="determinate"> 95%</div>
</div>
<span>CSS</span>
<div class="progress">
<div class="determinate">90%</div>
</div>
<span>Javascript</span>
<div class="progress">
<div class="determinate">85%</div>
</div>
<span>PHP</span>
<div class="progress">
<div class="determinate">70%</div>
</div>
<span>JAVA</span>
<div class="progress">
<div class="determinate">55%</div>
</div>
<span>SQL</span>
<div class="progress">
<div class="determinate">40%</div>
</div>
</div>
</div>
</div>
</div> <!-- end row -->
</aside><!-- end sidebar -->
<!-- =========================================
Work experiences
==========================================-->
<section class="col s12 m12 l8 section">
<div class="row">
<div class="full-portfolio">
<div class="wow fadeIn a1" data-wow-delay="0.1s">
<div class="portfolio-nav section-wrapper z-depth-1">
<ul>
<li class="filter" data-filter="all">Show All</li>
<li class="filter" data-filter=".category-1">Art</li>
<li class="filter" data-filter=".category-2">Icons</li>
<li class="filter" data-filter=".category-4">Materials</li>
</ul>
</div>
<div id="loader">
<div class="loader-icon"></div>
</div>
<div class="screenshots" id="portfolio-item" >
<div class="row">
<ul class="grid">
<!-- Portfolio one-->
<li class="col m6 s1 2 mix category-1">
<a href="portfolio-full.html" class="sa-view-project-detail" data-action="#project-one">
<figure class="more">
<img src="assets/images/p.jpg" alt="Screenshot 01" class="">
<figcaption>
<div class="caption-content">
<div class="single_image">
<h2>Minimal Design</h2>
<p>Work hard for what you want because
it won't come to you without a fight</p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- Portfolio two-->
<li class="col m6 s12 mix category-2">
<a href="portfolio-full.html" class="sa-view-project-detail" data-action="#project-two">
<figure class="more">
<img src="assets/images/p-1.jpg" alt="Screenshot 01" class="">
<figcaption>
<div class="caption-content">
<div class="single_image">
<h2>Lorem Design</h2>
<p>Work hard for what you want because
it won't come to you without a fight</p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- Portfolio three-->
<li class="col m6 s12 mix category-1">
<a href="portfolio-full.html" class="sa-view-project-detail" data-action="#project-three">
<figure class="more">
<img src="assets/images/p-2.jpg" alt="Screenshot 01" class="">
<figcaption>
<div class="caption-content">
<div class="single_image">
<h2>Creative Design</h2>
<p>Lorem Ipsum because
it won't come to you without a fight</p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- Portfolio four-->
<li class="col m6 s12 mix category-2">
<a href="portfolio-full.html" class="sa-view-project-detail" data-action="#project-four">
<figure class="more">
<img src="assets/images/p-3.jpg" alt="Screenshot 01" class="">
<figcaption>
<div class="caption-content">
<div class="single_image">
<h2>Material Design</h2>
<p>Work hard for what you want because
it won't come to you.</p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- Portfolio five-->
<li class="col m6 s12 mix category-4">
<a href="portfolio-full.html" class="sa-view-project-detail" data-action="#project-five">
<figure class="more">
<img src="assets/images/p-5.jpg" alt="Screenshot 01" class="">
<figcaption>
<div class="caption-content">
<div class="single_image">
<h2>Clean Code</h2>
<p>You want because
it won't come to you without a fight</p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- Portfolio six-->
<li class="col m6 s12 mix category-1">
<a href="portfolio-full.html" class="sa-view-project-detail" data-action="#project-six">
<figure class="more">
<img src="assets/images/p-6.jpg" alt="Screenshot 01" class="">
<figcaption>
<div class="caption-content">
<div class="single_image">
<h2>SEO Optimize</h2>
<p>Work hard for what you want because
it won't come to you without a fight</p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- Portfolio seven-->
<li class="col m6 s12 l6 mix category-2">
<a href="project.html" class="sa-view-project-detail" data-action="#project-seven">
<figure class="more">
<img src="assets/images/p-7.jpg" alt="Screenshot">
<figcaption>
<div class="caption-content">
<div class="single_image">
<h2>Responsive Design</h2>
<p>Work hard for what you want because
it won't come to you without a fight</p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
<!-- Portfolio eight-->
<li class="col m6 s12 l6 mix category-3">
<a href="project.html" class="sa-view-project-detail" data-action="#project-eight">
<figure class="more">
<img src="assets/images/p-8.jpg" alt="Screenshot 01">
<figcaption>
<div class="caption-content ">
<div class="single_image">
<h2>Minimal Design</h2>
<p>
Work hard for what you want need lorem ipsuum. </p>
</div>
</div>
</figcaption>
</figure>
</a>
</li>
</ul>
</div>
</div>
<!-- PROJECT DETAILS WILL BE LOADED HERE -->
<div class="sa-project-gallery-view" id="project-gallery-view"></div>
<div class="back-btn col s12">
<a id="back-button" class="btn btn-info waves-effect" href="#" ><i class="fa fa-long-arrow-left"></i> Go Back </a>
</div>
</div>
</div>
<!-- =======================================
portfolio Website
==========================================-->
<div class="clear"></div>
<div class="section-wrapper z-depth-1 wow fadeIn" data-wow-delay="0.1s">
<div class="col s12 m12 l10 website right" >
<div class="row">
<div class="col s12 m12 l6">
<span><a href="">www.alrayhan.com</a></span>
</div>
<div class="col col s12 m12 l6">
<span><a href="">www.dribble.com/rtralrayhan</a></span>
</div>
</div>
</div>
</div>
</div><!-- end row -->
</section><!-- end section -->
</div> <!-- end row -->
</div> <!-- end container -->
<!--=====================
JavaScript
===================== -->
<!-- Jquery core js-->
<script src="assets/js/jquery.min.js"></script>
<!-- materialize js-->
<script src="assets/js/materialize.min.js"></script>
<!-- wow js-->
<script src="assets/js/wow.min.js"></script>
<!-- Map api -->
<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
<!-- Masonry js-->
<script src="assets/js/masonry.pkgd.js"></script>
<script src="assets/js/validator.min.js"></script>
<script src="assets/js/jquery.mixitup.min.js"></script>
<!-- Customized js -->
<script src="assets/js/init.js"></script>
</body>
</html>