Div ile Kart (Card) Yapımı
<!DOCTYPE html>
<html>
<head>
<style>
.total{
height: 210px;
width: 400px;
position: relative;
background-color: rgb(45, 56, 56);
box-shadow: 0px 0px 15px rgb(45, 56, 56);
}
.left{
height: 210px;
width: 200px;
position: relative;
float: left;
background-color: aqua;
}
.right{
height: 210px;
width: 200px;
float: right;
position: relative;
background-color: aquamarine;
}
.right1{
background-color: rgb(255, 147, 6);
position: relative;
height: 70px;
width: 200px;
}
.right2{
background-color: rgb(122, 17, 221);
position: relative;
height: 70px;
width: 200px;
}
.right3{
background-color: rgb(255, 81, 0);
position: relative;
height: 70px;
width: 200px;
}
.left1{
height: 70px;
width: 60px;
position: relative;
float: left;
background-color: rgb(226, 230, 13);
}
.left3{
height: 70px;
width: 40px;
position: relative;
float: right;
background-color: rgb(136, 255, 0);
}
</style>
</head>
<body>
<div class="total">
<div class="left"></div>
<div class="right">
<div class="right1"></div>
<div class="right2"></div>
<div class="right3">
<div class="left1"></div>
<div class="left2"></div>
<div class="left3"></div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<style>
.total{
height: 210px;
width: 400px;
position: relative;
background-color: rgb(45, 56, 56);
box-shadow: 0px 0px 15px rgb(45, 56, 56);
}
.left{
height: 210px;
width: 200px;
position: relative;
float: left;
background-color: aqua;
}
.right{
height: 210px;
width: 200px;
float: right;
position: relative;
background-color: aquamarine;
}
.right1{
background-color: rgb(255, 147, 6);
position: relative;
height: 70px;
width: 200px;
}
.right2{
background-color: rgb(122, 17, 221);
position: relative;
height: 70px;
width: 200px;
}
.right3{
background-color: rgb(255, 81, 0);
position: relative;
height: 70px;
width: 200px;
}
.left1{
height: 70px;
width: 60px;
position: relative;
float: left;
background-color: rgb(226, 230, 13);
}
.left3{
height: 70px;
width: 40px;
position: relative;
float: right;
background-color: rgb(136, 255, 0);
}
</style>
</head>
<body>
<div class="total">
<div class="left"></div>
<div class="right">
<div class="right1"></div>
<div class="right2"></div>
<div class="right3">
<div class="left1"></div>
<div class="left2"></div>
<div class="left3"></div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="harici.css">
</head>
<body>
<div class="totel">
<div class="imgdiv">
<img src="indir.jpg" class="img">
</div>
<div class="div">
<h1 class="h1">Urahara Kisuke</h1>
</div>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="harici.css">
</head>
<body>
<div class="totel">
<div class="imgdiv">
<img src="indir.jpg" class="img">
</div>
<div class="div">
<h1 class="h1">Urahara Kisuke</h1>
</div>
</div>
</body>
</html>
harici.css
.totel{
box-shadow: 0px 0px 15px #000;
overflow: hidden;
background-color: rgb(205, 212, 96);
width: 300px;
height: 420px;
position: relative;
position: fixed;
margin: auto;
inset: 0px;
border-radius: 15px;
}
.imgdiv{
background-color: rgb(0, 255, 255);
width: 300px;
height: 200px;
position: relative;
border-radius: 15px;
}
.div{
background-color: rgb(205, 212, 96);
width: 300px;
height: 200px;
border-radius: 15px;
}
.img{
width: 300px;
height: 220px;
}
.h1{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
padding: 5px;
}
box-shadow: 0px 0px 15px #000;
overflow: hidden;
background-color: rgb(205, 212, 96);
width: 300px;
height: 420px;
position: relative;
position: fixed;
margin: auto;
inset: 0px;
border-radius: 15px;
}
.imgdiv{
background-color: rgb(0, 255, 255);
width: 300px;
height: 200px;
position: relative;
border-radius: 15px;
}
.div{
background-color: rgb(205, 212, 96);
width: 300px;
height: 200px;
border-radius: 15px;
}
.img{
width: 300px;
height: 220px;
}
.h1{
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
padding: 5px;
}
Yorumunuzu Ekleyin
Apache PHP MYSQL Kurmak
LAMP (Linux Apache Mysql PHP) kurulup bazı ayarların yapılması
27,017 okuma,
Java Kurulumu
Sun Java yüklemek, yeni adıyla oracle Java yüklemenin yolları
26,489 okuma, 18/12/2014
