Skip to content

Instantly share code, notes, and snippets.

@harunpehlivan

harunpehlivan/harun-pehlivan-prototype.markdown

Created November 19, 2022 17:15
Show Gist options
  • Save harunpehlivan/e49b20fd3ac33dc681d971af2b93e1c7 to your computer and use it in GitHub Desktop.
Save harunpehlivan/e49b20fd3ac33dc681d971af2b93e1c7 to your computer and use it in GitHub Desktop.
Download ZIP
HARUN PEHLİVAN prototype
Raw
index.html
<body class="theme-invert">
<div class="bg-overlay"></div>
<nav class="mainmenu">
<div class="container">
<div class="dropdown">
<button type="button" class="navbar-toggle" data-toggle="dropdown"><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button>
<!-- <a data-toggle="dropdown" href="#">Dropdown trigger</a> -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#head" class="active">Home</a></li>
<li><a href="#about">About me</a></li>
<li><a href="#themes">My Music</a></li>
<li><a href="#contact">Get in touch</a></li>
</ul>
</div>
</div>
</nav>
<!-- Main (Home) section -->
<section class="section bg-overlay" id="head">
<div class="container">
<div class="row">
<div class="col-md-10 col-lg-10 col-md-offset-1 col-lg-offset-1 text-center">
<!-- Site Title, your name, HELLO msg, etc. -->
<h1 class="title">Harun Pehlivan</h1>
<h2 class="subtitle">TTGRT</h2>
<!-- Short introductory (optional) -->
<!-- <h3 class="tagline">
Potentially, the best .<br>
</h3> -->
<!-- Nice place to describe your site in a sentence or two -->
<p><a href="https://soundcloud.com/harun-pehl-van" target="_blank" class="btn btn-default btn-lg"><i class="fa fa-soundcloud fa-4"></i> Click For Some Awesomeness!</a></p>
</div> <!-- /col -->
</div> <!-- /row -->
</div>
</section>
<!-- Second (About) section -->
<section class="section bg-overlay-about" id="about">
<div class="container frame">
<h2 class="text-center title">HARUN PEHLİVAN </h2>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<h5><strong><i class="fa fa-desktop" aria-hidden="true"></i> CODER,DESIGNER,PUBLİSHER,DIGITAL CONTENT PRODUCER<br></strong></h5>
<p><i class="fa fa-calendar fa-fw w3-margin-right"></i>22/07/1984 Çorum'da Doğdum Aslen Samsun'un Havza ilçesi
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Third (Works) section -->
<section class="section bg-overlay" id="themes">
<div class="container">
<h2 class="text-center title">My Music</h2>
<p class="lead text-center">
Below is some of my recent work. Discover more of <a href="https://soundcloud.com/harun-pehl-van" target="_blank">My Music here</a>. Enjoy!</p>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail">
<img src="https://i1.sndcdn.com/avatars-IZ8yJz4w6YMUn3Um-mOFKeg-t500x500.jpg" alt="">
<div class="caption">
<h3>TEMPOMİX </h3>
<p>HARUN PEHLİVAN </p>
<p><a href="#" class="btn btn-primary fa fa-play tooltip-song1" role="button"> Play</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://i1.sndcdn.com/artworks-Vb1i7goouih0EJff-BEOLTA-t500x500.jpg" alt="">
<div class="caption">
<h3> Iş Başvurularında Adaya Işverenler Insan Kaynakları Geri Bildirim Yapmamasının Nedeni </h3>
<p>HARUN PEHLİVAN </p>
<p><a href="#" class="btn btn-primary fa fa-play tooltip-song2" role="button"> Play</a></p>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-offset-2">
<div class="thumbnail">
<img src="https://i1.sndcdn.com/artworks-Vb1i7goouih0EJff-BEOLTA-t500x500.jpg" alt="">
<div class="caption">
<h3> Hayat Okulu </h3>
<p>HARUN PEHLİVAN </p>
<p><a href="#" class="btn btn-primary fa fa-play tooltip-song3" role="button"> Play</a></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="https://i1.sndcdn.com/avatars-IZ8yJz4w6YMUn3Um-mOFKeg-t500x500.jpg" alt="">
<div class="caption">
<h3> HARUN PEHLİVAN'IN DOĞUM GÜNÜ MARŞI </h3>
<p>Pop Rock</p>
<p><a href="#" class="btn btn-primary fa fa-play tooltip-song4" role="button"> Play</a></p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Fourth (Contact) section -->
<section class="section bg-overlay" id="contact">
<div class="container frame">
<h2 class="text-center title">Get in touch</h2>
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text-center">
<p class="lead"><i class="fa fa-map-marker fa-fw w3-xxlarge w3-margin-right"></i>YENİ MAHALLE MİMAR SİNAN SOKAK NO:2 SULUOVA/AMASYA TURKEY</p>
<p class="lead"> [email protected]<br><br></p>
<ul class="list-inline list-social">
<li><a href="https://www.facebook.com/harunpehlivanitgrouptebimtebitagem" class="btn btn-default btn-link"><i class="fa fa-facebook fa-4"></i> </a></li>
<li><a href="https://www.instagram.com/harunpehlivantebimtebitagem/" class="btn btn-default btn-link"><i class="fa fa-instagram fa-4"></i> </a></li>
<li><a href="https://wa.me/905527410904" class="btn btn-default btn-link"><i class="fa fa-whatsapp fa-4"></i> </a></li>
<li><a href="https://www.youtube.com/@harunpehlivan" class="btn btn-default btn-link"><i class="fa fa-youtube fa-4"></i> </a></li>
<li><a href="https://www.linkedin.com/in/harunpehlivanitgrouptebimtebitagem/" class="btn btn-default btn-link"><i class="fa fa-linkedin fa-4"></i> </a></li>
</ul>
</div>
</div>
</div>
<div class="copyright">
<p>Copyright &copy; - Infinito Web Design Studio 2015 - All Rights Reserved</p>
</div>
</section>
Raw
script.js
// global. currently active menu item
var current_item = 0;
// show content settings
var section_hide_time = 500;
var section_show_time = 500;
// jQuery stuff
jQuery(document).ready(function($) {
// Switch section
$("a", '.mainmenu').click(function()
{
if( ! $(this).hasClass('active') ) {
current_item = this;
// close all visible divs with the class of .section
$('.section:visible').fadeOut( section_hide_time, function() {
$('a', '.mainmenu').removeClass( 'active' );
$(current_item).addClass( 'active' );
var new_section = $( $(current_item).attr('href') );
new_section.fadeIn( section_show_time );
} );
}
return false;
});
});
//Gets Tooltipsters on My Music Section
$(document).ready(function() {
$('.tooltip-song1').tooltipster({
content: $('<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1192903354&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/harun-pehl-van" title="TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU" target="_blank" style="color: #cccccc; text-decoration: none;">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</a> · <a href="https://soundcloud.com/harun-pehl-van/tempom-x" title="TEMPOMİX" target="_blank" style="color: #cccccc; text-decoration: none;">TEMPOMİX</a></div>'),
animation : 'grow',
fixedWidth : 400,
position : 'bottom',
theme : 'tooltipster-light',
interactive : true,
offsetX : 150,
});
$('.tooltip-song2').tooltipster({
content: $('<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1152014707&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/harun-pehl-van" title="TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU" target="_blank" style="color: #cccccc; text-decoration: none;">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</a> · <a href="https://soundcloud.com/harun-pehl-van/is-basvurularinda-adaya-isverenler-insan-kaynaklari-geri-bildirim-yapmamasinin-nedeni" title="Iş Başvurularında Adaya Işverenler Insan Kaynakları Geri Bildirim Yapmamasının Nedeni" target="_blank" style="color: #cccccc; text-decoration: none;">Iş Başvurularında Adaya Işverenler Insan Kaynakları Geri Bildirim Yapmamasının Nedeni</a></div>'),
animation : 'grow',
fixedWidth : 400,
position : 'bottom',
theme : 'tooltipster-light',
interactive : true,
offsetX : 150,
});
$('.tooltip-song3').tooltipster({
content: $('<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1152005182&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/harun-pehl-van" title="TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU" target="_blank" style="color: #cccccc; text-decoration: none;">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</a> · <a href="https://soundcloud.com/harun-pehl-van/hayat-okulu" title="Hayat Okulu" target="_blank" style="color: #cccccc; text-decoration: none;">Hayat Okulu</a></div>'),
animation : 'grow',
fixedWidth : 400,
position : 'bottom',
theme : 'tooltipster-light',
interactive : true,
offsetX : 150,
});
$('.tooltip-song4').tooltipster({
content: $('<iframe width="100%" height="300" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/510579303&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/harun-pehl-van" title="TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU" target="_blank" style="color: #cccccc; text-decoration: none;">TEBİMTEBİTAGEM GAZETESİ RADYO TELEVİZYONU</a> · <a href="https://soundcloud.com/harun-pehl-van/dogumgunumarsi" title="HARUN PEHLİVAN&#x27;IN DOĞUM GÜNÜ MARŞI" target="_blank" style="color: #cccccc; text-decoration: none;">HARUN PEHLİVAN&#x27;IN DOĞUM GÜNÜ MARŞI</a></div>'),
animation : 'grow',
fixedWidth : 400,
position : 'bottom',
theme : 'tooltipster-light',
interactive : true,
offsetX : 150,
});
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/js/jquery.tooltipster.min.js"></script>
Raw
style.css
html {
background: #505D6E url(https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1562344727/1_p2hfau.jpg) no-repeat center center fixed;
min-height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
background: transparent;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
line-height: 1.5em;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
color: #fff;
color: rgba(255, 255, 255, .8);
font-weight: normal;
}
/* Navigation bar */
.mainmenu {
z-index: 999999;
width: 100%;
padding: 30px 0 0 0;
}
@media (min-width: 768px) {
.mainmenu {
position: fixed;
}
}
.navbar-toggle {
position: relative;
float: left;
display: block;
padding: 9px 10px;
background: rgba(255, 255, 255, 0.2);
background-image: none;
border: 0 none;
top: 0px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
outline: 0;
opacity: 1;
-webkit-transition: all .45s;
-moz-transition: all .45s;
transition: all .45s;
float: left;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
background: #fff;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}
.open .navbar-toggle {
top: -70px;
opacity: 0;
}
.mainmenu .dropdown-menu {
top: -14em;
left: 0px;
font-size: 15px;
padding: 0;
background: none;
border: 0 none;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
display: block;
opacity: 0;
-webkit-transition: all .45s;
-moz-transition: all .45s;
transition: all .45s;
}
.mainmenu .dropdown-menu .active {
background: rgba(0,0,0, 0.5);
font-weight: bold;
}
.mainmenu .open .dropdown-menu {
top: 2px;
opacity: 1;
}
.mainmenu .dropdown-menu a {
padding: 10px 10px;
margin: 0;
color: white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.mainmenu .dropdown-menu a:hover {
background: rgba(255, 255, 255, .9);
color: white;
padding: 10px 8px 10px 12px;
}
/* Sections - universal classes */
.section {
z-index: 1;
width: 100%;
overflow: auto;
height: 100%;
padding-top: 100px;
padding-bottom: 140px;
display: none;
top: 0;
}
.bg-overlay {
background: rgba(0,0,255, 0.1);
height: 100%;
width: 100%;
z-index: 99999;
overflow: auto;
}
.bg-overlay-about {
background: rgba(0,0,255, 0.1);
height: 810px;
width: 100%;
z-index: 99999;
overflow: auto;
}
@media (min-width: 768px) {
.section {
padding-top: 160px;
}
}
/* Show one of sections */
#head {
display: block;
}
/* Typography */
a {
color: #fff;
text-decoration: none;
}
a:hover,
a:active {
color: #fff;
text-decoration: underline;
}
.lead {
font-weight: normal;
font-size: 2.0em;
line-height: 1.2em;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
h1.title,
.subtitle {
font-family: 'Wire One', Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 16em;
margin-bottom: 15px;
color: #fff;
line-height: 1em;
text-shadow: 2px 0 0 #000, -2px 0 0 #000, 0 2px 0 #000, 0 -2px 0 #000, 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
.subtitle {
line-height: .9em;
font-size: 4.0em;
margin-top: 70px;
margin-bottom: 60px;
}
.tagline {
font-size: 1.4em;
line-height: 1.3em;
font-weight: normal;
margin-bottom: 75px;
}
@media (max-width: 767px) {
.lead {
font-size: 1.3em;
}
}
#about {
margin-top: 0px;
}
#contact {
margin-top: 0px;
}
.frame{
width:500px;
height:500px;
border: 5px solid #fff;
background: rgba(0, 0, 0, 0.7);
}
/* UI - Buttons */
.btn {
color: #333;
text-shadow: none;
text-decoration: none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: 0 none;
}
.btn:hover {
color: #000;
}
.btn-lg {
padding: 16px 30px;
font-size: 15px;
}
.btn-link {
color: rgba(255, 255, 255, .8);
}
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
color: #fff
}
.btn-default {
background: rgba(255, 255, 255, .5);
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
background: rgba(255, 255, 255, .8);
}
.btn-primary {
background: rgba(255, 255, 255, .2);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:active {
background: rgba(255, 255, 255, .5);
}
/*UI - Thumbnails*/
.thumbnail {
background-color: rgba(255, 255, 255, .2);
border: 0 none;
padding: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.thumbnail > img {
width: 350px;
height:320px;
overflow: hidden;
}
.thumbnail .caption {
color: inherit;
}
/* Everything else */
.list-social .btn {
font-size: 1.3em;
}
.list-social .btn:hover,
.list-social .btn:active,
.list-social .btn:focus {
text-decoration: none;
}
/* Social buttons in the footer */
#social {
margin-top: 50px;
margin-bottom: 50px;
}
#social .wrapper {
width: 340px;
margin: 0 auto;
}
/* Theme: text shadows */
.text-shadows {
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.text-shadows .title,
.text-shadows .subtitle,
.text-shadows .tagline {
text-shadow: 0 2px 3px rgba(0, 0, 0, .4);
}
.text-shadows .mainmenu .dropdown-menu a {
text-shadow: 0 2px 1px rgba(0, 0, 0, .2);
}
.text-shadows .mainmenu .dropdown-menu a:hover {
text-shadow: none;
}
/* Inverted theme */
.theme-invert {
color: #222;
color: rgba(255, 255, 255, .8);
}
.theme-invert a {
color: #fff;
}
.theme-invert .btn {
color: rgba(0, 0, 0, .9);
}
.theme-invert .btn:hover {
color: #fff;
}
.theme-invert .btn-link {
color: rgba(0, 0, 0, .5);
}
.theme-invert .btn-link:hover,
.theme-invert .btn-link:focus,
.theme-invert .btn-link:active {
color: #000
}
.theme-invert .navbar-toggle {
width: 60px;
background: rgba(255, 255, 255, 0.8);
}
.theme-invert .navbar-toggle:hover {
background: rgba(255, 255, 255, 0.4);
}
.theme-invert .navbar-toggle .icon-bar {
width: 40px;
background: #333;
}
.theme-invert .navbar-toggle .icon-bar:hover {
background: rgba(255, 255, 255, 0.8);
}
.theme-invert .mainmenu .dropdown-menu .active {
background: rgba(0,0,0, 0.9);
color: #fff;
}
.theme-invert .mainmenu .dropdown-menu a {
background: rgba(255, 255, 255, .8);
color: #000;
}
.theme-invert .mainmenu .dropdown-menu a:hover {
background: rgba(0, 0, 0, .2);
color: #fff;
}
.theme-invert .title,
.theme-invert .subtitle,
.theme-invert .tagline {
color: #fff;
}
.theme-invert .btn-default {
color: #000;
background: rgba(255, 255, 255, .9);
}
.theme-invert .btn-default:hover,
.theme-invert .btn-default:focus,
.theme-invert .btn-default:active,
.theme-invert .btn-default.active {
background: rgba(0, 0, 0, .6);
color: #fff;
}
.theme-invert .btn-primary {
background: rgba(0, 0, 0, .2);
}
.theme-invert .btn-primary:hover,
.theme-invert .btn-primary:focus,
.theme-invert .btn-primary:active,
.theme-invert .btn-primary.active {
background: rgba(0, 0, 0, .3);
color: #fff;
}
.theme-invert .thumbnail {
background-color: rgba(255, 255, 255, .8);
}
.thumbnail .caption {
color: #000;
}
.copyright {
margin-top: 300px;
}
.copyright p {
margin-bottom: 1px;
font-weight: bold;
font-size: 13px;
letter-spacing: 4px;
color: rgba(255, 255, 255, 0.7);
text-align: center;
}
Raw
styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Wire+One" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/tooltipster.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/tooltipster/3.3.0/css/themes/tooltipster-light.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment