cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <html>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">


  <!-- code for arrow, page-up -->
<!-- Return to Top -->
<a href="javascript:" id="return-to-top"><i class="icon-chevron-up"></i></a>
<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
 <!-- new -->

<body>  
  <div class="container-fluid text-center">
    
    
    <div id="whiteMarginBottomOview" class="row backgroundColorBlue paddingLeftRightBlue">
      <h1 style="font-weight: bold; font-size: 42px; font-family: 'Roboto'; color: #fff; text-align: center;">Media</h1>
      
      <p style="font-family: 'Roboto'; text-align: center; color: #fff;">See our progress</p>
      
      
      <!-- code for twitter api -->
      <!-- find it here: https://publish.twitter.com/#
or more details here: https://dev.twitter.com/web/embedded-timelines-->
      <a class="twitter-timeline" data-height="620" href="https://twitter.com/BatsouElef">Tweets by BatsouElef</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
      
      
      </div>
    
    
    
    <div class="row margins marginColorGrey">
      
			<h1 style="font-weight: bold; font-size: 42px; font-family: 'Roboto'; color: #0e7feb; text-align: center;">Publications</h1>
      
      <!-- every row is a new publication -->
      <!-- row is divided in two parts, one for the img and one for the text -->
      <!-- img is span-1 and text is span-11 -->
		  <div class="row">
        <div class="col-md-2">
          <img class="imgPublications img-responsive" alt="null" src="https://oviewapp.com/wp-content/uploads/2016/08/Publication_small01.png">
        </div>
        <div class="col-md-10">
          <h3 class="publicationTitle">MASSY WAHAB OVER OVIEW INTERVIEW</h3>
          <div class="ult-responsive"><p>In de aanloop naar het Cross Media Congres doet het Nederlands MediaNetwerk een serie interviews met Startups. Vandaag spreken we Massy Wahab, oprichter en managing director van Oview.</p>
<p><strong>Wat is Oview?</strong></p><p>Oview is een mobiele applicatie dat bedoeld is om de publieke opinie van mobiele gebruikers internationaal met elkaar te vergelijken. De app wil aan twee belangrijke waarden bijdragen: vrijheid van meningsvorming en vrijheid van meningsuiting. De app vraagt gebruikers een mening te geven over een stelling, en laat meteen zien hoe andere gebruikers in de hele wereld op deze stelling hebben gereageerd.</p>
<p><a style="text-decoration: none;" href="http://nederlandsmedianieuws.nl/interviews/Startups-Massy-Wahab-over-Oview.html" target="_blank">Read More.</a></p>
</div> 
   <!-- end of ult-responsive -->
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-2">
          <img class="imgPublications img-responsive" alt="null" src="https://oviewapp.com/wp-content/uploads/2016/08/Publication_small02.png">
        </div>
        <div class="col-md-10">
          <h3 class="publicationTitle">COBY BABANI – DE INTRINSIEKE MOTIVATIE ALS PEACEMAKER</h3>
          <div class="ult-responsive"><p>Vanuit zijn ontevredenheid over de hedendaagse samenleving wilde Coby Babani iets veranderen, iets ondernemen. “Men zegt dat dingen gaan zoals ze gaan. Daar ben ik het totaal niet mee eens.” Zo kwam hij in contact met Massy Wahab van OFoundation en creëerde Oview. Een mobiele applicatie: “We’re giving the power back to the people.”</p>
<p><a style="text-decoration: none;" href="http://socreatie.nl/coby-babani-de-intrinsieke-motivatie-als-peacemaker/" target="_blank">Read More.</a></p>
</div> 
   <!-- end of ult-responsive -->
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-2">
          <img class="imgPublications img-responsive" alt="null" src="https://oviewapp.com/wp-content/uploads/2016/08/Publication_small03.png">
        </div>
        <div class="col-md-10">
          <h3 class="publicationTitle">OVIEW - TINDER FOR THE OPINIONS</h3>
          <div class="ult-responsive"><p>With Oview, Coby and Massy “give the power back to the people” by allowing them to vote for their favorite opinion about any subject.
We met Coby at a SenseDrink, an event organized by MakeSense, in Utrecht. During this party, we understood that Coby was not a common person. He explains us that a human being does not need much to live and to be happy. Thus, he decided to become homeless, wearing second-hand clothes and to give all his extra money for charity.
<p><a style="text-decoration: none;" href="http://www.eurhopetour.com/en/2016/04/18/oview-the-tinder-of-opinions/" target="_blank">Read More.</a></p>
</div> 
   <!-- end of ult-responsive -->
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-2">
          <img class="imgPublications img-responsive" alt="null" src="https://oviewapp.com/wp-content/uploads/2016/08/cropped-icon_App_Oview.png">
        </div>
        <div class="col-md-10">
          <h3 class="publicationTitle">THE OVIEWAPP</h3>
          <div class="ult-responsive"><p>Oview is a mobile application, which is meant to internationally engage smart phone users. The main two ways are facilitation of the possibility for people to develop their own opinion, and giving them the opportunity to make that opinion count and heard. Oview has the two most important elements in it to make your voice valuable. Freedom to form Your Own Opinion and Freedom of speech.</p>
<p>Our show of hands will help society hear the voice of people across the world. And by making the results easy to understand, everyone will be able to participate in a global emancipation of democracy. In short, we want to make your voice relevant again. With Oview, it just takes one swipe to be an opinion maker.</p>
<p><a style="text-decoration: none;" href="https://sites.google.com/site/oviewteam/home/landing-page" target="_blank">Read More.</a></p>
</div> 
   <!-- end of ult-responsive -->
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-2">
           <img class="imgPublications img-responsive" alt="null" src="//oviewapp.com/wp-content/uploads/2016/08/Publication_small04.png">
        </div>
        <div class="col-md-10">
          <h3 class="publicationTitle">De Verrekijker</h3>
          <div class="ult-responsive"><p>En dat is niet het enige project dat plaatsvindt in De Verrekijker. Verschillende vrijwilligers studeren iets in de ict en zorgen voor de nodige technologie. Naast de deur ligt een apparaatje dat constateert of er iemand binnen is, waardoor automatisch vastgesteld wordt of De Verrekijker open is. Dit is vervolgens te zien op de site.</p>
<p>Ook&nbsp;ontwikkelt Coby met een paar studenten een app, Oview. Deze app geeft gebruikers een stelling over een actuele kwestie en levert hier gelijk verschillende nieuwsartikelen bij. “Mensen lezen vaak maar één nieuwsbron en creëren een soort echokamer om zich heen, van mensen met dezelfde mening. Met deze app willen we ze stimuleren echt hun eigen mening te vormen.”</p>
<p><a style="text-decoration: none;" href="http://www.advalvas.vu.nl/nieuws/de-verrekijker-yoga-soep-van-oude-groenten-en-bier-voor-1-euro" target="_blank">Read More.</a></p>
            <p style="padding-bottom: 70px"></p>
</div> 
   <!-- end of ult-responsive -->
        </div> 
        <!-- end of md-10 -->
      </div>
      

    </div> <!-- end row -->
    
    
    
    
    
    <!-- Beta code -->
       <div id="paddingTopBottomBeta" class="row backgroundColorBlue paddingLeftRightBlue"> <!-- part: Apply for Beta -->
      
      <div style="text-align: center;"><button style="background-color: rgb(255, 255, 255); border: 3px solid rgb(255, 255, 255); border-radius: 48px; color: rgb(14, 127, 235); font-family: Roboto; font-size: 34px; font-weight: bold; padding: 26px 41px; text-decoration: none; cursor: pointer;"> Apply for BETA</button></div>
      
      <h2 style="text-align: center; font-family: 'Roboto'; font-size: 42px; color: #ffffff ; padding-top:20px">YOUR OPINION COUNTS.</h2>
      
    </div> <!-- end of part: Apply for Beta -->

    <!-- pre footer --> <!-- in img: style="width: 158.33px; height: 39.58px" -->
    <div id="paddingTopBottomPreFooter" class="row paddingLeftRightBlue backgroundColorGrey">
     <div class="col-sm-2">
       <a href="http://www.deuniversiteit.nl/" target="_blank"><img class="img-responsive" src="https://oviewapp.com/wp-content/uploads/2016/07/uiiiiiii-1.png" /></a> 
     </div>
     <div class="col-sm-2">  
       <a href="https://www.liveondemand.com/" target="_blank"><img class="img-responsive" src="https://oviewapp.com/wp-content/uploads/2016/07/Livvvvvvv.png" /></a>     
     </div>
     <div class="col-sm-2">     
       <a href="http://www.monkeytree.house/" target="_blank"><img class="img-responsive"  src="https://oviewapp.com/wp-content/uploads/2016/07/MONKAYY.png" /></a>
     </div>
     <div class="col-sm-2">
       <a href="https://www.civocracy.org/" target="_blank"><img class="img-responsive"  src="https://oviewapp.com/wp-content/uploads/2016/07/Civvvvv.png" /></a>
     </div>
     <div class="col-sm-2">
       <a href="https://tr.im/Sapient" target="_blank"><img class="img-responsive"  src="http://i1356.photobucket.com/albums/q729/eleftheria_b/Sapient%20and%20Oview/sapient_footer-%20transparent_zpsjgftogax.png"/></a>
     </div>
     <div class="col-sm-2">
       <a href="https://soundcloud.com/social-media-2" target="_blank"><img class="img-responsive" src="https://oviewapp.com/wp-content/uploads/2016/07/SONICCCC-1.png" /></a>
     </div>      
    </div>
     
    </div> <!-- end container-fluid -->

  </div> <!-- end class container-fluid --> 
</body>
</html>

            
          
!
            
              body {
  /* background-color: rgba(14, 127, 235, 0); blue */
  background-color: #F6F6F6;  /* shade of white */
  color: rgba(14,127,235,1); 
  font-family: 'Roboto';
  line-height: 26px;
}
.h2, .h3, h2, h3 {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.h2, .h3, h2, h3 {
    font-weight: 600;
}

h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    font-weight: bold;
}


p{
  color: #818181; /* grey */
  font-family: 'Roboto';

  line-height: 18px;
  font-weight: 400;
  
  margin-top:-10px;
  
}
.backgroundColorBlue {
  background-color: rgba(14,127,235,1) !important; /* color: blue */ 
}

.margins{
  margin-left: 110px;
  margin-right: 110px; 
}

.paddingLeftRightBlue {
  padding-left: 107px;
  padding-right: 107px;
}

#paddingTopBottomBeta{
  padding-top: 300px;
  padding-bottom: 300px;
}

.backgroundColorGrey {
  background-color: rgb(95, 95, 95) !important; /* color: grey */ 
}

#paddingTopBottomPreFooter{
  padding-top: 30px;
  padding-bottom: 30px;
}

#whiteMarginBottomOview{
  margin-bottom: 40px;
}



/* PUBLICATIONS */
.publicationTitle{
    font-size: 16px;
    line-height: 24px;
    color: #303030;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}

.imgPublications {
  width: 170px;
  height: auto;  
}

.ult-responsive{
    font-size: 14px;
    text-align: left;
}
a{color:#303030;}
a:hover{
  color: #1abc9c;
}






/* code for arrow, page-up*/
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    /* I can add here some background-color */
    border: 1px solid white;

    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i { /* inside arrow */
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background:  white /*rgba(0, 0, 0, 0.9)*/;
}
#return-to-top:hover i { /* inside arrow */
    color: rgb(95, 95, 95); /* grey */
    top: 5px;
}

/* end of code for arrow, page-up*/






            
          
!
            
              /* js code for the arrow */
// ===== Scroll to Top ==== 
$(window).scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
});
$('#return-to-top').click(function() {      // When arrow is clicked
    $('body,html').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
});
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console