Görseldeki web sitesini HTML ve CSS kullanarak tasarlama

C

coderss

Yoctopat
Katılım
22 Mayıs 2024
Mesajlar
3
Daha fazla  
Cinsiyet
Erkek
Merhaba arkadaşlar, görseldeki web tasarımı HTML, CSS de nasıl yapılır? Denedim ama görsellik istediğim gibi olmadı.
 

Dosya Ekleri

  • epin.png
    epin.png
    210,4 KB · Görüntüleme: 100
Son düzenleyen: Moderatör:
Tarihe göre sırala Puana göre sırala
Siteye benzer web sitelerinin HTML ve CSS kodlarını inceleyebilirsin.
 
Artı 0 Eksi
E1Rhan dedi:
Biraz daha detay verirsen daha iyi olur. Tam olarak neyi yapamadım ?
Genişletmek için tıkla...
HTML CSS kodu paylaşıyorum.

1-sol tarafa kutucuk lazım
2-arka plan gri olacak
3-bakiyeler değişken mi olacak bilemedim
4-kategori ürün çubuğu ortalamak lazım

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/main.css">
<title>epin</title>
<link rel="stylesheet" href="style.css">
</head>
<link rel="stylesheet" href="styles/style.css">
<body>
<div class="container">
<header class="header"></header>
<a href="#" class="logo">
<img src="images/logout.png" alt="logoo">
</a>
<div class="navbar">

<ul>
<a href="#" class="logo">
<img src="images/information-button.png" alt="logoo">
</a>
<li><a href="#">Hakkımızda</a></li>
<a href="#">
<img src="images/phone.png" alt="logoo">
</a>
<li><a href="#">İletişim</a></li>
<a href="#">
<img src="images/computer.png" alt="logoo">
</a>
<li><a href="#">Blog</a></li>
<a href="#">
<img src="images/faq.png" alt="logoo">
</a>
<li><a href="#">Sıkça Sorulan Sorular</a></li>
</ul>
<div class="showcase-content" >

<div class="search-box">
<input class="search-txt" type="text" name="box" placeholder="Kategori veya ürün arayın"><a href="#" class="btn btn-x1"><i class="fas fa-chevron-right btn-icon"></i>
</a>
</div>
</div>

</div>
<div class="navbar">
<ul>

<a href="#">
<img src="images/menu (4).png" alt="logoo">
</a>
<li><a href="#">Kategoriler</a></li>
<a href="#">
<img src="images/live.png" alt="logoo">
</a>
<li><a href="#">Yayıncılar</a></li>
<a href="#">
<img src="images/boxes.png" alt="logoo">
</a>
<li><a href="#">CD Key</a></li>
<a href="#">
<img src="images/lightning.png" alt="logoo">
</a>
<li><a href="#">Valorant</a></li>
<a href="#">
<img src="images/rocket.png" alt="logoo">
</a>
<li><a href="#">Pubg Mobile</a></li>
<a href="#">
<img src="images/handshake.png" alt="logoo">
</a>
<li><a href="#">Oyuncu Pazarı</a></li>
<a href="#">
<img src="images/trophy.png" alt="logoo">
</a>
<li><a href="#">Çekilişler</a></li>
<a href="#">
<img src="images/shield.png" alt="logoo">
</a>
<li><a href="#">Knight Online</a></li>
<a href="#">
<img src="images/helmet.png" alt="logoo">
</a>
<li><a href="#">Rise Online</a></li>
</ul>
</div>
</div>
<section>
<h1>LOGO</h1>
</section>

<div class="buttons">
<button>
<a href="#">
<img src="images/cart.png" alt="logoo">
</a>
<i class="class">Sepetim</i>
</button>
</div>
<nav>
<ul>
<li><a href="#">Hesabım</a></li>
<li><a href="#">Siparişlerim</a></li>
<li><a href="#">Favorilerim</a></li>
<li><a href="#">Bildirimlerim</a></li>
</ul>
</nav>
<section class="menu">
<h1> <span>Hızlı Menü</span></h1>
<div class="box-container">
<div class="box">
<div class="box-head">
<img src="images/wallet2.png" alt="menu">
</div>
<div class="box-bottom">
<a href="#" class="btn">Bakiye yükle</a>
</div>
</div>
<div class="box">
<div class="box-head">
<img src="images/box.png" alt="menu">
</div>
<div class="box-bottom">
<a href="#" class="btn">Siparişlerim</a>
</div>
</div>
<div class="box">
<div class="box-head">
<img src="images/store.png" alt="menu">
</div>
<div class="box-bottom">
<a href="#" class="btn">Mağazam</a>
</div>
</div>
<div class="box">
<div class="box-head">
<img src="images/add.png" alt="menu">
</div>
<div class="box-bottom">
<a href="#" class="btn">İlan ekle</a>
</div>
</div>
<div class="box">
<div class="box-head">
<img src="images/heart22.png" alt="menu">
</div>
<div class="box-bottom">
<a href="#" class="btn">Favoriler</a>
</div>
</div>
</div>
</section>
<section class="bakiye">
<div class="box-container">
<div class="box">
<div class="box-head">
<span class="title">Toplam bakiye</span>
</div>
</div>
<div class="box">
<div class="box-head">
<span class="title">Kullanılabilir bakiye</span>
</div>
</div>
<div class="box">
<div class="box-head">
<span class="title">Çekilebilir bakiye</span>
</div>
</div>
<div class="box">
<div class="box-head">
<span class="title">Bonus bakiye</span>
</div>
</div>
<div class="box">
<div class="box-head">
<span class="title">Bloke bakiye</span>
</div>
</div>
</div>
</section>
<section class="footer">
<div class="share">
<a href="#">
<i>linkk</i>
<i>linkk</i>
<i>linkk</i>
<i>linkk</i>
<i>linkk</i>
</a>
</div>
</section>
<div class="watch-everywhere">
<h2>Kurumsal</h2>

</div>
<footer class="page-down">

<p><a href="#">Hakkımızda</a></p>
<p><a href="#">Marka Yönergeleri</a></p>
<p><a href="#">Sertifikalarımız</a></p>
<p><a href="#">İnsan Kaynakları</a></p>
<p><a href="#">Sponsorluk</a></p>
<p><a href="#">WhatsApp Destek</a></p>
<p><a href="#">Sipariş Sorgula</a></p>
<p><a href="#">Steam Cüzdan Kodu</a></p>

</footer>
<div id="alt">Alt</div>


</body>
</html>

CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
}
.logo img{
height: 1rem;
}
.container .navbar{
width: 100%;
height: 50px;
background: rgba(220, 220, 220);
}
.navbar ul{
float: left;
margin-left: 20px;
}
.navbar ul{
float: left;
margin-left: 20px;
}
.navbar .logo{
display: inline-block;
}
.navbar .logo a{
text-decoration: none;
font-size: 30px;
font-family: sans-serif;
color: #000000;
}
.navbar ul li{
list-style: none;
display: inline-block;
margin: 0 8px;
}
.navbar ul li a{
color: black;
text-decoration: none;
}
.section{
section-spacing: 60px;
shadow: 0px 2px 5px 0px hsla(0, 0%, 0%, 0.2);
}
a{
color: var(--black-color);
text-decoration: none;
}
.heading {
color: black;
text-transform: uppercase;
font-size: 4rem;
margin-bottom: 3.5rem;
border-bottom: 0.1rem solid #000000;
}
.heading span {
text-transform: uppercase;
}
.header .navbar a{
margin: 0 1rem;
font-size: 1.6rem;
color: var(--black-color);
border-bottom: 0.1rem solid transparent;
}
.menu .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem,1fr));
gap: 1.5rem;
}
.menu .box-container .box{
padding: 1rem;
background-color: aqua;
border-radius: 1rem;
background-color: aqua;
min-height: 2;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
}
.menu .box-container .box img{
width: 100%;
object-fit: cover;
}
.bakiye .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem,1fr));
gap: 1.5rem;
}
.bakiye .box-container .box{
text-align: center;
background-color: white;
position: relative;
border-radius: 3rem;
height: 60rem;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
}
.bakiye .box-container .box .box-head{
display: flex;
flex-direction: column;
align-items: flex-start;
position: relative;
z-index: 10;
}
.bakiye .box-container .box .box-head .title{
font-size: 1.4rem;
}
.bakiye .box-container .box .box-head .name{
font-size: 4rem;
font-weight: bold;
text-align: start;
overflow-wrap: anywhere;
}
.footer .share {
padding: 2rem 0;
}
.footer .share a {
width: 5rem;
height: 5rem;
line-height: 5rem;
color: black;
font-size: 2rem;
border: var(--border);
border-radius: 50%;
margin: 0.3rem;
}
.alt{
width:100px;
height:1px;
position:absolute;
bottom:0px;

}
 
Artı 0 Eksi

Benzer konular

lazgonn
CSS ve HTML kullanarak slider yapılır mı?
Mesaj
5
Görüntüleme
295
lazgonn
lazgonn
bayzeppeli
HTML, CSS ve JavaScript nasıl öğrenilebilir?
Mesaj
6
Görüntüleme
566
Aspectw1
Aspectw1
erenghlt
HTML CSS loader ekleme
Mesaj
5
Görüntüleme
1.144
erenghlt
erenghlt
8
HTML içine css gömme hatası
Mesaj
5
Görüntüleme
5.519
Bir Deliden Fazlası
B
0
  • Soru
HTML ve CSS ile responsive konumlandırma hatası
Mesaj
3
Görüntüleme
585
AngelEyess4
AngelEyess4

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı