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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <!-- This is an example of a static portfolio website. (This project was completed in January 2017) This project isn't perfect, but it's reasonably optimized. I could make it a bit better and more visually appealing by investing more time into it, but I'll learn a lot more by working on new projects. Learning more and coming back to build another portfolio project at a later date will allow me to build a far superior one in the long-term anyway
P.S. Some of the images used in the project are no longer available. I'm not going to continually update this project as now I'm working on more advanced projects. 
-->

<head>
  <title>
    Cameron Chardukian | Front End Developer
  </title>
</head>

<body>
  <div id="headline">
  <header>
    <h1> Cameron Chardukian </h1>
    <h2> Front End Developer </h2>
    </div>
  <nav>
    <ul id="navbar"> 
      <li> <a href= "#About"> About </a> </li>
      <li> <a href="#Portfolio"> Portfolio </a> </li>
      <li> <a href= "#followMe"> Follow Me</a> </li>
      <li> <a href="#Contact"> Contact </a> </li>
    </ul>
  </nav>
 </header>
  <h1> <a name="About"> </a> About </h1>
  <img src="https://i.imgsafe.org/20ae8c297d.jpg" id="profile">
  <p id="biography"> I build websites with a purpose. My focus when working with you is building a website that converts. Whether you want more shares, subscribers, or sales, I can help you increase the metrics you value most.</p>
  <div id= "wrapper">
  <section>
    <h2> <a name="Portfolio"> </a> Portfolio </h2>
    <ul id="gallery">
      <li> 
        <a href= https://codepen.io/camchardukian/details/mOXZWE/> <img src="https://i.imgsafe.org/2fdfc74c8c.jpg" alt="tribute page"> </a> <p id="caption"> A simple tribute page built with HTML & CSS. </p> </li>
     
      <li> 
        <a href= "https://codepen.io/camchardukian/details/mOXZWE/"> <img src="https://i.imgsafe.org/2fdfc74c8c.jpg" alt="coming soon"> </a> <p id="caption"> New projects will be added as they are built. </p> </li>
    
     <li> 
        <a href= "https://codepen.io/camchardukian/details/mOXZWE/"> <img src="https://i.imgsafe.org/2fdfc74c8c.jpg" alt="coming soon"> </a> <p id="caption"> New projects will be added as they are built. </p> </li>
    
     <li> 
        <a href= "https://codepen.io/camchardukian/details/mOXZWE/"> <img src="https://i.imgsafe.org/2fdfc74c8c.jpg" alt="coming soon"> </a> <p id="caption"> New projects will be added as they are built. </p> </li>
    
     <li> 
        <a href= "https://codepen.io/camchardukian/details/mOXZWE/"> <img src="https://i.imgsafe.org/2fdfc74c8c.jpg" alt="coming soon"> </a> <p id="caption"> New projects will be added as they are built. </p> </li>
    
     <li> 
        <a href= "https://codepen.io/camchardukian/details/mOXZWE/"> <img src="https://i.imgsafe.org/2fdfc74c8c.jpg" alt="coming soon"> </a> <p id="caption"> New projects will be added as they are built. </p> </li>
    
   
    </ul>
    <section>
      <div/>
      <h2> <a name="followMe"></a>Follow Me </h2>
      <ul class="Logos">
        <li class="blog"> <a href="cameronchardukian.com"> Blog </a> </li>
        <li class="youtube"> <a href= "https://www.youtube.com/channel/UCVcbrdaVqBBrHGY8MnAhEhg"> Youtube </a> </li>
        <li class="insta"> <a href="https://www.instagram.com/camchardukian/"> Instagram </a> </li>
      </ul>
      
    <h2> <a name="Contact"></a>Contact </h2>
      <ul class="Logos">
        <li class="mail"><a href= "mailto:camchardukian@gmail.com"> Mail </a> </li>
      </ul>
      
    
  <footer> &copy; 2017 </footer>
</body>
            
          
!
            
              body {background-color:#c4c4c4;}

nav{background-color:#CCF2FF; padding 15px 0px; margin:15px 0px 0px}

h1 {margin: 15px 0px; font-family: cursive; font-size: 2.3em; font-weight: normal; line-height: 0.8em; text-align:center;}

h2 {font-family: cursive; font-size: 1.7em; margin: -2px 0px 0px; text-align:center; clear:both;}

h2, a (text-decoration: none; color: black; font-size: 80px;)

#biography {clear: both; margin 30px; font-size: 1.27em;}

#wrapper {max-width: 940px; margin: 0 auto; padding:0 5%;}

img {max-width:100%; border-radius: 0%;}

#profile  {border-radius: 100%; float: left; max-width: 30%; width: 110px; height:110px; margin: 2.5%; position: relative; top:-3px;}

#headline {text-align: center; margin: 0;}

#navbar {color:red; list-style:none;}

#gallery {margin: 0; padding:0; list-style:none;}

#gallery li {float: left; width: 45%; height=same-as-width; margin: 2.5%; background-color: #6D9773;https://i.imgsafe.org/20ae8c297d.jpg;}

#caption {font-size: 1.1em; color:FFF; margin:0; padding: 2%; text-align: center; min-height: 40px;}

footer {font-size: 0.75em; text-align: center; padding-top: 20px; clear: both;}

/* LOGOS or iconography that will appear by our key words. */
.Logos {list-style: none; padding: 0; margin: 0; font-size: 1em;}

.Logos li.blog a {background-image:
  url("http://www.freeiconspng.com/uploads/edit-learning-writing-icon--0.jpg");}

.Logos li.youtube a {background-image: url("https://cdn2.iconfinder.com/data/icons/colorful-guache-social-media-logos-1/157/social-media_youtube-128.png")}

.Logos li.insta a {background-image: url("http://3835642c2693476aa717-d4b78efce91b9730bcca725cf9bb0b37.r51.cf1.rackcdn.com/Instagram_App_Large_May2016_200.png")}

.Logos li.mail a {background-image: url("http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Other-Mail-icon.png");}

.Logos a {
  display: block;
  min-height: 25px;
  background-repeat: no-repeat;
  background-size: 25px 25px;
  padding: 0 0 0 30px;
  margin: 0 0 25px;
  
  /* Logos finished */



}

/* Reponsive Design Below */
@media screen and (min-width: 480px)
{
/* Great for testing different layouts/code and easily seeing your design's breakpoints. body {background: pink;} */

  #profile {height: 120px; width: 120px; position: relative; top: -6px}
  
  #biography {position: relative; top: 15px; font-size: 1.3em;}
}



@media screen and (min-width: 660px)
{
  /* Great for testing different layouts. body {background:yellow;} */
  
  #profile {position: relative; top: -6px; width: 133px; height: 133px;}

  #biography {margin-bottom: 30px; font-size: 1.4em; position: relative; top: 15px;}
  
  #gallery li {width: 28.3333%}
  
  #gallery li:nth-child(4n) {
    clear:left;}
  
}
/*
@media screen and (min-width: 830px)
I thought about adding another media query to optimize for large desktop devices, but as I noted at the top of the HTML file, I'd rather move on to new projects to continue learning more.
            
          
!
999px
Loading ..................

Console