<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>flex yapı</title> <style type="text/css"> .container{ margin: auto; display: flex; width: 80%; flex-direction: column; height: 80%; position: relative; } .header{ text-align: center; background-color: pink; width: 100%; border: 1px solid black; height: 25vh; margin-bottom: 5px; } .middleContainer{ display:flex; flex-direction: row; width: 100%; justify-content: space-evenly; flex-wrap: wrap; } .box{ width: 30%; height: 25vh; background-image: url(https://r.resimlink.com/fe0sC.png); margin-bottom: 2px; } .footer{ text-align: center; background-color: whitesmoke; width: 100%; border: 1px solid black; height: 15vh; margin-bottom: 5px; background-image: url(https://r.resimlink.com/KIZis6lGL.png); } .metin2 { position: absolute; top: 85%; left: 32%; } .deneme{ background-image: url(https://r.resimlink.com/WfpQin-wy4Y.png); } .başlık{ background-image: url(https://r.resimlink.com/KIZis6lGL.png); } .metin3 { position: absolute; top: 92%; left: 32%; } .metin4 { position: absolute; top: 92%; left: 53%; } .font{ position: absolute; top: 10%; left: 26%; font-size:70px; font-weight: bolder; font-style: Math Sans Bold; } </style> </head> <body background="https://r.resimlink.com/rfYMb.png"> <div class="container"> <div class="header"> <div class="başlık" style="height: 100%; width: 100%;"> <div class="font"><a>KAMP MALZEMELERİ</a></div> <a href="https://r.resimlink.com/sGwEMYp9.png">→ site logosu ←</a> </div> </div> <div class="middleContainer"> <div class="box"><img src="çadır.png" style="height: 100%; width: 100%;"></div> <div class="box"><img src="lamba.png" style="height: 100%; width: 100%;"></div> <div class="box"><img src="sandalye.png" style="height: 100%; width: 100%;"></div> <div class="box"><img src="bıçak.png" style="height: 100%; width: 100%;"></div> <div class="box"><img src="ocak.png" style="height: 100%; width: 100%;"></div> <div class="box"><img src="masa.png" style="height: 100%; width: 100%;"></div> </div> <div class="footer"><img src="çerçeve.png" style="height: 100%; width: 100%;"></div> <div class="metin2"><a style="font-size:32px" href="https://www.youtube.com/@efeturda6627">→ YOUTUBE ←</a></div> <div class="metin3"><a style="font-size:32px" href="mailto:omerfaruksevci1726@gmail.com">→ GMAİL İÇİN ←</a></div> <div class="metin4"><a style="font-size:32px" href="https://www.instagram.com/umraniye75cmtal/">→ İNSTAGRAM ←</a></div> </div> </body> </html>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter