- Katılım
- 9 Ara 2020
- Konular
- 71
- Mesajlar
- 255
- Çözümler
- 1
- Tepki puanı
- 218
- Puanları
- 2,110
Aşağıdaki kodu index.html'e atın ;
Aşağıdaki kodu stil.css'e atın ;
Gerekli bazı yerleri kendi bilgilerinizle değiştirin(Resim konumları,linkler).
Not:Bu kodu YouTube:Web odası sayesinde yazdım.
HTML:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/stil.css">
</head>
<body>
<a name="bas"></a>
<div class="buton2" style="right: 35px;">
<a href="#bas">
<i class="fas fa-angle-double-up"></i>
</a>
</a>
</div>
<div class="buton2">
<a href="#son">
<i class="fas fa-angle-double-down"></i>
</a>
</a>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<script src="" async defer></script>
<div class="sablon">
<div class="logo">
<img
src="img/logo.jpg"
width="100"
height="100"
alt=""
>
</div>
<div class="banner"></div>
<div class="menu">
<ul>
<li>
<a href="">Anasayfa</a>
</li>
<li>
<a href="">Hakkımızda</a>
</li>
<li>
<a href="">Çalışmalarımız</a>
</li>
<li>
<a href="">İletişim</a>
</li>
</ul>
</div>
<div class="sosyal">
<a href="https://www.instagram.com/semih_gears/">
<img
src="img/instagram.png"
height="47px"
width="auto"
title="Instagram Hesabım"
alt=""
>
</a>
<div class="s1">
<a href="https://www.youtube.com/channel/UCOBTJTwfYWhSUMc_RcMEfzg">
<img
src="img/youtube.png"
height="47px"
width="auto"
title="YouTube Kanalım"
alt=""
>
</a>
</div>
<div class="s1">
<a href="https://discord.gg/qm2kJdgHAG">
<img
src="img/discord.jpg"
height="47px"
width="auto"
title="Discord sunucum"
alt=""
>
</a>
</div>
</div>
<div class="orta1"></div>
<div class="orta2"></div>
<div class="orta3"></div>
<div class="orta4"></div>
<div class="alt">
<a name="son"></a>
</div>
</div>
</body>
</html>Aşağıdaki kodu stil.css'e atın ;
CSS:
.sablon {
width: 760px;
height: auto;
margin: 30px auto;
}
.logo {
width: 100px;
height: 100px;
float: left;
}
.banner {
width: 630px;
height: 100px;
float: left;
margin-left: 10px;
background: #003466;
border-radius: 10px;
}
.menu {
width: 580px;
height: 47px;
float: left;
margin-top: 10px;
background: #00468c;
}
.sosyal {
width: 170px;
height: 47px;
float: left;
margin-top: 10px;
margin-left: 9px;
}
.s1 {
margin-left: 2px;
float: left;
}
.orta1 {
width: 740px;
height: 348px;
float: left;
margin-top: 10px;
background: #016dd9;
}
.orta2 {
width: 240px;
height: 240px;
float: left;
margin-top: 10px;
background: #4da6ff;
}
.orta3 {
width: 240px;
height: 240px;
float: left;
margin-top: 10px;
margin-left: 8px;
background: #99cdff;
}
.orta4 {
width: 240px;
height: 240px;
float: left;
margin-top: 10px;
margin-left: 8px;
background: #bedffe;
}
.alt {
width: 740px;
height: 90px;
float: left;
margin-top: 10px;
background: #bfeefe;
border-radius: 10px;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.menu ul li {
float: left;
}
.menu ul li a {
display: block;
width: 145px;
height: 32px;
text-decoration: none;
text-align: center;
font: bold 13px tahoma;
color: white;
padding-top: 15px;
}
.menu ul li a:hover {
text-decoration: underline;
background: #06f;
}
.sosyal a img:hover{
width: 50px;
height: 50px;
}
.buton2 {
height: 5px;
width: 5px;
right: 15px;
bottom: 80px;
position: fixed;
}
.buton2 a:hover{background: black;}Gerekli bazı yerleri kendi bilgilerinizle değiştirin(Resim konumları,linkler).
Not:Bu kodu YouTube:Web odası sayesinde yazdım.
Son düzenleme:
