Skip to content

Instantly share code, notes, and snippets.

@Phoenix23A

Phoenix23A/index.html

Created February 21, 2017 19:56
Show Gist options
  • Save Phoenix23A/10d839aa749dc64e8ef7c7cf5e6ac433 to your computer and use it in GitHub Desktop.
Save Phoenix23A/10d839aa749dc64e8ef7c7cf5e6ac433 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="css/styles.css">
<script src="../js/jquery.stellar.min.js"></script>
<script>$(window).stellar();
// or:
$('#main').stellar();</script>
<title>Portfolio Site!</title>
</head>
<body>
<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/lesson8-portfolioheroimage2.jpg" alt="Machine">
<div class="carousel-caption">
<h3>Create your own Design i will help you</h3>
<p>Individual Websites for your Business</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage.jpg" alt="Desk">
<div class="carousel-caption">
<h3>My Web Development</h3>
<p>My Skills come better</p>
</div>
</div>
<div class="item">
<img src="img/portfolioheroimage3.jpg" alt="Chair">
<div class="carousel-caption">
<h3>Make a Website</h3>
<p>Create your Visions</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 id="nav">
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4">
<h2>Project Goals</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>Course Goals</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
<p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
</div><!-- /col -->
<div class="col-md-4">
<h2>About</h2>
<p>Here is my Story about Web Development <a href="#" title="More Information" id="item1">Tooltips</a>It is very interesting this adventure takes a lot of energy but in the end i hope it brings me forward to become a good junior Web Developrt so thats my plan for the course at CF Careerfoundry.</p><button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">View details &raquo;</button>
<p><a class="btn btn-default" href="contact.html" role="button">Contact Me! &raquo;</a></p>
</div><!-- /col -->
</div><!-- /row -->
<hr>
<hr>
</div> <!-- /container -->
<div class="container">
<div class="row" id="work">
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
<div class="col-sm-6 col-md-3">
<div class ="col-md-3"><img src="img/kitten.jpg" class="img-responsive"></div>
</div>
</div>
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(function () {
$('#[item1]').tooltip();
});
</script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<div class="nav">
<ul>
<li><a href="index.html">Home<a/></li>
<li><a href="about.html">About<a/></li>
<li><a href="#">Work<a/></li>
<li><a href="contact.html">Contact<a/></li>
<li><a href="faq.html">FAQ<a/></li>
</ul>
</div>
<div class="container">
<div class="header">
<h1>About Me</h1>
</div><!-- End Header Container-->
</div><!--End Container -->
<div class="image">
<img src="img/kitten.jpg" alt="Kitten">
</div><!--End image Container-->
<div class="intro column">
<h2>Introduction</h2>
<p> My learning of Coding is very cool but Bitbaloon for the Moment not Smile</p>
</div><!--End Introduction Container-->
<div class="skills column">
<h3>My Skills</h3>
<ul>
<li>Business Strategy</li>
<li>Marketing</li>
<li>Communication</li>
<li>Process Management &amp; Project Management</li>
</ul>
</div><!--End Skill List Container-->
<div class="main-text">
<h3>More about me &amp; my Career Story</h3>
<p>I put Lorem Ipsum later in here!Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div><!--End Main Text Container & View Toggle Soft Wrap Info Copy Paste Text LI-->
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/sS8tZBU3oaM" frameborder="0" allowfullscreen></iframe>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class"ct">
<div class"header">
<h1>Contact Me!</h1>
</div> <!--End First Container-->
</div>
<div class"jumbotron">
<!-- Google API HTML <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJTQBeNgROqEcRJ1UMP3Zkyy4&key=AIza342DuHZkHZ9wXXdi6k69PBGnyhOoyiDGj54M" allowfullscreen></iframe> -->
<h3>Name: Kevin</h3>
<h3>Surname: Meier</h3>
<br>
<p>Contact Me here on Mobile or Mail</p>
<br>
<span class="glyphicon glyphicon-envelope"></span> <a href="#">Mail</a> <!--Here is a Placeholder for the Email Adress-->
<br>
<a><span class="glyphicon glyphicon-earphone"></span> Mobile: 000 000 00 00</a>
<p>Facebook</p>
</div> <!--End jumbotron Container-->
<div id="contact">
<div class="col-lg-8 col-md-8">
<form>
<div class="col-lg-4 col-md-4">
<div class="from-group">
<input type="text" minlength=10 id="name">
<lable for="name">Write Text</lable>
</div>
<div class="from-group">
<input type="email" id="name1">
<lable for="name1">Email Adress here</lable>
</div>
<textarea minlength=20 style="resize:none" cols="40" rows="5" class="form-control"></textarea>
<textarea placeholder="Yout Message can be wrote here" class="message-box"></textarea>
<button type="submit" class="btn btn-defult">Submit</button>
</div>
</form>
</div>
</div>
<div class=faq-text>
<h1>FAQ</h1>
<h2>Here are my most Frequently Asked Questions from my Customers</h2>
<div class="learn-more">
<h2 class="learn-more">Learn More!</h2>
<!-- Small modal button -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Modal Button</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content"data-backdrop="static" data-keyboard="false">
Find out the Reason why i decided to become a web developer!
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">More Info!</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
</div>
<div class="modal-body">
<p>Here comes some text in the near future</p>
<embed id="[insert id here]" src="[insert path or Link to your resume]">
</div>
</div>
</div>
</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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Why did you learn Web Developement?
</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. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
From where do you working on your Projects?
</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. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What is your Motivation to the Work on Websites?
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
<footer>
<div class="footer">
<a href="https://twitter.com/K" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @K</a>
<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>
&copy; Kevin Meier 2016
</div>
</footer>
<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/de_DE/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Can place script tags with JavaScript files here -->
<script src="../js/jquery.stellar.min.js"></script>
<script src=“../js/scripts.js”></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpDySDl3Cq-3aZ74hr-blm1MIp7X-_f4&callback=initMap">
</script>
<script src=“js/work.js”></script>
<script src=“js/scripts.js”></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment