Last active
May 7, 2016 16:20
-
-
Save mnarasimhan02/ecde70dbe654613fd19e to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Cat | |
| attr_reader :color, :breed | |
| attr_accessor :name | |
| def initialize(color, breed) | |
| @color = color | |
| @breed = breed | |
| @hungry = true | |
| end | |
| def feed(food) | |
| puts "Mmmm, " + food + "!" | |
| @hungry = false | |
| end | |
| def hungry? | |
| if @hungry | |
| puts "I'm hungry!" | |
| else | |
| puts "I'm full!" | |
| end | |
| @hungry | |
| end | |
| def speak | |
| puts "Meow!" | |
| end | |
| end | |
| kitty = Cat.new("grey", "Persian") | |
| puts "Let's inspect our new cat:" | |
| puts kitty.inspect | |
| puts "What class does our new cat belong to?" | |
| puts kitty.class | |
| puts "Is our new cat an object?" | |
| puts kitty.is_a?(Object) | |
| puts "What color is our cat?" | |
| puts kitty.color | |
| puts "Let's give our new cat a name" | |
| kitty.name = "Betsy" | |
| puts kitty.name | |
| puts "Is our cat hungry now?" | |
| kitty.hungry? | |
| puts "Let's feed our cat" | |
| kitty.feed("tuna") | |
| puts "Is our cat hungry now?" | |
| kitty.hungry? | |
| puts "Our cat can make noise" | |
| kitty.speak |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head><!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>FAQ</title> | |
| <!-- // <script src="dist/html5shiv.js"></script> --> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="row"> | |
| <h2 class="learn-more">Learn More</h2> | |
| <div class="modal-button"> | |
| <button type="button" class="btn btn-primary" data-toggle="modal" id="btn2" data-target=".bs-example-modal-lg" data-placement="bottom" title="Click to open resume">View Resume/CV</button> | |
| </div> | |
| </div> | |
| <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| A Technology focussed, program manager with global experience, Adept at understanding and analyzing new technologies and business processes rapidly with excellent customer facing skills | |
| Adept at overseeing all facets of project lifecycle, including initiation and planning; change, risk, and issue management; and guiding QA teams.Demonstrated ability to lead and manage cross-functional teams.Strong written and verbal communication skills with the ability to manage multiple projects in a fast-paced environment.<br><br> | |
| <b>Specialties:</b> Blend of product, project, and program management skills with client facilitation and consulting skills honed by early consulting experience. Strong technical background in Internet technologies, experienced in working closely with geographically dispersed engineering teams, and thrive on driving the most challenging technical projects to completion. | |
| <div class="modal-header"> | |
| <h4 class="modal-title" id="myLargeModalLabel">Resume/CV</h4> | |
| <button type="button" title="close" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| Talented technical Project Manager with over 10 years of demonstrated expertise completing projects on time and within budget. | |
| <embed id="modalembed" src="https://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faqcontainer"> | |
| <div class="faqheader"> | |
| <div class="panel-group" id="accordion"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" href="#collapseOne"> | |
| <span class="glyphicon glyphicon-plus"> Why web development?</span> | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseOne" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| Passion for learning web development and new technologies | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" href="#collapseTwo"> | |
| <span class="glyphicon glyphicon-plus"> | |
| Latest from Technical blogs </span> | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseTwo" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| A section with links to technical blogs | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" href="#collapseThree"> | |
| <span class="glyphicon glyphicon-plus"> | |
| Still need to contact me</span> | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseThree" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Send me your comments | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end faqheader--> | |
| </div> | |
| <!-- end faqcontainer--> | |
| <script> | |
| $(function () { | |
| $('.btn-primary').tooltip(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>FAQ</title> | |
| <!-- // <script src="dist/html5shiv.js"></script> --> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="row"> | |
| <h2 class="learn-more">Learn More</h2> | |
| <div class="modal-button"> | |
| <button type="button" class="btn btn-primary" data-toggle="tooltip" id="btn2" data-target=".bs-example-modal-lg" data-placement="bottom" title="Click to open resume">View Resume/CV</button> | |
| </div> | |
| </div> | |
| <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" data-backdrop="static" data-keyboard="false" aria-hidden="true"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| A Technology focussed, program manager with global experience, Adept at understanding and analyzing new technologies and business processes rapidly with excellent customer facing skills | |
| Adept at overseeing all facets of project lifecycle, including initiation and planning; change, risk, and issue management; and guiding QA teams.Demonstrated ability to lead and manage cross-functional teams.Strong written and verbal communication skills with the ability to manage multiple projects in a fast-paced environment.<br><br> | |
| <b>Specialties:</b> Blend of product, project, and program management skills with client facilitation and consulting skills honed by early consulting experience. Strong technical background in Internet technologies, experienced in working closely with geographically dispersed engineering teams, and thrive on driving the most challenging technical projects to completion. | |
| <div class="modal-header"> | |
| <h4 class="modal-title" id="myLargeModalLabel">Resume/CV</h4> | |
| <button type="button" title="close" class="close" data-dismiss="modal" aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| Talented technical Project Manager with over 10 years of demonstrated expertise completing projects on time and within budget. | |
| <embed id="modalembed" src="https://www.smashingmagazine.com/images/design-cv-resume/evalotta_lamm.pdf"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faqcontainer"> | |
| <div class="faqheader"> | |
| <div class="panel-group" id="accordion"> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" href="#collapseOne"> | |
| <span class="glyphicon glyphicon-plus"> Why web development?</span> | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseOne" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| Passion for learning web development and new technologies | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseTwo" href="#collapseTwo"> | |
| <span class="glyphicon glyphicon-plus"> | |
| Latest from Technical blogs </span> | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseTwo" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| A section with links to technical blogs | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div class="panel-heading"> | |
| <h4 class="panel-title"> | |
| <a data-toggle="collapse" data-parent="#accordion" data-target="#collapseThree" href="#collapseThree"> | |
| <span class="glyphicon glyphicon-plus"> | |
| Still need to contact me</span> | |
| </a> | |
| </h4> | |
| </div> | |
| <div id="collapseThree" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| Send me your comments | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- end faqheader--> | |
| </div> | |
| <!-- end faqcontainer--> | |
| <script> | |
| $(function () { | |
| $('.btn-primary').tooltip(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| def fav_foods | |
| food_array = [] | |
| 3.times do | |
| puts "Name a favorite food." | |
| food_array << gets.chomp | |
| end# instead of the brackets, you can also use Array.new to make a new empty array | |
| puts "Your favorite foods are #{food_array.join(", ")}." | |
| # code for this method goes in here | |
| food_array.each { |food| puts "I like #{food} too!" } | |
| end | |
| fav_foods |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <link rel="stylesheet" href="css/style.css"> | |
| <title>Hello World!</title> | |
| <!-- Bootstrap core CSS --> | |
| <!-- Custom styles for this template go here --> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> | |
| <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> | |
| <!--[if lt IE 9]> | |
| <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> | |
| <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body data-spy="scroll" data-target=".navbar"> | |
| <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <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="projectName navbar-brand"> | |
| <a href="#">Project Name</a> | |
| </div> | |
| </div> | |
| <!-- nav bar header --> | |
| <div class="navbar-collapse collapse"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#">HOME</a></li> | |
| <li><a>TECH STACK</a></li> | |
| <li><a href="#imgsection">EXPERIENCE</a></li> | |
| <li><a>BLOG</a></li> | |
| <li><a href="#abtsection" class="Minfo" title="More information">ABOUT</a></li> | |
| <li><a href="#ctsection" class="Cinfo" title="Contact info">CONTACT</a></li> | |
| </ul> | |
| </div> | |
| <!-- nav --> | |
| </div> | |
| <!-- nav container --> | |
| </div> | |
| <!-- nav bar --> | |
| <div class="jumbotron"> | |
| <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> | |
| <!-- Indicators --> | |
| <ol class="carousel-indicators"> | |
| <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="1"></li> | |
| <li data-target="#carousel-example-generic" data-slide-to="2"></li> | |
| </ol> | |
| <!-- Wrapper for slides --> | |
| <div class="carousel-inner" role="listbox"> | |
| <div class="item active"> | |
| <img src="./img/portfolio1.jpg" alt="portfolio" > | |
| <div class="carousel-caption"> | |
| <h3>Programming</h3> | |
| <p>A Technology focussed, program manager with global experience</p> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="./img/portfolio2.jpg" alt="portfolio"> | |
| <div class="carousel-caption"> | |
| <h3>Software Engineering</h3> | |
| <p>Adept at understanding and analyzing new technologies and business processes rapidly with excellent customer facing skills</p> | |
| </div> | |
| </div> | |
| <div class="item"> | |
| <img src="./img/portfolio3.jpg" alt="portfolio"> | |
| <div class="carousel-caption"> | |
| <h3>Extra-ordinary</h3> | |
| <p>Here is an example description</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> | |
| <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> | |
| <span class="sr-only">Previous</span> | |
| </a> | |
| <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> | |
| <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> | |
| <span class="sr-only">Next</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="container anchor" id="imgsection" > | |
| <!-- Example row of portfolio projects --> | |
| <div class="row" id="work"> | |
| </div> | |
| </div> | |
| <div class="container anchor" id="abtsection" data-stellar-background-ratio="0.5"> | |
| <!-- Example row of columns --> | |
| <div class="row" id="About"> | |
| <div class="col-md-4 col-xs-6 image column"> | |
| <img src="img/me.jpg" class="cstyle" alt="About me" /> | |
| </div> | |
| <div class="col-md-4 col-xs-6 intro column"> | |
| <p>Try. Learn. Re-learn.. </p> | |
| </div> | |
| <div class="col-md-4 col-xs-6 skills column"> | |
| <h3> My Skills </h3> | |
| <ul id="skill-list"> | |
| <li>HTML</li> | |
| <li>CSS</li> | |
| <li>Database</li> | |
| </ul> | |
| </div> | |
| <!-- end row--> | |
| </div> | |
| <div class="main-text"> | |
| <h3>More about me</h3> | |
| <p> I have started programming as a hobby to learn new technologies. I realize that creating and coding is what I like and I've been constantly seeking ways to improve my code and build bigger, faster, better apps. When I'm not coding, I can usually be found playing tennis, Reading Game of Thrones, or researching how to crush my opponents in fantasy sports.</p> | |
| </div> | |
| </div> | |
| <!-- end container--> | |
| <div class="container anchor" id="ctsection" data-stellar-background-ratio="0.5"> | |
| <div class="page_content"> | |
| <div class="image"> | |
| <div id="map"></div> | |
| <h2 style="text-align: center;"> | |
| <span>Contact</span> | |
| </h2> | |
| <p class="CONTACT_ME" > | |
| <a href="mailto:maheshya@gmail.com"> maheshya@gmail.com </a> | |
| </p> | |
| <p class="Phone" > | |
| <span class="glyphicon glyphicon-phone"> | |
| <a>+1-732-281-4000</a> | |
| </span> | |
| </p> | |
| <p class="FAQ" > | |
| <span class="glyphicon glyphicon-question-sign"> | |
| <a href="faq.html">FAQ</a> | |
| </span> | |
| </p> | |
| </div> | |
| <!--/image--> | |
| <div class="forms"> | |
| <form id="ct"> | |
| <div class="form-group col-lg-8 col-md-8"> | |
| <input type="text" id="name" class="form-control" placeholder="Full Name" required="required"> | |
| <label for="name">Your Name*</label> | |
| </div> | |
| <div class="form-group col-lg-8 col-md-8"> | |
| <input type="email" id="emailid" class="form-control" placeholder="Your email id" required="required"> | |
| <label for="emailid">Your Email*</label> | |
| </div> | |
| <div class="form-group col-lg-8 col-md-8"> | |
| <textarea style="resize:none" id="desc" cols="40" rows="5" placeholder="Your description here" class="form-control message-box" required="required"></textarea> | |
| <label for="desc">Your Message*</label> | |
| <p id="visible-comment"> </p> | |
| <p id="char-count"> </p> | |
| </div> | |
| <button type="submit" class="btn btn-info" id="btn1">Submit Info</button> | |
| </form> | |
| </div> | |
| <!-- /forms--> | |
| </div> | |
| <!-- /page_content --> | |
| </div> | |
| <!-- /container --> | |
| <!-- ============================= --> <!-- All your JavaScript comes | |
| now --> <!-- ============================= --> | |
| <!-- Can place script tags with JavaScript files here --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | |
| <script type="text/javascript" src="js/jquery.stellar.min.js"></script> | |
| <script src="js/work.js"></script> | |
| <script src="js/scripts.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA7ncwp_Og9jh5A8xxXl_GjIuD7uMY2XsM&callback=initMap" | |
| async defer></script> | |
| <div id="fb-root"></div> | |
| <div class="footer-bar"> | |
| <a href="https://twitter.com/NMaheshya" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @NMaheshya</a> | |
| <footer> © Mnarasimhan 2016</footer> | |
| <div class="fb-follow" data-href="https://www.facebook.com/zuck" data-layout="button" data-show-faces="false" | |
| style="vertical-align:top;zoom:1;*display:inline"></div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| class Pet | |
| attr_reader :color, :breed | |
| attr_accessor :name | |
| def initialize(color, breed) | |
| @color = color | |
| @breed = breed | |
| @hungry = true | |
| end | |
| def feed(food) | |
| puts "Mmmm, " + food + "!" | |
| @hungry = false | |
| end | |
| def hungry? | |
| if @hungry | |
| puts "I'm hungry!" | |
| else | |
| puts "I'm full!" | |
| end | |
| @hungry | |
| end | |
| end | |
| class Dog < Pet | |
| def speak | |
| puts "Woof!" | |
| end | |
| end | |
| class Cat < Pet | |
| def speak | |
| puts "Meow!" | |
| end | |
| end | |
| puppy = Dog.new("black", "Staffordshire Terrier") | |
| puppy.speak | |
| puts puppy.breed |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| def greeting # here we say def to define a method and put the name of our method | |
| puts "Please enter your name" | |
| name= gets.chomp | |
| puts "hello" + " "+ name# here’s the code inside our method | |
| end # and here we end or close our method | |
| greeting |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # Let the user guess. | |
| print "Enter heads or tails? " | |
| hort = gets.chomp | |
| unless hort == 'heads' || hort == 'tails' | |
| print "I _said_ heads or tails. Can't you read?\n" | |
| exit(1) | |
| end | |
| # Now toss the coin. | |
| toss = if rand(2) == 1 then | |
| "heads" | |
| else | |
| "tails" | |
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| if true | |
| puts "this is true" | |
| else | |
| puts "this is false" | |
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| def choose | |
| puts "Do you like programming? Yes or no please." | |
| choice = gets.chomp | |
| if (choice.downcase == "yes") | |
| puts "That\'s great!" | |
| elsif (choice.downcase == "no") | |
| puts "That\'s too bad!" | |
| else | |
| puts "That wasn\'t a yes or no." | |
| end | |
| end | |
| choose |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # #number = 0 | |
| # while (number <= 10) do # while this condition is true, do... | |
| # p "the number is now #{number}" # whatever is in this code block | |
| # number += 1 # short for number = number + 1 | |
| # end # don’t forget your end | |
| (0..10).each do |n| | |
| p "the new number is #{n}" | |
| end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! scripts.js */ | |
| $(document).ready(function(){ | |
| //stellar | |
| $('#abtsection').stellar(); | |
| //tool tips | |
| $(function () { $('.Minfo').tooltip(); }); | |
| $(function () { $('.Cinfo').tooltip(); }); | |
| }); | |
| //Google Maps Javascript API with marker | |
| var marker; | |
| function initMap() { | |
| var map = new google.maps.Map(document.getElementById('map'), { | |
| zoom: 13, | |
| center: {lat: 39.1354527, lng: -77.2468793} | |
| }); | |
| marker = new google.maps.Marker({ | |
| map: map, | |
| draggable: true, | |
| animation: google.maps.Animation.DROP, | |
| position: {lat: 39.1354527, lng: -77.2468793} | |
| }); | |
| marker.addListener('click', toggleBounce); | |
| } | |
| function toggleBounce() { | |
| if (marker.getAnimation() !== null) { | |
| marker.setAnimation(null); | |
| } else { | |
| marker.setAnimation(google.maps.Animation.BOUNCE); | |
| } | |
| } | |
| (function(d, s, id) { | |
| var js, fjs = d.getElementsByTagName(s)[0]; | |
| if (d.getElementById(id)) return; | |
| js = d.createElement(s); js.id = id; | |
| js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5"; | |
| fjs.parentNode.insertBefore(js, fjs); | |
| }(document, 'script', 'facebook-jssdk')); | |
| !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'); | |
| $("#btn1").on("click", function() { | |
| var txtArea = $(".message-box").val(); | |
| console.log(txtArea); | |
| if (txtArea = "") { | |
| $(".message-box").css("border", "2px solid red"); | |
| } else { | |
| $("#visible-comment").html(txtArea); | |
| $(".message-box").hide("slow"); | |
| }; | |
| return false; | |
| }); | |
| //key up | |
| $(".message-box").on("keyup", function() { | |
| console.log("key up happ"); | |
| var charCount = $(".message-box").val().length;//set the length of content | |
| console.log(charCount); | |
| $("#char-count").html(charCount); | |
| if (charCount > 50) { | |
| $("#char-count").css("color", "red"); | |
| } else { | |
| $("#char-count").css("color", "black"); | |
| }; | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container h1, h2 { | |
| text-decoration:none; | |
| color:#f06400; | |
| display:block; | |
| letter-spacing:0.0833333em; | |
| font-family:"Lato"; | |
| font-size:1.5em; | |
| line-height:1em; | |
| text-transform:uppercase; | |
| font-weight:100; | |
| text-align:center; | |
| margin:0.5em 0 .75em ; | |
| } | |
| .container p { | |
| text-align:center; | |
| } | |
| .location a:hover, .CONTACT_ME a:hover, .FAQ a:hover { | |
| color:red; | |
| text-decoration:none; | |
| } | |
| /*contact css*/ | |
| .image { | |
| position:relative; | |
| top:auto; | |
| bottom:30px; | |
| float:left; | |
| } | |
| .image h2 span { | |
| color:white; | |
| float:left; | |
| font-size:20px; | |
| letter-spacing:-1px; | |
| background:rgba(0, 0, 0, 0.7); | |
| padding:10px; | |
| padding-right:70px; | |
| } | |
| .forms { | |
| position:relative; | |
| top:auto; | |
| bottom:20px; | |
| left:100px; | |
| } | |
| .glyphicon-phone { | |
| right:20px; | |
| } | |
| .glyphicon-question-sign { | |
| right:60px; | |
| } | |
| #collapseOne #collapseTwo #collapseThree{ | |
| background:rgba(155, 0, 100, 0.5); | |
| } | |
| .faqheader h1 { | |
| text-decoration:none; | |
| color:#f06400; | |
| display:block; | |
| letter-spacing:0.0833333em; | |
| font-family:"Lato"; | |
| font-size:25px; | |
| line-height:1em; | |
| text-transform:uppercase; | |
| font-weight:100; | |
| text-align:center; | |
| margin:0.5em 0 .75em ; | |
| } | |
| .FAQ a, .CONTACT_ME a, .Phone a { | |
| color:orange; | |
| text-transform:uppercase; | |
| text-decoration:none; | |
| text-align: left; | |
| letter-spacing:0.1em; | |
| font-size:0.9em; | |
| padding-right: 120px; | |
| } | |
| /*about.css style*/ | |
| * { box-sizing: border-box; } | |
| .cstyle { | |
| width:100%; | |
| } | |
| .column { | |
| display:inline-block; | |
| padding-top:100px; | |
| left:0; | |
| font-family:'Pragati Narrow', sans-serif; | |
| } | |
| .main-text { | |
| clear:both; | |
| padding-top:60px; | |
| font-family:'Pragati Narrow', sans-serif; | |
| font-size:1.1em; | |
| text-align:center; | |
| } | |
| body { | |
| position: relative; | |
| } | |
| /*Typography*/ | |
| .intro p { | |
| font-family:'Pragati Narrow', sans-serif; | |
| font-size:2em; | |
| font-weight:100; | |
| -webkit-margin-before:0; | |
| } | |
| .skills h3{ | |
| text-transform:uppercase; | |
| margin:10px; | |
| } | |
| .header { | |
| display:inline-block; | |
| position:fixed; | |
| width:100%; | |
| height:50px; | |
| top:0; | |
| padding-left:0; | |
| left:0; | |
| } | |
| .projectName a { | |
| text-transform:uppercase; | |
| color:white; | |
| text-decoration:none; | |
| letter-spacing:0.1em; | |
| display:inline-block; | |
| float:right; | |
| padding top:15px; | |
| position:fixed; | |
| font-size:14px; | |
| width:100%; | |
| font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; | |
| } | |
| .navbar-nav>li>a:hover { | |
| color:orange; | |
| text-transform:uppercase; | |
| text-decoration:none; | |
| } | |
| .anchor { | |
| padding-top:50px; | |
| } | |
| #ctsection { | |
| background-image:url("../img/contactbg.jpg"); | |
| /*Add a background image*/ | |
| background-attachment:fixed; | |
| /*Give the background a fixed position so it does not scroll when you scroll*/ | |
| background-size:cover; | |
| /*Change the color of the text on top so it is readable, and adjust the padding as needed.*/ | |
| height:450px; | |
| width:100%; | |
| } | |
| #abtsection { | |
| background-image:url("../img/parallax-1.jpg"); | |
| width:100%; | |
| } | |
| .pluginButton { | |
| line-height:10px; | |
| padding:0px 0px 3px 2px; | |
| } | |
| #btn1 { | |
| position:absolute; | |
| line-height:10px; | |
| left:314px; | |
| top:300px; | |
| } | |
| .form-group { | |
| width:30%; | |
| top:15px; | |
| bottom:5px; | |
| } | |
| footer { | |
| float:right; | |
| } | |
| .fb-follow span { | |
| vertical-align:top; | |
| position:relative; | |
| } | |
| .learn-more { | |
| text-align:left; | |
| float:left; | |
| padding-left:25px; | |
| font-size:24px; | |
| } | |
| #btn2 { | |
| float:right; | |
| padding-bottom:5px; | |
| padding-top:5px; | |
| margin-top:20px; | |
| margin-right:18px; | |
| padding-right:15px; | |
| padding-left:10px; | |
| width:140px; | |
| } | |
| #modalembed { | |
| height:500px; | |
| width:100%; | |
| padding:10px; | |
| } | |
| .work-img { | |
| display: block; /* needed to center the element with margin */ | |
| margin: auto; /* center the image inside the column if it's smaller */ | |
| max-width: 200px; /* needs to be set to the width of your image files if they are relatively small */ | |
| position: relative; /* is needed for .info position: absolute to work */ | |
| } | |
| .info { | |
| position: absolute; /* let's us move the text around and not worry about the image */ | |
| top: 15%; /* position the text 15% away from the top */ | |
| top: 15%; | |
| left: 22%; | |
| color:#C38516; | |
| font-family:Futura; | |
| text-transform:uppercase; | |
| font-weight:700; | |
| font-size:10px; | |
| letter-spacing:0.5em; | |
| line-height:1; | |
| display: none; | |
| } | |
| .proj-title { | |
| font-weight:100; | |
| text-align: center; | |
| } | |
| #map { | |
| width:300px; | |
| height:200px; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! scripts.js */ | |
| $(document).ready(function(){ | |
| var works = [ | |
| { | |
| title: "First Project", | |
| pic: "./img/wip.jpg" }, | |
| { | |
| title: "Second Project", | |
| pic: "./img/wip.jpg" }, | |
| { | |
| title: "Third Project", | |
| pic: "./img/wip.jpg" }, | |
| { | |
| title: "Fourth Project", | |
| pic: "./img/wip.jpg" } | |
| ]; | |
| for(var i = 0; i < works.length; ++i ) { | |
| $("#work").append("\ | |
| <div class='col-sm-6 col-md-3'>\ | |
| <a href='#' class='work-img'>\ | |
| <img class='img-responsive' src='" + works[i].pic + "'>\ | |
| <span class='info'><p class='proj-title'>Title:</p> " + works[i].title + "</span>\ | |
| </a>\ | |
| </div>\ | |
| "); | |
| $(".work-img").mouseenter(function(){ | |
| $(".info", this).show(); | |
| }).mouseleave(function(){ | |
| $(".info", this).hide(); | |
| }); | |
| var images = $("#work div img"); | |
| if(i%2 === 0){ | |
| $(images[i]).css("border", "2px solid DodgerBlue"); | |
| } else { | |
| $(images[i]).css("border", "2px solid salmon"); | |
| }; | |
| }; | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uploaded about.html , contact.html, index.html and corresponding css files