Skip to content

Instantly share code, notes, and snippets.

@vigo

vigo/index.html

Created November 24, 2013 15:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vigo/7628306 to your computer and use it in GitHub Desktop.
Save vigo/7628306 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>webBox.io | web 101 eğitimi, 24 Kasım 2014</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<section id="section-header" class="section-margins">
<div class="container">
<div class="row">
<div class="col-xs-12">
<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">
<div class="item active"><img class="img-responsive" src="http://placekitten.com/1140/350" alt="Kedi resmi" /></div>
<div class="item"><img class="img-responsive" src="http://placekitten.com/1140/350" alt="Kedi resmi" /></div>
<!-- <div class="item"><img class="img-responsive" src="http://placekitten.com/1140/350" alt="Kedi resmi" /></div> -->
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- <p><img class="img-responsive" src="http://placehold.it/1140x350" alt="Deneme resmi" /></p> -->
</div>
</div>
</div>
</section>
<section id="section-hightlights" class="container section-margins">
<div class="row">
<div class="col-xs-12 col-sm-4 res-margin">
<img class="img-circle" src="http://placekitten.com/140/140" alt="Test Resmi" />
<h3>Alt Başlık</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-default">Detaylar</button>
</div>
<div class="col-xs-12 col-sm-4 res-margin">
<img class="img-circle" src="http://placekitten.com/140/140" alt="Test Resmi" />
<h3>Alt Başlık</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-default">Detaylar</button>
</div>
<div class="col-xs-12 col-sm-4 res-margin">
<img class="img-circle" src="http://placekitten.com/140/140" alt="Test Resmi" />
<h3>Alt Başlık</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<button type="button" class="btn btn-default">Detaylar</button>
</div>
</div>
</section>
<section id="section-posts" class="section-margins">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 post-item">
<h1>Başlık 1</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a href="/pages/post1-detail.html" class="btn btn-default">Detaylar</a></p>
<div class="fb-like" data-href="http://webbox-web101.kissr.com/pages/post1-detail.html" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</div>
<!-- Mailchimp -->
<div class="col-xs-12 col-sm-6 post-item">
<h1>Bültenimize Üyelik</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<form role="form" action="http://umutkafadar.us3.list-manage.com/subscribe/post?u=df2bf1e9ea2a7fa91610cb6e6&amp;id=35edb5b2d3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="form-group">
<input type="email" class="form-control" name="EMAIL" id="mce-EMAIL" placeholder="E-Posta Adresi">
</div>
<button id="mc-embedded-subscribe" type="submit" class="btn btn-default btn-info">Kaydol</button>
</form>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 post-item">
<h1>Başlık 2</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a href="/pages/post2-detail.html" class="btn btn-default">Detaylar</a></p>
<div class="fb-like" data-href="http://webbox-web101.kissr.com/pages/post2-detail.html" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</div>
<div class="col-xs-12 col-sm-6 post-item">
<h1>Başlık 2a</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p><a href="/pages/post2a-detail.html" class="btn btn-default">Detaylar</a></p>
<div class="fb-like" data-href="http://webbox-web101.kissr.com/pages/post2a-detail.html" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-12">
<span>&copy; 2013 - My Awesome Company</span>
<span><a href="mailto:hello@mycompany.com">hello@mycompany.com</a></span>
</div>
</div>
</div>
</footer>
<!-- Önemli -->
<script src="https://code.jquery.com/jquery.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<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/tr_TR/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-6463685-34']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
Raw
style.css
/* css */
body {
background-color: #5382BF;
color: #1C2B40;
}
a:hover {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
color: #38577F;
}
.section-margins {
margin-bottom: 50px;
}
#section-header {
background-color: #bbc2d5;
}
#section-hightlights {
text-align: center;
}
#section-hightlights p {
margin-bottom: 20px;
}
#section-posts {
background-color: #99afb3;
}
.post-item {
margin-bottom: 20px;
}
footer {
padding: 40px 0;
text-align: center;
color: #305f8c;
}
footer span {
margin: 0 20px;
}
footer a {
color: inherit;
}
footer a:hover {
color: #fff;
}
@media (max-width: 767px){
.res-margin {
margin-bottom: 80px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment