HEROIC APP

Developer
Doe
Size
3,566 Kb
Views
10,120
  1. HEROIC APP Previews
  2. HEROIC APP HTML Codes
  3. HEROIC APP CSS Codes
  4. HEROIC APP JS Codes

How do I make an heroic app?

What is a heroic app? How do you make a heroic app? This script and codes were developed by Doe on 20 December 2022, Tuesday.

HEROIC APP Previews
IQ Test

HEROIC APP - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HEROIC APP</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='application'> <h1> daenerys targaryen <b> mother of dragons </b> </h1> <img src='http://placehold.it/400' /> <ul class="nav nav-tabs"> <li class="active"> <a href="#basics" data-toggle="tab"> <i class='fa fa-tasks'></i> </a> </li> <li> <a href="#history" data-toggle="tab"> <i class='fa fa-book'></i> </a> </li> <li> <a href="#ships" data-toggle="tab"> <i class='fa fa-link'></i> </a> </li> </ul> <div class="tab-content"> <div class="tab-pane active" id='basics'> <div class="basics content"> <div class='txt'> <h1> nickname </h1> <h2> dany nash. </h2> <h1> age </h1> <h2> twenty-eight </h2> <h1> gender </h1> <h2> female </h2> <h1> orientation </h1> <h2> demisexual </h2> <h1> occupation </h1> <h2> revolutionary </h2> <h1> birthplace </h1> <h2> dragonstone, the crownlands </h2> <h1> residence </h1> <h2> fleabottom, king's landing </h2> <hr /> <h1> father </h1> <h2> aerys targaryen, died in 1987 </h2> <h1> mother </h1> <h2> rhaella targaryen, died in 1987 </h2> <h1> brother </h1> <h2> viserys targaryen, 31 </h2> <h1> son </h1> <h2> rhaego, died in 2012 </h2> <h1> relationship </h1> <h2> widowed, 2012 </h2> <hr /> <h1> height </h1> <h2> 5'1 </h2> <h1> weight </h1> <h2> 103 lbs </h2> <h1> hair color </h1> <h2> dyed brown </h2> <h1> eye color </h1> <h2> blue </h2> <h1> face claim </h1> <h2> emilia clarke </h2> <hr /> <h1> name </h1> <h2> doe </h2> <h1> age </h1> <h2> 26 </h2> <h1> pronouns </h1> <h2> she/her </h2> <h1> time zone </h1> <h2> gmt -08 </h2> <h1> contact info </h1> <h2> tomhvrdy#1971 </h2> </div> </div> <div id="history" class="tab-pane"> <div class='txt'> content. </div> </div> <div id="ships" class="tab-pane"> <div class='txt'> <h1> friends </h1> content. <h1> enemies </h1> content. <h1> lovers </h1> content. </div> </div> </div> </div>
</div> <script src='https://use.fontawesome.com/9f35e39f76.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HEROIC APP - Script Codes CSS Codes

