Simply site with Vue Router

by Michał Oręziak

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="wrapper">
  <header>
<div id="header-wrapper">
    <h2>Chiaroscuro</h2>
  <p>Press enter</p>
</div>

</header>
<nav>
  <ul>
    <router-link to="/"><li>O Home</li></router-link>
    <li>Info</li>
    <li>Galeria</li>
    <li>Kontakt</li>
  </ul>
</nav>
<main>
<div class="col">
   <img src="https://www.bikecad.ca/faqFiles/enter_key.jpg">
</div>
 <div class="col">
 <div id="text-wrapper">
<router-view></router-view>

   </div>
  </div>
</main>
</div>

SCSS

body{
  background:#e8dada;
  height:100%;
}
#wrapper{
  width:75%;
  margin:0 auto 0 auto;
}
header{
  background:rgb(175, 10, 10);
  padding:10px;
   box-shadow: 0px 2.5px 5px #333;
   position:relative;
   padding-top:2%;
   min-height:30vh;
   display:flex;
   align-items:flex-end;
}
header::before{
  content:'';
  position:absolute;
  z-index:5;
  top:20%;
  left:0;
  width:100%;
height:20px;
     box-shadow: 0px 2.5px 5px #333;
      background: radial-gradient(circle at 10% 0, lighten(rgb(233,42,42), 5%) 0%, rgb(173,1,1) 70%, rgb(156,1,1) 100%);
}
h2{
  font-size:2em;
}
nav{
  margin-top:-7.5px;
  position:relative;
  z-index:-5;

  ul{
    display:flex;
    /* justify-content:space-around; */
  }

  li{
    display:block;
    text-align:center;
    padding:20px 0 10px 0;
   /*  margin: 0 10px 0 10px; */
    font-size:1.5em;
    color:white;
   background: radial-gradient(circle at 35% 0, lighten(rgb(233,42,42), 5%) 10%, rgb(173,1,1) 60%, rgb(156,1,1) 100%);
   box-shadow: 1px 1px 5px #333;
   width:25%;
  }
  li:nth-child(4){
    box-shadow: 0 1px 5px #333;
  }
}
main{
  display:flex;
padding-top:5%;
  img{
    position:relative;
    margin-top:10%;
    transform:rotate(-10deg);
    border: 10px solid white;
     max-width:80%;
     box-shadow: 1px 1px 5px #333;
  }


  .col{
text-align:right;
    width:50%;
    height:100%;
    position:relative;
  }

  #text-wrapper{
      background: radial-gradient(circle at 35% 0, lighten(rgb(233,42,42), 5%) 10%, rgb(173,1,1) 60%, rgb(156,1,1) 100%);
   
  }
  #labels{
    min-height:calc(1.2em + 20px);
    font-size:1.5em;
    position:relative;
    margin:10px 0 10px 0;
          display:flex;
      align-items:center;
    &::before, &::after{
      position:absolute;
      top:0;
      left:0;
      content:'';
      width:100%;
       box-shadow: 1px 1px 5px #333;
      height:10px;
        z-index:10;
      background: radial-gradient(circle at 10% 0, lighten(rgb(233,42,42), 5%) 0%, rgb(173,1,1) 70%,...

JavaScript

const Home = {template: ` <p id=\"main-text\" class=\"animated\">
<a href=\"https://https://developer.mozilla.org/css/box-shadow\">Cieniowanie</a>
<a href=\"https://css-tricks.com/snippets/css/css-box-shadow/\">\"Cieniowanie dla zaawansowanych</a>
<a href=\"https://https://developer.mozilla.org/css/gradient\">\"Gradienty</a> 
<span id=\"hex\"></span><input type=\"color\" onchange=\"document.querySelector('#hex').innerText = this.value\"  />
</p>
 
  <div id=\"labels\">
    <span class=\"label animated\">Lorem</span>
    <span class=\"label animated\">ipsum</span>
    <span class=\"label animated\">dolor</span>
  </div>` };
  
const Foo = { template: '<div>Foo</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: Foo }
  ]
})

new Vue({
	router,
  el: '#wrapper',
  data: {
    msg: 'Hello World'
  }
})