A Pen by Alicia

Thumbnail
This awesome code was written by 08licia, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 08licia ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Alicia</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container-fluid">
  
  <div id="header">
    
    <div id="nav-bar" class="row">
      <div class="col-md-offset-6 col-md-2 col-xs-4">
        <p class="text-center"><a href="#portfolio">Portfolio</a></p>
      </div>
      <div class="col-md-2 col-xs-4">
        <p class="text-center"><a href="#quotes">Quote</a></p>
      </div>
      <div class="col-md-2 col-xs-4">
        <p class="text-center"><a href="#footer">Contact</a></p>
      </div>
    </div>
    
    <div class="main-title row">
      <div class="col-md-offset-3 col-md-6 col-xs-offset-3 col-xs-6">
        <h1 class="text-center">Welcome</h1>
      </div>
    </div>
    
    <div class="subtitle row">
      <div class="col-md-12 col-xs-12">
        <p class="text-center">To my very first portfolio webpage!</p>
      </div>
    </div>
    
  </div>
  
  <div id="portfolio">
      <div class="col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-4 col-md-3">
        <div class="portfolio-element">
          <img class="img-responsive center-block" src="http://l3.yimg.com/ny/api/res/1.2/F7wIrmn4o520AM115lfW.Q--/YXBwaWQ9aGlnaGxhbmRlcjtzbT0xO3c9ODAw/http://globalfinance.zenfs.com/en_us/Finance/BUSINESSWIRE/495d92adaec4a31350e2c18d4e784b03">
          <p class="text-center">Some incredible comment</p>
        </div>
      </div>
      <div class="col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-4 col-md-3">
        <div class="portfolio-element">
          <img class="img-responsive center-block" src="http://www.shell.com/business-customers/trading-and-supply/trading/news-and-media-releases/shell-energy-europe-secures-power/_jcr_content/par/textimage/image.img.800.jpeg/1481789366295/wind-power-energy.jpeg">
          <p class="text-center">A lot to say about this picture</p>
        </div>
      </div>
    <div class="col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-4 col-md-3">
        <div class="portfolio-element">
          <img class="img-responsive center-block" src="https://i.kinja-img.com/gawker-media/image/upload/s--j4s0Zr6i--/c_scale,f_auto,fl_progressive,q_80,w_800/18x824k7wbd3gjpg.jpg">
          <p class="text-center">Very proud of that one!</p>
        </div>
      </div>
      <div class="col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-4 col-md-3">
        <div class="portfolio-element">
          <img class="img-responsive center-block" src="http://obscurity.typepad.com/.a/6a01156e735f12970c019b03ca485b970d-800wi">
          <p class="text-center">An amazing story behind that one</p>
        </div>
      </div>
    <div class="col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-4 col-md-3">
        <div class="portfolio-element">
          <img class="img-responsive center-block" src="https://s-media-cache-ak0.pinimg.com/originals/5f/9d/52/5f9d526d0465ae48064174b3293586d3.jpg">
          <p class="text-center">Here is just a light bulb!</p>
        </div>
      </div>
      <div class="col-xs-offset-2 col-xs-8 col-sm-offset-0 col-sm-4 col-md-3">
        <div class="portfolio-element">
          <img class="img-responsive center-block" src="https://ivrea.aaschool.ac.uk/wp-content/uploads/2013/02/024.jpg">
          <p class="text-center">This one is completly random</p>
        </div>
      </div>
  </div>
    
  <div id="quotes">
    <blockquote>
      <p>My point is, life is about balance. The good and the bad. The highs and the lows. The pina and the colada.</p>
      <footer>Ellen DeGeneres</footer>
    </blockquote>
  </div>
  
   
   <div id="footer">
     <div id="footer-content">
         <p>Let's get in touch!</p>
         <a href="https://twitter.com/theellenshow?lang=fr" target="_blank"><img class="img-icon" src="https://ton.twimg.com/dtc/3e771cc3-1ba8-4559-99ed-5501d471ba03/_static/imgs/DTC_Services_1h_hero_bg.png"/></a>
         <a href="https://fr-fr.facebook.com/ellentv" target="_blank"><img class="img-icon" src="http://www.association-dentistes-chablais.ch/images/facebook.png"/></a>
         <a href="https://www.freecodecamp.com/08licia" target="_blank"><img class="img-icon" src="https://metakata.altervista.org/wordpress/wp-content/uploads/2015/08/freecodecamp_white.png"/></a>
     </div>
  </div>
  <!-- #407D6E #71B699>>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

  

</body>

</html>

/*Downloaded from https://www.codeseek.co/08licia/a-pen-by-alicia-MJmXzQ */
@media (max-width: 350px) {
    body{font-size: 9px;};
}

@media (min-width: 350px) {
    body{font-size: 12px;};
}

@media (min-width: 520px) {
    body{font-size: 20px;};
}

@media (min-width: 800px) {
    body{font-size: 30px;};
}

@media (min-width: 1200px) {
    body{font-size: 40px;};
}

body{
  min-width: 150px;
}

#header {
  background-image: url("https://static.pexels.com/photos/131683/pexels-photo-131683.jpeg");
  background-repeat: no-repeat;
  background-position: fixed;
  background-size: cover;
  padding-bottom: 30%;
}

.main-title {
  padding-top: 10%;
  color: #CD5755;
}

.main-title h1 {
  border: 2px solid;
  border-radius: 15px;
  font-size: 230%;
  min-width: 100px;
  font-weight: bold;
}

.subtitle{
  padding-top: 20px;
  font-size: 130%;
  color: #333333;
  font-weight: bold;
}

#nav-bar {
  padding-top: 20px;
}

#nav-bar a {
  color: #FFFFFF;
  background-color: #7A2127;
  font-weight: bold;
  font-size: 90%;
  padding: 1px 5px 1px 5px;
}

#nav-bar a:hover {
    text-decoration: none;
}

#nav-bar a:active {
    text-decoration: none;
}

#portfolio {
  background: #FFFFFF;
  padding: 20px;
  border-top: 2px solid #333333;
  height: auto;
  overflow: auto;
}

.portfolio-element{
  margin-bottom: 30px;
  font-size: 70%;
  color: #CD5755;
}

.portfolio-element img{
  width: 75%;
  margin-bottom: 3px;
}

#quotes{
  background: #7A2127;
  padding: 30px;
  border-top: 2px solid #333333;
}

blockquote{
  font-size: 90%;
  color: #FFFFFF;
}

blockquote footer{
  color: #AAAAAA;
}

#footer{
  background: #353535;
  padding: 25px 20px 70px 200px;
  color: #FFFFFF;
  font-size: 16px;
}

#footer-content {
  float: right;
  white-space:nowrap;
  
}

.img-icon {
  height: 50px;
  display: inline-block;
}

#footer p{
  display: inline-block;
}

Comments