Reyting Sonuçları ve TV Haberleri

SLİDER

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
margin: 0;
padding: 0;
}
#slider{
width: 100%;
height: 300px;
background-image: url("images/image1.jpg");
background-size: 100% 100%;
}
#sol{
display: inline-block;
margin-top: 120px;
font-size: 50px;
opacity: 0.5;
}
#sag{
float: right;
margin-top: 120px;
font-size: 50px;
opacity: 0.5;
}
</style>
<script>
$(document).ready(function() {
var deger = 1;
var url;
$("#sag").click(function() {
if (deger < 4) {
deger++;
} else {
deger=1
}
url = "url(images/image" + deger + ".jpg)";
$("#slider").css("background-image", url);
});
$("#sol").click(function() {
if (deger > 1) {
deger--;
} else {
deger=4
}
url = "url(images/image" + deger + ".jpg)";
$("#slider").css("background-image", url);
});
});
</script>
</head>
<body>
<div id="slider">
<input type="button" id="sol" value="<">
<input type="button" id="sag" value=">">
</div>
</body>
</html>

SLİDER1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.kucuk{
float: left;
}
</style>
<script>
$(document).ready(function() {
$(".kucuk").mouseover(function() {
var deger = $(this).attr("src");
$("#buyuk").attr("src",deger);
});
});
</script>
</head>
<body>
<img src="images/image1.jpg" width="610" height="150" id="buyuk"><br>
<img src="images/image1.jpg" width="250" height="150" class="kucuk">
<img src="images/image2.jpg" width="250" height="150" class="kucuk">
<img src="images/image3.jpg" width="250" height="150" class="kucuk">
<img src="images/image4.jpg" width="250" height="150" class="kucuk">
</body>
</html>

SLİDER2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
.dugme{
float: left;
}
</style>
<script>
$(document).ready(function() {
$(".dugme").mouseover(function() {
var deger = $(this).val();
console.log(deger);
var deger = "images/image"+deger+".jpg";
$("#buyuk").attr("src",deger);
});
});
</script>
</head>
<body>
<img src="images/image1.jpg" width="610" height="150" id="buyuk"><br>
<input type="button" class="dugme" value="1">
<input type="button" class="dugme" value="2">
<input type="button" class="dugme" value="3">
<input type="button" class="dugme" value="4">
</body>
</html>

TAB

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Tab </title>
<style>
body {font-family: Arial;}

/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}

</style>
</head>
<body>

<h2>Sekmelere Tıkla</h2>

<div class="tab">
<button class="tablinks active" onclick="openTab(this, 'tab-1')">birinci</button>
<button class="tablinks" onclick="openTab(this, 'tab-2')">ikinci</button>
<button class="tablinks" onclick="openTab(this, 'tab-3')">üçüncü</button>
</div>

<div id="tab-1" class="tabcontent" style="display: block">
<h3>birinci</h3>

Buraya birinci kısım form elemanları

<form>
isim
<input type="text" name="ad"> <br>
<input type="button" value="Gönder">
</form>
</div>

<div id="tab-2" class="tabcontent">
<h3>ikinci</h3>
Buraya ikinci kısım form elemanları

<form>
Soyad
<input type="text" name="ad"> <br>
<input type="button" value="Gönder">
</form>
</div>

<div id="tab-3" class="tabcontent">
<h3>üçüncü</h3>
Buraya üçüncü kısım form elemanları

<form>
şehir
<select>
<option>İstanbul</option>
<option>Adana</option>

</select><br>
<input type="button" value="Gönder" >
</form>
</div>

<script>
function openTab(thisTab, tabName) {

$(".tabcontent").css("display", "none");
$(".tablinks").removeClass("active");

$("#"+tabName).css("display", "block");
$(thisTab).addClass("active");
}
</script>

</body>
</html>

ÖRNEK1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script>
var citys = new Array("İstanbul","Ankara","İzmir","Bursa","Eskişehir");
var persons = new Array(
new Array(1,"Serhat","TANUŞ"),
new Array(2,"Merve","Kıvanç"),
new Array (3,"Tuğba","Karakullukçu")
);
function bring(){
var bringCity = document.getElementById("bringCity");
bringCity.addEventListener("click",function() {
var city = document.getElementById("data").value;
var cityIndex = citys.indexOf(city);
if (cityIndex != -1) {
console.log(cityIndex);
} else {
console.log("Böyle bir şehir yok!");
}
});/*Girilen şehir adına göre console ekranına şehrin index numarasını yazan uygulama*/
document.querySelector("#bringPerson").addEventListener("click",function() {
var personIndex = document.getElementById("data").value;
persons.forEach(element => {
if (element[0] == personIndex) {
alert(element[1]+" "+element[2]);
}
});
});/*numarası girilen kişinin adını ve soyadını mesaj pencerisi ile veren uygulama*/
}
window.onload = bring;
function fiil(){
document.getElementById("List").innerHTML = "";
citys.forEach(element => {1
document.getElementById("List").innerHTML += "<option value=''>" + element + "<option>";
});
}/*BUtona tıklandığında listeyi şehirler dizisiyle dolduran uygulama*/
</script>
</head>
<body>
<div>
<input type="text" id="data">
<button id="bringCity">Bring City</button>
<input type="button" id="bringPerson" value="Bring Person"><br>
<input type="button" id="fillList" value="Fiil in the list" onclick="fiil()">
<select id="List">
</select>
</div>
</body>
</html>

ÖRNEK2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
margin: 0;
padding: 0;
}
.menu{
width: 100%;
float: left;
height: 30px;
}
.menuElement{
width: 200px;
height: 30px;
float: left;
border-radius: 50%;
margin-left: 3px;
text-align: center;
padding-top: 3px;
}
.menuNotSelected{
background-color:white;
color: black;
font-size: 20px;
border: solid 1px;
}
.menuSelected{
background-color:black;
color: white;
font-size: 24px;
font-weight: bold;
}
</style>
<script>
$(document).ready(function() {
$(".menuNotSelected").on("click",function() {
console.log("çalıştı");
$(".menuSelected").addClass("menuNotSelected");
$(".menuSelected").removeClass("menuSelected");
$(this).removeClass("menuNotSelected");
$(this).addClass("menuSelected");
});
$("#menuOpenClose").on("click",function() {
$(".menu").slideToggle(2500);
});
$("#disappear").on("mouseover",function() {
$("#disappear").fadeOut(2500);
});
});
</script>
</head>
<body>
<div class="menu">
<div class="menuElement menuNotSelected">Home</div>
<div class="menuElement menuNotSelected">About</div>
<div class="menuElement menuNotSelected">Contact</div>
</div>
<div>
<input type="button" value="Menu Open/Close" id="menuOpenClose" >
</div>
<div id="disappear">
item to disappear
</div>
</body>
</html>

ÖRNEK3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
#robot{
position: relative;
}
</style>
<script>
var posx = 0;
var posy = 0;
function calistir(event) {
var code = event.keyCode;
var elem = document.getElementById("robot");
switch (code) {
case 37:
posx--;
elem.style.left = posx + "px";
break;
case 38:
posy--;
elem.style.top = posy + "px";
break;
case 39:
posx++;
elem.style.left = posx + "px";
break;
case 40:
posy++;
elem.style.top = posy + "px";
break;
}
}
</script>
</head>
<body onkeydown="calistir(event)">
<div id="robot">
<img src="robot.jpg" width="150px" height="150px">
</div>
</body>
</html>

