Skip to content

Instantly share code, notes, and snippets.

@margieI

margieI/index.html

Created June 24, 2015 11:09
Show Gist options
  • Save margieI/3f9be6f569ae41aea7d3 to your computer and use it in GitHub Desktop.
Save margieI/3f9be6f569ae41aea7d3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
.anchor {
padding-top: 50px;
}
body {
font-family: "Futura", Verdana, sans-serif;
}
body {
background-image: url("../img/Boat-Sea-Beach-background.jpg");
Add a background image
background-position: center;
background-attachment: fixed;
/*Give the background a fixed position does it not scroll when you scroll*/
background-size: cover;
/*Have the background cover the entire div section*/
color: #fff;
/*Change the color of the text on top so it is readable, and adjust the padding as needed.*/
width: 1920px;
height: 1080px;
margin-right: 0px;
margin-left: 0px;
}
.navbar-inverse {
background-color: #1E90FF;
border-color: #1E90FF;
}
#nav_links li a {
background-color: #1E90FF;
text-decoration: none;
float: right;
}
#nav_links li a:hover {
background-color: none ;
}
p{
font-size: 15.8px;
}
#index {
padding-left: 0;
padding-right: 0;
}
#carousel-top-header {
position: absolute;
z-index: 1000;
margin-left: 730px;
}
#topindex {
margin-top: 350px;
font-family: Futura;
color: #fff;
ont-size: 45px;
}
iframe{
margin-left: 500px;
}
.modal-button {
float: right;
padding: 15px;
}
.learn-more {
text-align: left;
float: left;
margin-left: 50px;
}
.row{
width: 100%;
}
.row{
margin-left: -15px;
margin-right: -15px;
}
/********about****style******//******about**style*****************************************/
#pictur-left #pictur-right{
width: 45%;
}
#pictur-left{
margin-bottom: 20px;
}
#pictur-right{
margin-left: 70px;
margin-bottom: 20px;
}
#label1{
margin-left: 45px;
padding-top: 12px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 12px;
}
#label{
margin-left:220px;
padding-top: 12px;
padding-left: 50px;
padding-right: 50px;
padding-bottom: 12px;
}
.gridheader {
padding: 0.872%;
background-color: none;
border: 0.8px solid #e9e9e9;
}
.header{
margin-left: 460px;
}
.griddown{
padding: 0.869%;
background-color: #1E90FF;
border: 1px solid #e9e9e9;
}
.menuitem {
margin: 4.3%;
margin-left: 0;
margin-top: 0;
padding: 4.3%;
border-bottom: 1px solid #e9e9e9;
cursor: pointer;
}
.main {
padding: 2.06%;
}
.aboutright {
padding: 4.3%;
background-color: lightblue;
font-size: 22px;
}
#gridfooter {
padding: 1%;
background-color: #1E90FF;
font-size: 11px;
}/*#f1f1f1*/
.gridcontainer {
width: 100%;
}
.gridwrapper {
overflow: hidden;
}
.gridbox {
margin-bottom: 2%;
margin-right: 2%;
float: left;
}
.gridheader{
width: 100%;
}
.griddown{
width: 100%;
}
.gridmenu {
width: 22%;
}
.gridmain {
width: 48.9%;
}
.gridright {
width: 23.48%;
margin-right: 0;
}
.gridfooter {
width: 100%;
margin-bottom: 0;
}
#letter{
text-align: center;
}
.footeright{
text-align: right;
}
.footer{
text-align: left;
}/********end**about**style******//*****************************************************/
/**********work****style******//*****************************************************/
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}/*******end***work****style******/
/*********contact*****style******//**************************/
#Information_top{
padding-left: 5px;
}
.email{
padding-top: 25px;
margin-bottom: 40px;
padding-left: 5px;
}
/*******end***contact****style******/
/**********faq****style***********************************************/
.form-group{
width: 100%;
}
.title h1 {
font-family: futura;
font-weight: 35;
text-align: center;
margin-top: 25px;
margin-bottom: 55px;
}
#divrow{
display: block;
max-width: 100%;
height: auto;
}
@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**************************************/
.gridmenu {
width: 100%;
}
.menuitem {
margin: 1%;
padding: 1.01%;
}
.gridmain {
width: 100%;
height: 100%;
}
.main {
padding: 1.01%;
}
.gridright {
width: 100%;
}
.aboutright {
padding: 1.01%;
font-size: 11px;
}
.gridbox {
margin-right: 0;
float: left;
}
/********end**about**style******//*****************************************************/
.title h1 {
font-weight: 17.2;
margin-top: 12.5px;
margin-bottom: 27.5px;
}
#divrow{
max-width: 100%;
height: auto;
}
}
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.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>&nbsp;&nbsp;[email protected]</strong></h5>
<p><span class="glyphicon glyphicon-phone"></span>&nbsp;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="neme">
</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-comment"></p>
<p id="char-count"></p>
</div>
<button type="submit" class="btn btn-default" id="button">Send</button>
</form>
</div>
</form>
</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>
<div 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>
</div><!----end gridfooter-------->
</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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment