Skip to content

Instantly share code, notes, and snippets.

@Adsidera

Adsidera/exercise19.html

Created September 6, 2015 18:33
Show Gist options
  • Save Adsidera/7a382aa16f17fd8931f2 to your computer and use it in GitHub Desktop.
Save Adsidera/7a382aa16f17fd8931f2 to your computer and use it in GitHub Desktop.
Download ZIP
Exercise 19
Raw
exercise19.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=0.8">
<!--SCRIPTS-->
<!-- Adobe Fonts Script -->
<script src="http://use.edgefonts.net/cabin:n4,i4,n7,i7,n5,i5,n6,i6:all.js"></script>
<!-- Twitter Button 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 src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/script.js"></script>
<!-- ToolTip Script -->
<script>
$(function () {
$('#tooltip').tooltip();
});
</script>
<!--END of SCRIPTS-->
<meta charset="utf-8">
<title>Ad Sidera</title>
<!-- --><!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/faq.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<!-- My Customised Javascript -->
</head>
<body>
<!-- Navbar -->
<div class="nav navbar navbar-inverse " style="background-color:transparent; border:none; color:transparent;" role="navigation" id="navigation" data-target=".nav" data-offset-top="60" data-offset-bottom="100">
<div class="nav navbar-nav navbar" style="background-color:transparent; color:transparent;">
<li class="testonav"><a href="#portfolio">Portfolio</a></li>
<li class="testonav"><a href="#about">About</a></li>
<li class="testonav"><a href="#contact">Contact</a></li>
</div>
<nav 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>
</nav>
</div> <!--End Class nav navbar navbar-inverse
<!--Introduction Show -->
<div class="container-fluid" id="intro">
<div class="jumbotron" id="logo">
<a href="#carousel-example-generic">
<img src="img/Banner.png" class="image-responsive"></img>
</a>
</div>
</div><!--End of Introduction Show Div Container-Fluid
<!-- Carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="z-index=-100%;">
<!-- 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" style="z-index=-100%">
<div class="item active">
<img src="img/portfoliohero3.jpg" alt="seconda">
<div class="carousel-caption">
<h1>Web Creation and Development</h1>
</div>
</div>
<div class="item">
<img src="img/mac.jpg" alt="terza">
<div class="carousel-caption">
<h1>Translation and Localization</h1>
</div>
</div>
<div class="item">
<img src="img/Heroimage1920x1275.jpg" alt="terza">
<div class="carousel-caption">
<h1 class="caption">Writing and Editing</h1>
</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> <!--End of Div Carousel-Inner-->
</div> <!--End of Div Carousel Slide -->
<!-- About Section starts here -->
<div class="container-fluid" id="about">
<!-- Example row of columns -->
<div class="row" >
<div class="col-md-4">
<h2>Web Creation</h2>
<p>A technical translator, a webwriter, and a web developer. How could possibly all these different aspects coexist?</p>
</div>
<div class="col-md-4">
<h2>Translating</h2>
<p>By next december, I aim to call myself a webdeveloper. I am working and learning at the same time, and I can dedicate myself at least for 15hrs a week. </p>
</div>
<div class="col-md-4">
<h2>Writing & Editing</h2>
<p>I am already working in the IT sector, but with a different role. My priority is to step into a much more creative career than the one I am doing. Ideally I would like to work as a freelance.</p>
</div>
<div class="col-md-4">
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
<div class="col-md-4">
<p><a class="btn btn-default" href="contact.html" role="button">Contact Me &raquo;</a></p>
</div>
<div class="col-md-4">
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div>
</div>
</div><!--End of About Div Container-Fluid
<!--Portfolio section starts here-->
<div class="container-fluid" id="unito">
<div class="container" id="portfolio">
<!--<div class="container-fluid">
<div class="row" id="fila">
<div class="col-xs-12 col-md-4" id="pezza1"><a href="#" id="tooltip" title="Click the image for more info"><img src="img/Innenansichten.JPG" class="image-responsive" ></img></a>
<h1>Innenansichten</h1>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally en</p>
</div> -->
<!-- <div class="col-xs-12 col-md-4" id="pezza2"><a href="#" id="tooltip" title="Click the image for more info"><img src="img/aruroralia.jpg" class="image-responsive" alt="Auroralia"></img></a>
<h1>Auroralia</h1>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </p>
</div>
<div class="col-xs-12 col-md-4" id="pezza3">
<a href="#" id="tooltip" title="Click the image for more info"><img src="img/orfanelle.jpg" class="image-responsive" alt="Le Orfanelle"></img></a>
<h1>Le Orfanelle</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</div>
</div>
</div>
</div>-->
<div class="image" id="0"></div>
<div class="image" id="1"></div>
<div class="image" id="2"></div>
</div> <!--End of Portfolio Div Container-Fluid -->
</div>
<!--FAQ section -->
<div class="container-fluid" id="about">
<div class="modal-button">
<a href="#" id="tooltip" title="Click here to see my resume but beware you can't scroll it!"><button class="btn btn-primary btn-lg" data-toggle="modal" data-target=".bs-example-modal-lg">View Resume/CV</button></a>
</div>
<!-- Resume Modal Window code here -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">My Resume</h4>
<button type="button" class="close" data-dismiss="modal" arial-label="Close" data-keyboard="true">x</button>
</div>
<div class="modal-body">
<iframe id="AnnaCostalongaCV" src="AnnamariaCostalongaCV.docx.pdf#zoom=100" width="100%" height="900px"></iframe>
</div>
</div>
</div>
</div>
<div class="accordion" id="accordion" >
<div class="panel panel-default">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> How did you decide to become a web developer? </a> </h4>
<div id="collapseOne" class="accordion-body collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body"> After having worked for several years as IT specialist, I thought it was about time to take a further challenge and develop what has always been an interest into a real profession </div>
</div>
</div>
<div class="panel panel-default">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expandend="true"> How does your web design process work? </a> </h4>
<div id="collapseTwo" class="accordion-body collapse">
<div class="panel-body"> I'm using the most updated and responsive design frameworks, with Javascript integration </div>
</div>
</div>
<div class="panel panel-default">
<h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false"> Can I have a site that like this? </a> </h4>
<div id="collapseThree" class="accordion-body collapse">
<div class="panel-body"> Of course! Please send me your request and I will be happy to discuss with you about your project </div>
</div>
</div>
<div class="panel panel-default">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"> What customers do you work with? </a> </h4>
<div id="collapseFour" class="accordion-body collapse">
<div class="panel-body"> I work ideally with small-intermediate companies and private </div>
</div>
</div>
<div class="panel panel-default">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"> How can I request a quote? </a> </h4>
<div id="collapseFive" class="accordion-body collapse">
<div class="panel-body" id="ultimo"> Of course! Please, first <a href="mailto:annamaria.costalonga@gmail.com" style="text-decoration:none;">send me a description</a> of your desired project and what it aims to, so that I can send you back a more precise quote </div>
</div>
</div>
</div>
</div><!--End of FAQ Div Container-Fluid
<!--Contact section-->
<div class="container-fluid" id="contact">
<div class="container">
<div class="col-md-4 col-xs-12">
<h2>Contact Me</h2>
<p>For all types of general inquiries, please<br>
fill out this form</a> <br><br>
<!---Form starts here -->
<div id="form-messages"></div>
<form method="post" action="prova.html" name="contact form">
<div class="form-group" id="yourname">
<input type="text" class="form-control" cols="45" placeholder="* Your Name" name="name" required>
</div>
<div class="form-group" id="youremail">
<input type="email" class="form-control" cols="45" placeholder="* Your Email Address" name="email" x-moz-errormessage="This is not a valid e-mail" required>
</div>
<div class="form-group">
<textarea id="yourmessage" placeholder=" Your Message Here"style="resize:none" cols="45" name="message" rows="5"minlength=20 maxlength=350></textarea>
</div>
<button type="submit" class="btn btn-primary" id="invio">Submit</button>
<p id="visible-comment"></p>
</form><br>
<!---Form ends here -->
</div>
<div class="col-md-4">
<h2>How to find me</h2>
<p>If you prefer to discuss about your projects <i>vis à vis</i>, you may want to find me in our future office in Lilienstrasse in Leipzig, Germany</p>
</div>
<div class="col-md-4">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2492.4347556489147!2d12.406203500000004!3d51.33991569999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a6f8422933dd41%3A0x4be516f0edef3d51!2sLilienstra%C3%9Fe%2C+04315+Leipzig!5e0!3m2!1sit!2sde!4v1434830914686" width="400" height="300" frameborder="0" style="border:0;"></iframe>
</div>
</div> <!-- End of Contact Div Container -->
</div> <!-- End of Contact Div Container-Fluid -->
<div class="row" id="back">
<div class="col-md-4" >
<a href="index.html"><span class="glyphicon glyphicon-menu-up"></span></a>
</div>
</div>
<!--Footer -->
<footer>&copy Adsidera Developing</footer>
<!--End of HTML Coding
================================================== -->
<!-- Can place script tags with JavaScript files here -->
<!--jQuery is required for Bootstrap to work -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script/jquery.media.js" type="text/javascript"></script>
<!-- Latest compiled and minified Bootstrap JavaScript-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Raw
exercise19.js
//*My first Code starts Here*//
var myProjects = [ { title: "First Project", pic: "img/Innenansichten.JPG" },
{ title: "Second Project", pic: "img/aruroralia.jpg" },
{ title: "Third Project", pic: "img/orfanelle.jpg" } ];
/* Hidden Navbar */
$(document).ready(function () {
//*A pinky fashionable textarea at keystroke*//
$("#yourmessage").on("keyup", function() {
$("#yourmessage").css("background-color", "pink");
});
//*have fun in consolelogging your messages*//
$("#invio").on("click", function () {
var comment = $("#yourmessage").val();
console.log(comment);
});
});
window.onscroll = function () {changeColor()};
function changeColor() {
if (document.body.scrollTop > 100) {
$("#navigation").css("background-color", "black");
$("#navigation").css("color", "white"); }
else {
$("#navigation").css("background-color", "transparent");
$("#navigation").css("color", "#FFD300");}
};
for(var i=0; i<myProjects.length; ++i) {
$("#" + i ).css("background-image", "url("+ myProjects[i].pic +")" )
};
$(".image").mouseenter( function() {
console.log(this);
$(this).html("<p class='info'><span class='proj-title'>Title:</span></p>");
}).mouseleave( function() {
$("p.info").html("");
});
//*My first Code ends here*//
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment