html
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
<!DOCTYPE html>
<html>
<head>
<title>QuickBrain</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans&family=Raleway:wght@500&family=Josefin+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div id="home">
<div id="header">
<span class="glyphicon glyphicon-menu-hamburger"></span>
<span id="score"></span>
<span class="glyphicon glyphicon-apple" id="heart"></span>
</div>
<div id="cbody">
<center>
<div id="start_body">
<div class="start"><span class="glyphicon glyphicon-play"> </span> Start</div>
<div class="challenge"><span class="glyphicon glyphicon-flash"> </span> Challenge</div>
<div class="settings"><span class="glyphicon glyphicon-cog"> </span> Settings</div>
</div>
</center>
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
margin:0;
font-family:"Josefin Sans";
}
#header{
width:100%;
height:10vh; background:-webkit-linear-gradient(90deg, steelblue, darkblue);
position:fixed;
padding:10px;
z-index:2;
font-size:25px; background:linear-gradient(90deg, steelblue, darkblue);
}
#header span{
float:left;
}
#header #heart{
color: #F15;
float:right;
animation-name:heart_animation;
animation-timing-function:ease-in-out;
animation-delay:0.1s;
animation-iteration-count:infinite;
animation-duration:1s;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run