Merhaba. Yakın zamanda tasarımını paylaştığım basit bir temayı Sizlerle paylaşıyorum. Her ne kadar responsive olmasa da sağlayabilirim ileride. Silinmemesi için bilgisayarımdan burada paylaşıyorum. Özelleştirmek isteyen arkadaş özelleştirebilir.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="content">
<div class="container">
<div class="left-side">
<div class="main-content">
<div class="barcode">
<i class="fa-solid fa-barcode"></i>
<input type="text" class="scan" placeholder="Scan your product">
</div>
<a href="" class="btn display-none">
<i class="fa-regular fa-circle-question"></i>
<span class="ml-5">Help</span>
</a>
</div>
<div class="categories">
<a href="#" class="active">All Items</a>
<a href="#">Food</a>
<a href="#">Alcohol</a>
<a href="#">Cold Drinks</a>
<a href="#">Hot Drinks</a>
</div>
<div class="products">
<div class="card">
<h2>Cheesy Stuffed Flank Steak</h2>
<img src="https://iamhomesteader.com/wp-content/uploads/2020/08/flank-steak-new-1.jpg" alt="">
<div class="weight">150g</div>
<div class="price">$13.50</div>
</div>
<div class="card">
<h2>Grilled Corn</h2>
<img src="https://assets.epicurious.com/photos/54af5217c4a891cc44cce500/5:4/w_910,h_728,c_limit/51179080_grilled-corn_1x1.jpg"
alt="">
<div class="weight">150g</div>
<div class="price">$3.50</div>
</div>
<div class="card">
<h2>Ranch Burgers</h2>
<img src="https://d31qjkbvvkyanm.cloudfront.net/images/recipe-images/pacific-coast-california-style-burger-detail-ee19e778.jpg"
alt="">
<div class="weight">150g</div>
<div class="price">$7.75</div>
</div>
<div class="card">
<h2>Mushroom Burgers</h2>
<img src="https://food.fnr.sndimg.com/content/dam/images/food/fullset/2013/5/8/0/FN_Melissa-DArabian-Burger_s4x3.jpg.rend.hgtvcom.616.462.suffix/1371616351111.jpeg"
alt="">
<div class="weight">150g</div>
<div class="price">$3.50</div>
</div>
<div class="card">
<h2>Cheesy Stuffed Flank Steak</h2>
<img src="https://iamhomesteader.com/wp-content/uploads/2020/08/flank-steak-new-1.jpg" alt="">
<div class="weight">150g</div>
<div class="price">$13.50</div>
</div>
<div class="card">
<h2>Grilled Corn</h2>
<img src="https://assets.epicurious.com/photos/54af5217c4a891cc44cce500/5:4/w_910,h_728,c_limit/51179080_grilled-corn_1x1.jpg"
alt="">
<div class="weight">150g</div>
<div class="price">$3.50</div>
</div>
</div>
</div>
<div class="right-side">
<div class="actions">
<h2 class="title">Current Order</h2>
<a href="" class="btn btn-alert"><i class="fa-solid fa-circle-minus"></i> Clear All</a>
<a href="" class="btn w-40">
<i class="fa-solid fa-gear"></i>
</a>
</div>
<div class="orders">
<div class="order">
<div class="image">
<img class="rounded-image"
src="https://iamhomesteader.com/wp-content/uploads/2020/08/flank-steak-new-1.jpg"
width="40" height="40" alt="">
</div>
<h2 class="brand-title">Cheesy Stuffed Flank Steak</h2>
<a href="" class="btn btn-pink btn-radius w-40">
<i class="fa-solid fa-minus"></i>
</a>
<div class="count">1</div>
<a href="" class="btn btn-radius w-40">
<i class="fa-solid fa-plus"></i>
</a>
<div class="price">$13.50</div>
</div>
<div class="order">
<div class="image">
<img class="rounded-image"
src="https://assets.epicurious.com/photos/54af5217c4a891cc44cce500/5:4/w_910,h_728,c_limit/51179080_grilled-corn_1x1.jpg"
width="40" height="40" alt="">
</div>
<h2 class="brand-title">Grilled Corn</h2>
<a href="" class="btn btn-pink btn-radius w-40">
<i class="fa-solid fa-minus"></i>
</a>
<div class="count">2</div>
<a href="" class="btn btn-radius w-40">
<i class="fa-solid fa-plus"></i>
</a>
<div class="price">$3.50</div>
</div>
<div class="order">
<div class="image">
<img class="rounded-image"
src="https://d31qjkbvvkyanm.cloudfront.net/images/recipe-images/pacific-coast-california-style-burger-detail-ee19e778.jpg"
width="40" height="40" alt="">
</div>
<h2 class="brand-title">Ranch Burgers</h2>
<a href="" class="btn btn-pink btn-radius w-40">
<i class="fa-solid fa-minus"></i>
</a>
<div class="count">2</div>
<a href="" class="btn btn-radius w-40">
<i class="fa-solid fa-plus"></i>
</a>
<div class="price">$7.75</div>
</div>
<div class="order">
<div class="image">
<img class="rounded-image"
src="https://food.fnr.sndimg.com/content/dam/images/food/fullset/2013/5/8/0/FN_Melissa-DArabian-Burger_s4x3.jpg.rend.hgtvcom.616.462.suffix/1371616351111.jpeg"
width="40" height="40" alt="">
</div>
<h2 class="brand-title">Mushroom Burgers</h2>
<a href="" class="btn btn-pink btn-radius w-40">
<i class="fa-solid fa-minus"></i>
</a>
<div class="count">2</div>
<a href="" class="btn btn-radius w-40">
<i class="fa-solid fa-plus"></i>
</a>
<div class="price">$3.50</div>
</div>
<div class="line"></div>
<div class="order">
<div class="image">
<img class="rounded-image"
src="https://food.fnr.sndimg.com/content/dam/images/food/fullset/2013/5/8/0/FN_Melissa-DArabian-Burger_s4x3.jpg.rend.hgtvcom.616.462.suffix/1371616351111.jpeg"
width="40" height="40" alt="">
</div>
<h2 class="brand-title">Mushroom Burgers</h2>
<input type="text" class="value" value="2">
<div class="price">$3.50</div>
</div>
</div>
<button class="pay-btn">
<i class="fa-brands fa-paypal"></i> Pay with Cashless Credit
</button>
</div>
</div>
</div>
</body>
</html>* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #ededed;
backdrop-filter: blur(40px);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Poppins', sans-serif;
}
/* width */
::-webkit-scrollbar {
width: 6px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 15px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
border-radius: 15px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
.content {
width: 90%;
height: 90%;
border-radius: 15px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
background: #fff;
overflow: hidden;
}
.container {
display: flex;
justify-content: space-between;
height: 100%;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: #2a2a2a;
font-size: 12px;
font-family: 'Poppins', sans-serif;
font-weight: 500;
width: 86px;
height: 40px;
background: #f4f5f6;
border-radius: 8px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
text-decoration: none;
}
.w-40 {
width: 40px;
}
.mb-30 {
margin-bottom: 30px;
}
.btn-alert {
background: #fbecee;
color: #ef708a;
}
.help-btn span {
margin-left: 5px;
}
.left-side {
width: 60%;
padding: 1.5rem;
overflow-y: scroll;
}
.right-side {
flex: 1;
padding: 1.5rem;
overflow-y: scroll;
}
.actions {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
}
.title {
color: #2a2a2a;
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
}
.orders {
margin-top: 40px;
}
.order {
display: flex;
align-items: center;
justify-content: space-around;
background-color: #fff;
margin-bottom: 40px;
}
.image {
width: 40px;
height: 40px;
background: #f4f5f6;
border-radius: 20%;
padding: 3px;
}
.image img {
opacity: .8;
cursor: pointer;
}
.image img:hover {
opacity: .9;
}
.btn-pink {
background-color: #ed5575;
color: #fff;
}
.brand-title {
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
width: 120px;
word-wrap: break-word;
}
.rounded-image {
border-radius: 20%;
object-fit: cover;
}
.price {
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 700;
width: 60px;
text-align: left;
}
.main-content {
display: flex;
align-items: center;
justify-content: space-between;
}
.ml-5 {
margin-left: 5px;
}
.products {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
}
.card {
width: 200px;
height: 300px;
border: 1px dashed rgba(149, 157, 165, 0.2);
border-radius: 15px;
padding: 0.85rem;
display: flex;
flex-direction: column;
}
.card img {
width: 100%;
height: 130px;
object-fit: cover;
border-radius: 15px;
align-self: flex-end;
display: flex;
margin-top: auto;
opacity: .8;
}
.card img:hover {
opacity: .9;
cursor: pointer;
}
.card h2 {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 700;
margin-bottom: 4px;
margin-top: 8px;
}
.card .weight {
color: #888;
margin-top: 10px;
}
.card .price {
color: #f28731;
font-size: 20px;
font-family: 'Poppins', sans-serif;
margin-bottom: 10px;
}
.pay-btn {
bottom: 0;
position: sticky;
background: linear-gradient(45deg, rgba(255, 102, 65, 0.6), rgba(255, 102, 65, 0.9));
color: #fff;
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
cursor: pointer;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
border-radius: 15px;
border: none;
outline: none;
padding: 1rem;
width: 100%;
}
.barcode {
position: relative;
}
.barcode .fa-barcode {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
.barcode .scan {
width: 450px;
padding: 1.25rem 1.25rem 1.25rem 3rem;
border-radius: 15px;
border: none;
outline: none;
background: #f4f5f6;
font-size: 14px;
font-family: 'Poppins', sans-serif;
font-weight: 300;
}
.value {
width: 40px;
height: 38px;
padding-left: 15px;
padding-right: 15px;
border-radius: 15px;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
font-weight: 300;
background: #f4f5f6;
color: #2a2a2a;
}
.line {
border-bottom: 1px dashed #ddd;
margin-bottom: 8px;
}
.fa-circle-minus {
margin-right: 4px;
}
.btn-radius {
border-radius: 50%;
}
.h-61 {
height: 61px;
}
.categories {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-top: 20px;
margin-bottom: 0;
}
.categories a {
width: 6rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem;
border-radius: 15px;
border: none;
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 12px;
color: #2a2a2a;
text-decoration: none;
}
.categories .active {
background: #f07613;
color: #fff;
}