Skip to content

profile pic updated #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+1,093 −937
Open

profile pic updated #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 43 additions & 32 deletions 404.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>404</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="/img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -52,7 +56,7 @@
<div id="main-area">
<div class="header-section">
<ul class="nav justify-content-center">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="#">Category 1</a>
</li>
<li class="nav-item">
@@ -62,39 +66,41 @@
<a class="nav-link" href="#">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="input-group col-md-6 offset-md-3 search-box">
<input type="text" class="form-control" id="search" placeholder="Search" required autocomplete="off">
<div class="input-group-prepend">
<i class="fal fa-search" id="searchPrepend"></i>
</div>
<div class="invalid-tooltip">Please search for portfolio, download, tutorials.</div>
</div>
<div class="input-group col-md-6 offset-md-3 search-box">
<input type="text" class="form-control" id="search" placeholder="Search" required
autocomplete="off">
<div class="input-group-prepend">
<i class="fal fa-search" id="searchPrepend"></i>
</div>
<div class="invalid-tooltip">Please search for portfolio, download, tutorials.</div>
</div>
</div> <!--Header Section End -->
<div class="content-section">
<div class="content-section">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="jumbotron" style="padding: 10px 40px;">
<h1 class="display-1">404!</h1>
<h5 class="display-4">Page not found.</h5>
<hr class="my-2">
<p class="lead">It seems that, The page you are looking for does not exist.</p>
<h1 class="display-1">404!</h1>
<h5 class="display-4">Page not found.</h5>
<hr class="my-2">
<p class="lead">It seems that, The page you are looking for does not exist.</p>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2"></div>
<div class="col-lg-8 col-md-12 order-lg-1 social-links">
<div class="social-links">
@@ -107,8 +113,8 @@ <h5 class="display-4">Page not found.</h5>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -118,8 +124,13 @@ <h5 class="display-4">Page not found.</h5>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
91 changes: 55 additions & 36 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>About</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -53,7 +57,7 @@
<div id="main-area">
<div class="header-section">
<ul class="nav justify-content-center">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="category.html">Category 1</a>
</li>
<li class="nav-item">
@@ -63,43 +67,53 @@
<a class="nav-link" href="category.html">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div> <!--Header Section End -->
<div class="content-section about">
<div class="content-section about">
<div class="row">
<div class="col-lg-10 col-md-12 offset-lg-1">
<div class="card">
<div class="card-body">
<h5 class="card-title">Introduction</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veritatis quae quos debitis. Ab assumenda laudantium, delectus eius sed inventore beatae consequuntur ex, exercitationem quod totam facilis reprehenderit dolor, voluptates cumque. Deleniti unde magnam aliquam laudantium vitae nam odio iusto! Sequi maxime impedit atque, unde
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Totam, eveniet nostrum deserunt reprehenderit in voluptates accusamus, obcaecati quam, expedita, odio sequi laborum dolores officia consequatur!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, eligendi eius perferendis sit. Eum, hic.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Temporibus, necessitatibus recusandae et, doloremque architecto dolorum vitae laborum cupiditate atque commodi.
</p>
</div>
<div class="card-body">
<h5 class="card-title">Introduction</h5>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsum, veritatis
quae quos debitis. Ab assumenda laudantium, delectus eius sed inventore
beatae consequuntur ex, exercitationem quod totam facilis reprehenderit
dolor, voluptates cumque. Deleniti unde magnam aliquam laudantium vitae nam
odio iusto! Sequi maxime impedit atque, unde
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Totam, eveniet
nostrum deserunt reprehenderit in voluptates accusamus, obcaecati quam,
expedita, odio sequi laborum dolores officia consequatur!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor, eligendi
eius perferendis sit. Eum, hic.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing, elit. Temporibus,
necessitatibus recusandae et, doloremque architecto dolorum vitae laborum
cupiditate atque commodi.
</p>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2"></div>
<div class="col-lg-8 col-md-12 order-lg-1 social-links">
<div class="social-links">
@@ -112,8 +126,8 @@ <h5 class="card-title">Introduction</h5>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -123,8 +137,13 @@ <h5 class="card-title">Introduction</h5>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
78 changes: 47 additions & 31 deletions all-works.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Category</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -53,7 +57,7 @@
<div id="main-area">
<div class="header-section category row">
<ul class="nav justify-content-center col-lg-9 col-md-12 order-lg-2">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="category.html">Category 1</a>
</li>
<li class="nav-item">
@@ -63,75 +67,82 @@
<a class="nav-link" href="category.html">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="category-heading col-lg-3 col-md-12 order-lg-1">
<h2 class="display-4">All Works <i class="fal fa-tasks small"></i></h2>
</div>
</div> <!--Header Section End -->
<div class="content-section">
<div class="content-section">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2">
<div class="pagination">
<ul>
@@ -153,7 +164,7 @@ <h2 class="display-4">All Works <i class="fal fa-tasks small"></i></h2>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
@@ -164,8 +175,13 @@ <h2 class="display-4">All Works <i class="fal fa-tasks small"></i></h2>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
80 changes: 48 additions & 32 deletions category.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Category</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -51,9 +55,9 @@
</div>
<div class="col-md-9">
<div id="main-area">
<div class="header-section category row">
<div class="header-section category row">
<ul class="nav justify-content-center col-lg-9 col-md-12 order-lg-2">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="category.html">Category 1</a>
</li>
<li class="nav-item">
@@ -63,75 +67,82 @@
<a class="nav-link" href="category.html">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="category-heading col-lg-3 col-md-12 order-lg-1">
<h2 class="display-4">Category <i class="fal fa-tag small"></i></h2>
</div>
</div> <!--Header Section End -->
<div class="content-section">
<div class="content-section">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2">
<div class="pagination">
<ul>
@@ -153,7 +164,7 @@ <h2 class="display-4">Category <i class="fal fa-tag small"></i></h2>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
@@ -164,8 +175,13 @@ <h2 class="display-4">Category <i class="fal fa-tag small"></i></h2>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
90 changes: 51 additions & 39 deletions contact.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Contact</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -51,25 +55,27 @@
</div>
<div class="col-md-9">
<div id="main-area">
<div class="content-section contact">
<div class="content-section contact">
<div class="row">
<div class="col-md-5 order-md-2">
<div class="card" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">For Web Development</h5>
<img src="img/km-logo.png" alt="km online works">
<p class="card-text"><i class="fal fa-envelope"></i> <a href="mailto:kmonlineworks@gmail.com" style="color:#fff;">kmonlineworks@gmail.com</a></p>
<p class="card-text">
<a href="https://www.facebook.com/kmonlineworks" style="color: white;">
<i class="fab fa-facebook"></i> Follow Facebook Page
</a>
</p>
<p class="card-text">
<a href="https://www.fiverr.com/kamranmubarik" style="color: white;">
<i class="fal fa-globe"></i> Order on Fiverr
</a>
</p>
</div>
<h5 class="card-title">For Web Development</h5>
<img src="img/km-logo.png" alt="km online works">
<p class="card-text"><i class="fal fa-envelope"></i> <a
href="mailto:kmonlineworks@gmail.com"
style="color:#fff;">kmonlineworks@gmail.com</a></p>
<p class="card-text">
<a href="https://www.facebook.com/kmonlineworks" style="color: white;">
<i class="fab fa-facebook"></i> Follow Facebook Page
</a>
</p>
<p class="card-text">
<a href="https://www.fiverr.com/kamranmubarik" style="color: white;">
<i class="fal fa-globe"></i> Order on Fiverr
</a>
</p>
</div>
</div>
</div>
<div class="col-lg-7 col-md-7 order-lg-1">
@@ -78,27 +84,28 @@ <h5 class="card-title">For Web Development</h5>
<h2 class="display-4"><i class="fal fa-pencil"></i> Get in Touch</h2>
</div>
<form>
<div class="form-group">
<label>Your Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control">
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
<div class="form-group">
<label>Your Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Email address</label>
<input type="email" class="form-control">
<small class="form-text text-muted">We'll never share your email with anyone
else.</small>
</div>
<div class="form-group">
<label>Message</label>
<textarea class="form-control"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-sm">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2"></div>
<div class="col-lg-8 col-md-12 order-lg-1 social-links">
<div class="social-links">
@@ -111,19 +118,24 @@ <h2 class="display-4"><i class="fal fa-pencil"></i> Get in Touch</h2>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
1,143 changes: 572 additions & 571 deletions css/style.css
View file

Large diffs are not rendered by default.

78 changes: 47 additions & 31 deletions download.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Download</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -53,7 +57,7 @@
<div id="main-area">
<div class="header-section category row">
<ul class="nav justify-content-center col-lg-9 col-md-12 order-lg-2">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="category.html">Category 1</a>
</li>
<li class="nav-item">
@@ -63,75 +67,82 @@
<a class="nav-link" href="category.html">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="category-heading col-lg-3 col-md-12 order-lg-1">
<h2 class="display-4">Downloads <i class="fal fa-download small"></i></h2>
</div>
</div> <!--Header Section End -->
<div class="content-section">
<div class="content-section">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2">
<div class="pagination">
<ul>
@@ -153,7 +164,7 @@ <h2 class="display-4">Downloads <i class="fal fa-download small"></i></h2>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
@@ -164,8 +175,13 @@ <h2 class="display-4">Downloads <i class="fal fa-download small"></i></h2>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
80 changes: 46 additions & 34 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Home</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,13 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -53,7 +55,7 @@
<div id="main-area">
<div class="header-section">
<ul class="nav justify-content-center">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="category.html">Category 1</a>
</li>
<li class="nav-item">
@@ -63,39 +65,42 @@
<a class="nav-link" href="category.html">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="input-group col-md-6 offset-md-3 search-box">
<input type="text" class="form-control" id="search" placeholder="Search" required autocomplete="off">
<div class="input-group-prepend">
<i class="fal fa-search" id="searchPrepend"></i>
</div>
<div class="invalid-tooltip">Please choose a unique and valid username.</div>
</div>
<div class="input-group col-md-6 offset-md-3 search-box">
<input type="text" class="form-control" id="search" placeholder="Search" required
autocomplete="off">
<div class="input-group-prepend">
<i class="fal fa-search" id="searchPrepend"></i>
</div>
<div class="invalid-tooltip">Please choose a unique and valid username.</div>
</div>
</div> <!--Header Section End -->
<div class="content-section">
<div class="section-heading">
<h2 class="display-4">Latest Videos <i class="fal fa-play small"></i></h2>
<a href="videos.html"><i class="fal fa-list"></i> All</a>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 100%;">
<a href="single.html">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
</a>
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
@@ -104,8 +109,9 @@ <h2 class="display-4">Latest Videos <i class="fal fa-play small"></i></h2>
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
</a>
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
@@ -114,14 +120,15 @@ <h2 class="display-4">Latest Videos <i class="fal fa-play small"></i></h2>
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
</a>
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2"></div>
<div class="col-lg-8 col-md-12 order-lg-1 social-links">
<div class="social-links">
@@ -134,19 +141,24 @@ <h2 class="display-4">Latest Videos <i class="fal fa-play small"></i></h2>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
145 changes: 82 additions & 63 deletions portfolio.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Portfolio</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -53,7 +57,7 @@
<div id="main-area">
<div class="header-section">
<ul class="nav justify-content-center">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="category.html">Category 1</a>
</li>
<li class="nav-item">
@@ -63,130 +67,140 @@
<a class="nav-link" href="category.html">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="input-group col-md-6 offset-md-3 search-box">
<input type="text" class="form-control" id="search" placeholder="Search" required autocomplete="off">
<div class="input-group-prepend">
<i class="fal fa-search" id="searchPrepend"></i>
</div>
<div class="invalid-tooltip">Please search for portfolio, download, tutorials.</div>
</div>
<div class="input-group col-md-6 offset-md-3 search-box">
<input type="text" class="form-control" id="search" placeholder="Search" required
autocomplete="off">
<div class="input-group-prepend">
<i class="fal fa-search" id="searchPrepend"></i>
</div>
<div class="invalid-tooltip">Please search for portfolio, download, tutorials.</div>
</div>
</div> <!--Header Section End -->
<div class="content-section">
<div class="section-heading">
<h2 class="display-4">Portfolio <i class="fal fa-tasks small"></i></h2>
<a href="all-works.html"><i class="fal fa-list"></i> All Works</a>
</div>
</div>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 100%;">
<a href="single.html">
<img class="card-img-top d-block w-100" src="img/background.jpg" alt="Card image cap">
<img class="card-img-top d-block w-100" src="img/background.jpg"
alt="Card image cap">
</a>
<div class="card-body ">
<h5 class="card-text text-truncate">
Slider Title Here 1
</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<a href="single.html">
<img class="card-img-top d-block w-100" src="img/background.jpg" alt="Card image cap">
<img class="card-img-top d-block w-100" src="img/background.jpg"
alt="Card image cap">
</a>
<div class="card-body ">
<h5 class="card-text text-truncate">
Slider Title Here 1
</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<a href="single.html">
<img class="card-img-top d-block w-100" src="img/background.jpg" alt="Card image cap">
<img class="card-img-top d-block w-100" src="img/background.jpg"
alt="Card image cap">
</a>
<div class="card-body ">
<h5 class="card-text text-truncate">
Slider Title Here 1
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
</div>
<div class="carousel-item">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 100%;">
<a href="single.html">
<img class="card-img-top d-block w-100" src="img/background.jpg" alt="Card image cap">
<img class="card-img-top d-block w-100" src="img/background.jpg"
alt="Card image cap">
</a>
<div class="card-body ">
<h5 class="card-text text-truncate">
Slider Title Here 2
</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<a href="single.html">
<img class="card-img-top d-block w-100" src="img/background.jpg" alt="Card image cap">
<img class="card-img-top d-block w-100" src="img/background.jpg"
alt="Card image cap">
</a>
<div class="card-body ">
<h5 class="card-text text-truncate">
Slider Title Here 2
</h5>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<a href="single.html">
<img class="card-img-top d-block w-100" src="img/background.jpg" alt="Card image cap">
<img class="card-img-top d-block w-100" src="img/background.jpg"
alt="Card image cap">
</a>
<div class="card-body ">
<h5 class="card-text text-truncate">
Slider Title Here 2
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2"></div>
<div class="col-lg-8 col-md-12 order-lg-1 social-links">
<div class="social-links">
@@ -199,19 +213,24 @@ <h5 class="card-text text-truncate">
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
90 changes: 54 additions & 36 deletions single.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Single</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -51,7 +55,7 @@
</div>
<div class="col-md-9">
<div id="main-area">
<div class="content-section single">
<div class="content-section single">
<div class="row">
<div class="col-md-7 order-md-1">
<div class="card" style="width: 100%;">
@@ -62,42 +66,51 @@
<div class="section-description">
<h2 class="display-4"><i class="fal fa-file-alt"></i> Video Title</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Architecto illo pariatur, quas dignissimos, maiores nostrum quo ea voluptas deserunt libero rerum eveniet, impedit. Dignissimos tempora suscipit laboriosam numquam, error non pariatur necessitatibus magni accusantium tenetur fugiat et molestias architecto nobis, adipisci, reiciendis dolores repellat! Ullam, autem, dolor. Aspernatur, minus obcaecati.
Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Architecto illo
pariatur, quas dignissimos, maiores nostrum quo ea voluptas deserunt libero
rerum eveniet, impedit. Dignissimos tempora suscipit laboriosam numquam, error
non pariatur necessitatibus magni accusantium tenetur fugiat et molestias
architecto nobis, adipisci, reiciendis dolores repellat! Ullam, autem, dolor.
Aspernatur, minus obcaecati.
</p>
</div>
</div>
<div class="col-md-5 order-md-2">
<div class="card" style="width: 100%;">
<div class="card-body">
<h5 class="card-title">Related Videos</h5>
<div class="related-video">
<img src="img/background.jpg" alt="" width="80px">
<p class="card-text text-truncate d-md-none d-lg-block">
With supporting text below as a natural lead-in to additional cont.
</p>
<span class="vid-date d-md-none d-lg-block"><i class="fal fa-calendar-alt"></i> December 16, 2021</span>
</div>
<div class="related-video">
<img src="img/background.jpg" alt="" width="80px">
<p class="card-text text-truncate d-md-none d-lg-block">
With supporting text below as a natural lead-in to additional cont.
</p>
<span class="vid-date d-md-none d-lg-block"><i class="fal fa-calendar-alt"></i> December 16, 2021</span>
</div>
<div class="related-video">
<img class="d-lg-block d-md-none" src="img/background.jpg" alt="" width="80px">
<p class="card-text text-truncate d-lg-block d-md-none">
With supporting text below as a natural lead-in to additional cont.
</p>
<span class="vid-date d-lg-block d-md-none"><i class="fal fa-calendar-alt"></i> December 16, 2021</span>
</div>
</div>
<h5 class="card-title">Related Videos</h5>
<div class="related-video">
<img src="img/background.jpg" alt="" width="80px">
<p class="card-text text-truncate d-md-none d-lg-block">
With supporting text below as a natural lead-in to additional cont.
</p>
<span class="vid-date d-md-none d-lg-block"><i
class="fal fa-calendar-alt"></i> December 16, 2021</span>
</div>
<div class="related-video">
<img src="img/background.jpg" alt="" width="80px">
<p class="card-text text-truncate d-md-none d-lg-block">
With supporting text below as a natural lead-in to additional cont.
</p>
<span class="vid-date d-md-none d-lg-block"><i
class="fal fa-calendar-alt"></i> December 16, 2021</span>
</div>
<div class="related-video">
<img class="d-lg-block d-md-none" src="img/background.jpg" alt=""
width="80px">
<p class="card-text text-truncate d-lg-block d-md-none">
With supporting text below as a natural lead-in to additional cont.
</p>
<span class="vid-date d-lg-block d-md-none"><i
class="fal fa-calendar-alt"></i> December 16, 2021</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2"></div>
<div class="col-lg-8 col-md-12 order-lg-1 social-links">
<div class="social-links">
@@ -110,19 +123,24 @@ <h5 class="card-title">Related Videos</h5>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>
80 changes: 48 additions & 32 deletions videos.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
@@ -14,6 +15,7 @@