body { display: -webkit-flex;	display: flex;	flex-wrap: wrap;	align-items: center;	justify-content: center;
}
body { background-color: #ddd;
}
h3 { margin-top: 0;
}
.badge { background-color: #777;
}
.tabs-left { margin-top: 3rem;
}
.nav-tabs { float: left; border-bottom: 0;
}
.nav-tabs li { float: none; margin: 0;
}
.nav-tabs li a { margin-right: 0; border: 0; background-color: #333;
}
.nav-tabs li a:hover { background-color: #444;
}
.nav-tabs .glyphicon { color: #fff;
}
.nav-tabs .active .glyphicon { color: #333;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0;
}
.tab-content { margin-left: 45px;
}
.tab-content .tab-pane { display: none; background-color: #fff; padding: 1.6rem; overflow-y: auto;
}
.tab-content .active { display: block;
}
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:400,900');
@font-face { font-family: 'gloss and bloom'; src: url('http://files.jcink.net/uploads/heroicrp/gloss_bloom/gloss_and_bloom.eot'); src: url('http://files.jcink.net/uploads/heroicrp/gloss_bloom/gloss_and_bloom.eot?#iefix') format('embedded-opentype'), url('http://files.jcink.net/uploads/heroicrp/gloss_bloom/gloss_and_bloom.woff') format('woff'), url('http://files.jcink.net/uploads/heroicrp/gloss_bloom/gloss_and_bloom.ttf') format('truetype'), url('http://files.jcink.net/uploads/heroicrp/gloss_bloom/gloss_and_bloom.svg') format('svg'); font-weight: normal; font-style: normal;
}
@font-face { font-family: 'bodoni'; src: url('http://files.jcink.net/uploads/heroicrp/bodoni/bodonixt.eot'); src: url('http://files.jcink.net/uploads/heroicrp/bodoni/bodonixt.eot?#iefix') format('embedded-opentype'), url('http://files.jcink.net/uploads/heroicrp/bodoni/bodonixt.woff') format('woff'), url('http://files.jcink.net/uploads/heroicrp/bodoni/bodonixt.ttf') format('truetype'), url('http://files.jcink.net/uploads/heroicrp/bodoni/bodonixt.svg') format('svg'); font-weight: normal; font-style: normal;
}
@keyframes pop { 0% {	transform: scale(0);	}	80% {	transform: scale(1.1);	}	100% {	transform: scale(1);	}
}
.application { width: 500px;	height: 600px;	overflow: hidden;	position: relative;
}
.application h1 {	font: 18px/18px gloss and bloom;	text-transform: uppercase;	letter-spacing: 4px;	text-align: center;	margin: 0;	padding: 27px 0;	background: #000000;	color: #ffffff;
}
.application h1 b {	display: block;	font: 12px/12px bodoni;
}
.application img {	width: 400px;	height: 400px;	transition: 0.5s all ease-in-out;
}
.application:hover img {	filter: grayscale(100%) blur(1px);	-webkit-filter: grayscale(100%) blur(1px);	transition: 0.5s all ease-in-out;
}
.application #tabs {	width: 400px;	height: 520px;	position: absolute;	top: 0;	left: 0;	opacity: 0;	transition: 0.5s all ease-in-out;
}
.application:hover #tabs {	opacity: 1;	animation-name: pop;	animation-duration: 0.65s;	animation-timing-function: linear;	animation-iteration-count: 1;
}
.nav-tabs { float: left; border-bottom: 0;
}
.nav-tabs li { float: none; margin: 0;
}
.nav-tabs li a { margin-right: 0; border: 0; background-color: #333;
}
.nav-tabs li a:hover { background-color: #444;
}
.nav-tabs .glyphicon { color: #fff;
}
.nav-tabs .active .glyphicon { color: #333;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { border: 0;
}
.application .content {	padding: 50px;	height: 390px;	background: rgba(255,255,255,0.75);	font: normal 9px 150% pt sans, sans-serif;	font-weight: normal;	color: #000000;	text-align: justify;
}
.application .content .txt {	height: 390px;	overflow: auto;
}
.application .basics .txt {	display: -webkit-flex;	display: flex;	flex-wrap: wrap;	align-items: center;	justify-content: center;
}
.application .basics .txt h1 {	max-width: 40%;	min-width: 40%;	font: normal 7px/7px pt sans, sans-serif;	letter-spacing: 1px;	text-align: center;	text-transform: uppercase;	padding: 10px 0;	color: #ffffff!important;	background: rgba(0,0,0,0.8);	margin: 0 1px 1px 0;
}
.application .basics .txt h2 {	max-width: 59%;	min-width: 59%;	font: normal 7px/7px pt sans, sans-serif;	letter-spacing: 1px;	text-align: center;	text-transform: uppercase;	padding: 10px 0;	color: #ffffff;	margin: 0 0 1px;	background: rgba(0,0,0,0.8);
}
.application .basics .txt hr {	width: 100%;	border: none;	height: 5px;
}
.application .history h1, .application .ships h1 {	font: bold 24px/24px pt sans, sans-serif;	text-transform: lowercase;	margin: 50px 0 10px;	text-align: left;	letter-spacing: 0;	padding: 0;	background: none;
}
.application .history .txt h1:first-child, .application .ships .txt h1:first-child {	margin: 0 0 10px;
}
.application .history hr {	background: none;	border: none;	margin: 75px;
}

HEROIC APP - Script Codes JS Codes

var tabsFn = (function() { function init() { setHeight(); } function setHeight() { var $tabPane = $('.tab-pane'), tabsHeight = $('.nav-tabs').height(); $tabPane.css({ height: tabsHeight }); } $(init);
})();
HEROIC APP - Script Codes
HEROIC APP - Script Codes
Home Page Home
Developer Doe
Username tomhvrdyy
Uploaded December 20, 2022
Rating 3
Size 3,566 Kb
Views 10,120
Do you need developer help for HEROIC APP?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Doe (tomhvrdyy) Script Codes
Name
BI SPECIES RATIO
LEGACY TRACKER
NOA MINI FORK
CRSL THREAD TEMPLATE
MULTISHIPPER 01
A Pen by Doe
CURSE CELL TEMPLATE
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!