Files
portfolio/index.html
Mohammed Al-yaseen 7870a4dd65 Add logo icon
2023-09-24 10:24:31 +03:00

808 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="TemplateMo" />
<title>Mohammed Al-yaseen</title>
<!-- CSS FILES -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap"
rel="stylesheet"
/>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap-icons.css" rel="stylesheet" />
<link href="css/magnific-popup.css" rel="stylesheet" />
<link href="css/templatemo-first-portfolio-style.css" rel="stylesheet" />
<link rel="icon" href="images/logo.png" />
</head>
<body>
<section class="preloader">
<div class="spinner">
<span class="spinner-rotate"></span>
</div>
</section>
<nav class="navbar navbar-expand-lg">
<div class="container">
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<a href="index.html" class="navbar-brand mx-auto mx-lg-0">First</a>
<div class="d-flex align-items-center d-lg-none">
<i class="navbar-icon bi-telephone-plus me-3"></i>
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-lg-5">
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_2">About</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_3">Services</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_4">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_5">Contact</a>
</li>
</ul>
<div class="d-lg-flex align-items-center d-none ms-auto">
<i class="navbar-icon bi-telephone-plus me-3"></i>
<a class="custom-btn btn" href="#section_5"> +963-962-469-482 </a>
</div>
</div>
</div>
</nav>
<main>
<section
class="hero d-flex justify-content-center align-items-center"
id="section_1"
>
<div class="container">
<div class="row">
<div class="col-lg-7 col-12">
<div class="hero-text">
<div class="hero-title-wrap d-flex align-items-center mb-4">
<img
src="images/happy-bearded-young-man.jpg"
class="avatar-image avatar-image-large img-fluid"
alt=""
/>
<h1 class="hero-title ms-3 mb-0">Hello friend!</h1>
</div>
<h2 class="mb-4">Im available for freelance work.</h2>
<p class="mb-4">
<a class="custom-btn btn custom-link" href="#section_2"
>Let's begin</a
>
</p>
</div>
</div>
<!-- <div class="col-lg-5 col-12 position-relative">
<div class="hero-image-wrap"></div>
<img
src="images/portrait-happy-excited-man-holding-laptop-computer.png"
class="hero-image img-fluid"
alt=""
/>
</div> -->
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path
fill="#535da1"
fill-opacity="1"
d="M0,160L24,160C48,160,96,160,144,138.7C192,117,240,75,288,64C336,53,384,75,432,106.7C480,139,528,181,576,208C624,235,672,245,720,240C768,235,816,213,864,186.7C912,160,960,128,1008,133.3C1056,139,1104,181,1152,202.7C1200,224,1248,224,1296,197.3C1344,171,1392,117,1416,90.7L1440,64L1440,0L1416,0C1392,0,1344,0,1296,0C1248,0,1200,0,1152,0C1104,0,1056,0,1008,0C960,0,912,0,864,0C816,0,768,0,720,0C672,0,624,0,576,0C528,0,480,0,432,0C384,0,336,0,288,0C240,0,192,0,144,0C96,0,48,0,24,0L0,0Z"
></path>
</svg>
</section>
<section class="about section-padding" id="section_2">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<img
src="images/couple-working-from-home-together-sofa.jpg"
class="about-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
<div class="about-thumb">
<div
class="section-title-wrap d-flex justify-content-end align-items-center mb-4"
>
<h2 class="text-white me-4 mb-0">My Story</h2>
<img
src="images/happy-bearded-young-man.jpg"
class="avatar-image img-fluid"
alt=""
/>
</div>
<h3 class="pt-2 mb-3">a little bit about Mohammed</h3>
<p>
Work in a challenging environment in a company or organization
in the web developing or maintenance where I can utilize my
capabilities to advance in my career. I am self-motivated,
ambitious, and eager to learn. I am a responsible individual
with strong communication skills and a work ethic besides
being creative, ocused, and highly determined. I am willing to
take responsibility and work independently. At the same time,
I can work well in teams.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="featured section-padding">
<div class="container">
<div class="row">
<div class="col-lg-6 col-12">
<div class="profile-thumb">
<div class="profile-title">
<h4 class="mb-0">Information</h4>
</div>
<div class="profile-body">
<p>
<span class="profile-small-title">Name</span>
<span>Mohammed Al-yaseen</span>
</p>
<p>
<span class="profile-small-title">Birthday</span>
<span>Jun 1, 1998</span>
</p>
<p>
<span class="profile-small-title">Phone</span>
<span
><a href="tel:+963-962-469-482">
+963-962-469-482
</a></span
>
</p>
<p>
<span class="profile-small-title">Email</span>
<span
><a href="mailto:mohammed.alyaseen.it@gmail.com"
>mohammed.alyaseen.it@gmail.com</a
></span
>
</p>
</div>
</div>
</div>
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
<div class="about-thumb">
<div class="row">
<div class="col-lg-6 col-6 featured-border-bottom py-2">
<strong class="featured-numbers">2+</strong>
<p class="featured-text">Years of Experiences</p>
</div>
<div
class="col-lg-6 col-6 featured-border-start featured-border-bottom ps-5 py-2"
>
<strong class="featured-numbers">5</strong>
<p class="featured-text">Happy Customers</p>
</div>
<div class="col-lg-6 col-6 pt-4">
<strong class="featured-numbers">10</strong>
<p class="featured-text">Project Finished</p>
</div>
<div class="col-lg-6 col-6 featured-border-start ps-5 pt-4">
<strong class="featured-numbers">7+</strong>
<p class="featured-text">Digital Awards</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--
<section class="clients section-padding">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-12 col-12">
<h3 class="text-center mb-5">Companies I've had worked</h3>
</div>
<div class="col-lg-2 col-4 ms-auto clients-item-height">
<img
src="images/clients/cachet.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 clients-item-height">
<img
src="images/clients/guitar-center.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 clients-item-height">
<img
src="images/clients/tokico.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 clients-item-height">
<img
src="images/clients/shopify.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
<div class="col-lg-2 col-4 me-auto clients-item-height">
<img
src="images/clients/profil-rejser.svg"
class="clients-image img-fluid"
alt=""
/>
</div>
</div>
</div>
</section>
-->
<section class="projects section-padding" id="section_4">
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-8 col-12 ms-auto">
<div
class="section-title-wrap d-flex justify-content-center align-items-center mb-4"
>
<img
src="images/white-desk-work-study-aesthetics.jpg"
class="avatar-image img-fluid"
alt=""
/>
<h2 class="text-white ms-4 mb-0">Projects</h2>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-4 col-md-6 col-12">
<div class="projects-thumb">
<div class="projects-info">
<small class="projects-tag">Website</small>
<h3 class="projects-title">NANS's CRM</h3>
</div>
<a
href="images/projects/nanas-main-dashboard.png"
class="popup-image"
>
<img
src="images/projects/nanas-main-dashboard.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="projects-thumb">
<div class="projects-info">
<small class="projects-tag">Website</small>
<h3 class="projects-title">Majsin's Restaurant</h3>
</div>
<a
href="images/projects/majsin-dashborad.png"
class="popup-image"
>
<img
src="images/projects/majsin-dashborad.png"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="projects-thumb">
<div class="projects-info">
<small class="projects-tag">Website</small>
<h3 class="projects-title">BPro's ERP System</h3>
</div>
<a href="images/projects/bpro-erp.jpg" class="popup-image">
<img
src="images/projects/bpro-erp.jpg"
class="projects-image img-fluid"
alt=""
/>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="services section-padding" id="section_3">
<div class="container">
<div class="row">
<div class="col-lg-10 col-12 mx-auto">
<div
class="section-title-wrap d-flex justify-content-center align-items-center mb-5"
>
<img
src="images/handshake-man-woman-after-signing-business-contract-closeup.jpg"
class="avatar-image img-fluid"
alt=""
/>
<h2 class="text-white ms-4 mb-0">Services</h2>
</div>
<div class="row pt-lg-5">
<div class="col-lg-6 col-12">
<div class="services-thumb">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Websites</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$2,400</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
You may want to explore Too CSS for great collection of
free HTML CSS templates.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-globe"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb services-thumb-up">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Branding</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$1,200</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
You can explore more CSS templates on TemplateMo website
by browsing through different tags.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-lightbulb"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">Ecommerce</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$3,600</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
If you need a customized ecommerce website for your
business, feel free to discuss with me.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-phone"></i>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="services-thumb services-thumb-up">
<div
class="d-flex flex-wrap align-items-center border-bottom mb-4 pb-3"
>
<h3 class="mb-0">SEO</h3>
<!-- <div class="services-price-wrap ms-auto">
<p class="services-price-text mb-0">$1,450</p>
<div class="services-price-overlay"></div>
</div> -->
</div>
<p>
To list your website first on any search engine, we will
work together. First Portfolio is one-page CSS Template
for free download.
</p>
<a href="#" class="custom-btn custom-border-btn btn mt-3"
>Discover More</a
>
<div
class="services-icon-wrap d-flex justify-content-center align-items-center"
>
<i class="services-icon bi-google"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="contact section-padding" id="section_5">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-8 col-12">
<div
class="section-title-wrap d-flex justify-content-center align-items-center mb-5"
>
<img
src="images/aerial-view-man-using-computer-laptop-wooden-table.jpg"
class="avatar-image img-fluid"
alt=""
/>
<h2 class="text-white ms-4 mb-0">Say Hi</h2>
</div>
</div>
<div class="clearfix"></div>
<div class="col-lg-3 col-md-6 col-12 pe-lg-0">
<div
class="contact-info contact-info-border-start d-flex flex-column"
>
<strong class="site-footer-title d-block mb-3">Services</strong>
<ul class="footer-menu">
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">Websites</a>
</li>
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">Branding</a>
</li>
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">Ecommerce</a>
</li>
<li class="footer-menu-item">
<a href="#" class="footer-menu-link">SEO</a>
</li>
</ul>
<strong class="site-footer-title d-block mt-4 mb-3"
>Stay connected</strong
>
<ul class="social-icon">
<li class="social-icon-item">
<a
href="https://www.linkedin.com/in/mohammed-al-yaseen-79b056161/"
class="social-icon-link bi-linkedin"
target="_blank"
></a>
</li>
<li class="social-icon-item">
<a
href="https://github.com/mohammed-alyaseen"
class="social-icon-link bi-github"
target="_blank"
></a>
</li>
<li class="social-icon-item">
<a
href="https://www.facebook.com/profile.php?id=100010330412662"
class="social-icon-link bi-facebook"
target="_blank"
></a>
</li>
<li class="social-icon-item">
<a
href="https://www.youtube.com/templatemo"
class="social-icon-link bi-youtube"
target="_blank"
></a>
</li>
</ul>
<strong class="site-footer-title d-block mt-4 mb-3"
>Start a project</strong
>
<p class="mb-0">Im available for freelance projects</p>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12 ps-lg-0">
<div class="contact-info d-flex flex-column">
<strong class="site-footer-title d-block mb-3">About</strong>
<p class="mb-2">
Mohammed is a professional web developer. Feel free to get in
touch with me.
</p>
<strong class="site-footer-title d-block mt-4 mb-3"
>Email</strong
>
<p style="word-break: break-all">
<a href="mailto:mohammed.alyaseen.it@gmail.com">
mohammed.alyaseen.it@gmail.com
</a>
</p>
<strong class="site-footer-title d-block mt-4 mb-3"
>Call</strong
>
<p class="mb-0">
<a href="tel:+963-962-469-482"> +963-962-469-482 </a>
</p>
</div>
</div>
<div class="col-lg-6 col-12 mt-5 mt-lg-0">
<form
action="#"
method="get"
class="custom-form contact-form"
role="form"
>
<div class="row">
<div class="col-lg-6 col-md-6 col-12">
<div class="form-floating">
<input
type="text"
name="name"
id="name"
class="form-control"
placeholder="Name"
required=""
/>
<label>Name</label>
</div>
</div>
<div class="col-lg-6 col-md-6 col-12">
<div class="form-floating">
<input
type="email"
name="email"
id="email"
pattern="[^ @]*@[^ @]*"
class="form-control"
placeholder="Email address"
required=""
/>
<label>Email address</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline">
<input
name="website"
type="checkbox"
class="form-check-input"
id="inlineCheckbox1"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox1">
<i class="bi-globe form-check-icon"></i>
<span class="form-check-label-text">Websites</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline">
<input
name="branding"
type="checkbox"
class="form-check-input"
id="inlineCheckbox2"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox2">
<i class="bi-lightbulb form-check-icon"></i>
<span class="form-check-label-text">Branding</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline">
<input
name="ecommerce"
type="checkbox"
class="form-check-input"
id="inlineCheckbox3"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox3">
<i class="bi-phone form-check-icon"></i>
<span class="form-check-label-text">Ecommerce</span>
</label>
</div>
</div>
<div class="col-lg-3 col-md-6 col-6">
<div class="form-check form-check-inline me-0">
<input
name="seo"
type="checkbox"
class="form-check-input"
id="inlineCheckbox4"
value="1"
/>
<label class="form-check-label" for="inlineCheckbox4">
<i class="bi-google form-check-icon"></i>
<span class="form-check-label-text">SEO</span>
</label>
</div>
</div>
<div class="col-lg-12 col-12">
<div class="form-floating">
<textarea
class="form-control"
id="message"
name="message"
placeholder="Tell me about the project"
></textarea>
<label>Tell me about the project</label>
</div>
</div>
<div class="col-lg-3 col-12 ms-auto">
<button type="submit" class="form-control">Send</button>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">
<div class="copyright-text-wrap">
<p class="mb-0">
<span class="copyright-text"
>Copyright © 2036 <a href="#">First Portfolio</a> Company. All
rights reserved.</span
>
Design:
<a rel="sponsored" href="https://templatemo.com" target="_blank"
>TemplateMo</a
>
</p>
</div>
</div>
</div>
</div>
</footer>
<!-- JAVASCRIPT FILES -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/click-scroll.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/magnific-popup-options.js"></script>
<script src="js/custom.js"></script>
</body>
</html>