FORM

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
function look() {
if ($("#ad").val().length < 1) $("#adHataMesaji").css("display", "block");
else $("#adHataMesaji").css("display", "none");
if ($("#soyad").val().length < 1) $("#soyadHataMesaji").css("display", "block");
else $("#soyadHataMesaji").css("display", "none");
if ($("#tel").val().length < 1) $("#telHataMesaji").css("display", "block");
else $("#telHataMesaji").css("display", "none");
if ($("#mail").val().length < 1) $("#mailHataMesaji").css("display", "block");
else $("#mailHataMesaji").css("display", "none");
}
$(".formElement").keydown(function() {
look();
});
$("#dugme").click(function() {
look();
});
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<div class="form">
<form action="" method="post">
<div class="LabelElamant"><label>Ad:</label></div><div> <input type="text" id="ad" class="formElement"> </div>
<div id="adHataMesaji" style="display: none;">Bu alan boş geçilemez</div>
<div class="LabelElamant"><label>Soyad:</label></div><div> <input type="text" id="soyad" class="formElement"> </div>
<div id="soyadHataMesaji" style="display: none;">Bu alan boş geçilemez</div>
<div class="LabelElamant"><label>Telefon:</label></div><div> <input type="text" id="tel" class="formElement"> </div>
<div id="telHataMesaji" style="display: none;">Bu alan boş geçilemez</div>
<div class="LabelElamant"><label>E-Mail:</label></div><div> <input type="text" id="mail" class="formElement"> </div>
<div id="mailHataMesaji" style="display: none;">Bu alan boş geçilemez</div>
<input type="button" value="Gönder" id="dugme">
</form>
</div>
<p>sdlkfdskjfkdsjfkjsdhfkjhsdkjfhsdkjfhksdhfkj</p>
</body>
</html>

İNDEX

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>
<div class="slider">
<a href="">
<div class="googleButton">
<strong> Google </strong>
</div>
</a>
</div>
<div class="content">
<div class="baslik">
<h3>ÇALIŞANLARIMIZ</h3>
<p>Takımımızla tanışın</p>
</div>
<div class="calisanlar">
<img src="images/avatar.jpg">
<div class="calisanBilgi">
<h2>Johnny Walker</h2>
<p>Web Desingner</p>
</div>
</div>
<div class="calisanlar">
<img src="images/avatar.jpg">
<div class="calisanBilgi">
<h2>Rebecca Flex</h2>
<p>Support</p>
</div>
</div>
<div class="calisanlar">
<img src="images/avatar.jpg">
<div class="calisanBilgi">
<h2>Jan Ringo</h2>
<p>Boss man</p>
</div>
</div>
<div class="calisanlar">
<img src="images/avatar.jpg">
<div class="calisanBilgi">
<h2>Kai Ringo</h2>
<p>Fixer</p>
</div>
</div>
</div>
<div class="footer">
<div class="footerIcerik">
<strong>Bizi Takip Edin</strong>
<div class="footerIcerikResim">
<img src="images/Facebook.png">
<img src="images/Twitter-icon.png">
</div>
<p>Geliştirici adınız soyadınız</p>
</div>
</div>
</body>
</html>

HAKKIMIZDA

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>
<div class="slider">
<a href="">
<div class="googleButton">
<strong> Google </strong>
</div>
</a>
</div>
<div class="content2">
<div class="content2Icerik" style="color:white">
<strong>Hakkımızda</strong>
<p>sjfhsdsjkdfhsdjkfhsdkfhsdjkfhsdjkfbsdjk</p>
</div>
<div class="content2Icerik">
<img src="images/fjords.jpg">
<div class="content2IcerikYazi">
<h1>Costumer 1</h1>
<h3>Trade</h3>
<p>blablabal</p>
</div>
</div>
<div class="content2Icerik">
<img src="images/lights.jpg">
<div class="content2IcerikYazi">
<h1>Costumer 1</h1>
<h3>Trade</h3>
<p>blablabal</p>
</div>
</div>
<div class="content2Icerik">
<img src="images/mountains.jpg">
<div class="content2IcerikYazi">
<h1>Costumer 1</h1>
<h3>Trade</h3>
<p>blablabal</p>
</div>
</div>
</div>
<div class="footer">
<div class="footerIcerik">
<strong>Bizi Takip Edin</strong>
<div class="footerIcerikResim">
<img src="images/Facebook.png">
<img src="images/Twitter-icon.png">
</div>
<p>Geliştirici adınız soyadınız</p>
</div>
</div>
</body>
</html>

İLETİŞİM

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div class="menu">
<ul>
<li><a href="index.html">Anasayfa</a></li>
<li><a href="hakkimizda.html">Hakkımızda</a></li>
<li><a href="iletisim.html">İletişim</a></li>
</ul>
</div>
<div class="slider">
<a href="">
<div class="googleButton">
<strong> Google </strong>
</div>
</a>
</div>
<div class="content3">
<div class="sol">
<p>
İletişim<br><br><br>
Adres<br><br><br>
Swing buy cup a coffe, or whatever <br><br>
Chicago, US <br><br>
+00151515151 <br><br>
@test.gmail.com
</p>
</div>
<div class="sag">
<div class="form">
<div class="formEleman">
<p>Adı</p>
</div>
<div class="formEleman">
<p>Email</p>
</div>
<div class="formEleman">
<p>Mesaj</p>
</div>
<div class="formButton">
<p>Gönder</p>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footerIcerik">
<strong>Bizi Takip Edin</strong>
<div class="footerIcerikResim">
<img src="images/Facebook.png">
<img src="images/Twitter-icon.png">
</div>
<p>Geliştirici adınız soyadınız</p>
</div>
</div>
</body>
</html>

STİL

body{
margin: 0;
padding: 0;
}
.menu ul{
margin: 0;
padding: 0;
width: 100%;
height: 48px;
list-style-type: none;
background-color: black;
}
.menu li{
float: left;
}
.menu li a{
text-decoration: none;
color: white;
display: block;
padding: 15px 20px;
}
.menu ul li:first-child{
background-color: lightgreen;
}
.menu li a:hover{
background-color: white;
color: black;
}
.slider{
width: 100%;
height: 1000px;
background-image: url("images/sailboat.jpg");
}
.googleButton{
display: inline-block;
width: 100px;
height: 50px;
background-color: black;
margin-top: 900px;
margin-left: 50px;
text-align: center;
color: white;
font-size: 20px;
}
.googleButton a{
text-decoration: none;
}
.googleButton:hover{
background-color: lightgreen;
}
.googleButton strong{
display: inline-block;
margin-top: 10px;
}
.content{
width: 100%;
height: 500px;
background-color: white;
}
.baslik{
height: 100px;
text-align: center;
font-size: 20px;
}
.calisanlar{
width: 25%;
height: 400px;
float: left;
}
.calisanlar img{
border-radius: 50%;
height: 200px;
margin-left: 140px;
}
.calisanBilgi{
text-align: center;
}
.calisanBilgi p{
font-size: 20px;
}
.footer{
width: 100%;
height: 300px;
background-color: black;
}
.footerIcerik{
display: inline-block;
margin-left: 50%;
height: 200px;
margin-top: 50px;
color: white;
text-align: center;
}
.footerIcerik strong{
font-size: 20px;
}
.footerIcerikResim img{
width: 50px;
height: 50px;
float: left;
margin-top: 20px;
margin-left: 10px;
}
.footerIcerik p{
display: inline-block;
margin-top: 20px;
}
.content2{
width: 100%;
height: 800px;
background-color: lightslategray;
}
.content2Icerik{
width: 440px;
height: 760px;
margin-left: 30px;
margin-top: 20px;
float: left;
}
.content2Icerik img{
width: 100%;
height: 200px;
}
.content2IcerikYazi{
background-color: white;
height: 570px;
width: 440px;
display: inline-block;
margin-top: 0px;
}
.content3{
width: 100%;
height: 500px;
background-color: lightgray;
}
.sol{
width: 40%;
height: 500px;
float: left;
}
.sag{
width: 60%;
height: 500px;
float: left;
}
.sol p{
display: inline-block;
margin-top: 100px;
margin-left: 20px;
}
.form{
width: 80%;
height: 400px;
display: inline-block;
margin-top: 50px;
background-color: white;
}
.formEleman{
border-bottom: 1px solid lightgray;
height: 80px;
}
.formEleman p{
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}
.formButton{
display: inline-block;
width: 100px;
height: 50px;
color: white;
background-color: black;
margin-left: 700px;
margin-top: 50px;
text-align: center;
}
.formButton:hover{
background-color: lightgray;
color: black;
}
.formButton p{
display: inline-block;
margin-top: 15px;
}

Bu Blogda Ara

Reyting Sonuçları ve TV Haberleri

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Yuvamdaki Düşman | Yeni Dizi - Fragman

Sizi Böyle Alalım - Tanıtım Fragmanı | FOX