modified home page

eed4c66e · Yolanda Nainggolan · ae320289 · eed4c66e · eed4c66e
Commit eed4c66e authored 4 years ago by Yolanda Nainggolan
Show whitespace changes
Inline Side-by-side

Showing with 184 additions and 0 deletions

landing-page.min.css ...rtedIndexSimulator/static/assets/css/landing-page.min.css +143 -0

home.html SearchEngine/InvertedIndexSimulator/templates/apps/home.html +41 -0

No files found.
--- a/SearchEngine/InvertedIndexSimulator/static/assets/css/landing-page.min.css
+++ b/SearchEngine/InvertedIndexSimulator/static/assets/css/landing-page.min.css
+@import url('https://fonts.googleapis.com/css?family=Quicksand:400,700&display=swap');
+ 
+ 
+body {
+   font-family: sans-serif;
+}
+ 
+ 
+h2, h3 {
+   color: #00a2c6
+}
+ 
+ 
+footer {
+	color: white;
+	background-color: #591a75 
+}
+
+nav a {
+   font-size: 18px;
+   font-weight: 400;
+   text-decoration: none;
+}
+
+nav a:hover {
+   font-weight: bold;
+}
+
+.profile header {
+   text-align: center;
+}
+
+
+footer {
+   padding: 5px;
+   color: white;
+   background-color: #440f5c;
+   text-align: center;
+   font-weight: bold;
+}
+
+.featured-image {
+   width: 100%;
+   max-height: 300px;
+   object-fit: cover;
+   object-position: center;
+}
+
+.card {
+   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+   border-radius: 15px;
+   padding: 20px;
+   margin-top: 10px;
+}
+
+.jumbotron {
+	font-size: 20px;
+	padding: 60px;
+	text-align: center;
+	color: white;
+	background-image: url(https://ak.picdn.net/assets/cms/music_subscription_homepage_banner.jpg);
+	background-size: cover;
+	background-repeat: no-repeat;
+	text-shadow: black 0.3em 0.3em 0.3em;
+}
+
+nav {
+   background-color: #091729;
+   padding: 5px;
+   position: sticky;
+   top: 0;
+}
+
+nav a {
+   font-size: 18px;
+   font-weight: 400;
+   text-decoration: none;
+   color: white;
+}
+
+body {
+   font-family: 'Quicksand', sans-serif;
+   margin: 0;
+   padding: 0;
+}
+
+main {
+   padding: 15px;
+   overflow: auto;
+}
+
+#content {
+   width: 100%;
+}
+
+* {
+   box-sizing: border-box;
+}
+
+figure img {
+   border-radius: 50%;
+}
+
+
+.button {
+  display: inline-block;
+  border-radius: 4px;
+  background-color: #7c1ca6;
+  border: none;
+  color: #FFFFFF;
+  text-align: center;
+  font-size: 15px;
+  padding: 20px;
+  width: 400px;
+  transition: all 0.5s;
+  cursor: pointer;
+  margin: 5px;
+}
+
+button span {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
+}
+
+button span:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
+}
+
+button:hover span {
+  padding-right: 25px;
+}
+
+button:hover span:after {
+  opacity: 1;
+  right: 0;
+}
--- a/SearchEngine/InvertedIndexSimulator/templates/apps/home.html
+++ b/SearchEngine/InvertedIndexSimulator/templates/apps/home.html
+<!DOCTYPE html>
+<html lang="en">
+
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<title>Song Lyric Search Engine</title>
+		<link href="../../static/assets/css/landing-page.min.css" rel="stylesheet">
+
+	</head>
+
+	<body>
+		<header>
+			<div class="jumbotron">
+				<h1>Song Lyric Search Engine<br>- Simulator -</h1>
+				<p>Search engine yang pake inverted index untuk indexing nya</p>
+			</div>
+		</header>
+		
+		<main>
+			<div id="content">
+				<article class="card">
+					<center><h1>Pilih Dataset</h1><br>
+						<table>
+							<tr>
+								<th><button class="button" style="vertical-align:middle"><span>International Billboard Song </span></button></th>
+								<td><button class="button" style="vertical-align:middle"><span>Indonesian Song </span></button></td>
+							</tr>
+						</table>
+					</center>
+				</article>
+			</div>			
+		
+		</main>
+		
+		<footer>
+			<p>&copy; STBI-2020-03</p>
+		</footer>
+
+	</body>
+
+</html>