css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <!-- Navbar -->
<nav class='navbar navbar-inverse navbar-fixed-top'> <!-- Define navbar area, establish color -->
    <div class='container'> <!-- Contents of navbar area -->
        <div class='navbar-header'>
            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='#navbar-collapse'>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
            </button>
            <a href='' class='navbar-brand'>PortfolioTemplate</a>
        </div><!-- End navbar-header -->
        <div class='collapse navbar-collapse' id='navbar-collapse'> <!-- What will collapse -->
            <ul class='nav navbar-nav  navbar-right'> <!-- Nav elements -->
                <li><a href='#home'>Home</a></li>
                <li><a href='#about'>About</a></li>
                <li><a href='#portfolio'>Portfolio</a></li>
                <li><a href='#contact'>Contact</a></li>
            </ul>
        </div><!-- End navbar-collapse -->
    </div> <!-- End container -->
</nav> <!-- End navbar -->

<!-- Home -->

<div class='jumbotron' id='home'>
    <div class='container text-center'>
        <h1>Quousque tandem...</h1>
        <p>... abutere Catilina patientia nostra!</p>
        <div class='btn-group'>
            <a href='https://github.com/ansakoy' target='_blank' class='btn btn-default btn-circle'><i class='fa fa-github'></i></a>
            <a href='https://twitter.com/ansakoy' target='_blank' class='btn btn-default btn-circle'><i class='fa fa-twitter'></i></a>
            <a href='https://www.linkedin.com/in/anna-sakoyan-183a9816' target='_blank' class='btn btn-default btn-circle'><i class='fa fa-linkedin'></i></a>
            <a href='https://www.freecodecamp.com/ansakoy' target='_blank' class='btn btn-default btn-circle'><i class='fa fa-fire'></i></a>
        </div> <!-- End btn-group -->
        <ul class='list-inline' id='skills'> <!-- Symbols  list -->
            <li> <!-- 1 -->
                <p><?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1 Tiny//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd'><svg baseProfile="tiny" height="50px" version="1.1" viewBox="0 0 512 512" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_7"><g><path d="M253.806,1.783c-20.678,0.098-40.426,1.859-57.803,4.935c-51.187,9.044-60.48,27.97-60.48,62.877v46.103    h120.963v15.366H135.522H90.126c-35.155,0-65.937,21.13-75.563,61.325c-11.107,46.075-11.603,74.83,0,122.939    c8.599,35.808,29.13,61.324,64.286,61.324h41.589v-55.269c0-39.921,34.544-75.143,75.564-75.143h120.822    c33.632,0,60.479-27.689,60.479-61.466V69.594c0-32.776-27.653-57.406-60.479-62.877C296.045,3.257,274.483,1.684,253.806,1.783z     M188.391,38.86c12.494,0,22.699,10.37,22.699,23.12c0,12.705-10.205,22.982-22.699,22.982c-12.542,0-22.699-10.277-22.699-22.982    C165.692,49.23,175.849,38.86,188.391,38.86z" id="path1948_1_"/><path d="M392.387,131.062v53.712c0,41.648-35.303,76.692-75.562,76.692H196.002    c-33.094,0-60.48,28.327-60.48,61.469v115.186c0,32.777,28.503,52.063,60.48,61.463c38.291,11.259,75.004,13.3,120.822,0    c30.451-8.812,60.479-26.561,60.479-61.463v-46.105H256.485v-15.364h120.817h60.479c35.157,0,48.26-24.519,60.482-61.324    c12.629-37.895,12.093-74.335,0-122.939c-8.687-34.993-25.281-61.325-60.482-61.325H392.387z M324.438,422.75    c12.539,0,22.698,10.269,22.698,22.975c0,12.749-10.159,23.124-22.698,23.124c-12.493,0-22.696-10.375-22.696-23.124    C301.741,433.019,311.944,422.75,324.438,422.75z" id="path1950_1_"/></g></g></svg></p>
            </li> <!-- End 1 -->
            <li> <!-- 2 -->
                <?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 30 30" height="50px" id="Blogger" version="1.1" viewBox="0 0 30 30" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="4,6 6,28 15,30 24,28 26,6 "/><polygon points="7.403,2.641 8.643,2.641 8.643,4 10,4 10,-0.057 8.643,-0.057 8.643,1.283 7.403,1.283 7.403,-0.057 6.048,-0.057   6.048,4 7.403,4 "/><polygon points="12.192,4 13.549,4 13.549,1.289 14.741,1.289 14.741,-0.057 11,-0.057 11,1.289 12.192,1.289 "/><polygon points="16.761,1.99 17.694,3.431 17.717,3.431 18.649,1.99 18.649,4 20,4 20,-0.057 18.585,-0.057 17.717,1.371   16.848,-0.057 15.435,-0.057 15.435,4 16.761,4 "/><polygon points="24,2.659 22.094,2.659 22.094,-0.057 20.738,-0.057 20.738,4 24,4 "/><polygon fill="#FFFFFF" points="21.5,13 15,13 11,13 11.5,16 15,16 21,16 20,24 15,26 15,26 10,24 9.2,20 12,20 12.5,22 15,23   15,23 15,23 17.5,22 18,18 15,18 15,18 9,18 8,10 15,10 22,10 "/></svg>
            </li> <!-- End 2 -->
            <li> <!-- 3 -->
                <svg height='50px' width='50px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220.5 199.5">
                  <title>HTML5 CSS Styling Logo</title>
                  <path d="M32.8,0L25.4,37.0 176.0,37.0 171.3,60.9 20.6,60.9 13.3,97.9 163.9,97.9 155.5,140.1 94.8,160.2 42.2,140.1 45.8,121.8 8.8,121.8 0,166.2 87.0,199.5 187.3,166.2 200.6,99.4 203.3,86.0 220.4,0z"/>
                </svg>
            </li> <!-- End 3 -->
            <li> <!-- 4 -->
                <?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1 Tiny//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd'><svg baseProfile="tiny" height="50px" version="1.1" viewBox="0 0 512 512" width="50px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Layer_1"><g><path d="M112.155,67.644h84.212v236.019c0,106.375-50.969,143.497-132.414,143.497c-19.944,0-45.429-3.324-62.052-8.864    l9.419-68.146c11.635,3.878,26.594,6.648,43.214,6.648c35.458,0,57.621-16.068,57.621-73.687V67.644z"/><path d="M269.484,354.634c22.161,11.635,57.62,23.27,93.632,23.27c38.783,0,59.282-16.066,59.282-40.998    c0-22.715-17.729-36.565-62.606-52.079c-62.053-22.162-103.05-56.512-103.05-111.36c0-63.715,53.741-111.917,141.278-111.917    c42.662,0,73.132,8.313,95.295,18.838l-18.839,67.592c-14.404-7.201-41.553-17.729-77.562-17.729    c-36.567,0-54.297,17.175-54.297,36.013c0,23.824,20.499,34.349,69.256,53.188c65.928,24.378,96.4,58.728,96.4,111.915    c0,62.606-47.647,115.794-150.143,115.794c-42.662,0-84.77-11.636-105.82-23.27L269.484,354.634z"/></g></g></svg>
            </li> <!-- 4 -->
            <li> <!-- 5 -->
                <?xml version="1.0" encoding="iso-8859-1"?>

        <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="50px" height="50px" viewBox="0 0 438.549 438.549" style="enable-background:new 0 0 438.549 438.549;" xml:space="preserve">
        <g>
    <path d="M409.132,114.573c-19.608-33.596-46.205-60.194-79.798-79.8C295.736,15.166,259.057,5.365,219.271,5.365   c-39.781,0-76.472,9.804-110.063,29.408c-33.596,19.605-60.192,46.204-79.8,79.8C9.803,148.168,0,184.854,0,224.63   c0,47.78,13.94,90.745,41.827,128.906c27.884,38.164,63.906,64.572,108.063,79.227c5.14,0.954,8.945,0.283,11.419-1.996   c2.475-2.282,3.711-5.14,3.711-8.562c0-0.571-0.049-5.708-0.144-15.417c-0.098-9.709-0.144-18.179-0.144-25.406l-6.567,1.136   c-4.187,0.767-9.469,1.092-15.846,1c-6.374-0.089-12.991-0.757-19.842-1.999c-6.854-1.231-13.229-4.086-19.13-8.559   c-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559   c-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-0.951-2.568-2.098-3.711-3.429c-1.142-1.331-1.997-2.663-2.568-3.997   c-0.572-1.335-0.098-2.43,1.427-3.289c1.525-0.859,4.281-1.276,8.28-1.276l5.708,0.853c3.807,0.763,8.516,3.042,14.133,6.851   c5.614,3.806,10.229,8.754,13.846,14.842c4.38,7.806,9.657,13.754,15.846,17.847c6.184,4.093,12.419,6.136,18.699,6.136   c6.28,0,11.704-0.476,16.274-1.423c4.565-0.952,8.848-2.383,12.847-4.285c1.713-12.758,6.377-22.559,13.988-29.41   c-10.848-1.14-20.601-2.857-29.264-5.14c-8.658-2.286-17.605-5.996-26.835-11.14c-9.235-5.137-16.896-11.516-22.985-19.126   c-6.09-7.614-11.088-17.61-14.987-29.979c-3.901-12.374-5.852-26.648-5.852-42.826c0-23.035,7.52-42.637,22.557-58.817   c-7.044-17.318-6.379-36.732,1.997-58.24c5.52-1.715,13.706-0.428,24.554,3.853c10.85,4.283,18.794,7.952,23.84,10.994   c5.046,3.041,9.089,5.618,12.135,7.708c17.705-4.947,35.976-7.421,54.818-7.421s37.117,2.474,54.823,7.421l10.849-6.849   c7.419-4.57,16.18-8.758,26.262-12.565c10.088-3.805,17.802-4.853,23.134-3.138c8.562,21.509,9.325,40.922,2.279,58.24   c15.036,16.18,22.559,35.787,22.559,58.817c0,16.178-1.958,30.497-5.853,42.966c-3.9,12.471-8.941,22.457-15.125,29.979   c-6.191,7.521-13.901,13.85-23.131,18.986c-9.232,5.14-18.182,8.85-26.84,11.136c-8.662,2.286-18.415,4.004-29.263,5.146   c9.894,8.562,14.842,22.077,14.842,40.539v60.237c0,3.422,1.19,6.279,3.572,8.562c2.379,2.279,6.136,2.95,11.276,1.995   c44.163-14.653,80.185-41.062,108.068-79.226c27.88-38.161,41.825-81.126,41.825-128.906   C438.536,184.851,428.728,148.168,409.132,114.573z" fill="#000000"/></g>
