Gitlab@Informatics

Skip to content
Snippets Groups Projects
Commit ea7bcf64 authored by 65160394's avatar 65160394
Browse files

Project Round 4

parent ac47078c
No related branches found
No related tags found
No related merge requests found
/* Reset styles */ /* รีเซ็ตค่าเริ่มต้น */
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Arial', sans-serif;
} }
body { body {
font-family: 'Arial', sans-serif; background-color: #f4f4f4;
background-color: #f4f7f6;
color: #333; color: #333;
line-height: 1.6; line-height: 1.6;
} }
/* HEADER */
header { header {
background-color: #4CAF50; background: #0073e6;
color: white; color: #fff;
padding: 20px 0; padding: 20px;
text-align: center; text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
} }
nav { nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 20px; gap: 15px;
margin-top: 15px; margin-top: 10px;
} }
nav a { nav a {
color: white; color: #fff;
text-decoration: none; text-decoration: none;
font-size: 1.1rem; font-weight: bold;
padding: 8px 16px; padding: 10px 15px;
transition: background-color 0.3s ease; background: rgba(255, 255, 255, 0.2);
border-radius: 5px;
transition: 0.3s;
} }
nav a:hover { nav a:hover {
background-color: #45a049; background: rgba(255, 255, 255, 0.5);
border-radius: 5px;
} }
/* SEARCH BAR */
form {
display: inline-flex;
margin-top: 10px;
}
input[type="text"] {
padding: 8px;
border: none;
border-radius: 5px 0 0 5px;
width: 200px;
}
button {
padding: 8px 12px;
border: none;
background: #ff5722;
color: white;
border-radius: 0 5px 5px 0;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background: #e64a19;
}
/* SECTION */
section { section {
max-width: 1200px; max-width: 800px;
margin: 30px auto; margin: 30px auto;
background: white;
padding: 20px; padding: 20px;
background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} }
section h2 { h2 {
font-size: 2rem; color: #0073e6;
color: #333;
margin-bottom: 20px;
text-align: center; text-align: center;
margin-bottom: 15px;
} }
/* TOUR LIST */
ul { ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
list-style: none; list-style: none;
} }
ul li { ul li {
background-color: #f9f9f9; background: #fff;
padding: 20px; padding: 15px;
border-radius: 8px; margin: 10px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-left: 5px solid #0073e6;
transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex;
} justify-content: space-between;
align-items: center;
ul li:hover {
transform: translateY(-10px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
} }
ul li a { ul li a {
font-size: 1.2rem;
color: #333;
text-decoration: none; text-decoration: none;
color: #0073e6;
font-weight: bold; font-weight: bold;
display: block;
margin-bottom: 10px;
} }
ul li span { ul li a:hover {
font-size: 1rem; text-decoration: underline;
color: #4CAF50;
} }
.btn-create, .btn-edit { /* BUTTONS */
display: inline-block; .btn-create, .btn-edit, .btn-delete {
padding: 10px 20px; padding: 8px 12px;
background-color: #008CBA; border: none;
color: white; color: white;
text-decoration: none;
border-radius: 5px; border-radius: 5px;
margin-top: 20px;
font-size: 1rem;
transition: background-color 0.3s ease;
}
.btn-create:hover, .btn-edit:hover {
background-color: #007bb5;
}
.btn-delete {
display: inline-block;
padding: 10px 20px;
background-color: #ff0000;
color: white;
text-decoration: none; text-decoration: none;
border-radius: 5px; cursor: pointer;
margin-top: 20px; transition: 0.3s;
font-size: 1rem;
transition: background-color 0.3s ease;
} }
.btn-delete:hover { .btn-create {
background-color: #e72323; background: #28a745;
} }
footer { .btn-edit {
background-color: #333; background: #ffc107;
color: white;
text-align: center;
padding: 20px 0;
margin-top: 40px;
} }
footer p { .btn-delete {
font-size: 1rem; background: #dc3545;
}
/* Mobile Responsive */
@media (max-width: 768px) {
header h1 {
font-size: 2rem;
} }
nav { .btn-create:hover {
flex-direction: column; background: #218838;
} }
nav a { .btn-edit:hover {
font-size: 1rem; background: #e0a800;
padding: 10px;
} }
section { .btn-delete:hover {
margin: 20px; background: #c82333;
} }
ul { /* FOOTER */
grid-template-columns: 1fr; footer {
} text-align: center;
padding: 20px;
background: #333;
color: white;
margin-top: 30px;
} }
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</head> </head>
<body> <body>
<header> <header>
<h1>Welcome to Our Tour Website</h1> <h1>Welcome to JourneyHub</h1>
<nav> <nav>
<a href="/">Home</a> <a href="/">Home</a>
<% if (session.userId) { %> <% if (session.userId) { %>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment