A Pen by Federico Linares

Thumbnail
This awesome code was written by Federicola, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Federicola ©
  • HTML
  • CSS
  • JavaScript
    <html>

<head>
  <style>
    img { 
        width:100%; 
    }
  </style>
  <title> LAUNCH INTO SPACE</title>

  <body>
    <div id="navbar">
      <center>The Barbie Space Theories Archives</center>

    </div>
    <div class="content">
      <div class="leftcolumn col-1-3">
        <!--left column start -->
        <p> The Lucifer Project. Create a second sun in our solar system Attempt to transform Saturn into a sun creating a runaway nuclear fusion process. Why? To create habitable worlds suitable for life so humans can create colonies on the moons of Saturn.
          The heat created by Saturn becoming a sun would enable the moons to be suitable for life to populate the territory.
          <a href="https://www.youtube.com/watch?v=7uQ4-Jn77xI">More information about the lucifer Project (youtube)(open in new tab)</a>
          <img src="http://saturn.jpl.nasa.gov/assets/science/moons/images/main_flash_image.jpg" alt="saturns_moons">
          <img src="http://lobelog.com/wp-content/uploads/nuclear-bomb-iran-e1405694886188-598x350.jpg" alt="some_text">
          <img src="http://msnlv.com/Solar-System-Exploration.jpg" alt="some_text"> By DR. Federico Sexy Moon
          <img src="http://mat.imageg.net/graphics/product_images/pMAT1-18892646_alternate3_v380.jpg" alt="some_text">

        </p>
      </div>
      <!--left column end-->
      <div class="centercolumn col-1-3">
        <!--center column start-->
        <p>
          The Multiverse Theory. The Multiverse Theory basically states in simple terms that there is not only one universe but an infinite number of universes making it a “multiverse”. According to theory there can be not only infinite universe but there are other
          plausible options like: Bubble Universes, Parallel Universes, Daughter Universes and Mathematical Universes. The thing is, if there are multiverses there are also possibilities of you existing in each separate universe where something different
          is happening in each one. Some scientists think that it is more probable that we live in a multiverse than not.
          <img src="https://3.bp.blogspot.com/-2--m-LDSmYY/T2pUVIgbrYI/AAAAAAAAA7I/HpPEVLIRT6Y/s1600/MultiVerse.png" alt="meme">
          <img src="http://astronomy-links.net/multiverse.jpeg" alt="multiverse">
          <img src="https://www.wired.com/wp-content/uploads/2014/11/nas-wp-www-cluster-1275-quanta-wp-content-files_mf-cache-915f3d84ec89f011f4c64ec05e66d59a_ReachingForTheMultiverse_996.png" alt="manreaching"> By DR. Danshi Hou Yin
          <img src="https://images-na.ssl-images-amazon.com/images/I/51lFxeFXRxL.jpg" alt="some_text">
        </p>
        <!--links to our pages-->
        <ul>
          <li Class="names"><a href="https://codepen.io/kwondergem/">Visit Kayla's Codepen</a></li>

          <li Class="names"><a href="https://codepen.io/BGLASS1/">Visit Brett's Codepen</a></li>

          <li Class="names"><a href="https://codepen.io/Federicola/">Visit Fedrico's Codepen</a></li>

          <li Class="names"><a href="https://codepen.io/Carb/">Visit Micah's Codepen</a></li>

          <li Class="names"><a href="https://www.w3schools.com">Visit Austin's Codepen</a></li>
        </ul>

      </div>
      <!--end of center column-->
      <div class="rightcolumn col-1-3">
        <!--start of right column-->
        <div class="row">
          <div class="col-1-5"> 
            <div class="icon_holder">icon</div>
            <div class="icon">icon<div>
          </div>
          <div class="col-3-5"> description
          </div>
          <div class="col-1-5"> link
          </div>
          </div>
        
        <div class="row">
          <div class="col-1-5"> icon
          </div>
          <div class="col-3-5"> description
          </div>
          <div class="col-1-5"> link
          </div>
          </div>

          <div class="row">
            <div class="col-1-5"> icon
            </div>
            <div class="col-3-5"> description
            </div>
            <div class="col-1-5"> link
            </div>
            </div>


            <!--end of right column-->
          </div>

  </body>
</head>

</html>

/*Downloaded from https://www.codeseek.co/Federicola/a-pen-by-federico-linares-epEqZr */
    *{
  margin: 0;
  box-sizing: border-box;
}
[class*='col-']{
  float: left;
  border: 1px solid white;
}
.col-1-3{
  width: 33.3%;
}
.col-1-5{
  width: 20%;
  
}
.col-3-5{
  width: 60%;
}
.icon_holder{
  border:1px solid red;
}
.icon{
width: 50px;
height:50px;
   background-image: url('https://s-media-cache-ak0.pinimg.com/736x/75/1c/41/751c418d67a0122982943d9b0e471d2d.jpg');
  background-position: center;
  background-size: contain;
}
}
.row{
  width: 100%;
  height: 110px;
  border: 1px solid white;
}

#navbar{
  font-size: 40px;
  top:0px;
  position: fixed;
  height: 70px; /*can also use em eg. 2em*/
  width: 100%;
  background: silver;
  color: slateblue;
  z-index: 1;
}
.content{
  margin-top: 90px; /*this is to push down the content so it isn't covered by navbar*/
}
.leftcolumn{
  color: white;
  padding: 2em;
  background: #DB7093;
  opacity: 0.7;
}
.centercolumn{
  color: white;
  padding: 2em;
  background: slateblue;
  opacity: 0.7;
}
.rightcolumn{
  color: white;
  padding: 2em;
  background: #DB7093;
  opacity: 0.7;
}
body{
  width: 100%;
  height: 100%;
  background-image:url(http://fullhdwp.com/images/wallpapers/Butterfly-Nebula-Wallpaper-HD.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  margin: 0;
  padding: 0;
}



/*Downloaded from https://www.codeseek.co/Federicola/a-pen-by-federico-linares-epEqZr */
    

Comments