-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (123 loc) · 5.28 KB
/
index.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
.jumbotron{
background-image: url(c6ba8489e8c3fdf433f08ae9881ef916-jumbotron-bg.png);
text-align: center;
height: 500px;
margin-top: 20px;
color: #1020d3;
}
.middlehead{
text-align: center;
}
.card-deck{
margin-left:50px ;
padding-top: 20px;
}
.card1:hover{
background:rgb(74, 125, 213);
width: 80%;
}
.card-deck{
background-color: rgb(191, 248, 248);
}
#footer{
text-align: center;
padding-top: 100px;
margin-top: 90px;
background-color: rgb(17, 132, 220);
height: 500px;
width: 100%;
}
#appstoreicon{
width: 200px;
}
.imgs{
border-radius: 50%;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbar" data-offset="150">
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="navbar">
<a class="navbar-brand" href="#">MY App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#jumbotron">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Download my app</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="email" placeholder="email" aria-label="email">
<input class="form-control mr-sm-2" type="password" placeholder="password" aria-label="password">
<button class="btn btn-success" type="submit">Login</button>
</form>
</div>
</nav>
<div class="jumbotron" id="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="middlehead">
<h1>Why This App Is Awsome</h1>
<p>This App Is Awsome To Use</p>
</div>
<div class="card-deck container" id="about">
<div class="card card1">
<img class="card-img-top imgs" src="user-friendly-icon-user-friendly-icon-11563212706mpwymvuyej.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">UserFrindly</h5>
<p class="card-text">Navigating our website is effortless, ensuring a seamless user-friendly experience.</p>
<p class="card-text"><small class="text-muted">With Guidance</small></p>
</div>
</div>
<div class="card card1">
<img class="card-img-top imgs" src="best-quality-stamp-1.png" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">High quality content</h5>
<p class="card-text">OOur website delivers top-tier content: engaging, informative, and meticulously researched.</p>
<p class="card-text"><small class="text-muted">best quality</small></p>
</div>
</div>
<div class="card card1">
<img class="card-img-top imgs" src="secureee.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Security</h5>
<p class="card-text">Rest easy knowing your data is safeguarded on our highly secure website.</p>
<p class="card-text"><small class="text-muted">You data is secure</small></p>
</div>
</div>
</div>
<div id="footer">
<h3>Download !</h3>
<p>Really,Why Should I Download This App?</p>
<p><a href="#"><img id="appstoreicon" src="app-store-badge.png" alt=""></a></p>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>