<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ootzsav/pen/ZLVOGO?depth=everything&order=popularity&page=11&q=bulma&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.2.3/css/bulma.css'>
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Merriweather');
section{
width:80%;
margin-left: 10%;
margin-right: 10%;
}
body {
background-color: #D2D7D3;
font-family: 'Merriweather', serif;
}
.nav {
background-color: #D2D7D3;
}
.tabs{
background-color: #ECF0F1;
}
.header-menu ul li a {
padding: 25px 25px 25px 25px !important;
}
.main{
margin-top: 10%;
padding: 1% 1% 1% 1%;
}
.main-title {
text-align:right;
font-size: 2.1em;
font-weight:bold;
}
.main-desc{
text-align:right;
margin-top:5%;
}
.main-button{
float:right;
margin-top:5%;
}
.main-image {
height:600px;
width:auto;
margin-left:10%;
}
.nav-left{
margin-left: 10%;
}
.recent-arrivals-div{
margin-top:5%;
}
.recent-arrivals-div img {
height:300px;
width: auto;
margin-left: 7%;
}
h2 {
font-weight: bold;
}
a:hover, a:active, a:link, a:visited {
color: #ae8e1b !important;
text-decoration:none;
}
.tabs.is-toggle li.is-active a{
background-color: #ae8e1b !important;
border-color: #ae8e1b;
}
.tabs.is-toggle li.is-active a:hover {
color: white !important;
}
.tab-content {
background-color:white;
margin-top:-2%;
padding: 5% 5% 5% 5%;
}
.tabs li.is-active a{
color:#ae8e1b;
}
.nav-item img {
max-height: 50px;
max-width:500px;
}
button {
font-family: 'Merriweather', serif;
}
hr.divider{
padding: 0;
border:none;
border-top: medium solid #BDC3C7;
color: #95A5A6;
text-align: center;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0));
margin-top: 5%;
margin-bottom: 5%
}
hr.divider:after {
content: "▶";
display: inline-block;
position: relative;
top: -0.7em;
font-size: 1.5em;
padding: 0 0.25em;
background: #D2D7D3;
}</style></head><body>
<section>
<header>
<nav class="nav">
<div class="nav-left">
<div class="nav-item">
<a href="#home"><img src="http://bulma.io/images/bulma-logo.png" alt="Bulma logo"></a>
</div>
</div>
<div class="nav-right">
<div class="nav-item">
<div class="header-menu tabs is-right is-medium is-toggle">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
</div>
</div>
</nav>
<div>
<button class="button is-outlined" style="right:15%;position:absolute">Login</button>
</div>
</header>
<div class="main">
<div class="main-hero columns">
<div class="column is-7">
<img class="main-image" src="https://www.stormykromer.com/images/55210-56T_L.png" alt="title image">
</div>
<div class="column is-5">
<h1 class="main-title">The website is awesome.</h1>
<p class="main-desc">Individual singlespeed and fixed gear bikes. As unique as you are. Straightforward. Stylish. Puristically. High-quality. Handcrafted. Design your own myownbike singlespeed and fixed gear bike!</p>
<button class="button is-dark main-button">Order Now</button>
</div>
</div>
<hr class="divider"></hr>
<div>
<div id="root">
<tabs>
<tab name="About us" :selected="true">
About us content
</tab>
<tab name="About our culture">
About our culture content
</tab>
<tab name="About our vision">
About our vision content
</tab>
</tabs>
</div>
</div>
<hr class="divider"></hr>
<div class="columns">
<div class="column is-8">
<h2>Recent arrivals</h2>
<div class="columns recent-arrivals-div">
<div class="column is-6"><img src="https://www.stormykromer.com/images/55210-81N_L.png" alt="item1"></div>
<div class="column is-6"><img src="https://www.stormykromer.com/images/55210-305_L.png" alt="item2"></div>
</div>
</div>
<div class="column">
<h2>Find us on social Media</h2>
<div class="columns recent-arrivals-div" style="padding: 5% 5% 5% 5%;">
facebook and stuff
</div>
</div>
</div>
<hr class="divider"></hr>
<div class="columns">
<div class="column is-4"><p><strong>© this clothing line ® </strong> all rights reserved</p></div>
<div class="column">
<div class="tabs is-fullwidth is-small is-toggle">
<ul>
<li><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
</div>
</div>
</section>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/vue@2.1.10/dist/vue.js'></script>
<script >Vue.component('tabs',{
template:`
<div>
<div class="tabs is-centered is-medium is-boxed is-fullwidth">
<ul>
<li v-for="tab in tabs" :class="{'is-active': tab.isActive}">
<a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a>
</li>
</ul>
</div>
<div class="content tab-content">
<slot></slot>
</div>
</div>
`,
data: function() {
return { tabs:[] };
},
created() {
this.tabs = this.$children;
},
methods: {
selectTab(selectedTab){
this.tabs.forEach( tab => {
tab.isActive = (tab.name == selectedTab.name);
});
}
}
});
Vue.component('tab',{
props: {
selected: {
default: false
},
name: {
required: true
}
} ,
template:`<div v-show="isActive"><slot></slot></div>`,
data(){
return {
isActive: false
};
},
mounted() {
this.isActive = this.selected;
},
computed: {
href() {
return "#"+this.name.toLowerCase().replace(/ /g, '-');
}
}
});
new Vue({
el: '#root'
});
//# sourceURL=pen.js
</script>
</body></html>
