[bilinmeyen]
HTML
`<!doctype html>
<html lang="tr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="css/fontawesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/stil.css"/>
<link href = "https://fonts.googleapis.com/css?family= Spectral + SC & display = takas et" rel = "stylesheet">
<title>My Note</title>
</head>
<body>
<section id="sec-menu">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#" id="mynote">MY NOTE |</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#sec-dersler" id="dersler">Dersler<span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#sec-profil" id="yazar-profil">Yazar Profili</a>
<a class="nav-item nav-link" href="#sec-iletisim">İletişim</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true" id="ozel">Özel Örnekler</a>
</div>
</div>
</nav>
</div>
</div>
</div>
</section>
<section id="sec-logo">
<div class="container-fluid">
<div class="row">
<!-- <div class="col-md-12"><div id="logo-span"><img src="images/mynote.png" ></div></div> -->
<div class="col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/mynote.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/css.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/cs.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/data.png" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/html.png" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="sec-content">
<div class="container">
<div class="row">
<div class="col-md-12 text-center wow zoomInUp" data-wow-duration="1s" id="mynote-nedir">
<h2 id="mynote-baslik">My Note Nedir ?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</section>
<section id="sec-dersler">
<div class="container">
<div class="row">
<div class="col-md-12 text-center wow zoomInUp" data-wow-duration="1s" id="mynote-nedir">
<img src="images/web.png" alt="webprogramlama">
<h2 id="mynote-baslik">Web Programlama</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><br><br>
<button type="button" class="btn btn-warning">Derse Git</button>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center wow zoomInUp" data-wow-duration="1s" id="mynote-nedir">
<img src="images/comp2.png" alt="programlama">
<h2 id="mynote-baslik">Bilgisayar Programcılığı</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><br><br>
<button type="button" class="btn btn-warning">Derse Git</button>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center wow zoomInUp" data-wow-duration="1s" id="mynote-nedir">
<img src="images/sql.png" alt="programlama">
<h2 id="mynote-baslik">SQL | Veri Tabanı Programlama</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><br><br>
<button type="button" class="btn btn-warning">Derse Git</button>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center wow zoomInUp" data-wow-duration="1s" id="mynote-nedir">
<img src="images/ag2.png" alt="webprogramlama">
<h2 id="mynote-baslik">Ağ Yapıları</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p><br><br>
<button type="button" class="btn btn-warning">Derse Git</button>
</div>
</div>
</div>
</section>
<section id="sec-profil">
<div class="container">
<div class="row wow rubberBand" data-wow-duration="1s">
<div class="col-md-12 text-center" id="mynote-nedir">
<h2 id="mynote-baslik">Yazar Profili</h2>
<div class="jumbotron jumbotron-fluid">
<div id="profil"><img src="images/ben2.jpeg" alt="Hasan Güneş, Bilgisayar, Programlama, Web" class="img-thumbnail" width="250" height="300"></div>
<div class="container">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure</p>
</div>
</div>
</div>
</div>
<div class="row wow pulse" data-wow-duration="1s">
<div class="col-md-12 text-center">
<h2 id="mynote-baslik"><span style="color: #002fa7">Eğitim Ekibi</span></h2>
</div>
</div>
<div class="row wow pulse" data-wow-duration="1s">
<div class="col-md-3">
<div id="ekip-foto1">
<img src="images/profil.png" width="250" height="250" style="border-radius: 250px;" />
</div>
<div id="ekip-info">
<h5>Yazar Adı</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure</p><button type="button" class="btn btn-link">Devamı</button>
</div>
</div>
<div class="col-md-3">
<div id="ekip-foto2">
<img src="images/profil.png" width="250" height="250" style="border-radius: 250px;" />
</div>
<div id="ekip-info">
<h5>Yazar Adı</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure</p><button type="button" class="btn btn-link">Devamı</button>
</div>
</div>
<div class="col-md-3">
<div id="ekip-foto3">
<img src="images/profil.png" width="250" height="250" style="border-radius: 250px;" />
</div>
<div id="ekip-info">
<h5>Yazar Adı</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure</p><button type="button" class="btn btn-link">Devamı</button>
</div>
</div>
<div class="col-md-3">
<div id="ekip-foto4">
<img src="images/profil.png" width="250" height="250" style="border-radius: 250px;" />
</div>
<div id="ekip-info">
<h5>Yazar Adı</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure</p><button type="button" class="btn btn-link">Devamı</button>
</div>
</div>
</div>
</section>
<section id="sec-iletisim">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 id="mynote-baslik"><span style="color: #ff0;">İletişim</span></h2>
</div>
</div>
<div id="iletisim">
<div class="col-md-12">
<form method="post" action="#">
<input type="text" class="form-control" placeholder="Adınızı giriniz" id="iletisim-text">
</form>
</div>
<div class="col-md-12">
<form method="post" action="#">
<input type="text" class="form-control" placeholder="Soyadınızı giriniz" id="iletisim-mx" >
</form>
</div>
<div class="col-md-12">
<form method="post" action="#">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1 " aria-describedby="emailHelp" placeholder="Email adresini giriniz" style="width: 500px; margin-left: 50px;">
</div>
</form>
</div>
<div class="col-md-12">
<form method="post" action="#">
<div class="form-group">
<textarea class="form-control" id="iletisim-metin" rows="3" placeholder="Göndermek istediğiniz mesaj"></textarea>
</div>
<button type="button" class="btn btn-warning">İlet</button>
</form>
</div>
</div>
</section>
<section id="sec-atif">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="atif-html">
<ul>
<h6>Dersler</h6>
<li id="dersler-atif-1"><a href="">Web Programlama</a></li>
<li id="dersler-atif-2"><a href="">Masaüstü Programlama</a></li>
<li id="dersler-atif-3"><a href="">Veri Tabanı Programlama</a></li>
<li id="dersler-atif-4"><a href="">Sosyal Medya Nasıl Kontrol Edilir ?</a></li>
<li id="dersler-atif-5"><a href="">Faydalı Bilgiler</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="atif-html">
<ul>
<h6>Bağlantılı Linkler</h6>
<li id="baglanti-atif-1"><a href="">Web Programlama</a></li>
<li id="baglanti-atif-2"><a href="">Masaüstü Programlama</a></li>
<li id="baglanti-atif-3"><a href="">Veri Tabanı Programlama</a></li>
<li id="baglanti-atif-4"><a href="">Sosyal Medya Nasıl Kontrol Edilir ?</a></li>
<li id="baglanti-atif-5"><a href="">Faydalı Bilgiler</a></li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="atif-html">
<ul>
<h6>Etiketler</h6>
<li id="etiket-atif-1"><a href="">Web Programlama</a></li>
<li id="etiket-atif-2"><a href="">Masaüstü Programlama</a></li>
<li id="etiket-atif-3"><a href="">Veri Tabanı Programlama</a></li>
<li id="etiket-atif-4"><a href="">Sosyal Medya Nasıl Kontrol Edilir ?</a></li>
<li id="etiket-atif-5"><a href="">Faydalı Bilgiler</a></li>
</ul>
</div>
</div>
<div class="col-md-3 text-center">
<div class="atif-html">
<ul>
<h6>Sosyal Medya</h6>
<li id="sosyal-atif" ><a href=""><img src="images/facebook.png"></a></li>
<li id="sosyal-atif"><a href=""><img src="images/twitter.png"></a></li>
<li id="sosyal-atif"><a href=""><img src="images/instagram.png"></a></li>
<li id="sosyal-atif"><a href=""></a><img src="images/youtube.png"></a></li>
<li id="sosyal-atif"><a href=""><img src="images/in.png"></a></li>
</ul>
</div>
</div>
<div class="col-md-4 offset-md-4 ">
<li style="list-style: none;">©2019 Google-MyNote-ÖzgürYazılım</li>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.js"></script>
<Script>
new WOW().init();
</Script>
<script src="js/myjs.js"></script>
<script type="text/javascript">
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 2000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
</body>
</html>`
**CSS**
`
/***** RESET *****/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, header, aside, nav, figure, section, footer, article {
margin: 0;
padding: 0;
border: 0;
outline: 0;
/*font-size: 100%;
vertical-align: baseline;*/
}
html, body {height:100%; #595900 yesil, #FF0 sarı, #28B9FF mavimsi, #9F0000 kırmızı ton}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;} /
textarea {overflow:auto;}
/***** RESET *****/
.navbar{
height: 50px;
background-color: #333 !important;
}
#sec-menu .navbar #dersler{
color: #333 !important;
font-weight: 500 !important;
}
#dersler:hover{
background: #ffb039;
}
.navbar a{
color: #fff !important;
margin: 0 0 0 20px;
}
.navbar a:hover{
color: #ffb039 !important;
transition: color 0.8s ease !important;
text-decoration: underline;
}
.active{
background-color: #f4fcff;
border-radius: 5px;
}
#yazar-profil{
width: 100px;
}
#ozel{
width: 140px;
color: #fbffe0 !important;
background: url(../images/kilit.png) no-repeat right;
}
#ozel:hover{
color: #900;
}
#mynote{
margin-left: 20px;
}
/*Content Müdehale*/
#mynote-nedir{
margin-top: 40px;
font-size: 19px;
color: #222;
font-family: 'Spectral SC', serif;
}
#mynote-baslik{
margin-top: 50px;
color: #900 !important;
margin-bottom: 15px !important;
}
#sec-dersler{
padding: 70px 0 70px 0;
background-color: #f0f0f0;
}
#sec-content{
margin-top: -250px;
}
/*Slide Müdehale*/
.slide{
margin: 100px auto;
width: 400px;
height: 401px;
}
.carousel-control-prev-icon,.carousel-control-next-icon{
background-color: #333;
}
.row{
margin-bottom: 105px;
}
#sec-dersler .btn{
margin-bottom: 30px;
}
#sec-profil .card-img-top{
width: 300px;
height: 400px;
}
.jumbotron{
background-color: #fff;
}
#sec-profil .lead{
margin:30px 0 0 0;
}
#sec-profil #profil img{
border-radius: 300px;
}
#sec-profil #ekip-foto1,#ekip-foto2,#ekip-foto3,#ekip-foto4{
width: 255px;
height:255px;
border-radius: 250px;
border: 2px solid #ffb039;
}
#sec-profil #ekip-info{
margin-top: 20px;
font-family: 'Spectral SC', serif;
text-align: center;
font-size: 19px;
line-height: 20px;
color: #333;
}
#sec-profil p{
margin-top: 10px;
}
#sec-profil h5{
color: #900;
}
.list-group-item:hover{
background-color: #ffb039;
}
.form-control{
width: 350px;
}
#iletisim-metin{
width: 600px;
height: 300px;
}
#sec-iletisim{
background-color: #000;
}
#sec-iletisim .btn{
width: 180px;
margin: 20px 0 20px 220px;
}
#sec-iletisim #iletisim{
margin: -50px 0 0 250px !important;
}
#sec-iletisim #iletisim-mx{
margin: 25px 0 25px 0;
width: 500px;
margin-left: 50px;
}
#iletisim-text {
width: 500px;
margin-left: 50px;
}
.atif-html{
margin:30px 0 0 0;
border-right: 1px solid #222;
}
.atif-html ul li{
margin-top: 10px;
font-family: 'Spectral SC', serif;
}
.atif-html ul li#sosyal-atif{
height: 30px
}
.atif-html a{
color: #adadad;
}
.atif-html a:hover{
color: #ffb039;
text-decoration: none;
}
.atif-html h6{
color: #900;
}
@media (max-width: 991.98px) {
#sec-iletisim #iletisim{margin:0 0 0 50px !important;}
}
@media (max-width: 767.98px) {
#sec-atif{display: none;}
.navbar-nav{background-color: #333; opacity: 0.9;}
#dersler{width: 55px;}
#sec-menu .nav-link{margin-top: 10px;}
#sec-profil #ekip-foto1,#ekip-foto2,#ekip-foto3,#ekip-foto4{margin:0 auto;}
#sec-iletisim #iletisim{margin:0 0 0 -50px !important;}
}
@media (max-width: 575.98px) {
#sec-iletisim input{width: 400px !important;}
#sec-iletisim #iletisim-metin{width: 415px; margin-left: 42px;}
#sec-iletisim .btn{margin-left: 159px;}
#iletisim{padding-left: 40px;}
}
