|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<title>Margaritra Itaj</title> |
|
|
|
<meta charset=utf-"8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
|
<!-- Latest compiled and minified Bootstrap CSS --> |
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.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> |
|
<!-- Latest compiled and minified Bootstrap JavaScript --> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
|
<!--link href="js/javascript.js" type="text/js" rel="stylesheet"> --> |
|
<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="//connect.facebook.net/en_US/all.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 class="active"><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---------> |
|
|
|
<!----------index.html----------> |
|
|
|
<!--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-header"> |
|
<h1 id="topindex"><strong>Summer Solutions Fun</strong></h1> |
|
<p id="toptop"><strong>WAVES SPORTS AND FUN...</strong>what we want for all of you .</p> |
|
</div> |
|
<div class="item active"> |
|
<img src="img/surfing00.jpg" alt="Portugal"> |
|
<div class="carousel-caption"> |
|
<p></p> |
|
<h3></h3> |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<img src="img/surfing01.jpeg" alt="Portugal"> |
|
<div class="carousel-caption"> |
|
<p></p> |
|
<h3 ></h3> |
|
</div> |
|
</div> |
|
<div class="item"> |
|
<img src="img/surfing02.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.HTML----------------> |
|
<!---end about.html--------> |
|
<div class="gridcontainer" id="about"> |
|
<div class="container anchor" id="process"></div> |
|
<div class="gridwrapper"> |
|
<div class="gridbox gridheader"> |
|
<div class="header"> |
|
<h1>ABOUT</h1> |
|
</div> |
|
</div> |
|
<div class="gridbox gridmenu"> |
|
<div class="menuitem">LEVEL 1</div> |
|
<div class="menuitem">LEVEL 2</div> |
|
<div class="menuitem">LEVEL 3</div> |
|
<div class="menuitem">LEVEL 4</div> |
|
</div> |
|
<div class="gridbox gridmain"> |
|
<div class="main"> |
|
<h1>Waves Solution</h1> |
|
<p>Surfing is a highly addictive water sport and one of the most popular boardsports ever invented. There are over 20 million surfers in the world, and the number is growing fast.</p> |
|
<img id="pictur-left" src="img/surfing2.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"> |
|
<img id="pictur-right" src="img/surfing00.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"> |
|
<div class="span"> |
|
<span class="label label-primary" id="label1">Portugal Lisbon</span> |
|
<span class="label label-info" id="label">Portugal Sintra</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="gridbox gridright"> |
|
<div class="aboutright"> |
|
<h2>What is surf?</h2> |
|
<p>To ride a surfboard, to float on the crest of a wave toward shore.</p> |
|
<h2>Why to learn surf?</h2> |
|
<p>Surfing is amazing relaxation.The ocean and surfing provide a framework to promote deep relaxation and stress relief.</p> |
|
<h2>Price?</h2> |
|
<p>Waves are free!</p> |
|
</div> |
|
</div> |
|
</div><br><br><br><br><br> |
|
<div class="gridbox griddown"> |
|
<div class="down"> |
|
<h3>For people who are beginners:</h3> |
|
<p>The best way to forget your daily problems The best way to forget your daily problems.</p> |
|
</div> |
|
<div class="modal-button"><button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Learn More</button> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- END ABOUT.HTML--> |
|
<!-- ---------------------------WORK.HTML----------------------> |
|
|
|
<div class="container" id="work"> |
|
<div class="container anchor" id="process"></div> |
|
|
|
<div class="header"> |
|
<h1>MY WORK</h1> |
|
<br> |
|
|
|
</div> |
|
<div clas="row" id="divrow"> |
|
<div class="col-md-4 col-xs-6"><img src="img/dog.jpg" class="img-responsive"><p>Peter</p></div> |
|
<div class="col-md-4 col-xs-6"><img src="img/dog.jpg" class="img-responsive"><p>Anna</p></div> |
|
<div class="col-md-4 col-xs-6"><img src="img/dog.jpg" class="img-responsive"><p>Pedro</p></div> |
|
</div> |
|
</div><!--END WORK.HTML--> |
|
|
|
<iframe src="//www.youtube.com/embed/Pwrwf_8H25Y" allowfullscreen="" width="580" height="335"> |
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<title>jQuery YouTube Popup Player Plugin</title> |
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> |
|
<link type="text/css" |
|
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" rel="stylesheet" /> |
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> |
|
<script type="text/javascript" src="jquery.youtubepopup.min.js"></script> |
|
<script type="text/javascript"> |
|
$(function () { |
|
$("a.youtube").YouTubePopup({ autoplay: 0 }); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
<a class="youtube" href="http://www.youtube.com/watch?v=4eYSpIz2FjU" title="jQuery YouTube Popup Player Plugin TEST">Test Me</a> |
|
</body> |
|
</html> |
|
</iframe> |
|
<!----------------------CONTACT.HTML------------------> |
|
<div class="container contact" id="contact"> |
|
<div class="container anchor" id="process"></div> |
|
<div class="container"> |
|
<h1>Contact</h1> |
|
<h3 id="Information_top"><strong>Information by Margarita Margie</strong></h3> |
|
<h4 id="Information_top">A fashion designer creates clothing<br> for surfing and diving ,includingdresses, suits,<br>pants and skirts<br>and accessories such as shoes, for consumers. |
|
</h4> |
|
<div class="email"> |
|
<h5><strong><span class="glyphicon glyphicon-envelope"></span> [email protected]</strong></h5> |
|
<p><span class="glyphicon glyphicon-phone"></span> mobile phone: 6975687250<br> company phone (355)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> |
|
</div> |
|
<button type="submit" class="btn btn-default" id="button">Send</button> |
|
</form> |
|
</div> |
|
</div> <!--END Container.HTML--> |
|
</div> <!--END CONTACT.HTML-- |
|
|
|
|
|
|
|
|
|
<!------FAQ.HTML--------------------------------> |
|
<div class="container" id="FAQ"> |
|
<div class="container anchor" id="process"></div> |
|
|
|
<div class="title"> |
|
<h1>Frequently Asked Questions</h1> |
|
</div> |
|
<div class="row"> |
|
<h2 class="learn-more">Learn More</h2> |
|
<div class="modal-button"><button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Learn More</button> |
|
</div> |
|
</div> |
|
<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"> |
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. |
|
</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="collapseTwo"> |
|
What is your design process? |
|
</a> |
|
</h4> |
|
</div> |
|
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> |
|
<div class="panel-body"> |
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. |
|
</div> |
|
</div> |
|
</div> |
|
<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"> |
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. |
|
</div> |
|
</div> |
|
</div> |
|
<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"> |
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. |
|
</div> |
|
</div> |
|
</div> |
|
<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"> |
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. |
|
</div> |
|
</div> |
|
</div> |
|
<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"> |
|
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div><!-- END FAQ.HTML--> |
|
<!-- Footer --> |
|
|
|
<footer id="gridfooter" data-role="footer" data-position="fixed"> |
|
<h5 id="letter"> |
|
<form action="demo_form.asp"><span class="glyphicon glyphicon-envelope"></span> |
|
Newsletter <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 © 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--------> |
|
|
|
|
|
|
|
<!-- Latest compiled and minified JavaScript --> |
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
