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.

            
              <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container pagination-centered col-sm-offset-5 col-sm-4 ">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data->
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll active" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
    </nav>
    <!-- About Section -->
    <section id="about" class="about-section">
        <div class="container pagination-centered text-center page page1">

            <h1 class="title"> About</h1>
            <div class="row">
                <hr class="col-xs-4 col-xs-offset-4">

            </div>
            <br>
            <img  class="img-circle" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAgDAAAAJDhmMzM2NDg0LThjZDAtNDQxOS1hYWRkLTNlODhjMGUxOTkyNQ.jpg" alt="Profile Picture">

            <h2> Irving Buelto</h2>
            <h3> Front End Web Developer</h3>
            <!--social media icon-->
            <a href="https://www.behance.net/SageNeonel5cf6" target="_blank"><i class="fa fa-behance-square" style="font-size:24px" ></i></a>
            <a href="https://github.com/SageNeonel" target="_blank"><i class="fa fa-github" style="font-size:24px"></i></a>
            <a href="https://www.linkedin.com/in/irvingbuelto" target="_blank"><i class="fa fa-linkedin-square" style="font-size:24px"></i></a>
            <div class="col-lg-12">
               <!--end social media Icon-->
                <br>
                <p> Hello, Welcome to my portfolio!
                    <br> I am freelance Web developer specializing in front end design and development.
                    <br>I enjoy all kinds of visual communication and builging my skills in graphic design, animation, User Interface and User Expereice technology.
                    <br>It gets even better when the skills are used working with clients to help their vision come to life!</p>
            </div>
            <div class="row" class="AboutPage">



            </div>
        </div>
    </section>
    <!-- Portfolio section-->
    <div class="container pagination-centered text-center page page2">

        <section id="services" class="services-section">
            <h1 class="title"> Portfolio</h1>
            <div class="row">
                <hr class="col-xs-4 col-xs-offset-4">

            </div>
            <br>
            <div class="row" class="Portfolio">
                <div class="row">
                    <div class="col-sm-6 col-md-3 col-md-offset-3">
                        <div class="thumbnail">
                   <img src="https://s-media-cache-ak0.pinimg.com/236x/05/4a/3c/054a3c0b7454640ef3326dc89b4dcf9f.jpg" alt="Sample Image">
                            <div class="caption">
                                <p>Using Gimp fun was had creating a cyborg using one of my friends as a model.</p>
                                <p><a href="https://www.behance.net/gallery/40439611/Project-Yomi" class="btn btn-primary" target="_blank" role="button">View Work</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 ">
                        <div class="thumbnail">
                            <img src="http://brix.io/assets/img/themes/kelvin.jpg" alt="Sample Image">
                            <div class="caption">
                                <p>Playing around with bootstrap templates to create an online resume.</p>
                                <p><a href="https://github.com/SageNeonel/BootStrapResume" class="btn btn-primary" Target="_blank" role="button">View Work</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
									 <div class="clearfix visible-md-block"></div>
                    <div class="col-sm-6 col-md-3 col-md-offset-3">
                        <div class="thumbnail">
                            <img src="https://thumbs.dreamstime.com/z/face-pretty-woman-27414770.jpg" alt="Sample Image">
                            <div class="caption">

                                <p>Using Inkscape this is an initial logo design for a client's blog.I hope the final work comes out better.</p>
                                <p><a href="https://www.behance.net/gallery/41985071/Logo-Design-for-httpssimplyjustbecauseblogwordpress" role="button" target="_blank" class="btn btn-primary">View Work</a>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-3 ">
                        <div class="thumbnail">
                            <img src="http://www.pomediagroup.com/wp/wp-content/uploads/2014/01/nicole-james-hair-salon-web-design-nj.jpg" alt="Sample Image">
                            <div class="caption">
                                <p>First handmade website. This work was my introduction to color balance and font combination.</p>
                                <p><a href="https://github.com/SageNeonel/Outluk-Hair-Studio" role="button" target="_blank" class="btn btn-primary">View Work</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">


                    <div class="col-sm-6 col-md-3 col-md-offset-3">
                        <div class="thumbnail">
                            <img src="http://orig15.deviantart.net/bda4/f/2012/208/2/c/mountain_planet_by_blueremix-d58vrna.png" alt="Sample Image">
                            <div class="caption">
                                <p>Using Gimp this is my first complete sci-fi artwork.Inspired by the mind of Niel Degrass Tyson </p>
                                <p><a href="https://www.behance.net/gallery/40198697/first-sci-fi-landscape-" class="btn btn-primary" role="button">View Work</a>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-md-3 ">
                        <div class="thumbnail">
                            <img src="http://www.cvent.com/en/images/annual-convention-lunch-template.jpg" alt="Sample Image">
                            <div class="caption">
                                <p>First real introduction to Web Development by following a tutorial to create this static page.</p>
                                <p><a href="https://github.com/SageNeonel/1st-Project-" class="btn btn-primary" target="_blank" role="button">View Work</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>
    <!-- Contact secrtion-->
    <section id="contact" class="contact-section">
        <div class="container pagination-centered text-center page page3">
            <h1 class="title">Contact</h1>
            <div class="row">
                <hr class="col-xs-4 col-xs-offset-4">

            </div>
            <br>
            <div class="row" class="Contact">
                <div class="col-lg-12">
                </div>
                <p>Want to Keep in touch? or need help Bringing your visions come to life? please feel free to contact me or reach me on social media!</p>

                <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>

                <form id="contact-form">
                    <p>Dear Irving,</p>
                    <p>My
                        <label for="your-name">name</label> is
                        <input type="text" name="your-name" id="your-name" minlength="3" placeholder="(your name here)" required> and</p>

                    <p>my
                        <label for="email">email address</label> is
                        <input type="email" name="your-email" id="email" placeholder="(your email address)" required>
                    </p>

                    <p> I have a
                        <label for="your-message">message</label> for you,</p>

                    <p>
                        <textarea name="your-message" id="your-message" placeholder="(your msg here)" class="expanding" required></textarea>
                    </p>
                    <p>
                        <button type="submit">
                            <img src="https://cdn2.iconfinder.com/data/icons/work-flow/512/Paper_Plane-512.png" width="30px" height="20px">
                            <small>send</small>
                        </button>
                    </p>
                </form>
            </div>
        </div>
    </section>


</body>
            
          
!
            
              body {
    background: url(https://media2.wnyc.org/i/620/372/c/80/photologue/photos/mbp.jpg) no-repeat center fixed;
    background-size: cover;
    font-family: 'Archivo Narrow', sans-serif;
    font-size: 18px;
}

.page {
    padding-bottom: 40px;
    background: rgba(240, 255, 255, 0.8);
    border-top: 1px solid rgb(105, 105, 105);
    border-right: 1px solid rgb(105, 105, 105);
    border-left: 1px solid rgb(105, 105, 105);
}

.page1 {
    margin-top: 100px;
    background: rgba(128, 191, 255, 0.8);
}

.page2 {}

.page3 {
    background: rgba(128, 191, 255, 0.8);
    border-bottom: 1px solid rgb(105, 105, 105);
}

h1 {
    font-weight: bold;
    font-size: 40px;
    font-family: 'Julius Sans One', sans-serif;
}

h3 {
    font-style: italic;
}

#contact-form {
    max-width: 90%;
    margin: 0 auto;
}

label {
    font-weight: 400;
    cursor: pointer;
}

textarea,
input {
    border: none;
    outline: none;
    border-radius: 0;
    text-align: center;
    background: none;
    font-weight: 700;
    font-family: 'Lato', georgia;
    font-size: 25px;
    color: rgba(255, 255, 255, 1);
    max-width: 90%;
    padding: 1rem;
    border: 2px dashed rgba(255, 255, 255, 0);
    box-sizing: border-box;
    cursor: text;
}

textarea {
    text-align: left;
    /* overflow:hidden; */
    resize: none;
    width: 90%;
    border-color: rgba(255, 255, 255, 0)
}

textarea:focus {
    background-color: rgba(255, 255, 255, 0.2);
    border: 2px dashed rgba(255, 255, 255, 1);
}

textarea:focus:required:valid {
    border: 2px solid rgba(255, 255, 255, 0);
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

textarea:required:valid {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

input {
    border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

input:required,
textarea:required {
    border-bottom: 2px dashed rgba(255, 255, 255, 0.5);
}

input:focus {
    border-bottom: 2px dashed rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 0.2);
}

input:required:valid {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

input:required:invalid {
    color: rgba(255, 255, 255, 0.5);
}

::-webkit-input-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-weight: 400;
}

:-moz-placeholder {
    /* Firefox 18- */
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-weight: 400;
}

::-moz-placeholder {
    /* Firefox 19+ */
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-weight: 400;
}

:-ms-input-placeholder {
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    font-weight: 400;
}

.expanding {
    vertical-align: top;
}

.send-icn {
    fill: rgba(255, 255, 255, 1)
}

.send-icn:hover {
    fill: rgba(0, 0, 0, 1);
    cursor: pointer;
}

button {
    background: none;
    border: none;
    outline: none;
    margin: 2vmax;
}

button:hover small {
    opacity: 1;
}

small {
    display: block;
    opacity: 0;
}

.website {
    opacity: 1;
    font-size: 16px;
    color: white;
    position: relative;
    text-align: center;
    display: block;
    margin-top: 7%;
}

.website a {
    color: white;
}

            
          
!
999px
Loading ..................

Console