Skip to content

Instantly share code, notes, and snippets.

@ymoregola

ymoregola/index.html

Created September 7, 2015 22:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ymoregola/81973dd624fc1e3a45c7 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ymoregola/81973dd624fc1e3a45c7 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ymoregola created this gist Sep 7, 2015.
    366 changes: 366 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,366 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">

    <title>Hello World!</title>

    <!-- Bootstrap core CSS -->
    <!-- <link href="css/bootstrap.css" rel="stylesheet"> -->

    <link href="css/style.css" rel="stylesheet">
    <!-- Custom styles for this template go here -->

    <!--jQuery Script-->
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- jQuery is required for Bootstrap to work -->
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

    <!-- Latest compiled and minified Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

    <script>
    $(function () {
    $('#tooltip1').tooltip();
    });
    </script>

    <script>
    $(function () {
    $('[data-toggle="tooltip"]').tooltip();
    });
    </script>

    <script src="js/scripts.js"></script>

    </head>

    <!--Head End-->
    <!--Body Sarts-->

    <body data-spy="scroll" data-target=".navbar">

    <!--navbar starts here-->
    <nav class="navbar navbar-inverse navbar-static-top navbar-fixed-top" role="navigation">
    <div class="container-fluid">
    <a href="#" class="navbar-brand">Yanick Moregola</a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class= "sr-only">Toggle navigation</span>
    <span class= "icon-bar"></span>
    <span class= "icon-bar"></span>
    <span class= "icon-bar"></span>
    </button>
    <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
    <li><a href="#about">About</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#faq">FAQ</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </div>
    </div>
    </nav> <!--navbar ends here-->



    <!-- Start Carousel-->
    <div id="myCarousel" class="carousel slide">
    <ol class="carousel-indicators">
    <li data-target = "#myCarousel" data-slide-to = "0" class="active"></li>
    <li data-target = "#myCarousel" data-slide-to = "1"></li>
    <li data-target = "#myCarousel" data-slide-to = "2"></li>
    </ol>

    <div class="carousel-inner">
    <div class="item active">
    <img src="img/portfolioheroimage1.jpg" alt="desktop_picture" class="img-responsive">
    <div class="carousel-caption">
    <h3> Text 1</h3>
    <p>Lorem ipsum dolor site amet.</p>
    </div>
    </div>

    <div class="item">
    <img src="img/portfolioheroimage2.jpg" alt="typewriter" class="img-responsive">
    <div class="carousel-caption">
    <h3> Text 2</h3>
    </div>
    </div>

    <div class="item">
    <img src="img/portfolioheroimage3.jpg" alt="desk" class="img-responsive">
    <div class="carousel-caption">
    <h3> Text 3</h3>
    </div>
    </div>


    </div>

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">
    <span class="icon-prev"></span>
    </a>

    <a class="carousel-control right" href="#myCarousel" data-slide="next">
    <span class="icon-next"></span>
    </a>

    </div>
    <!-- End Carousel-->


    <div class="container"> <!--Main Container-->

    <div class="row">
    <div class="col-md-4 col-xs-12 col-lg-8" class="image- responsive">
    <h2>Portfolio Concept</h2>
    <p>Currently don't have any projects to showcase.</p>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View More.</button>
    </div>
    <div class="col-md-4 col-xs-12 col-lg-8" class="image-responsive">
    <h2>Project Goals</h2>
    <p>Currently working 40 hours a <a href="#" title="More information" id="tooltip1"Tooltips>week</a>, but can squeeze in an extra 30 hours.</p>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View More.</button>
    </div>
    <div class="col-md-4 col-xs-12 col-lg-8" class="image-responsive">
    <h2>Course Goals</h2>
    <p>After this course, a career change into development would be great. Freelancing opportunities woul also be great for an extra income and to increase the projects on my portfolio.</p>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">View More.</button>
    </div>
    </div>


    <!--About-->
    <div class="container anchor" id="about">
    <div class="header">
    <h1>About</h1>
    </div>

    <img class="ympic" src="img/ympic.jpg" alt="ym picture">

    <div class="intro column">
    <h2>Introduction</h2>
    <p>paragraph paragraph paragraph</p>

    </div>


    <div class="weapons column">
    <h3>My Weapons</h3>
    <ul id="weapons_list">
    <ul>
    <li>HTML5</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Ruby on Rails</li>
    </ul>
    </div>

    <div class="main_text">
    <h3>More about me</h3>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    </div>
    </div> <!--End About Container-->


    <!--Work-->
    <div class="container anchor" id="work">
    <div class="header">
    <h1>Work</h1>
    </div>
    <div class="test_content_work">
    <h3>This is test text for WORK section.</h3>
    </div>
    </div>

    <!--Learn More / FAQ-->
    <div class="container anchor" id="faq">
    <div class="row-learnmore">
    <h1 class="learn-more">Learn More</h1>
    </div>
    <div class="modal-button">
    <button class="btn btn-primary" data-toggle="modal" data-target="bs-example-modal-sm">Small modal</button>
    </div>
    </div>

    <div class="container">
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
    <h4 class="panel-title">
    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <span class= "glyphicon glyphicon-plus"></span> Question 1
    </a>
    </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
    <div class="panel-body">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <span class= "glyphicon glyphicon-plus"></span> Question 2
    </a>
    </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
    <div class="panel-body">
    Answer 2.....................
    </div>
    </div>
    </div>


    <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
    <h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
    <span class= "glyphicon glyphicon-plus"></span> Question 3
    </a>
    </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
    <div class="panel-body">
    Answer 3.....................
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFour">
    <h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
    <span class= "glyphicon glyphicon-plus"></span> Question 4
    </a>
    </h4>
    </div>
    <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
    <div class="panel-body">
    Answer 4.....................
    </div>
    </div>
    </div>
    <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingFive">
    <h4 class="panel-title">
    <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
    <span class= "glyphicon glyphicon-plus"></span> Question 5
    </a>
    </h4>
    </div>
    <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
    <div class="panel-body">
    Answer 5.....................
    </div>
    </div>
    </div>
    </div>
    </div>

    <table>
    <tr class="my-row">
    <th>Services</th>
    <th>Service 1</th>
    <th>Service 2</th>
    </tr>
    <tr class="my-row">
    <td>Feature 1</td>
    <td>Property 1</td>
    <td>Property 2</td>
    </tr>
    <tr class="my-row">
    <td>Feature 2</td>
    <td>Property 1</td>
    <td>Property 2</td>
    </tr>
    <tr class="my-row">
    <td>Feature 3</td>
    <td>Property 1</td>
    <td>Property 2</td>
    </tr>
    <tr class="my-row">
    <td>Feature 4</td>
    <td>Property 1</td>
    <td>Property 2</td>
    </tr>
    <tr class="my-row">
    <td>Feature 5</td>
    <td>Property 1</td>
    <td>Property 2</td>
    </tr>
    </table>
    </div>


    <!--Contact-->
    <div class="container anchor" id="contact">
    <div class="col-lg-4 col-md-4">
    <div class="header">
    <h1>Contact</h1>
    </div>

    <div class="email">
    <span class= "glyphicon glyphicon-envelope"></span>
    [email protected]
    </div>

    <div class="mobile_phone">
    <span class= "glyphicon glyphicon-phone"></span>
    787-587-0839
    </div>

    <!-- <a href="https://www.linkedin.com/in/yanickmoregola">
    <img class="linkedin_logo" src="img/linkedinblue.png">
    </a>
    <a href="https://github.com/ymoregola">
    <img class="github_logo" src="img/githubblack.png">
    </a> -->
    </div>

    <div class="col-lg-8 col-md-8">
    <form>
    <div class="form-group">
    <label for="name-label">Name</label>
    <input class="form-control" placeholder="Enter name" type="text" id="name">
    </div>
    <div class="form-group">
    <label for="email-label">Email</label>
    <input class="form-control" placeholder="Enter email" type="email" id="email">
    </div>

    <div class="form-group">
    <label for="message-label">Message</label>
    <textarea class="message-box" placeholder="Write your message here" style="resize: none" cols="40" rows="5" id="message"></textarea>
    </div>
    <button type="submit" class="btn btn-primary" id="submit-button">Submit</button>
    </form>
    </div>
    <p id="visible-comment"></p>
    <p id="char-count"></p>
    </div>
    <!--End Contact container-->



    <footer>
    Yanick Moregola 2015&copy;
    <a href="https://twitter.com/share" class="twitter-share-button" data-via="PlankingFever">Tweet</a>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

    <div class="fb-like" data-href="https://www.facebook.com/yanickmoregola" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>

    </footer>

    </body>
    </html>
    36 changes: 36 additions & 0 deletions scripts.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    $(document).ready(function(){
    $(".message-box").css("background-color", "pink");

    $("#submit-button").on("click", function() {
    // now we're going to work in here
    console.log("clicked");
    var comment = $(".message-box").val();
    console.log(comment);
    $("#visible-comment").html(comment);

    return false;
    });

    $(".message-box").on("keyup", function() {
    console.log("keyup happened");
    var charCount = $(".message-box").val().length;
    console.log(charCount);
    $("#char-count").html(charCount);

    if(charCount > 50) {
    $("#char-count").css("color", "red");
    } else {
    $("#char-count").css("color", "black");
    };
    });

    var rows = $(".my-row");
    console.log("rows working");
    for(var i=0; i<rows.length; ++i) {
    if (i%2===0) {
    $(rows[i]).css("background-color", "orange");
    };
    };


    });