Scribd
Upload
2 views

Kodingan Style tampilan css

The document provides CSS styles for various components of a web application, including login, registration, product details, cart, and purchase history pages. It features a consistent layout with responsive design elements, such as form containers, buttons, and hover effects. The styles utilize a modern color palette and typography to enhance user experience and visual appeal.

Uploaded by

jahidjihad33
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Kodingan Style tampilan css

The document provides CSS styles for various components of a web application, including login, registration, product details, cart, and purchase history pages. It features a consistent layout with responsive design elements, such as form containers, buttons, and hover effects. The styles utilize a modern color palette and typography to enhance user experience and visual appeal.

Uploaded by

jahidjihad33
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 20

Kodingan Style tampilan css

1.log in dan registrasi


/* General Reset and Body Styling */

body {

font-family: 'Arial', sans-serif;

background-color: #f5f5f5;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

color: #333;

.form-container {

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

padding: 20px;

width: 90%;

max-width: 380px;

h1 {

text-align: center;

color: black;

}
.form-group {

margin-bottom: 15px;

label {

display: block;

margin-bottom: 5px;

font-weight: bold;

font-size: 14px;

input[type="email"],

input[type="password"],

input[type="text"] {

padding: 12px;

width: 93.5%;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 14px;

transition: border 0.3s ease;

input[type="email"]:focus,

input[type="password"]:focus,

input[type="text"]:focus {

border-color: #007BFF;

outline: none;

button {
background-color: #007BFF;

color: white;

padding: 12px;

width: 100%;

border: none;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s ease;

button:hover {

background-color: #0056b3;

p{

text-align: center;

font-size: 14px;

margin-top: 20px;

a{

color: #007BFF;

text-decoration: none;

a:hover {

text-decoration: underline;

/* Styling for Toggle Between Forms */


#register {

display: none;

2.BERANDA
/* General Reset and Body Styling */

body {

font-family: 'Arial', sans-serif;

background-color: #f5f5f5;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

color: #333;

.form-container {

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

padding: 20px;

width: 90%;

max-width: 380px;

h1 {

text-align: center;

color: black;
}

.form-group {

margin-bottom: 15px;

label {

display: block;

margin-bottom: 5px;

font-weight: bold;

font-size: 14px;

input[type="email"],

input[type="password"],

input[type="text"] {

padding: 12px;

width: 93.5%;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 14px;

transition: border 0.3s ease;

input[type="email"]:focus,

input[type="password"]:focus,

input[type="text"]:focus {

border-color: #007BFF;

outline: none;

}
button {

background-color: #007BFF;

color: white;

padding: 12px;

width: 100%;

border: none;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s ease;

button:hover {

background-color: #0056b3;

p{

text-align: center;

font-size: 14px;

margin-top: 20px;

a{

color: #007BFF;

text-decoration: none;

a:hover {

text-decoration: underline;

}
/* Styling for Toggle Between Forms */

#register {

display: none;

3.DETAIL PRODUK
/* General Reset and Body Styling */

body {

font-family: 'Arial', sans-serif;

background-color: #f5f5f5;

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

color: #333;

.form-container {

background-color: white;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

padding: 20px;

width: 90%;

max-width: 380px;

h1 {

text-align: center;

color: black;
}

.form-group {

margin-bottom: 15px;

label {

display: block;

margin-bottom: 5px;

font-weight: bold;

font-size: 14px;

input[type="email"],

input[type="password"],

input[type="text"] {

padding: 12px;

width: 93.5%;

border: 1px solid #ccc;

border-radius: 5px;

font-size: 14px;

transition: border 0.3s ease;

input[type="email"]:focus,

input[type="password"]:focus,

input[type="text"]:focus {

border-color: #007BFF;

outline: none;

}
button {

background-color: #007BFF;

color: white;

padding: 12px;

width: 100%;

border: none;

border-radius: 5px;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s ease;

button:hover {

background-color: #0056b3;

p{

text-align: center;

font-size: 14px;

margin-top: 20px;

a{

color: #007BFF;

text-decoration: none;

a:hover {

text-decoration: underline;

}
/* Styling for Toggle Between Forms */

#register {

display: none;

4.KERANJANG
body {

font-family: 'Roboto', sans-serif;

margin: 0;

padding: 0;

background-color: #f3f4f6;

color: #333;

header {

background-color: #6c757d;

color: white;

padding: 15px 20px;

display: flex;

justify-content: space-between;

align-items: center;

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

header h1 {

margin: 0;

font-size: 1.5rem;

nav a {
color: white;

text-decoration: none;

font-size: 1rem;

padding: 8px 12px;

border-radius: 5px;

transition: background-color 0.3s;

nav a:hover {

background-color: #45a049;

.container {

padding: 20px;

max-width: 800px;

margin: 40px auto;

margin-bottom: 10px;

background-color: white;

border-radius: 12px;

box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);

.cart-item {

display: flex;

align-items: center;

justify-content: space-between;

padding: 15px 0;

border-bottom: 1px solid #ccc;

.cart-item img {
max-width: 80px;

border-radius: 8px;

.cart-item-info {

flex: 1;

margin-left: 15px;

.cart-item-info h3 {

margin: 0;

font-size: 1.2rem;

.cart-item-info p {

margin: 5px 0;

.cart-item button {

background-color: #ff4d4d;

color: white;

border: none;

padding: 5px 10px;

cursor: pointer;

font-size: 1rem;

border-radius: 5px;

transition: background-color 0.3s;

.cart-item button:hover {

background-color: #e60000;
}

.cart-summary {

display: flex;

justify-content: space-between;

padding: 20px 0;

border-top: 2px solid #ccc;

.cart-summary p {

font-size: 1.2rem;

.checkout-button {

background-color: #4CAF50;

color: white;

border: none;

padding: 12px 20px;

cursor: pointer;

font-size: 1.1rem;

border-radius: 8px;

transition: background-color 0.3s;

.checkout-button:hover {

background-color: #45a049;

.empty-cart {

text-align: center;

padding: 50px 0;
}

/* Overlay Styling */

.overlay {

display: none;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: rgba(0, 0, 0, 0.5);

justify-content: center;

align-items: center;

z-index: 1000;

.overlay .overlay-content {

background-color: white;

padding: 20px;

border-radius: 8px;

width: 500px;

.overlay .overlay-content h2 {

margin: 0 0 15px;

.overlay .overlay-content p {

margin: 5px 0;

}
.overlay .overlay-content input,

.overlay .overlay-content select {

width: 100%;

padding: 10px;

border-radius: 5px;

border: 1px solid #ccc;

.overlay .overlay-content input{

width: 95%;

margin-bottom: 10px;

.nama_pembeli{

margin-top: 20px;

.overlay .overlay-content button {

background-color: #4CAF50;

color: white;

border: none;

padding: 10px;

width: 100%;

cursor: pointer;

font-size: 1rem;

border-radius: 5px;

transition: background-color 0.3s;

.overlay .overlay-content button:hover {

background-color: #45a049;
}

.overlay .close-btn {

background-color: #ff4d4d;

color: white;

border: none;

padding: 10px 15px;

cursor: pointer;

font-size: 1rem;

border-radius: 5px;

position: absolute;

top: 10px;

right: 10px;

#payment{

margin-bottom: 10px;

5.RIWAYAT PEMBELIAN
body {

font-family: 'Arial', sans-serif;

margin: 0;

padding: 0;

background-color: #f8f9fa;

header {

background-color: #6c757d;

color: white;

padding: 10px 20px;


display: flex;

justify-content: space-between;

align-items: center;

header h1 {

margin: 0;

font-size: 1.5rem;

nav {

display: flex;

gap: 15px;

nav a {

color: white;

text-decoration: none;

font-size: 1rem;

padding: 5px 10px;

border-radius: 5px;

nav a:hover {

background-color: #5a6268;

/* Container Riwayat Pembelian */

#order-history {

width: 100%;

max-width: 900px;

margin: 20px auto;

background-color: white;

padding: 20px;

border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

/* Tampilan setiap order */

.order {

margin-bottom: 30px;

padding: 20px;

border-radius: 8px;

background-color: #f9f9f9;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

.order h3 {

font-size: 22px;

font-weight: bold;

color: #333;

margin-bottom: 10px;

.order p {

font-size: 14px;

color: #555;

margin-bottom: 8px;

.order button {

background-color: #e74c3c;

color: white;

border: none;

padding: 8px 15px;

border-radius: 5px;
cursor: pointer;

.order button:hover {

background-color: #c0392b;

/* Daftar Produk */

.order-items {

margin-top: 15px;

.order-item {

display: flex;

align-items: center;

justify-content: space-between;

margin-bottom: 20px;

padding-bottom: 10px;

border-bottom: 1px solid #eee;

.order-item img {

width: 90px;

height: 90px;

object-fit: cover;

border-radius: 8px;

margin-right: 15px;

.order-item div {

flex-grow: 1;
}

.order-item p {

font-size: 14px;

color: #333;

margin-bottom: 5px;

.order-item .item-price,

.order-item .item-total {

font-weight: bold;

color: #2ecc71;

/* Garis Pemisah */

hr {

margin-top: 20px;

border: 0;

border-top: 1px solid #e0e0e0;

/* Pesan Riwayat Kosong */

#order-history p {

font-size: 16px;

color: #777;

text-align: left;

You might also like