Anasayfa:
ve 2. Sayfa
Arkadaşlar. tek istediğim şey bu. Şehit bilgileri girecek bir çok basit bir editör sayfası olacak ve girilen şehit en başta gözükecek sıra ona göre kayacak. ben yaptım bunu ama ben sadece html ve css olarak yaptım ve elle ekleme yapıyorum ana sayfayı bile sırasını elle yapmak zorunda kalıyorum. İşin özü şu bu sayfa Adana Şehit gazi derneği için yapılan hayrına bir iş. Ve Adana daki şehitliklere qr kodu oluşturularak her mezar taşına yapıştırılacak. Ben firma yada ücretiyle bu işi yapan biri değilim. Bende askeri personelim anlayan var mı dediler yapabilir misin dediler dilimi eşek arısı soksun evet dedim ama yapamadım. Biliyorsunuz askeriyede bir defa anlıyorum dediysen o işi bir şekilde bitireceksin. ücreti mukabilinde yaptıracağım acil fiyat teklifi vermeniz gerekiyor Komutan benden siteyi acil yüklememi bekliyor çok acil yardım .
Belki yararı olur yapacak kişiye diyerekten html ve css kodlarını da paylaşıyorum.
1.Sayfa HTML
<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" ;>
<title>Title</title>
<link rel="stylesheet" href="hbb.css" />
</head>
<body>
<section class="sehitler-body sehitlerimiz">
<div class="sehitler-body-content">
<div class="sehitler-body-content-title">
<h2> Şehitlerimiz </h2>
</div>
<div class="sehitler-body-content-icon">
<div class="sehitler-body-content-icon-up"></div>
<div class="sehitler-body-content-icon-down"></div>
</div>
<div class="container">
<div class="sehitler-body-wrap">
<div class="sehitler-body-left">
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div
class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">Abdulkadir AKINCI</p>
</div>
<hr class="sehit-info-line">
<p class="sehit-sinif">Tnk.Söz.Er</p>
<p class="sehit-sicil">2021-11680</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div
class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg" > </div>
<div class="sehit-adi-box">
<p class="sehit-adi">
Hulusi ELÇİ
</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">Tbp.Tğm.</p>
<p class="sehit-sicil">391-8507</p>
<p></p></div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div
class="sehitler-body-left-row-item-box-text-body">
<div class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">
Ercan GÜVEN
</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">
Hv.İs.Uzm.Çvş.
</p>
<p class="sehit-sicil">2014-021</p>
<p></p></div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">Adem Kel</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">Ulş.Söz.Er</p>
<p class="sehit-sicil">2021-3428</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">Adem Kel</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">Ulş.Söz.Er</p>
<p class="sehit-sicil">2021-3428</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">
Mustafa ÖZKARDEŞ
</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">P.Söz.Onb.</p>
<p class="sehit-sicil">2017-6671</p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="sehitler-body-wrap">
<div class="sehitler-body-left">
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div
class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">Abdulkadir AKINCI</p>
</div>
<hr class="sehit-info-line">
<p class="sehit-sinif">Tnk.Söz.Er</p>
<p class="sehit-sicil">2021-11680</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div
class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg" > </div>
<div class="sehit-adi-box">
<p class="sehit-adi">
Hulusi ELÇİ
</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">Tbp.Tğm.</p>
<p class="sehit-sicil">391-8507</p>
<p></p></div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div
class="sehitler-body-left-row-item-box-text-body">
<div class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">
Ercan GÜVEN
</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">
Hv.İs.Uzm.Çvş.
</p>
<p class="sehit-sicil">2014-021</p>
<p></p></div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">Adem Kel</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">Ulş.Söz.Er</p>
<p class="sehit-sicil">2021-3428</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">Adem Kel</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">Ulş.Söz.Er</p>
<p class="sehit-sicil">2021-3428</p>
<p></p>
</div>
</div>
</div>
</div>
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim"> <img src="img/sehit.jpg"> </div>
<div class="sehit-adi-box">
<p class="sehit-adi">
Mustafa ÖZKARDEŞ
</p>
</div>
<hr class="sehit-info-line" />
<p class="sehit-sinif">P.Söz.Onb.</p>
<p class="sehit-sicil">2017-6671</p>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>1.Sayfa CSS .sehitler-body {
background-image: url(img/atam.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.sehitler-body-content-icon-down {
background-image: url(img/bolme.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
margin-top: 15px;
height: 0;
width: 100%;
padding-top: 5%;
}
.sehitler-body-content-icon-up {
background-image: url(img/sonsuzluk.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 30px;
width: 100%;
padding-top: 5%;
}
.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 100px;
padding-right: 100px;
}
@media (min-width: 992px)
{
.container {
max-width: 1275px;
}
}
.sehitler-body .sehitlerimiz-modal,{
margin: 0;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
z-index: 101;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
display: none;
}
.sehitler-body .sehitlerimiz-modal-content, .yan-sayfa .vefatlarimiz-modal-content {
border-radius: 3px;
position: relative;
}
.sehitler-body .sehitlerimiz-modal-close, .yan-sayfa .vefatlarimiz-modal-close {
position: absolute;
right: 0;
/*top: 40px;*/
width: 40px;
height: 40px;
z-index: 1;
background-color: rgba(0, 0, 0, 0.1);
color: white;
}
.sehitler-body .sehitlerimiz-modal-close:hover, .yan-sayfa .vefatlarimiz-modal-close:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.sehitler-body .sehitlerimiz-modal.show, .yan-sayfa .vefatlarimiz-modal.show {
display: -webkit-box;
display: flex;
}
.sehitler-body .sehitlerimiz-modal h4, .yan-sayfa .vefatlarimiz-modal h4 {
font-weight: normal;
}
.sehitler-body-wrap {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 50px;
}
.sehitler-body-right > img {
width: 100%;
height: 1332px;
}
.sehitler-body-right {
width: 10%;
height: 350px;
background-color: burlywood;
}
.sehitler-body-left {
display: flex;
justify-content: center;
width: 100%;
display: grid;
padding-bottom: 5px;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
}
@media(min-width:320px) {
.sehitler-body-left {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:540px) {
.sehitler-body-left {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}
@media(min-width:720px) {
.sehitler-body-left {
grid-template-columns: repeat(4, 1fr);
}
}
@media(min-width:992px) {
.sehitler-body-left {
grid-template-columns: repeat(5, 1fr);
}
}
@media(min-width:1200px) {
.sehitler-body-left {
grid-template-columns: repeat(6, 1fr);
}
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("bayrak.png");
}
img.sehitler-body-left-row-item-image {
width: 100%;
}
.sehitler-body-left-row {
display: flex;
}
.sehitler-body-left-row-item {
position: relative;
margin-left: 10px;
margin-bottom: 30px;
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0px 0 15px 0;
background-color: white;
width: 100%;
}
.sehitler-body-content-title {
align-items: center;
justify-content: center;
display: flex;
text-transform: uppercase;
}
.sehitler-body-content-title > h2 {
font-size: calc(1.3rem + 1.1vw);
margin-top: 30px;
margin-bottom: 30px;
line-height: 0px;
color: #171e2b;
}
.sehitler-body-wrap {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 50px;
}
.sehitler-body-left {
display: flex;
justify-content: center;
width: 100%;
display: grid;
padding-bottom: 5px;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
}
@media(min-width:320px) {
.sehitler-body-left {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:540px) {
.sehitler-body-left {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}
@media(min-width:720px) {
.sehitler-body-left {
grid-template-columns: repeat(4, 1fr);
}
}
@media(min-width:992px) {
.sehitler-body-left {
grid-template-columns: repeat(5, 1fr);
}
}
@media(min-width:1200px) {
.sehitler-body-left {
grid-template-columns: repeat(6, 1fr);
}
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("bayrak.png");
}
img.sehitler-body-left-row-item-image {
width: 100%;
}
.sehitler-body-left-row {
display: flex;
}
.sehitler-body-left-row-item {
position: relative;
margin-left: 10px;
margin-bottom: 30px;
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0px 0 15px 0 rgba(0, 0, 0, 0.50);
width: 100%;
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("img/bayrak.png");
}
img.sehitler-body-left-row-item-image {
width: 100%;
}
.sehitler-body-left-row {
display: flex;
}
.sehitler-body-left-row-item {
position: relative;
margin-left: 10px;
margin-bottom: 30px;
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0px 0 15px 0 rgba(0, 0, 0, 0.30);
width: 100%;
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("img/bayrak.png");
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0px 0 15px 0 rgba(0, 0, 0, 0.30);
width: 100%;
}
.sehit-cerceve-bayrak {
margin-top: -16%;
height: 0px;
padding: 10%;
background-image: url("img/bayrak.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.sehitler-body-left-row-item:hover .sehit-cerceve-bayrak {
background-image: url("img/bayrak.png");
background-color: black;
z-index: 3;
border-radius: 100%;
}
}
.sehit-resim{
width: 100%;
height: 0px;
padding-top: 100%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin-top: 9%;
}
.sehit-resim:hover {
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Safari 3-8 */
transform: scale(1.05);
}
.sehit-adi-box {
width: 159px;
word-wrap: break-word;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.sehit-adi {
text-align: center;
font-weight: bold;
font-size: calc(.7rem + 0.5vw);
}
.sehit-info-line {
width: 75%;
border-color: black;
padding: 0px 0px 0px 0px;
margin: 0px 0px 5px 0px;
}
.sehit-sinif {
text-align: center;
font-weight: lighter;
font-size: calc(.6rem + 0.4vw);
}
.sehit-sicil {
text-align: center;
font-weight: lighter;
font-size: calc(.6rem + 0.4vw);
margin-bottom: 12px;
}
small, div, a {
font-family: var(--fontRegular) !important;
}
*, *:before, *:after {
box-sizing: inherit;
}
user agent stylesheet
div {
display: block;
unicode-bidi: isolate;
}2.Sayfa HTML<!doctype html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0" ;>
<title>Şehitlerimiz</title>
<link rel="stylesheet" href="hbb.css" />
</head>
<body>
<section class="sehitler-body sehitlerimiz">
<div class="sehitler-body-content"></div>
<div class="sehitler-body-content-title">
<h2>Sizi Toprağa Değil Yüreğimize Gömdük...</h2>
</div>
<div class="sehitler-body-content-title-2">
<h2>VATAN SİZE MİNNETTARDIR.</h2>
</div>
<div class="sehitler-body-content-icon">
<div class="sehitler-body-content-icon-up"></div>
<div class="sehitler-body-content-icon-down"></div>
</div>
<div class="container">
<div class="sehitler-body-wrap">
<div class="sehitler-body-left">
<div class="sehitler-body-left-row-item">
<div class="sehitler-body-left-row-item-box">
<div
class="sehitler-body-left-row-item-box-text-body">
<div
class="sehitler-body-left-row-item-box-text-body-inner">
<div class="sehit-cerceve-bayrak"></div>
<div class="sehit-resim">
<img src="img/image2.jpg" />
</div>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sehit">
<table>
<tr> <th>ADI SOYADI :</th> <th>Mehmet KIRMIZI</th></tr>
<tr><th>SINIF VE RÜTBESİ :</th><th>İs.Uzm.Çvş.</th></tr>
<tr><th>BABA ADI :</th><th>Zeydan</th></tr>
<tr><th>DOĞUM TARİHİ VE YERİ :</th><th>05.07.1994 Hatay/Altınözü</th></tr>
<tr><th>SİCİL NU./TERTİBİ:</th> <th>2018-192</th> </tr>
<tr><th>BİRLİĞİ:</th><th>DağveKomd.Tug.K.lığı</th></tr>
<tr><th>ŞEHADET TARİHİ:</th><th>30.04.2021</th></tr>
<tr><th>ŞEHADET YERİ:</th> <th>30.04.2021</th> </tr>
<tr><th>OLAY ÖZETİ:</th><th>Pençe-YıldırımHarekâtıkapsamında, 1876 RakımlıTepe (IrakKuzeyi) Bölgesinde 28 Nisan 2021 tarihindekeşif,
gözetlemevearamafaaliyetiesnasında BTÖ mensuplarıncayapılangüdümlüfüzetacizisonucuyaralanmışvekaldırıldığı
GülhaneEğitimveAraştırmaHastanesindeyapılantümmüdahalelererağmenkurtarılamayarak
30 Nisan 2021 tarihindeşehitolmuştur.</th> </tr>
<tr>
</table></div>
</div>
</section>
</body>
</html>2.sayfa CSS
.sehitler-body {
background-image: url(img/arkaplan.jpg);
background-color:#cecece;
height:1400px;
weight:100%;
background-position:top;
background-repeat: no-repeat;
}
.sehitler-body-content-icon-down {
background-image: url(img/bolme.png);
background-repeat: no-repeat;
background-size: contain;
background-position:center;
margin-top: 0px;
height: 70px;
width: 500px;
margin:0 auto;
}
.sehitler-body-content-icon-up {
background-image: url(img/sonsuzluk.png);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 20px;
width: 100%;
padding-top: 5%;
}
.container{
display:flex;
width: 0px;
height: 300px;
margin:0 51%;
justify-content: center;
align-items: center;
background-color:#cecece;
}
.table ,tr , th,td
{
width: 185px;
height: 20px;
text-align:left;
table-layout:fixed;
padding-left:10px;
margin:auto;
}
.tr{position:absolute;
}
.sehit {
position: absolute;
left: 30%;
margin-left: -50px;
}
}
@media(min-width:320px) {
.sehitler-body {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:540px) {
.sehitler-body{
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}
@media(min-width:720px) {
.sehitler-body{
grid-template-columns: repeat(4, 1fr);
}
}
@media(min-width:992px) {
.sehitler-body {
grid-template-columns: repeat(5, 1fr);
}
}
@media(min-width:1200px) {
.sehitler-body, {
grid-template-columns: repeat(6, 1fr);
}
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("bayrak.png");
}
img.sehitler-body-left-row-item-image {
width: 100%;
}
.sehitler-body-left-row {
display: flex;
}
.sehitler-body-left-row-item {
position: relative;
margin-left: 10px;
margin-bottom: 30px;
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color:#cecece;
width: 100%;
}
.sehitler-body-content-title {
padding-top:200px;
text-align:center;
}
.sehitler-body-content-title-2 {
text-align:center;
}
.sehitler-body-wrap {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 50px;
}
.sehitler-body-left {
display: flex;
justify-content: center;
width: 100%;
display: grid;
padding-bottom: 5px;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
position: relative;
}
@media(min-width:320px) {
.sehitler-body-left {
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width:540px) {
.sehitler-body-left {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
}
@media(min-width:720px) {
.sehitler-body-left {
grid-template-columns: repeat(4, 1fr);
}
}
@media(min-width:992px) {
.sehitler-body-left {
grid-template-columns: repeat(5, 1fr);
}
}
@media(min-width:1200px) {
.sehitler-body-left {
grid-template-columns: repeat(6, 1fr);
}
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("bayrak.png");
}
img.sehitler-body-left-row-item-image {
width: 100%;
}
.sehitler-body-left-row {
display: flex;
}
.sehitler-body-left-row-item {
position: relative;
margin-left: 10px;
margin-bottom: 10px;
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("img/bayrak.png");
}
img.sehitler-body-left-row-item-image {
width: 100%;
}
.sehitler-body-left-row {
display: flex;
}
.sehitler-body-left-row-item {
position: relative;
margin-left: 10px;
margin-bottom: 30px;
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.sehitler-body-left-row-item-box-text-body-bayrak {
background-image: url("img/bayrak.png");
}
.sehitler-body-left-row-item-box-text-body-inner {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.sehit-cerceve-bayrak {
margin-top: -10%;
height: 0px;
padding: 10%;
background-image: url("img/bayrak.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.sehitler-body-left-row-item:hover .sehit-cerceve-bayrak {
background-image: url("img/bayrak.png");
background-color: black;
z-index: 3;
border-radius: 100%;
}
}
.sehit-resim{
width: 100%;
height: 0px;
padding-top: 100%;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
margin-top: 9%;
}
.sehit-resim:hover {
-ms-transform: scale(1.05); /* IE 9 */
-webkit-transform: scale(1.05); /* Safari 3-8 */
transform: scale(1.05);
}
.sehit-adi-box {
width: 159px;
word-wrap: break-word;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.sehit-adi {
text-align: center;
font-weight: bold;
font-size: calc(.7rem + 0.5vw);
}
.sehit-info-line {
width: 75%;
border-color: black;
padding: 0px 0px 0px 0px;
margin: 0px 0px 5px 0px;
}
.sehit-sinif {
text-align: center;
font-weight: lighter;
font-size: calc(.6rem + 0.4vw);
}
.sehit-sicil {
text-align: center;
font-weight: lighter;
font-size: calc(.6rem + 0.4vw);
margin-bottom: 12px;
} 
Tanıdık varsa etiketle bari bilen biri.
