-
Notifications
You must be signed in to change notification settings - Fork 0
/
MobileApp.html
108 lines (97 loc) · 5.07 KB
/
MobileApp.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Himasha Kodikara</title>
<link rel="Stylesheet" type="text/css" href="MobileApp.css">
<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=Hind+Siliguri:wght@500&family=Kanit&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Hind Siliguri', sans-serif;
}
</style>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div id="Header">
<div class="Logo"><div class="shadow-lg p-3 mb-5 bg-body rounded">HK</div></div>
<nav>
<ul>
<li class="Home"><a class="active" href="./index.html">Home</a></li>
<li><a href="./index.html">Education</a></li>
<li><a href="#" id="Pro1">Projects</a></li>
<li><a href="./index.html">Contact</a></li>
</ul>
</nav>
</div>
<div class="Body">
<div class="Cont">
<h2 id="Head1">Book Purchase App</h2>
<div class="BookApp">
<div class="video">
<video width="500" height="300" controls >
<source src="New video1.mp4" type="video/mp4" >
</video>
</div>
<div class="Des">
<p> </p>This is a Book Purcahse app User Interface design created by myself. From this app user can Login or Register to the app then
can select available book acording to user preference. After user can purchase the book. There are variuos types of books availbale in App.
<h3 style="color: rgb(11, 97, 23);">Used Languages</h3>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDcPuqnigejRsHaePtBj8m9ZOYSMZ0vbSrO8fIaEnj1D18_5h5HwXmbYF3GU1PKaWbijA&usqp=CAU" alt="React" height="30%" width="20%" style="margin-right: 5%;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="Css" height="30%" width="20%">
</div>
</div>
</div>
<div class="Cont">
<h1 id="Head2">Gas App</h1>
<div class="BookApp">
<div class="video">
<video width="500" height="300" controls >
<source src="New video.mp4" type="video/mp4" >
</video>
</div>
<div class="Des">
<p>
This app is very useful prsent country situaton. If your gas is finished you have to call market or you have to go and buy Gas Silinder.
But when you go to the market gas will be finished. But form this app you can quicly find where are the places gas available then you can directly go to that market without wasting time.</p>
<h3 style="color: rgb(11, 97, 23);">Used Languages</h3>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDcPuqnigejRsHaePtBj8m9ZOYSMZ0vbSrO8fIaEnj1D18_5h5HwXmbYF3GU1PKaWbijA&usqp=CAU" alt="React" height="30%" width="20%" style="margin-right: 5%;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="Css" height="30%" width="20%">
<img src="https://1000logos.net/wp-content/uploads/2020/09/JavaScript-Logo.png" alt="Css" height="30%" width="30%">
</div>
</div>
</div>
</div>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
<footer>
<div class="LastLine">
<p>Copyright © Himasha 2022</p>
</div>
</footer>
</html>