Skip to content

Instantly share code, notes, and snippets.

@margieI

margieI/index.html

Created July 15, 2015 09:13
Show Gist options
  • Save margieI/5f811f4cad72258b270a to your computer and use it in GitHub Desktop.
Save margieI/5f811f4cad72258b270a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Margaritra Itaj</title>
<meta charset=utf-"8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Pacifico|Mystery+Quest|Playfair+Display+SC:700|Wallpoet' rel='stylesheet' type='text/css'>
<link href="css/styles.css" type="text/css" rel="stylesheet">
<!-- jQuery is required for Bootstrap to work -->
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<!--jQuery Media Script-->
<script src="js/jquery.media.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCc1i5XSe2N3Vt5jtIu9P80jiPqERRc1eQ"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://connect.facebook.net/en_US/all.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 src="js/scripts.js"></script>
</head>
<body data-spy="scroll" data-target=".navbar">
<div id="fb-root"></div>
<script>(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_GB/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Collect the nav links, forms, and other content for toggling -->
<!--navbar start here-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="nav container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Web Development</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul id="nav_links" class="nav navbar-nav">
<li><a href="#">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#work">WORK</a></li>
<li><a href="#contact">CONTACT</a></li>
<li><a href="#FAQ">FAQ</a></li>
</ul>
</div><!--end navbar-collapse collapse-->
</div><!--end nav container-->
</nav><!-- --------navbar ends here------ -->
<!--image carousel-->
<div id="index" class="container-fluid">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div id="carousel-top-position">
<div class="header">
<h1 id="topindex"><strong>MARGARITA ITAJ</strong></h1>
</div>
</div>
<div class="item active">
<img src="img/home2.jpg" alt="Portugal">
<div class="carousel-caption">
<p></p>
<h3></h3>
</div>
</div>
<div class="item">
<img src="img/city.jpg" alt="Portugal">
<div class="carousel-caption">
<p></p>
<h3 ></h3>
</div>
</div>
<div class="item">
<img src="img/city1.jpg" alt="Portugal">
<div class="carousel-caption">
<p></p>
<h3></h3>
</div>
</div>
</div> <!-- carousel inner -->
<!-- Left and right 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> <!-- carousel div -->
</div><!--end container index-->
<!-- ABOUT -->
<div class="container-fluid" id="about">
<div class="container anchor" id="process"></div>
<div class="gridbox gridheader">
<div class="header">
<h1>ABOUT</h1>
</div>
</div>
<div class="jumbotron">
<div class="transbox">
<h2><strong>web developer</strong></h2>
<p><strong>It was 2005 when i wrote my first time line of code. Since then my passion for development is still growing, every day more! With code I can discover a new world and it is the way I can express my imagination. In the end, is so rewarding to see the result of it in the shape of a beautiful website or app.. I am a positive person and I'm always open to new challenges.Most important, web development is a fun experience. Contact me if you have a project and want to know more.<a href="#FAQ" data-toggle="tooltip" title="" id="item1" data-original-title="More about me">More about me.</a></strong></p>
</div> <br><br><br><br>
</div><br>
<div class="container"><!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h4><strong>What is Web development?</strong></h4><br>
<img id="imageabout" src="img/about1.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"><br>
<p>Web development is a broad term for the work involved in developing a web site for the Internet or a private network. Web development can range from developing simple page to the most complex web-based internet applications, electronic businesses, and social network services.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">More</button>
</div>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div class="col-md-4">
<h4><strong>Why to learn Web development?</strong></h4><br>
<img id="imageabout" src="img/about2.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"><br>
<p>Beginning web development is relatively easy - you only need your web browser and an editor. Both should be installed on your computer already.Web development let's you express yourself. You can try everything you want and share it with the world.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">More</button>
</div>
<div class="col-md-4">
<h4><strong>What is the Difference Between Web Design and Web Development?</strong></h4>
<img id="imageabout" src="img/about3.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236">
<p>Web development is the back-end of the website, the programming and interactions on the pages.<br>Web design is the customer-facing part of the website. A web designer is concerned with how a site looks and how the customers interact with it.</p>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">More</button>
</div>
</div>
</div><br><br><br>
<div class="gridbox griddown"></div>
</div>
<!-- END ABOUT.HTML-->
<!-- ---------------------------WORK.HTML---------------------->
<div class="container-fluid" id="work">
<div class="gridbox gridheader">
<div class="header">
<h1>MY WORK</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!--iframe id="youtube" width="580" height="335" src="https://www.youtube.com/embed/Pwrwf_8H25Y" frameborder="0" allowfullscreen></iframe-->
</div>
</div>
<div class="row">
<div class="col-md-3 text-center">
<div class="image" id="0"></div>
</div>
<div class="col-md-3 text-center">
<div class="image" id="1"></div>
</div>
<div class="col-md-3 text-center">
<div class="image" id="2"></div>
</div>
<div class="col-md-3 text-center">
<div class="image" id="3"></div>
</div>
</div>
</div><!--END WORK.HTML-->
<!------FAQ.HTML-------------------------------->
<div class="container" id="FAQ">
<div class="container anchor" id="process"></div>
<div class="gridbox gridheader">
<div class="header">
<h1>Frequently Asked Questions</h1>
</div>
</div>
<table>
<tr class="my-row">
<th>HEADER 1</th>
<th>HEADER 2</th>
<th>HEADER 3</th>
</tr>
<tr class="my-row">
<td>DODY 1</td>
<td>DODY 2</td>
<td>DODY 3</td>
</tr>
<tr class="my-row">
<td>DODY 1</td>
<td>DODY 2</td>
<td>DODY 3</td>
</tr>
<tr class="my-row">
<td>DODY 1</td>
<td>DODY 2</td>
<td>DODY 3</td>
</tr>
</table><br><br>
<div class="row">
<h3 class="learn-more">Learn More</h3>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#example-modal-lg" >Learn More</button>
<!-- Modal -->
<div class="modal fade" id="example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" data-backdrop="static" and data-keyboard="false">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title">Summary</h4>
</div>
<div class="modal-body">
<iframe id="modalframe" src="docs/summary.pdf">
</iframe>
</div><!--end modal-body-->
</div><!--end modal-content-->
</div><!--end modal-dialog modal-lg-->
</div><!-- end modal fade bs-example-modal-lg-->
</div> <!--end row-->
<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 data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why did you decide to become a web developer?
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p id="answer">I wrote first code in 2005. I loved it! A world of internet is enriching our relationship with technology. Is the way that i can express everything that i have in my mind.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTow">
What job are you looking for?
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p id="answer">I'd like my job to be challenging, and let me use my education and experience. It's important to me to continue learning, and exercise my problem solving skills, in areas like web development, Jr. Ruby on Rails developer and design.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTree" aria-expanded="true" aria-controls="collapseTree">
What kinds of projects will I be working on?
</a>
</h4>
</div>
<div id="collapseTree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTree">
<div class="panel-body">
<p id="answer">All the web development projects which include technologies like html,css, javascript,mysql, jr.Ruby on Rails, illustrator.Contact me if you have a project and want to know more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
What motivates you?
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p id="answer">Learning new things has always been a great motivator for me. From every job I've had, I believe I've always been able to learn something new, or a new way to look at a problem.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
What are your goals for the next few years?
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p id="answer">During the next few years, I would like to finish up the requirements for my degree. I'm taking courses year round, so that I'll have time to work and spend time with my family also.</p>
</div>
</div>
</div>
</div>
</div><!-- END FAQ.HTML container-->
<!-- Footer --><!----------------------CONTACT.HTML------------------>
<div class="container-fluid contact" id="contact">
<div class="container anchor" id="process"></div>
<div class="container">
<div class="gridbox gridheader" id="contact-top-box">
<div class="header">
<h1>Contact</h1>
</div>
</div>
<div class="col-xs-4">
<div id="map-canvas" style="height: 300px; width: 350px;">
<!--<iframe width="600" height="350" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCc1i5XSe2N3Vt5jtIu9P80jiPqERRc1eQ
&q=plateia+agias+triados+penteli+11,+152+36+Athens,+Greece">
</iframe>-->
</div>
<p><h3><strong>Keep in touch</strong></h3>
<h5><strong><span class="glyphicon glyphicon-envelope"></span>&nbsp;&nbsp;margie@designer.lu</strong></h5>
<span class="glyphicon glyphicon-phone"></span>&nbsp;mobile phone: 6975687250<br> company phone (0030)487538</p>
</div>
<div class="col-md-8 lg-col-8">
<form data-toggle='validator' role='form' method='post'><input type='hidden' name='form-name' value='form 1'>
<div class="form-group">
<label for="name">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="name">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" class="form-control" id="email" placeholder="e-mail">
</div>
<div class="form-group">
<label for="message">Your Message Here</label>
<textarea style="resize:none" cols="40" rows="5" placeholder="Your message here..." name="message" class="message-box form-control" id="message"></textarea>
<p id="visible-message"></p>
<p id="char-count"></p>
</div>
<button type="submit" class="btn btn-default" id="submit-btn">Send</button>
</form>
</div>
</div> <!--END Container.HTML-->
</div> <!--END CONTACT.HTML-->
<br>
<footer id="gridfooter" data-role="footer" data-position="fixed">
<h5 id="letter">
<form action="demo_form.asp"><span class="glyphicon glyphicon-envelope"></span>
Newsletter &nbsp;<input type="text" name="News Letters" placeholder="your e-mail..."><input type="submit" value="OK">
</form>
</h5>
<div class="footeright">
<a href="https://twitter.com/Margarita_taz" class="twitter-follow-button" data-show-count="false">Follow @Margarita_taz</a>
<div class="footer clearfix">
<p><em>Copyright &copy; 2015 Margarita Itaj</em> </p>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
</div>
</div><!----end - footeright-------->
</footer><!----end footer-------->
<script type="text/javascript">
$(document).ready(function(){
$('#carousel-example-generic').carousel({interval: 7000})
});
</script>
<script type="text/javascript">
var $root = $('html, body');
$('.navbar-nav a').click(function(){
var href = $.attr(this, 'href');
$root.animate({
scrollTop: $(href).offset().top
}, 500, function () {
window.location.hash = href;
});
return false;
});
</script>
<script type="text/javascript">
$(document).ready(function() {
// Tooltip
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Raw
scripts.js
var workTest = [ { title: "First Project", pic: "img/color00.jpg" },
{ title: "Second Project", pic: "img/color01.gif" },
{ title: "Third Project", pic: "img/color03.jpg" },
{ title: "Fourth Project", pic: "img/color02.png" }
];
$(document).ready(function(){
$("#submit-btn").on("click",function(){
console.log("clicked")
});
$(".message-box").on("keyup",function(){
var message=$(".message-box").val();console.log(message);//here we set the length of the content of the textarea to a variable
$("#visible-message").html(message);
var charCount=$(".message-box").val().length;
console.log(charCount);//here we make sure we set it to the right value
$("#char-count").html(charCount);//here we show a running character count to the user
if(charCount>50){
$("#char-count").css("color","red")}
else{
$("#char-count").css("color","blue")}
});
var rows=$(".my-row");
for(var i=0;i<rows.length;++i){
if(i%2===0){
$(rows[i]).css("background-color","pink")}
}
$( document ).ready( function(){
for(var i=0; i<workTest.length;++i){
console.log("setting image for i "+ i + " to " + workTest[i].pic);
$("#"+i).css("background-image","url("+workTest[i].pic+")");
};
$(".image").mouseenter(function(){
console.log(this);
$(this).html("<p class='info'><span class='proj-title'>Title:</span> "+workTest[this.id].title+"</p>")
})
.mouseleave(function(){$("p.info").html("");});
});
});// here we close the doc ready. no more code below here
$(document).ready(function(){
$(".message-box").css("background-color", "pink");
function initialize() {// you'll be working in here next
var mapOptions = {
center: new google.maps.LatLng(38.0541366,23.8675795,17),
zoom: 8
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(15);
map.setCenter(marker.getPosition());
});
};//end initialize
google.maps.event.addDomListener(window, 'load', initialize);
});
Raw
style.css
.anchor {
padding-top: 50px;
width: 100%;
background-color: rgba(13,13,12,0.8);
}
.navbar {
background-color: rgba(246,249,235,0.6);
border-color: rgba(246,249,235,0.6);
}
#nav_links a {
text-decoration: none;
float: right;
color: black;
}
.navbar-brand{
color: black;
}
/****************/
.container-fluid {
padding-left: 0;
padding-right: 0;
}
p{
font-size: 13.8px;
}
.header{
text-align: center;
font-family: 'Wallpoet', cursive;
color: #fff;
}
#carousel-top-position {
position: absolute;
z-index: 1000;
margin-left: 730px;
}
#topindex {
margin-top: 650px;
color: #fff;
font-size: 45px;
}
/********about****style******//******about**style*****************************************/
.gridheader {
padding: 0.872%;
background-color: rgba(13,13,12,0.8);
border: rgba(246,249,235,0.8);
}
.jumbotron {
background-color: rgba(3,108,124,1);
}
.transbox{
margin: 100px 20px 20px 20px;
background-color: #ffffff;
border: 1px solid black;
opacity:0.6;
}
.transbox p{
margin: 3%;
font-weight: bold;
color: #000000;
}
#imageabout{
width: 80%;
}
/********end**about**style******//*****************************************************/
/**********work****style******//*****************************************************/
/*#work{
background-color: rgba(250,254,230,0.8);
}*/
#youtube{
margin-top: 100px;
margin-left: 500px;
}
.image {
box-sizing:border-box;
border:2px solid #fff;
width:200px;
height:200px;
margin:5px;
display:inline-block;
position:relative;
}
.info {
display:inline-block;
color:#fff;
font-family:Futura;
text-transform:uppercase;
font-weight:700;
letter-spacing:0.5em;
line-height:1.6;
position:absolute;
top:15%;
left:22%;
}
.proj-title {
font-weight:100;
}
/*******end***work****style******/
/**********faq****style***********************************************/
.learn-more {
text-align: left;
float: left;
margin-left: 37px;
}
.row{
width: 100%;
margin-left: -15px;
margin-right: -15px;
}
table{
margin-top: 30px;
width: 100%;
}
.my-row {
border-spacing: 1px;
text-align: right;
}
.panel-group{
width: 100%;
}
.btn-info {
float: right;
padding: 15px;
}
.modal-body {
height: 500px;
}
#modalframe {
padding: 10px;
width: 100%;
height: 100%;
}
#answer{
color: black;
}
/*********contact*****style******//**************************/
/*#contact-top-box{
margin-left: -396px;
margin-right: -364px;
}*/
.col-lg-4 {
width: 35%;
}
.col-xs-4{
float: left;
padding-top: 25px;
margin-bottom: 40px;
padding-left: 5px;
}
.col-md-8{
padding-top: 100px;
float: right;
}
#map-canvas{
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
transform:translatez(0px);
background-color: grb(229,227,223);
float: left;
}
/*******end***contact****style******/
/**------------footer--------------**/
#gridfooter {
width: 100%;
margin-bottom: 0;
}
#gridfooter {
padding: 1%;
background-color: #1E90FF;
font-size: 11px;
}/*#f1f1f1*/
#letter{
text-align: center;
}
.footeright{
text-align: right;
}
.footer{
text-align: left;
}
@media only screen and (max-width: 600px) {
#index{
padding-left: 0;
padding-right: 0;
}
#carousel-top-header {
margin-left: 205px;
}
#topindex {
margin-top: 175px;
font-size: 17px;
}
/********about****style******//******about**style**************************************/
#imageabout{
width: 100%;
}
/********end**about**style******//*****************************************************/
.title h1 {
font-weight: 17.2;
margin-top: 12.5px;
margin-bottom: 27.5px;
}
#divrow{
max-width: 100%;
height: auto;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment