Devetec/code.js

## code.js
function clear() {
    var elem = document.getElementsByTagName("div");
    var elements = Array.prototype.slice.call(elem);
    elements.forEach((element) => element.parentNode.removeChild(element));
}
//Here is the magic! \/
function results(form) {
    var search = form.inputbox.value;
if (search === "domestic cat", "domestic cats", "cats", "cat") {
    alert("You searched " + search + "." + " The domestic cat, also called Felis catus, is a small, typically furry, carnivorous mammal, with over 70 breeds, such as Maine Coon and Persian. They weigh about 9 to 10 pounds, though the heaviest was 50 pounds and the lightest at one pound. There are about 600 million of them in the world, excluding wild ones. They live for 12 to 18 years.");
} else if (search === "dog", "dogs") {
    alert("You searched " + search + "." + " Dogs, also known as Canis lupus familiaris, are also the most wildly abundant carnivore. There are 525 million, and the lighted was 1/4 of a pound, while the heaviest was 343 pounds. They are expected to live 10 to 13 years.");
    } else {
        alert("This is not a search yet.");
    }
}

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="google-site-verification" content="MHLyrfy29CvaiZP0UXiqotKPpzi75UWP3cc4UyCLFLE"/>
        <meta name="Description" content="The new, different search engine of the future. Made nonprofit, Made open. ">
        <title>Alium</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
        <link href="style.css" rel="stylesheet" type="text/css">
        <link rel="apple-touch-icon" href="googel.png">
        <link rel="icon" type="image/png" href="googel.png">
        <script src="results.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
<div class="search">
        <!--Alium Logo-->
        <div style="margin: auto; text-align: center;">
        <img src="googel.png" width="100" height="100">
        <h1 style="margin: inherit;">
                <red>A</red><orange>l</orange><yellow>i</yellow><green>u</green><blue>m</blue>
        </h1>
        <h2><red>Different</red> <orange>and</orange> <yellow>new</yellow> <green>and</green> <blue>good.</blue></h2>
        </div>
        <!--Search-->
<form name="form" method="get" style="text-align: center;">
      <div class="group">
      <input style="float: left;" type="text" autocomplete="false" name="inputbox" id="search">
      <span class="highlight"></span>
      <label>Search Alium...</label>
      <button style="float: right; width: 11%;" onClick="results(this.form)">Search</button>
      </div>
</form>
</div>
        <!--End-->
        <!--This site is real and made by real people-->
        <!--
        /////////////////////////////////////
        ///////Don't//////////Worry//////////
        ////////////////:)///////////////////
        ////////Be////////////Happy!/////////
        /////////////////////////////////////
        ///////Different////////and//////////
        /////////////////////////////////////
        ////////New/////////////and//////////
        /////////////////////////////////////
        //////////////Good!//////////////////
        /////////////////////////////////////
        -->
    </body>
</html>

## style.css
@font-face {
    font-family: Naya;
    src: url(GoogleLogo.ttf);
}
html, body {
    font-family: "Naya", Helvetica, sans-serif;
}
h1 {
    text-align: center;
    font-size: 6em;
    font-weight: 100;
}
h2 {
    font-weight: 300;
}
red {
    color: #db3236;
}
orange {
    color: #E87A22;
}
yellow {
    color: #f4c20d;
}
green {
    color: #3cba54;
}
blue {
    color: #4885ed;
}
form {
    margin: auto;
    text-align: center;
}
.group {
  position:relative;
  margin-bottom:45px;
}
input {
  font-family: "Naya", Helvetica, sans-serif;
  font-size:18px;
  display:block;
  width:87%;
  border:none;
  border-bottom:1px solid #757575;
}
input:focus 		{ outline:none; }

/* LABEL ======================================= */
label {
  color:#999;
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events: none;
  left:5px;
  top:0px;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color: #db3236;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position:absolute;
  height:60%;
  width:100%;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#db5468; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#db5468; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#db5468; }
  to 	{ width:0; background:transparent; }
}
button {
    background: #db3236; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* Standard syntax (must be last) */
    border: none;
    color: white;
    display: inline-block;
    font-size: 110%;
    font-family: Naya;
    font-weight: 900;
}
	function clear() {
	var elem = document.getElementsByTagName("div");
	var elements = Array.prototype.slice.call(elem);
	elements.forEach((element) => element.parentNode.removeChild(element));
	}
	//Here is the magic! \/
	function results(form) {
	var search = form.inputbox.value;
	if (search === "domestic cat", "domestic cats", "cats", "cat") {
	alert("You searched " + search + "." + " The domestic cat, also called Felis catus, is a small, typically furry, carnivorous mammal, with over 70 breeds, such as Maine Coon and Persian. They weigh about 9 to 10 pounds, though the heaviest was 50 pounds and the lightest at one pound. There are about 600 million of them in the world, excluding wild ones. They live for 12 to 18 years.");
	} else if (search === "dog", "dogs") {
	alert("You searched " + search + "." + " Dogs, also known as Canis lupus familiaris, are also the most wildly abundant carnivore. There are 525 million, and the lighted was 1/4 of a pound, while the heaviest was 343 pounds. They are expected to live 10 to 13 years.");
	} else {
	alert("This is not a search yet.");
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="google-site-verification" content="MHLyrfy29CvaiZP0UXiqotKPpzi75UWP3cc4UyCLFLE"/>
	<meta name="Description" content="The new, different search engine of the future. Made nonprofit, Made open. ">
	<title>Alium</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<link href="style.css" rel="stylesheet" type="text/css">
	<link rel="apple-touch-icon" href="googel.png">
	<link rel="icon" type="image/png" href="googel.png">
	<script src="results.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<div class="search">
	<!--Alium Logo-->
	<div style="margin: auto; text-align: center;">
	<img src="googel.png" width="100" height="100">
	<h1 style="margin: inherit;">
	<red>A</red><orange>l</orange><yellow>i</yellow><green>u</green><blue>m</blue>
	</h1>
	<h2><red>Different</red> <orange>and</orange> <yellow>new</yellow> <green>and</green> <blue>good.</blue></h2>
	</div>
	<!--Search-->
	<form name="form" method="get" style="text-align: center;">
	<div class="group">
	<input style="float: left;" type="text" autocomplete="false" name="inputbox" id="search">
	<span class="highlight"></span>
	<label>Search Alium...</label>
	<button style="float: right; width: 11%;" onClick="results(this.form)">Search</button>
	</div>
	</form>
	</div>
	<!--End-->
	<!--This site is real and made by real people-->
	<!--
	/////////////////////////////////////
	///////Don't//////////Worry//////////
	////////////////:)///////////////////
	////////Be////////////Happy!/////////
	/////////////////////////////////////
	///////Different////////and//////////
	/////////////////////////////////////
	////////New/////////////and//////////
	/////////////////////////////////////
	//////////////Good!//////////////////
	/////////////////////////////////////
	-->
	</body>
	</html>
	@font-face {
	font-family: Naya;
	src: url(GoogleLogo.ttf);
	}
	html, body {
	font-family: "Naya", Helvetica, sans-serif;
	}
	h1 {
	text-align: center;
	font-size: 6em;
	font-weight: 100;
	}
	h2 {
	font-weight: 300;
	}
	red {
	color: #db3236;
	}
	orange {
	color: #E87A22;
	}
	yellow {
	color: #f4c20d;
	}
	green {
	color: #3cba54;
	}
	blue {
	color: #4885ed;
	}
	form {
	margin: auto;
	text-align: center;
	}
	.group {
	position:relative;
	margin-bottom:45px;
	}
	input {
	font-family: "Naya", Helvetica, sans-serif;
	font-size:18px;
	display:block;
	width:87%;
	border:none;
	border-bottom:1px solid #757575;
	}
	input:focus { outline:none; }

	/* LABEL ======================================= */
	label {
	color:#999;
	font-size:18px;
	font-weight:normal;
	position:absolute;
	pointer-events: none;
	left:5px;
	top:0px;
	transition:0.2s ease all;
	-moz-transition:0.2s ease all;
	-webkit-transition:0.2s ease all;
	}

	/* active state */
	input:focus ~ label, input:valid ~ label {
	top:-20px;
	font-size:14px;
	color: #db3236;
	}

	/* HIGHLIGHTER ================================== */
	.highlight {
	position:absolute;
	height:60%;
	width:100%;
	top:25%;
	left:0;
	pointer-events:none;
	opacity:0.5;
	}

	/* active state */
	input:focus ~ .highlight {
	-webkit-animation:inputHighlighter 0.3s ease;
	-moz-animation:inputHighlighter 0.3s ease;
	animation:inputHighlighter 0.3s ease;
	}

	/* ANIMATIONS ================ */
	@-webkit-keyframes inputHighlighter {
	from { background:#db5468; }
	to { width:0; background:transparent; }
	}
	@-moz-keyframes inputHighlighter {
	from { background:#db5468; }
	to { width:0; background:transparent; }
	}
	@keyframes inputHighlighter {
	from { background:#db5468; }
	to { width:0; background:transparent; }
	}
	button {
	background: #db3236; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient(left, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(right, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(right, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* For Firefox 3.6 to 15 */
	background: linear-gradient(to right, #db3236, #E87A22, #f4c20d, #3cba54, #4885ed); /* Standard syntax (must be last) */
	border: none;
	color: white;
	display: inline-block;
	font-size: 110%;
	font-family: Naya;
	font-weight: 900;
	}