@gobistories/gobi-web-integration
Version:
Welcome to Gobi Web Integration. This library will let you put your Gobi stories on your site.
169 lines (160 loc) • 5.05 kB
HTML
<html lang="en">
<head>
<title>Ballromutleie.no - Utleie av ballrom</title>
<meta name="description" content="Utleie av ballrom til enhver anledningen. Ballromutleie.no er norges ledende aktør innen ballromuteleie.">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<script src="https://unpkg.com/@gobistories/gobi-web-integration@4.2.0"></script>-->
<script src="../dist/index.js"></script>
</head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
/*Set CSS style to header*/
.header {
padding-bottom: 97px; /* some padding */
padding-top: 97px; /* some padding */
text-align: center; /* center the text */
background-color: aqua;
color: green; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 42px;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
}
/* Style the navigation bar links */
.navbar a {
float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 17px 21px; /* Add some padding */
text-decoration: none; /* Remove underline */
}
/* Right-aligned link */
.navbar a.right {
float: right; /* Float a link to the right */
}
/* Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black; /* Black text color */
}
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
.row
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
background-color: #FFFFFF; /* Grey background color */
padding: 50px; /* Some padding */
}
/* Main column */
.main {
background-color: #FFFFFF; /* White background color */
padding: 20px; /* Some padding */
}
.contentTitle {
font-size: 42px;
text-align:center;
padding: 40px; /* Some padding */
}
.contentDescription {
padding: 20px;
text-align: center;
}
.separator {
padding: 50px;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
}
</style>
<body>
<div class="header">
<h1>Ballromutleie.no</h1>
<p>Norges ledende aktør for utleie av ballrom-baller.</p>
</div>
<!--Navigation bar-->
<div class="navbar">
<a href="index.html">Om</a>
<a href="priser.html">Priser</a>
<a href="contact.html">Kontakt</a>
</div>
<!--end of Navigation bar-->
<div id="gobi-module-container"></div>
<section>
<div class="contentTitle"> Ballromutleie.no
</div>
<div class="contentDescription">
<p>Det å å lage en bra fest trenger ikke være dyrt.
For NOK 7 500 kan du leie nok baller til å fylle et lite rom. Det er hele 12 000 baller.
Garantert god steming.</p>
<p>NB: Ballene blir levert slik de er og er best egnet for fest.
</div>
<div class="separator">
</div>
<div class="contentTitle"> Hva synes det norske folk om ballrom?
</div>
<div class="contentDescription">"Jeg fikk prøve ballrommet en liten stund, benyttet anledningen til å ta et bilde til Instagram. Aldri fått små mye likes før! - Erna, 57 år"</div>
</div>
<div class="contentDescription">"OMG, jeg kommer til å leie dette hver helg resten av året - Arne Jor, 22 år"</div>
</div>
<div class="contentDescription">"Shit, dette var gooood S" - Astrid, 22 </div>
</div>
<div class="separator"> </div>
<div class="footer">
<h2>booking@ballromutleie.no</h2>
</div>
</section>
<script>
const moduleContainerElement = document.getElementById('gobi-module-container')
new gobi.Bubbles({
container: moduleContainerElement,
//circleSize
avatarSize: '100px',
stories: [
//replace with your stories
{id: "04f574ba",
title: "Karsten møter familien"
},
{id: "124d5812",
title: "Del 2"
},
{id: "d276e8d5",
title: "Del 3"
},
]})
</script>
</body>
</html>