cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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= http://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= "http://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= "http://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= "http://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= "http://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= "http://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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console