<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Ayesha Kashif</title>
<!--Style sheet
================================================-->
<link rel="stylesheet" href="css/style.css">
<!--Bootstrap 5
================================================-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<!--Font awesome cdn
================================================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.6.0/css/all.min.css"
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/
gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous"
referrerpolicy="no-referrer" />
<!--Google Font Style
================================================-->
<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=Roboto+Slab:wght@700&family=Roboto:wght@400;500&display=swap"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!--Google Font Style
================================================-->
<script src="js/skroll.js" type="text/javascript"></script>
</head>
<body>
<!-- Header Section Start -->
<header>
<!-- navbar -->
<nav class="navbar navbar-expand-lg align-items-center">
<div class="container">
<a class="navbar-brand" href="#"><h2 class="Roboto-Slab text-
white">Ayesha Kashif</h2></a>
<button class="navbar-toggler" type="button" data-bs-
toggle="collapse" data-bs-target="#navbarSupportedContent" aria-
controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"><i class="fa-solid fa-bars
colorGreen"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav align-items-center ms-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link text-white active" aria-current="page"
href="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#skills">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class=" text-white theme-btn ms-2"
href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- benner -->
<div class="banner">
<div class="container">
<div class="row">
<div class="col-12 header">
<h1 class="Roboto-Slab colorGreen fontSize48">Hello I'm</h1>
<h1 class="Roboto-Slab text-white fontSize48" id="name">Ayesha
Kashif</h1>
</div>
<div class="col-5 mt-5">
<p class="text-white">Backend Developer with proven experience
at Digital Skill in <br>helping companies create and maintain a better code base
for reusability.Passionate about learning and development with <br> a desire to
apply skills on a larger development team.
Eager to <br>tackle more complex problems and continue to
find ways to maximize user efficiency.</p>
</div>
<div class="col-12 mt-5">
<ul class="nav social-link">
<li><a href="#"><i class="fa-brands fa-linkedin-in
colorGreen"></i></a></li>
<li><a href="#"><i class="fa-brands fa-github
colorGreen"></i></a></li>
<li><a href="#"><i class="fa-brands fa-youtube
colorGreen"></i></a></li>
<li><a href="#"><i class="fa-brands fa-twitter
colorGreen"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</header>
<!-- Header Section End -->
<!-- About Section Start -->
<section class="about sectionPadding" id="about">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-5 col-md-6 col-sm-12 anim2">
<div class="aboutImage">
<img src="media/profile.png" class="img-fluid">
</div>
</div>
<div class="col-lg-7 col-lg-6 col-sm-12 header mobileCEnter">
<h1 class="Roboto-Slab fontSize40 colorGreen">About Me</h1>
<div class="mt-5 mb-3">
<h2 class="text-white fontSize32 tex">I'm a Backend Developer</h2>
</div>
<div>
<p class="text-white">I am a Back End Developer with experience in
PHP, SQL, Bootstrap, JavaScript, HTML, and CSS. Adept at contributing to a highly
collaborative wok environment, finding solutions, and determining customer
satisfaction. </p>
</div>
<div class="mt-4">
<button class="theme-btn">Contact</button>
</div>
</div>
</div>
</div>
</section>
<!-- About Section End -->
<!-- Services Section Start -->
<section class="sectionPadding services" id="services">
<div class="container">
<div class="row">
<div class="col-lg-7 col-md-6 col-sm-12 anim8">
<div class="line mb-3">
</div>
<div class="mb-5">
<h1 class="Roboto-Slab text-white fontSize40">
What Kind of Services I Provide
</h1>
</div>
<div>
<p class="text-white">I offer services in User Interface (UI) Designs
to make websites visually appealing and easy to use. My Responsive Web Designs
ensure that websites look great on all devices, from phones to desktops. I also
handle Website Design and Implementation, and I use JavaScript frameworks to create
interactive features that improve user engagement.</p>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 mt-4 anim6">
<div class="servicesIcon-box"><i class="fa-regular fa-object-group
text-white"></i></div>
<h4 class="text-white fontSize24">Backend Developer</h4>
<p class="text-white">HTML, CSS, Bootstrap, Javascript, JQuery</p>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mt-4 anim6">
<div class="servicesIcon-box"><i class="fa-solid fa-code text-
white"></i></div>
<h4 class="text-white fontSize24">Backend Developer</h4>
<p class="text-white">PHP, SQL</p>
</div>
</div>
</div>
<div class="col-lg-5 col-md-6 col-sm-12 anim8">
<img src="media/services.png" class="img-fluid">
</div>
</div>
</div>
</section>
<!-- Services Section End -->
<!-- Skills Section Start -->
<section class="sectionPadding skills" id="skills">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-12 anim2">
<h1 class="Roboto-Slab fontSize40 text-white text-center"> My
Skills</h1>
<div class="text-center mt-3">
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim5">
<div class="mb-2">
<span class="text-white fontSize24">HTML</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 80%"></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim6">
<div class="mb-2">
<span class="text-white fontSize24">CSS</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 90%"></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim5">
<div class="mb-2">
<span class="text-white fontSize24">Java Script</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 85%"></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim6">
<div class="mb-2">
<span class="text-white fontSize24">React Js</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim5">
<div class="mb-2">
<span class="text-white fontSize24">PHP</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 70%"></div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim6">
<div class="mb-2">
<span class="text-white fontSize24">SQL</span>
</div>
<div class="progress">
<div class="progress-bar" style="width: 80%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills Section End -->
<!-- Portfolio Section Start -->
<section class="sectionPadding portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-12 text-center anim4">
<h1 class="text-white Roboto-Slab fontSize40">
Portfolio
</h1>
<div class="mt-3">
<h3 class="text-white">
Here It is My Projects.
</h3>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 anim1">
<a href="#" class="portfolioCard-link">
<div class="card">
<img src="media/project1.jpg" class="card-img-top"
height="250px">
<div class="card-body">
<h2 class="text-white fontSize24">University Website</h2>
<p class="text-white">
Html, CSS, Java Script
</p>
<p class="text-white">
This website has four pages: Home, About, Courses, Blog,
and Contact.
</p>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 anim1">
<a href="#" class="portfolioCard-link">
<div class="card">
<img src="media/project2.webp" class="card-img-top"
height="250px">
<div class="card-body">
<h2 class="text-white fontSize24"> Registration Form</h2>
<p class="text-white">
Html, CSS, Bootstrap
</p>
<p class="text-white">
This registration form is designed for a hair salon.
</p>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-4 anim1">
<a href="#" class="portfolioCard-link">
<div class="card">
<img src="media/project3.jpg" class="card-img-top"
height="250px">
<div class="card-body">
<h2 class="text-white fontSize24">Ecommerce Website</h2>
<p class="text-white">
Html, CSS, Java Script,
</p>
<p class="text-white">
This eCommerce website is for a clothing brand and is
designed for Faisal Store.
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Portfolio Section End -->
<!-- Contact Me Section Start -->
<section class="contact sectionPadding" id="contact">
<div class="container">
<div class="row">
<div class="col-12 anim2">
<h1 class="text-white Roboto-Slab fontSize40">Contact Me</h1>
<div class="mt-3">
<p class="text-white">
Here It is my Personal Information
</p>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim6">
<a href="matilto:ayeshakashif098789@gmail.com"
class="contactBoxLink">
<div class="contactBox">
<div class="contactIconBox">
<i class="fa-solid fa-envelope"></i>
</div>
<div class="ms-3">
<h3 class="text-white fontSize24 m-0">Send Email</h3>
<span class="text-white
">ayeshakashif098789@gmail.com</span>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim5">
<a href="tel:09007801" class="contactBoxLink">
<div class="contactBox">
<div class="contactIconBox">
<i class="fa-solid fa-phone"></i>
</div>
<div class="ms-3">
<h3 class="text-white fontSize24 m-0">Phone Number</h3>
<span class="text-white ">03077457801</span>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim6">
<a href="" class="contactBoxLink">
<div class="contactBox">
<div class="contactIconBox">
<i class="fa-brands fa-twitter"></i>
</div>
<div class="ms-3">
<h3 class="text-white fontSize24 m-0">Twitter</h3>
<span class="text-white ">Twitter Id</span>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim2">
<a href="" class="contactBoxLink">
<div class="contactBox">
<div class="contactIconBox">
<i class="fa-brands fa-instagram"></i>
</div>
<div class="ms-3">
<h3 class="text-white fontSize24 m-0">Insta</h3>
<span class="text-white ">@AyeshaKhan</span>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim2">
<a href="" class="contactBoxLink">
<div class="contactBox">
<div class="contactIconBox">
<i class="fa-brands fa-skype"></i>
</div>
<div class="ms-3">
<h3 class="text-white fontSize24 m-0">Skype</h3>
<span class="text-white ">skype id</span>
</div>
</div>
</a>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 mb-4 anim1">
<a href="" class="contactBoxLink">
<div class="contactBox">
<div class="contactIconBox">
<i class="fa-brands fa-linkedin"></i>
</div>
<div class="ms-3">
<h3 class="text-white fontSize24 m-0">Linkdin</h3>
<span class="text-white ">Linkdin id</span>
</div>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- Contact Me Section End -->
<!-- Footer Section Start -->
<footer>
<div class="container">
<div class="row">
<div class="col-12 anim1">
<ul class="nav justify-content-center footerLink">
<li><a href="" class="text-white">Home</a></li>
<li><a href="" class="text-white">About</a></li>
<li><a href="" class="text-white">Services</a></li>
<li><a href="" class="text-white">Skills</a></li>
<li><a href="" class="text-white">Portfolio</a></li>
<li><a href="" class="text-white">Contact</a></li>
</ul>
</div>
<div class="col-12 mt-4 anim1">
<ul class="nav footerSocialIcon justify-content-center">
<li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
<li><a href=""><i class="fa-brands fa-youtube"></i></a></li>
</ul>
</div>
<div class="col-12 text-center mt-3 anim1">
<small class="text-white">All copyright received By Ayesha
Kashif</small>
</div>
</div>
</div>
</footer>
</body>
</html>