<title>Videos</title>
</head>

<body onload="preloader()">
<div id="preloader">
<div class="lds-ripple">
@@ -25,13 +27,15 @@
<div class="row">
<div class="col-md-3" id="sidebar">
<div class="logo">
<img src="img/km-logo.png" alt="logo">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="logo" style="
border-radius: 100%;
">
</div>
<ul class="nav flex-column">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="index.html"><i class="fal fa-home-alt"></i> Home</a>
</li>
<li class="nav-item">
<li class="nav-item">
<a class="nav-link" href="portfolio.html"><i class="fal fa-tasks"></i> Portfolio</a>
</li>
<li class="nav-item">
@@ -51,9 +55,9 @@
</div>
<div class="col-md-9">
<div id="main-area">
<div class="header-section category row">
<div class="header-section category row">
<ul class="nav justify-content-center col-lg-9 col-md-12 order-lg-2">
<li class="nav-item">
<li class="nav-item">
<a class="nav-link active" href="category.html">Category 1</a>
</li>
<li class="nav-item">
@@ -63,75 +67,82 @@
<a class="nav-link" href="category.html">Category 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
<div class="category-heading col-lg-3 col-md-12 order-lg-1">
<h2 class="display-4">All Videos <i class="fal fa-list small"></i></h2>
</div>
</div> <!--Header Section End -->
<div class="content-section">
<div class="content-section">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 100%;">
<img class="card-img-top" src="img/background.jpg" alt="Card image cap">
<div class="card-body">
<p class="card-text text-truncate">Some quick example text to build on the card title.</p>
</div>
<p class="card-text text-truncate">Some quick example text to build on the card
title.</p>
</div>
</div>
</div>
</div>
</div> <!-- Content Section End -->
<div class="footer">
<div class="row">
<div class="row">
<div class="col-lg-4 col-md-12 order-lg-2">
<div class="pagination">
<ul>
@@ -153,7 +164,7 @@ <h2 class="display-4">All Videos <i class="fal fa-list small"></i></h2>
<a href="https://web.facebook.com/kmonlineworks">
<i class="fab fa-facebook"></i> Facebook
</a>
</div>
</div>
</div>
</div>
</div>
@@ -164,8 +175,13 @@ <h2 class="display-4">All Videos <i class="fal fa-list small"></i></h2>

<!-- JS Script Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/custom-function.js"></script>
</body>

</html>