<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Theme Made By www.studiorosell.com Copyright -->
  <title>William Rosell</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="//cdn.jsdelivr.net/jquery.shadow-animation/1/mainfile"></script>
    <script src="https://use.fontawesome.com/bd805a4cf9.js"></script>
  <script src="/Users/parosell1/Downloads/waypoints-master/src/waypoint.js"></script>
    
    
    <!--CSS-->
    
    <style>
 .jumbotron{
        
          background-color: #f6f6f6; /* Shopify Green */
    color:dimgray;
     font-family: Montserrat, sans-serif;
         }
        
        body {
    font: 400 15px Lato, sans-serif;
    line-height: 1.8;
    color: #818181;
}

        
        
            .bg-grey {
    background-color: #FFF;
}
  .container-fluid{
        padding: 60px 50px;
    }
        
        .btnanim {
  position: relative;
  display: inline-block;
  
  border-radius: 5px;
  
  
  transition: all 0.3s ease-in-out;
}
        
        /* Create the hidden pseudo-element */
/* include the shadow for the end state */
.btnanim::after {
  content: '';
  
    opacity: 0.5;
  position: absolute;
  

  opacity: 0;
  border-radius: 5px;
  
  transition: opacity 0.3s ease-in-out;
}
        
        /* Scale up the box and add shadow */
.btnanim:hover {
    
  transform: scale(1.2, 1.2); 
    background-color: #F9F9;
   color: #77db2a ;
    box-shadow: 0 5px 40px rgba(0,0,0,0.8);
    
}

     .thumbanim {
  position: relative;
  
  
  
  
  
  transition: all 0.3s ease-in-out;
}
        
        /* Create the hidden pseudo-element */
/* include the shadow for the end state */
.thumbanim::after {
  
  
    opacity: 0.0;
 
  

  opacity: 0;

  
  transition: opacity 0.3s ease-in-out;
}
        
        /* Scale up the box and add shadow */
.thumbanim:hover {
  transform: scale(1.05, 1.05); 
   
    box-shadow: 0 5px 40px rgba(0,0,0,0.8);
    
}

        
        
        .logo{
            
            font-size: 200px;
        }
        
       .logo-small{
            
            color: #000;
            font-size: 50px;
        }
         .logo{
            
              color: #000;
              font-size: 200px;
        }
        
        .thumbnail profile{
         
            padding: 0 0 15px 0;
            
            border: none;
            border-radius: 50px;
          
        }
        
        .thumbnail{
            
            padding: 0 0 15px 0;
            border: none;
            border-radius: 5px;
            
        }
        
        .thumbnail img {
            
            width: 100%;
            height: 100%;
            margin-bottom: 10px;
            border-radius: 5px;
            
        }
        
        
     
        
           /*Carousel styling*/
        
        
        
        
        .carousel-control.right, .carousel-control.left {
            background-image: none;
            color: #000;
            
        }
        
        .carousel-indicatros li{
            
            border-color: #000;
        }
        
        .carousel-indicators li.active {
            background-color: #000;
        }
        
        .item h4 {
            font-size:19px;
            line-height: 1.375em;
            font-weight: 400;
            font-style: italic;
            margin: 70px 0;
            transition-property: opacity;
           
            
        }
        
        .item-active {
            
            align-content: center;
            
            
        }
        
        h2 {
            
            
        }
        
        .vignette{
            
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            box-shadow: 0 0 300px rgba(0,0,0,2) inset;
            opacity: 0.7;
            
        }
        
        .vignette2{
            
         
          
  
            box-shadow: 0 0  10px rgba(0,0,0,2) inset;
            opacity: 0.95;
            
        }
        
        
        @media only screen and (max-width: 3000px) { 
   #logo {
    width: 100% !important;
    /* Use the padding shorthand */
    padding: 172px 50px 169px 50px;
    margin: 0;
       
  }
          
}
       
        @media screen and (max-width: 768px){
            .col-sm-4{
                text-align:center;
                margin: 25px 0;
 }
            .navbar-brand { position: fixed; margin-top: 0px;} 
           
            
            

            }
           
        
               .col-sm-8{
                text-align:center;
                margin: 25px 0;

                
            }
            
            .col-sm-12{
                text-align:center;
                margin: 25px 0;

                
            }
        
            .col-sm-6{
                text-align:center;
                margin: 25px 0;

                
            }
        
        }
        
        
        @media screen and (max-width: 1200px){
    
        .navbar-brand { margin-top: -50px;} 
        }
        
        /*Pricing styling*/
        
        .panel{
            border: 1px solid #000;
            border-radius: 5pX;
            transition: box-shadow 0.5s;
        }
        
        .panel:hover {
            box-shadow: 5px 0px 40px rgba(0,0,0, .2);
        }
        
        .panel-footer .btn:hover {
            border: 1px solid #000 ;
            background-color: #fff !important;
            color: #95bf46;
            
        }
        
        .panel-heading {
                color: #fff !important;
                background-color: #000 !important;
                padding: 25px;
                border-bottom: 1px solid transparent;
                border-top-left-radius: 0px;
                border-top-right-radius: 0px;
                border-bottom-left-radius: 0px;
                border-bottom-right-radius: 0px;
            
        }
        
        
        .panel-footer {
            background-color: #fff !important;
        }

        .panel-footer h3 {
            font-size: 32px;
        }

        .panel-footer h4 {
            color: #aaa;
            font-size: 14px;
        }

        .panel-footer .btn {
            margin: 15px 0;
            background-color: #000;
            color: #fff;
        }
        
        .navbar {
            margin-bottom: 5px;
            
            background-color: #FFF;
            z-index: 9999;
            border: 0;
            font-size: 12px !important;
            line-height: 1.42857143 !important;
            letter-spacing: 4px;
            border-radius: 0;
            font-family: Montserrat, sans-serif;
            
        }
        
  
        
        .navbar li a, .navbar .navbar-brand {
            
            color: #000 ;
            
        }
        
        .navbar-nav li a:hover, .navbar-nav li.active a {
            
            background-color: #7fb839 !important;
            box-shadow: 0 5px 20px rgba(76,110,34,0.8);
            color: #FFF !imprtoant;
            transition: all 0.3s ease-in-out;
            
           
          
            
        }
        
          .navbar-nav li a:hover, .navbar-nav li.active a::after {
            color: #FFF!imprtoant;
            background-color: #FFF !important;
              box-shadow: 0 5px 40px rgba(0,0,0,0.8);
              

               
          
            
        }
        
        .navbar-default .navbar-toggle {
         
            border-color: transparent;
            color: #fff !important;
         
            
            
        }
        
    
        footer .glyphicon {
    font-size: 20px;
    margin-bottom: 20px;
    color: #000;
}
        
        /*animation CSS*/
        
        
        .slideanim {visibility:hidden;}
.slide {
    /* The name of the animation */
    animation-name: slide;
    -webkit-animation-name: slide;
    /* The duration of the animation */
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    /* Make the element visible */
    visibility: visible;
}

/* Go from 0% to 100% opacity (see-through) and specify the percentage from when to slide in the element along the Y-axis */
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateY(70%);
    }
    100% {
        opacity: 1;
        transform: translateY(0%);
    }
}
@-webkit-keyframes slide {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
}
        

        
        
        
        
        .ripple {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  position: absolute;
  opacity: 1;
}
.rippleEffect {
    animation: rippleDrop .6s linear;
}

@keyframes rippleDrop {
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
        
        
        
        .stage {
  width: 400px; height: 300px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;
}
figure {
  display: block; position: absolute;
  width: 300px; height: 300px;
  background-color: #60c2ef;
}    
       
       .cube { -webkit-transform-style: preserve-3d;
       -webkit-transform: rotateY(-230deg);
           -webkit-animation: rotate 10s infinite linear; 
        }
        
        .cube:hover {
  -webkit-transform: rotateY(30deg);
  -webkit-transition: all 0.4s ease;
}
.cube:hover figure.right:before, .cube:hover figure.front:before {
  opacity: 0.2;
  -webkit-transition: all 0.4s ease;
}
        
        figure { -webkit-transform-origin: 50% 50% 0; }
        
.front { -webkit-transform: translateZ(150px);
        background-color: #000;
        }
        
.back { -webkit-transform: rotateY(180deg) translateZ(150px);
        background-color: #000;
        }
        
        .top { -webkit-transform: rotateX(90deg) translateZ(150px);
        background-color: #88aef6;
        }
        

        
.bottom { -webkit-transform: rotateX(-90deg) translateZ(150px);
          -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0);
        }
        
.left1 { -webkit-transform: rotateY(-90deg) translateZ(150px); 
        background-color: #3f5f9e;
        }
        
       
        
.right1 { -webkit-transform: rotateY(90deg) translateZ(150px); 
        
        background-color: #3f5f9e;
        }
        
        
        figure:before, figure:after {
  content: ""; display: block; position: absolute;
  width: 100%; height: 100%; opacity: 0;
}
figure:before {
  background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0.5), #000000);
}
figure:after {
  background: -webkit-radial-gradient(top right, rgba(0, 0, 0, 0.5), #000000);
}
        
        .front:before { -webkit-animation: frontShading1 10s infinite linear; }
        
        
        .right:before { opacity: 0.4; -webkit-transition: all 0.4s ease; }
.right:after { display: none; }
.front:before { opacity: 0.1; -webkit-transition: all 0.4s ease; }
.front:after { display: none; }
        
        figure {
  -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(RGBA(0, 0, 0, 0.1)));
}
        



@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(360deg); }
}
        

 
        @-webkit-keyframes rotateTop {
  0% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(360deg); }
}
        

        
        @-webkit-keyframes rotateTop {
            
            
  0% { -webkit-transform: rotateZ(0); }
  100% { -webkit-transform: rotateZ(360deg); }
}
 
        
        
  
        
    </style>
</head>
    
    
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
    
    <!--Navbar-->
    
    

<nav class="navbar navbar-default navbar-fixed-top" style="padding: 10px; ">
    <div class="container">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand " href="#" >Marcus Rosell</a>
        </div>
        <div class="collapse navbar-collapse " id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="#OmOss">About</a></li>
      
            <li><a href="#kataloger">Clients</a></li>
            
            <!--PRISER
            
            <li><a href="#priser">PRISER</a></li>


-->
            <li><a href="#kontakt">Contact</a></li>
            </ul>
        </div>
    </div>
    </nav>
    
   <!--header -->
    <div class="vignette"></div>
   




   
     
    

<!--About us and Contact us Sections-->
    <div id="OmOss">
    
 </div>
      <br>
    <br>
      
    
   
    
    
    
    
    

<div class="container-fluid bg-grey ">
    <div class="row">
        
        <div class="col-sm-8" style="width: 100%">

            <p><strong>Hello, I am William Rosell.</strong> 
<br>
<br>
                I am a serial entrepreneur with a passion for business, technology and marketing.
                
                <br>I strive to help businesses realize their goals.
                <br>
                <br> I am an expert in the Shopify online store platform which you can get a <a href="https://www.shopify.com/?ref=firma-marcus-rosell" class="thumbanim"><strong>free trial account for here!</strong></a>
                
<br>
<br>
                
                Feel free to contact me!
</p>
            
            <div class="col-sm-8" style="width: 100%">
            <span class="logo-small"><img src="Signature%20logo%20Marcus%20Rosel.png" style="width: 30%;"></span>
                
                <div class="col-sm-8" style="width: 100%">
            <span class="logo-small"><img src="ShopifyExperts.png" style="width: 30%;"></span>
                
             </div>   
    </div>
 </div>
</div>
    
     <div class="col-sm-12">
      <a class="btn btn-block btn-social">
          
      <p> Follow me on social media.</p>
  
                      <a href="https://www.facebook.com/profile.php?id=1271661600&ref=bookmarks">  <i class="fa fa-facebook fa-5x btnanim" style="padding: 40px;" aria-hidden="true"></i></a>
                    
                     <a href="https://www.instagram.com/williamrosell/"> 
                   <i class="fa fa-instagram fa-5x btnanim" style="padding: 40px;" aria-hidden="true"></i></a>
          
           <a href="https://se.linkedin.com/in/williamrosell/"> 
          <i class="fa fa-linkedin fa-5x btnanim" style="padding: 40px;" aria-hidden="true"></i></a>
          
  
          <br>
          <br>
          
        
 </a>
    
 
    </div>
    
    </div>
    
    
    <div class="row text-center">
    
     <div class="col-sm-4">
      
   
      
       
       <blockquote class="col-sm-4 instagram-media thumbanim" style="width: 100%;" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BPpRro3h5H9/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Lights #deadbyapril</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ett inlägg delat av Marcus Rosell (@maggat) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-01-24T11:10:32+00:00">Jan 24, 2017 kl. 3:10 PST</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
       
  </div>
        
           <div class="col-sm-4">
              
              <blockquote class="instagram-media thumbanim" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:62.5% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BBD-APqOnuh/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Going to India in 24 hours with the guys to play a festival 😊👍🏻 #deadbyapril #india #thiswillbeinteressting</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ett inlägg delat av Marcus Rosell (@maggat) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-01-28T00:07:09+00:00">Jan 27, 2016 kl. 4:07 PST</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
              
</div>
        
         
          <div class="col-sm-4">
       
       <blockquote class="instagram-media thumbanim" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50.0% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BN7c4xRhswA/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Setting up shop #flashlight</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ett inlägg delat av Marcus Rosell (@maggat) <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2016-12-12T19:31:59+00:00">Dec 12, 2016 kl. 11:31 PST</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>
       
              </div> 

    </div>
    
    
    
<!--Services-->
<div id="varumarken" class="container-fluid">
    </div>
   





    
    <!--Portfolio-->
    <div id="kataloger" class="container-fluid">
    </div>
    <div class="container-fluid text-center bg-grey slideanim" style="width: 75%; background: transparent;">
    <h2>Clients,Projects and Partners.</h2>
    <h4>To name a few:</h4>
        <br>
        <div class="row text-center">
        <div class="col-sm-4">
            <div class="thumbnail thumbanim">
                <a href="http://www.deadbyapril.com"><img src="DBA%20LOGO.png" alt="Dead by April"></a>
                <p><strong>Dead by April <br> (Band)</strong></p>
                <p>Shopify online store platform, design and Business development.</p>
            </div>
            </div>
            <div class="col-sm-4">
            <div class="thumbnail thumbanim">
                <a href="http://www.umusic.com"><img src="Universal%20Music_BW_logo(1).jpg" alt="Universal Music" style="margin-top: 40px;"></a>
                <br>
                <p><strong>Universal Music <br> (Major Record label)</strong></p>
                <p>Digital art for artists.</p>
                </div>
            </div>
            <div class="col-sm-4">
            <div class="thumbnail thumbanim">
                <a href="https://individ.myshopify.com/"><img src="logo.png" style="margin-top: 55px;" alt="Individ"></a>
                <p><strong>Individ.com <br> <br> (Up and coming major fashion store.)</strong></p>
                <p>Shopify online store platform, design and integration against a scandinavian business system.</p>
                </div>
            </div>
            </div>
        
        <div class="row text-center">
        
          
            <div class="col-sm-4" style="">
            <div class="thumbnail thumbanim">
                <a href="http://www.impact-studios.com"><img src="Impact_Studios_Logo_White.png" alt="Soda" ></a>
                <p><strong>Impact Studios <br> (Music Studio)</strong></p>
                <p>Shopify online store platform.</p>
                </div>
            </div>
               <div class="col-sm-4" style="">
            <div class="thumbnail thumbanim">
                <a href="http://www.fredmandigital.com"><img src="Fredman_digital_logo_2_1024x1024.png"  style="margin-top: 55px;" alt="Studio Fredman" ></a>
                <p><strong>Fredman Digital <br> (Music Production Software)</strong></p>
                <p>Shopify online store platform, design and software engineering.</p>
            </div>
            </div>
            
            
     
        
            
            
            <div class="col-sm-4" style="">
            <div class="thumbnail thumbanim">
                <a href="alanrust.myshopify.com"><img src="Alan-rust-logo.png" alt="alan rust" style="height: 130px; width: 130px;"></a>
                <p><strong>Alan Rust <br> (Clothing brand)</strong></p>
                <p>Shopify online store platform, design and custom html,java and CSS.</p>
            </div>
            </div>
           </div>
        
      <div class="row text-center" style="">
                
            <div class="row text-center">
        
            <div class="col-sm-4">
            <div class="thumbnail thumbanim">
                <a href="http://www.medieinstitutet.se/"><img src="medieinstitutet.png" alt="medieinstitutet"></a>
                <p><strong>Medieinstitutet <br> (IT University)</strong></p>
                <p>I educate in E-commerce with Shopify as specialization here.</p>
                </div>
            </div>
                <div class="col-sm-4">
            <div class="thumbnail thumbanim">
                <a href="https://www.studioph.se"><img src="Studio%20PH.png" alt="Studio PH"></a>
                <p><strong>Studio PH <br> (Music Studio)</strong></p>
                <p>Business partner which I supplied with a Shopify online store and custom java.</p>
            </div>
            </div>
            <div class="col-sm-4">
            <div class="thumbnail thumbanim">
                <a href="https://www.sharespine.com/"><img src="sharespine-logo-2.png" alt="sharespine"></a>
                <p><strong>Sharespine <br> (business integration)</strong></p>
                <p>Works with me on my online stores for integration.</p>
                </div>
            </div>
            </div>
        
    
           

    

       
        </div>
        
        
        <div class="row text-center" style="">
                
            <div class="row text-center">
        
            <div class="col-sm-4">
            <div class="thumbnail thumbanim">
                <a href="https://bananagaming.tv/"><img src="Go%20bananas.png" alt="bananagaming"></a>
                <p><strong>Bananagaming <br> (Youtuber)</strong></p>
                <p>Shopify online store platform and business consulting.</p>
                </div>
            </div>
           
            
            </div>
        
    
           

    

       
        </div>
        
    
    </div>
  
    
<!--Customer quotes carousel
<br>
    
    <h2 style="text-align: center;">Vad våra kunder säger</h2>
    <div id="myCarousel" class="carousel slide text-center" data-ride="carousel">
    <!--Indicators
<ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        -->
        <!--Wrapper for slides
        <div class="carousel-inner" rolse="listbox">
        <div class="item active">
          <h4>"Best supplier I ever worked with." <br><span style="font-style:normal;">Ralph Lauren, CEO, Ralph Lauren</span></h4>
            </div>
            <div class="item">
                
              <h4>"Berns always deliver." <br><span style="font-style:normal;">Marcus Rosell, CEO, Studio Rosell</span></h4>
            
            </div>
            -->
            
            
     
        
        <!-- Left and Right Controlls
        <a class="left carousel-control" href="#myCarousel" rolse="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
           <a class="right carousel-control" href="#myCarousel" rolse="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
    -->
    <!--Pricing Section

    <div id="priser" class="container-fluid">
    </div>
    <div class="container-fluid">
    <div class="text-center">
        <h2>Priser</h2>
        <h4>Välj en betalningsplan som fungerar för dig</h4>
        </div>
        <div class="row">
            <div class="col-sm-4 ">
            <div class="panel panel-default text-center ">
                <div class="panel-heading">
                <h1>Basic</h1>
                </div>
                <div class="panel-body">
                 <p><strong>20</strong> Lorem</p>
                 <p><strong>15</strong> Ipsum</p>
                 <p><strong>5</strong> Dolor</p>
                 <p><strong>2</strong> Sit</p>
                 <p><strong>Endless</strong> Amet</p>
                </div>
                <div class="panel-footer">
                <h3>259:-</h3>
                    <h4>Per månad</h4>
                    <button class="btn btn-lg btnanim">Välj</button>
                    
                    </div>
                </div>
            </div>
            
            <div class="col-sm-4">
            <div class="panel panel-default text-center">
                <div class="panel-heading">
                <h1>Shopify</h1>
                </div>
                <div class="panel-body">  
                <p><strong>50</strong> Lorem</p>
                    <p><strong>25</strong> Ipsum</p>
                    <p><strong>10</strong> Dolor</p>
                    <p><strong>5</strong> Sit</p>
                    <p><strong>Endless</strong> Amet</p>
                    </div>
                <div class="panel-footer">
                <h3>699:-</h3>
                <h4>Per månad</h4>
                <button class="btn btn-lg btnanim">Välj</button>
                </div>
            </div>
        </div>
                
                <div class="col-sm-4">
                <div class="panel panel-default text-center">
                    <div class="panel-heading">
                    <h1>Avancerad</h1>
                    </div>
                    <div class="panel-body">
                        <p><strong>100</strong> Lorem</p>
                        <p><strong>50</strong> Ipsum</p>
                        <p><strong>25</strong> Dolor</p>
                        <p><strong>10</strong> Sit</p>
                        <p><strong>Endless</strong> Amet</p>
                    </div>
                    <div class="panel-footer">
                    <h3>2649:-</h3>
                        <h4>Per månad</h4>
                        <button class="btn btn-lg btnanim">Välj</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