</svg>
            </li> <!-- 5 -->
        </ul> <!-- End symbols list -->
    </div> <!-- End container -->
</div> <!-- End jumbotron-->

<!-- End home -->

<!-- About -->

<div class='container'  id='about'>
    <section>
        <div class='page-header'>
            <h2 class='text-right'><small>About</small></h2>
        </div> <!-- End page-header -->
        <div class='row'>
            <div class='col-sm-4 col-md-4 col-lg-4'>
                <img src='http://placehold.it/400x400' style='max-height: 300px' class='img-responsive img-rounded'>
            </div> <!-- End .col-1 -->
            <div class='col-sm-8 col-md-8 col-lg-8'>
                <p>Quo usque tandem abutere, Catilina, patientia nostra? quam diu etiam furor iste tuus nos eludet? quem ad finem sese effrenata iactabit audacia? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae, nihil timor populi, nihil concursus bonorum omnium, nihil hic munitissimus habendi senatus locus, nihil horum ora voltusque moverunt?</p>
                <p>An vero vir amplissumus, P. Scipio, pontifex maximus, Ti. Gracchum mediocriter labefactantem statum rei publicae privatus interfecit; Catilinam orbem terrae caede atque incendiis vastare cupientem nos consules perferemus? Nam illa nimis antiqua praetereo, quod C. Servilius Ahala Sp. Maelium novis rebus studentem manu sua occidit. Fuit, fuit ista quondam in hac re publica virtus, ut viri fortes acrioribus suppliciis civem perniciosum quam acerbissimum hostem coercerent. Habemus senatus consultum in te, Catilina, vehemens et grave, non deest rei publicae consilium neque auctoritas huius ordinis; nos, nos, dico aperte, consules desumus.</p>
            </div> <!-- End .col-2 -->
        </div> <!-- End row -->
        
    </section>
</div> <!-- End container -->

<!-- End about -->

<!-- Portfolio -->
    
<div class='container' id='portfolio'>
    <section>
        <div class="page-header">
            <h2 class='text-right'><small>Portfolio</small></h2>
        </div>
        <div class="row"> <!-- Row 1 -->
            <div class="col-sm-4 col-md-4 col-lg-4 hover"> <!-- Col 1 -->
                <figure>
                    <div class='thumbnail'>
                        <a href='' target='_blank'><img src='http://placehold.it/400x280' class='img-responsive'></a>
                        <div class='caption text-center'>
                            <a href='' target='_blank' class='btn btn-default btn-block'>Project #</a>
                        </div> <!-- End caption -->
                    </div> <!-- End thumbnail -->
                </figure>
            </div> <!-- End col 1 -->
            <div class="col-sm-4 col-md-4 col-lg-4 hover"> <!-- Col 2 -->
                <figure>
                    <div class='thumbnail'>
                        <a href='' target='_blank'><img src='http://placehold.it/400x280' class='img-responsive'></a>
                        <div class='caption text-center'>
                            <a href='' target='_blank' class='btn btn-default btn-block'>Project #</a>
                        </div> <!-- End caption -->
                    </div> <!-- End thumbnail -->
                </figure>
            </div> <!-- End col 2 -->
            <div class="col-sm-4 col-md-4 col-lg-4 hover"> <!-- Col 3 -->
                <figure>
                    <div class='thumbnail'>
                        <a href='' target='_blank'><img src='http://placehold.it/400x280' class='img-responsive'></a>
                        <div class='caption text-center'>
                            <a href='' target='_blank' class='btn btn-default btn-block'>Project #</a>
                        </div> <!-- End caption -->
                    </div> <!-- End thumbnail -->
                </figure>
            </div> <!-- End col 3 -->
        </div> <!-- End row 1 -->
        <div class="row"> <!-- Row 2 -->
            <div class="col-sm-4 col-md-4 col-lg-4 hover"> <!-- Col 1 -->
                <figure>
                    <div class='thumbnail'>
                        <a href='' target='_blank'><img src='http://placehold.it/400x280' class='img-responsive'></a>
                        <div class='caption text-center'>
                            <a href='' target='_blank' class='btn btn-default btn-block'>Project #</a>
                        </div> <!-- End caption -->
                    </div> <!-- End thumbnail -->
                </figure>
            </div> <!-- End col 1 -->
            <div class="col-sm-4 col-md-4 col-lg-4 hover"> <!-- Col 2 -->
                <figure>
                    <div class='thumbnail'>
                        <a href='' target='_blank'><img src='http://placehold.it/400x280' class='img-responsive'></a>
                        <div class='caption text-center'>
                            <a href='' target='_blank' class='btn btn-default btn-block'>Project #</a>
                        </div> <!-- End caption -->
                    </div> <!-- End thumbnail -->
                </figure>
            </div> <!-- End col 2 -->
            <div class="col-sm-4 col-md-4 col-lg-4 hover"> <!-- Col 3 -->
                <figure>
                    <div class='thumbnail'>
                        <a href='' target='_blank'><img src='http://placehold.it/400x280' class='img-responsive'></a>
                        <div class='caption text-center'>
                            <a href='' target='_blank' class='btn btn-default btn-block'>Project #</a>
                        </div> <!-- End caption -->
                    </div> <!-- End thumbnail -->
                </figure>
            </div> <!-- End col 3 -->
        </div> <!-- End row 2 -->
        
    </section>
</div> <!-- End container -->
 
<!-- End portfolio -->    

    
<!-- Contact -->

<div class='container' id='contact'>
    <section>
        <div class='page-header'>
            <h2 class='text-right'><small>Contact</small></h2>
        </div>
        <div class='row'>
            <div class='col-sm-9 col-md-9 col-lg-9'> <!-- Col 1 -->
                
                <p><strong>Disclaimer:</strong></p>
                <p>This is a portfolio template built as an <a href='https://www.freecodecamp.com/challenges/build-a-personal-portfolio-webpage' target='_blank'>assignment at freeCodeCamp</a>.</p>
                <p>Text used as place holder instead of Lorem ipsum (for a change) is taken from <a href='http://www.thelatinlibrary.com/cicero/cat1.shtml' target='_blank'>In Catilinam Oratio</a> by Marcus Tullius Cicero.</p>
            </div> <!-- End col 1 -->
            <div class='col-sm-3 col-md-3 col-lg-3'> <!-- Col 2 -->
                <p><a href='https://github.com/ansakoy' target='_blank' class='btn btn-default btn-block'><i class='fa fa-github'></i> Github</a></p>
                <p><a href='https://twitter.com/ansakoy' target='_blank' class='btn btn-default btn-block'><i class='fa fa-twitter'></i> Twitter</a></p>
                <p><a href='https://www.linkedin.com/in/anna-sakoyan-183a9816' target='_blank' class='btn btn-default btn-block'><i class='fa fa-linkedin'></i> LinkedIn</a></p>
                <p><a href='https://www.freecodecamp.com/ansakoy' target='_blank' class='btn btn-default btn-block'><i class='fa fa-fire'></i> freeCodeCamp</a></p>
            </div> <!-- End col 2 -->
        </div> <!-- End row -->
    </section>
</div> <!-- End container -->

<!-- Footer -->

<footer>
    <div class='container'>
        <ul class='list-inline' id='footer-nav'>
            <li><a href='#home'>Home</a></li>
            <li><a href='#about'>About</a></li>
            <li><a href='#portfolio'>Portfolio</a></li>
            <li class='last'><a href='#contact'>Contact</a></li>
        </ul>
        <p id='attribution'>Created by Ansakoy 2016</p>
    </div> <!-- End container -->
</footer>

<!-- End footer -->
            
          
!
            
              body {
  padding-top: 40px;
  margin: 0%;
}
a {
  text-decoration: none;
  color: darkorange;
}
a:hover {
  text-decoration: none;
  color: #FFBB00;
}
.row {
  margin-top: 20px;
  margin-bottom: 20px;
}
.container {
  width: 100%;
}
.container#about {
  background-color: white;
  padding: 5% 10%;
}
.container#portfolio {
  background: url(https://s20.postimg.org/67xu2fra5/grid.png) repeat;
  padding: 5% 10%;
}
.container#contact {
  background: url(https://s20.postimg.org/n9qo4j655/wavegrid.png) repeat;
  padding: 5% 10%;
}
.section {
  margin-left: 10%;
  margin-right: 10%;
  padding: 2% 10% 5% 10%;
}
.hover figure:hover img {
  opacity: .5;
}
footer {
  background-color: black;
  color: white;
  padding: 5%;
  text-align: center;
}
#footer-nav li a {
  text-decoration: none;
  color: white;
}
#footer-nav li a:hover {
  color: #FFBB00;
}
#footer-nav li {
  border-right: solid white 1px;
  padding: 0px 40px 0px 40px;
}
#footer-nav li.last {
  border-right: none;
}
footer p#attribution {
  padding-top: 40px;
}

ul#skills {
  margin: 5%;
}
ul#skills li {
  padding-left: 5%;
  padding-right: 5%;
}
            
          
!
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