<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="styleSheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.4/lumen/bootstrap.min.css" type="text/css">
<div class="container">
<div class="[ info-card well well-sm ]">
<div class="[ info-card-details ]">
<div class="[ info-card-header ]">
<h1 id="generated-name"> Digital Ink </h1>
</div>
<div class="[ info-card-generate ]"><button type="button" id="btn-generate" class="btn btn-primary">SLUMPA NAMN</button></div>
<div class="[ info-card-detail ]">
<!-- Description -->
<p>Dela ditt hästnamn i social medier:</p>
<div class="social">
<a href="https://www.facebook.com/valtech.se" class="[ social-icon facebook ] animate"><span class="fa fa-facebook"></span></a>
<a href="https://twitter.com/ValtechSweden" class="[ social-icon twitter ] animate"><span class="fa fa-twitter"></span></a>
<a href="https://github.com/valtech" class="[ social-icon github ] animate"><span class="fa fa-github-alt"></span></a>
<a href="https://plus.google.com/+valtech" class="[ social-icon google-plus ] animate"><span class="fa fa-google-plus"></span></a>
<a href="www.linkedin.com/company/valtech-sweden/" class="[ social-icon linkedin ] animate"><span class="fa fa-linkedin"></span></a>
</div>
</div>
<img src="http://s22.postimg.org/mwvtr0xxd/casebilder_17.png" class="logo-atg">
</div>
</div>
<button type="button" class="btn btn-block btn-primary btn-lg">Gå med i Vinniekampen!</button>
</div>
@import url(//fonts.googleapis.com/css?family=Lato:400,900);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
body {
padding: 10px 0px;
}
.container {
max-width: 730px;
}
.info-card {
width: 100%;
border: 1px solid rgb(215, 215, 215);
position: relative;
font-family: 'Lato', sans-serif;
margin-bottom: 20px;
overflow: hidden;
}
.info-card .info-card-details,
.info-card .info-card-details .info-card-header {
width: 100%;
height: 100%;
left: 0;
text-align: center;
}
.info-card .info-card-details::-webkit-scrollbar {
width: 8px;
}
.info-card .info-card-details::-webkit-scrollbar-button {
width: 8px;
height: 0px;
}
.info-card .info-card-details::-webkit-scrollbar-track {
background: transparent;
}
.info-card .info-card-details::-webkit-scrollbar-thumb {
background: rgb(160, 160, 160);
}
.info-card .info-card-details::-webkit-scrollbar-thumb:hover {
background: rgb(130, 130, 130);
}
.info-card .info-card-details .info-card-header {
height: auto;
bottom: 100%;
padding: 10px 5px;
}
.info-card.info-card-details {
bottom: 0px;
overflow: auto;
padding-bottom: 25px;
}
.info-card .info-card-details .info-card-header {
position: relative;
bottom: 0px;
padding-top: 45px;
padding-bottom: 25px;
}
.info-card .info-card-details .info-card-header h1,
.info-card .info-card-details .info-card-header h3 {
color: rgb(62, 62, 62);
font-size: 28px;
font-weight: 900;
text-transform: uppercase;
margin: 0 !important;
padding: 10px !important;
display: inline-block;
border: 3px dotted #333;
}
.info-card .info-card-details .info-card-header h3 {
color: rgb(142, 182, 52);
font-size: 15px;
font-weight: 400;
margin-top: 5px;
}
.info-card .info-card-details .info-card-detail .social {
list-style: none;
padding: 0px;
margin-bottom: 25px;
margin-top: 15px;
text-align: center;
}
.info-card .info-card-details .info-card-detail .social a {
position: relative;
display: inline-block;
min-width: 40px;
padding: 10px 0px;
margin: 0px 5px;
overflow: hidden;
text-align: center;
background-color: rgb(215, 215, 215);
border-radius: 40px;
}
a.social-icon {
text-decoration: none !important;
box-shadow: 0px 0px 1px rgb(51, 51, 51);
box-shadow: 0px 0px 1px rgba(51, 51, 51, 0.7);
}
a.social-icon:hover {
color: rgb(255, 255, 255) !important;
}
a.facebook {
color: rgb(59, 90, 154) !important;
}
a.facebook:hover {
background-color: rgb(59, 90, 154) !important;
}
a.twitter {
color: rgb(45, 168, 225) !important;
}
a.twitter:hover {
background-color: rgb(45, 168, 225) !important;
}
a.github {
color: rgb(51, 51, 51) !important;
}
a.github:hover {
background-color: rgb(51, 51, 51) !important;
}
a.google-plus {
color: rgb(244, 94, 75) !important;
}
a.google-plus:hover {
background-color: rgb(244, 94, 75) !important;
}
a.linkedin {
color: rgb(1, 116, 179) !important;
}
a.linkedin:hover {
background-color: rgb(1, 116, 179) !important;
}
#btn-generate {
margin-bottom: 25px;
}
.btn-lg {
font-size: 20px !important;
}
.logo-atg {
width: 10%;
margin: 0 auto;
}
$(function(){
var myArray = [
"Adrian Chip",
"Baron Gruff",
"Beautiful Hoka",
"Commander Crowe",
"Callit",
"Citation",
"Colombian Necktie",
"Conny Nobell",
"Copiad",
"Delvin Kosmos",
"Digger Crown",
"Drewgi",
"Ego Boy",
"Emile",
"Etain Royal",
"Frances Bulwark",
"Giant Diablo",
"Gidde Palema",
"Gigant Neo",
"Going Kronos",
"Gum Ball",
"Gusten Scoop",
"Hilda Zonett",
"Hot Tub",
"Iceland",
"Idéal du Gazeau",
"Ina Scot",
"Jana Bloc",
"Järvsöfaks",
"Legolas",
"Mack Lobell",
"Maharajah",
"Moni Maker",
"Mr Outstanding",
"Ourasi",
"Queen L.",
"Remington Crown",
"Rex Rodney",
"Sahara Dynamite",
"Scarlet Knight",
"Speedy Crown",
"Steinlager",
"Svinten",
"The Onion",
"Torvald Palema",
"Triton Sund",
"Tsar d'Inverne",
"Utah Bulwark",
"Varenne",
"Verner",
"Victory Tilly",
"Viking Kronos",
"Viola Silas",
"Zoogin",
"Nevele Pride",
];
$('#btn-generate').on('click', function(event){
var rand = myArray[Math.floor(Math.random() * myArray.length)];
$('#generated-name').text(rand);
});
});