-->

<!--Contact Container-->
    <div id="kontakt" class="container-fluid">
    </div>
    <div class="container-fluid bg-grey">
    <h2 class="text-center">Contact </h2>
        
                    <p class="text-center"><strong>Marcus Rosell</strong></p>
        <p class="text-center"><span class="glyphicon glyphicon-map-marker"></span> Gamlestadsvägen 2<br> 415 02 Gothenburg <br>Sweden</p>
        
          <p class="text-center"><span class=" glyphicon glyphicon-phone"></span> Tel +46(0)7763380800</p>
        <p class="text-center"><span class="glyphicon glyphicon-envelope"></span> marcus@studiorosell.com</p>
        <br>
        
    </div>

            
            
            <!--
            <div class="col-sm-7">
            <div class="row">
                <div class="col-sm-6 form-group">
                <input class="form-control" id="name" name="name" placeholder="Namn" type="text" required>
                 </div>
                <div class="col-sm-6 form-group">
                <input class="form-control" id="email" name="email" placeholder="email" type="email" required>
            </div>
        </div>
        <textarea class="form-control" id="comments" name="comments" placeholder="Kommentar" rows="5"></textarea><br>
        <div class="row">
            <div class="col-sm-12 form-group">
            <button class="btn btn-default pull-right btnanim" type="submit">Skicka</button>
           -->
                    
                   
     
   
                
       
    
    <footer class="text-center">
        <br>
  <a href="#myPage" title="To Top">
    <span class="glyphicon glyphicon-chevron-up"></span>
  </a>
        
  
</footer>
    
    
     <div  class="row text-center" >
    <p>Music production inquires: <br><a href="http://www.studiorosell.se" title="Studio Rosell" class="thumbanim">Studio Rosell</a></p>
    </div>
    <br>
    <br>
    
    
    <script>
       
        
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

   // Make sure this.hash has a value before overriding default behavior
  if (this.hash !== "") {

    // Prevent default anchor click behavior
    event.preventDefault();

    // Store hash
    var hash = this.hash;

    // Using jQuery's animate() method to add smooth page scroll
    // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 900, function(){

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
      });
    } // End if
  });
})

$(window).scroll(function() {
  $(".slideanim").each(function(){
    var pos = $(this).offset().top;

    var winTop = $(window).scrollTop();
    if (pos < winTop + 600) {
      $(this).addClass("slide");
    }
  });
});

        
      $("#button").click(function() {
  $('.transform').toggleClass('transform-active');
});
        
        
        
        $("div").click(function (e) {

  // Remove any old one
  $(".ripple").remove();

  // Setup
  var posX = $(this).offset().left,
      posY = $(this).offset().top,
      buttonWidth = $(this).width(),
      buttonHeight =  $(this).height();

  // Add the element
  $(this).prepend("<span class='ripple'></span>");


 // Make it round!
  if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
  } else {
    buttonWidth = buttonHeight; 
  }

  // Get the center of the element
  var x = e.pageX - posX - buttonWidth / 2;
  var y = e.pageY - posY - buttonHeight / 2;


  // Add the ripples CSS and start the animation
  $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
  }).addClass("rippleEffect");
});
        
        
        
        var myIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(carousel, 9000);    
}
        
        

        
        
</script>

   
    
    </body>
    </html>