123

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.

            
              <html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
</head>
<body data-spy="scroll" data-target="#navscroll" data-offset="220">
    <nav class="navbar navbar-inverse navbar-fixed-top ">
        <div id="navscroll">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">Fakhri Azzouz</a>
                </div>
                <ul class="nav navbar-nav">
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#portfolio">Portfolio</a></li>
                    <li><a href="#whycs">Why CS?</a></li>
                    <li><a href="#contact">Let's talk</a></li>
                </ul>
            </div><!--container-->
        </div><!--navscroll-->
    </nav>
    <div class="mytagline">
        <h1>Go-getter front-end developer</h1>
    </div>
     <!--addJquery animation or css move image from right to center-->
        <div class="container"> 
              <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926273/fakhridark_vcwt3p.jpg" class="img-responsive img-circle" alt="Fakhri Azzouz with a cowboy hat" />
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut scelerisque nunc. Proin vel risus nulla. Aliquam pretium enim consequat, pretium odio vel, venenatis erat. Mauris vel quam eget sem laoreet blandit. Nam tempus sem sed diam vehicula feugiat et sit amet ex. Quisque at tortor imperdiet, pretium nisi nec, tincidunt lacus. Aliquam feugiat pharetra risus, eu porttitor ante bibendum a. Sed eu urna porta, varius nibh sit amet, finibus ante. Integer semper nibh quis iaculis egestas. Nullam dapibus sem id risus tempus aliquam. In congue rutrum lacus, id posuere mauris fringilla vel. Vivamus tincidunt fringilla molestie. Sed id fermentum turpis, at condimentum ligula. Integer tempus sem neque, eget molestie neque blandit at. Maecenas rhoncus sollicitudin condimentum.</p>
         </div><!--close container--> 
    <!--html tag image-->
    <div class="internallink">
        <a name="skills"></a>
    </div> 
    <div class="text-center">        
            <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926563/tag2_n9vlgs.png" class="image-fluid" alt="html tag" />        
    </div><!--html tag image-->
    <!--Indicators-->
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-silde-to="0" class="active"></li>
                <li data-target="#myCarousel" data-silde-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!--Wrapper for slides add max with and align center-->
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926359/HTML5_opfec5.png" alt="image1" />
                    <div class="carousel-caption">
                        <h3>HTML5</h3>
                        <p>Knowing inside and out of HTML5 best practices and guidelines. All coded HTML is validated by W3C.</p>
                    </div><!--carouselcaption-->
                </div>
                <div class="item">
                    <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926359/CSS3_iczf1h.png" alt="image2" />
                    <div class="carousel-caption">
                        <h3>CSS</h3>
                        <p>Advanced knowledge in CSS. The CSS codes are created to be maintainable. I use BEM convention.</p>
                    </div><!--carouselcaption-->
                </div>
                <div class="item">
                    <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926360/JS_qvial2.png" alt="image3" />
                    <div class="carousel-caption">
                        <h3>JS</h3>
                        <p>I transform your website to a live show using the lastest JS technologies and frameworks.</p>
                    </div><!--carouselcaption-->
                </div>
            </div>
            <!--Left and right controls-->
            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
                <span class="st-only">Next</span>
            </a>
        </div>
        <!--html tag image-->
    <div class="internallink">
        <a name="portfolio"></a>
    </div>
        <div class="text-center">
            <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926563/tag2_n9vlgs.png" class="image-fluid" alt="html tag" />
        </div><!--html tag image-->
        <!--Add animation when hover on image ERROR WITH H3 & P NOT ALIGNED PROPERLY-->
        <div class="container">
            <h3>Portfolio</h3>
            <p>Various web development projects delivered on-time to clients and organizations</p>
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <a href="wp1.jpg" class="thumbnail">
                        <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926564/wp1_jv3tkd.jpg" alt="project1" />
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut scelerisque nunc. Proin vel risus nulla. Aliquam pretium enim consequat, pretium odio vel, venenatis erat </p>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="wp2.jpg" class="thumbnail">
                        <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926563/wp2_w2mfih.jpg" alt="project2" />
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut scelerisque nunc. Proin vel risus nulla. Aliquam pretium enim consequat, pretium odio vel, venenatis erat </p>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="wp3.jpg" class="thumbnail">
                        <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926564/wp3_hkqfyc.jpg" alt="project3" />
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut scelerisque nunc. Proin vel risus nulla. Aliquam pretium enim consequat, pretium odio vel, venenatis erat</p>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="wp4.jpg" class="thumbnail">
                        <img src="https://res.cloudinary.com/darw0qtaq/image/upload/v1503926564/wp4_stpm6u.jpg" alt="project4" />
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut scelerisque nunc. Proin vel risus nulla. Aliquam pretium enim consequat, pretium odio vel, venenatis erat</p>
                </div>
            </div><!--.row of thumbnails-->
        </div><!--.container of thumbnails-->
        <!--html tag image ANIMATE the closing tag-->
    <div class="internallink">
        <a name="whycs"></a>
    </div>    
    <div class="text-center">
            <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926563/tag2_n9vlgs.png" class="image-fluid" alt="html tag" />
        </div><!--html tag image-->
        <div class="container">
            <div class="why">
                <!--First letter of each paragraph large-->
                <h3>Why I chose a career in development?</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula orci, mattis in justo in, venenatis ullamcorper neque. Donec auctor purus sed nunc sodales, vitae tempor orci maximus. Nullam laoreet tortor et augue tempor, interdum faucibus lectus euismod. Sed lacinia orci nec lacus sollicitudin, ac congue mauris ornare. Aliquam id libero et est ornare tincidunt. Morbi velit sem, auctor et lobortis et, suscipit tempor lacus. Ut tempus ornare felis, vitae rhoncus lorem hendrerit at. Vivamus at sollicitudin odio, eget faucibus nisl. Etiam consequat neque nec nulla dignissim mollis. Donec rutrum est nec mauris laoreet, eu molestie ligula porttitor. Ut tincidunt venenatis quam, quis aliquet odio egestas ut. Cras gravida dolor vel rutrum malesuada. Curabitur et ex gravida, porta ante quis, lobortis urna. Sed porttitor elementum turpis. Maecenas eget odio laoreet, blandit dui scelerisque, volutpat arcu.Aliquam erat volutpat. Praesent non consequat quam, vitae porta felis. Nunc efficitur diam elit, non iaculis velit maximus id. Integer congue nec mauris at sagittis. Sed eu porta eros, id hendrerit nisi. Ut ut neque sed libero mollis efficitur. Donec pulvinar velit sed tellus pretium, a venenatis metus pulvinar. Etiam condimentum sem nec interdum tincidunt. Integer egestas, turpis mollis elementum fringilla,
                </p>
                <p>
                    ex eros vulputate massa, semper varius odio ante at lacus. Proin pharetra elit libero, in tempor erat suscipit vitae. Fusce ut aliquam sapien, feugiat finibus nunc. Praesent efficitur nunc felis, eget iaculis risus tincidunt ac.Aenean non tempor velit. Phasellus non ligula dui. Quisque tincidunt elementum pulvinar. In porta rhoncus nunc in ultricies. Aenean tempor non mi a commodo. Etiam tortor sapien, semper eu lorem a, eleifend placerat magna. In ac cursus metus. Nullam faucibus, lorem vitae scelerisque pretium, dui sapien posuere eros, at blandit sem nulla quis libero. Donec eleifend magna est, quis ultrices augue consectetur posuere. Ut elementum magna leo, suscipit bibendum tellus dictum sed. Praesent arcu erat, molestie vel ipsum eu, congue accumsan eros.
                </p>
            </div>
        </div><!--whyCS-->
        <!--html tag image-->
    <div class="internallink">
        <a name="contact"></a>
    </div>
        <div class="text-center">
            <img src="http://res.cloudinary.com/darw0qtaq/image/upload/v1503926563/tag2_n9vlgs.png" class="image-fluid" alt="html tag" />
        </div><!--html tag image-->
        <div class="container">
            <h3>Let's talk</h3>
            <form>
                <div class="form-group">
                    <label for="emailinput">Email address</label>
                    <input type="email" class="form-control" id="emailinput" />
                    <small id="emailhelp" class="form-text text-muted">We never share or sell your email</small>
                </div>
                <div class="form-group">
                    <label for="fullname">Your full-name</label>
                    <input type="text" class="form-control" id="fullname" />
                </div>
                <div class="form-group">
                    <label for="select1">Subject of your request</label>
                    <select multiple class="form-control" id="select1">
                        <option>1 on 1 training</option>
                        <option>Website creation</option>
                        <option>Android app development</option>
                        <option>Consultancy</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="comment">Enter your comment below</label>
                    <textarea class="form-control" id="comment" rows="6"></textarea>
                </div>
                <div class="form-control">
                    <label for="file">Attach your file here</label>
                    <input type="file" class="form-control-file" id="file" />
                </div>
                <button type="submit" class="btn btn-primary" style="float: right">Submit</button>
            </form>
        </div><!--container of form-->
        <br />
        <div class="socialicons">
            <div class="container">
                <a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
                <a href="#"><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i></a>
                <a href="#"><i class="fa fa-medium fa-2x" aria-hidden="true"></i></a>
                <a href="#"><i class="fa fa-github fa-2x" aria-hidden="true"></i></a>
            </div>
        </div><!--container of social icons-->
        <!--Add iframe map-->
        <br />
        <footer>
            Coded by Fakhri Azzouz
        </footer>
</body>
            
          
!
            
              html {
    font-size: 100%;
}
.mytagline > h1 {
    font-family: 'Tangerine', serif;
    font-size: 6rem;
    text-align: center;
    color: white;
}
body {
    position: relative;
    background: url('http://res.cloudinary.com/darw0qtaq/image/upload/v1503995680/stars_tr7ebg.jpg') no-repeat center fixed;
    background-size: cover;
    padding-top: 220px;
    font-family: 'Tangerine', serif;
}
p {
    font-family: Brush Script Std;
}
div > label {
    color: white;
}
ul > li {
    font-size: 2rem;
}
p {
    color: white;
    font-size: 2rem; 
    text-align: center; 
}
h3 {
    text-align: center; 
}
.internallink {
    padding-bottom: 30px; 
}
.container  h3 {
    color: white;
    text-decoration: underline; 
}
/*input:focus, textarea:focus to add to form*/
.container > img {
    margin: auto;
}
.carousel-inner > .item > img {
    margin: auto;
}
.item > img {
    width: 30%;
}
.socialicons {
    text-align: center;
    margin: auto;
}
.fa-facebook {
    color: royalblue;
    transition-duration: .7s;
    transition-timing-function: ease-in-out;
}
.fa-facebook:hover {
    transform: scale(1.7);
    
    }
.fa-linkedin {
    color: cornflowerblue;
    transition: 0.7s transform;
    transition-timing-function: ease-in-out;
}
.fa-linkedin:hover {
    transform: scale(1.7);
}
.fa-medium {
    color: lawngreen;
    transition: 0.7s transform;
    transition-timing-function: ease-in-out;
}
.fa-medium:hover {
    transform: scale(1.7);
}
.fa-github {
    color: grey;
    transition: 0.7s transform;
    transition-timing-function: ease-in-out;
}
.fa-github:hover {
    transform: scale(1.7);
}
a + a  {
    margin-left: 3em; 
}
footer {
    text-align: center;
    color: white;

            
          
!
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.

Console