Restraunt © all rights reserved
Đây là tất cả 300 dòng mã và bạn có thể thấy đầu ra dưới đây chỉ với đầu ra mã HTML của trang web nhà hàng. Sau đó, chúng tôi thêm CSS để tạo kiểu cho trang web nhà hàng của chúng tôi. Chúng tôi sử dụng FONT ICON tuyệt vời và liên kết CDN jQuery. Và tất cả các phần tử HTML khác tạo ra với các thẻ cơ bản.
Trang web danh mục đầu tư bằng cách sử dụng HTML CSS và JavaScript [Mã nguồn]
Chỉ đầu ra mã HTML cho trang web nhà hàng
Đầu ra HTML cho nhà hàng Trang web
Html Output For Restaurant Website
Html Output For Restaurant Website
Html Output For Restaurant Website
Đây là tất cả đầu ra hình ảnh mà chúng tôi tạo chỉ bằng HTML. Bây giờ là lúc để tạo kiểu cho trang web nhà hàng của chúng tôi bằng CSS😍.
Mã CSS cho trang web nhà hàng
@import url["//fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"];
*,
*::after,
*::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.html {
font-size: 62.5%;
}
body {
font-family: "Poppins", sans-serif;
}
/* ///////////..utility classes../////////// */
.container {
max-width: 1200px;
width: 90%;
margin: auto;
}
.btn {
display: inline-block;
padding: 0.5em 1.5em;
text-decoration: none;
border-radius: 50px;
cursor: pointer;
outline: none;
margin-top: 1em;
text-transform: uppercase;
font-weight: small;
}
.btn-primary {
color: #fff;
background: #16a083;
}
.btn-primary:hover {
background: #117964;
transition: background 0.3s ease-in-out;
}
/* ............/navbar/............ *
/* desktop mode............/// */
.navbar input[type="checkbox"],
.navbar .hamburger-lines {
display: none;
}
.navbar {
box-shadow: 0px 5px 10px 0px #aaa;
position: fixed;
width: 100%;
background: #fff;
color: #000;
opacity: 0.85;
height: 50px;
z-index: 12;
}
.navbar-container {
display: flex;
justify-content: space-between;
height: 64px;
align-items: center;
}
.menu-items {
order: 2;
display: flex;
}
.menu-items li {
list-style: none;
margin-left: 1.5rem;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.menu-items a {
text-decoration: none;
color: #444;
font-weight: 500;
transition: color 0.3s ease-in-out;
}
.menu-items a:hover {
color: #117964;
transition: color 0.3s ease-in-out;
}
.logo {
order: 1;
font-size: 2.3rem;
margin-bottom: 0.5rem;
}
/* ............//// Showcase styling ////......... */
.showcase-area {
height: 50vh;
background: linear-gradient[
rgba[240, 240, 240, 0.144],
rgba[255, 255, 255, 0.336]
],
url["//i.postimg.cc/wT3TQS3V/header-image2.jpg"];
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.showcase-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
font-size: 1.6rem;
}
.main-title {
text-transform: uppercase;
margin-top: 1.5em;
}
/* ......//about us//...... */
#about {
padding: 50px 0;
background: #f5f5f7;
}
.about-wrapper {
display: flex;
flex-wrap: wrap;
}
#about h2 {
font-size: 2.3rem;
}
#about p {
font-size: 1.2rem;
color: #555;
}
#about .small {
font-size: 1.2rem;
color: #666;
font-weight: 600;
}
.about-img {
flex: 1 1 400px;
padding: 30px;
transform: translateX[150%];
animation: about-img-animation 1s ease-in-out forwards;
}
@keyframes about-img-animation {
100% {
transform: translate[0];
}
}
.about-text {
flex: 1 1 400px;
padding: 30px;
margin: auto;
transform: translate[-150%];
animation: about-text-animation 1s ease-in-out forwards;
}
@keyframes about-text-animation {
100% {
transform: translate[0];
}
}
.about-img img {
display: block;
height: 400px;
max-width: 100%;
margin: auto;
object-fit: cover;
object-position: right;
}
/* ..........////Food category///........... */
#food {
padding: 5rem 0 10rem 0;
}
#food h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 400;
margin-bottom: 40px;
text-transform: uppercase;
color: #555;
}
.food-container {
display: flex;
justify-content: space-between;
}
.food-container img {
display: block;
width: 100%;
margin: auto;
max-height: 300px;
object-fit: cover;
object-position: center;
}
.img-container {
margin: 0 1rem;
position: relative;
}
.img-content {
position: absolute;
top: 70%;
left: 50%;
transform: translate[-50%, -50%];
opacity: 0;
z-index: 2;
text-align: center;
transition: all 0.3s ease-in-out 0.1s;
}
.img-content h3 {
color: #fff;
font-size: 2.2rem;
}
.img-content a {
font-size: 1.2rem;
}
.img-container::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba[0, 0, 0, 0.871];
opacity: 0;
z-index: 1;
transform: scaleY[0];
transform-origin: 100% 100%;
transition: all 0.3s ease-in-out;
}
.img-container:hover::after {
opacity: 1;
transform: scaleY[1];
}
.img-container:hover .img-content {
opacity: 1;
top: 40%;
}
/* .........../Food Menu/............ */
.food-menu-heading {
text-align: center;
font-size: 3.4rem;
font-weight: 400;
color: #666;
}
.food-menu-container {
display: flex;
flex-wrap: wrap;
padding: 50px 0px 30px 0px;
}
.food-menu-container img {
display: block;
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
object-position: center;
}
.food-menu-item {
display: flex;
flex: 1 1 600px;
justify-content: space-evenly;
margin-bottom: 3rem;
}
.food-description {
margin: auto 1.5rem;
}
.font-title {
font-size: 1.8rem;
font-weight: 400;
color: #444;
}
.food-description p {
font-size: 1.4rem;
color: #555;
font-weight: 500;
}
.food-description .food-price {
color: #117964;
font-weight: 700;
}
/* ........./ Testimonial /.......... */
#testimonials {
padding: 5rem 0;
background: rgba[243, 243, 243];
}
.testimonial-title {
text-align: center;
font-size: 2.8rem;
font-weight: 400;
color: #555;
}
.testimonial-container {
display: flex;
justify-content: space-between;
font-size: 1.4rem;
padding: 1rem;
}
.testimonial-box .checked {
color: #ff9529;
}
.testimonial-box .testimonial-text {
margin: 1rem 0;
color: #444;
}
.testimonial-box {
text-align: center;
padding: 1rem;
}
.customer-photo img {
display: block;
width: 150px;
height: 150px;
object-fit: cover;
object-position: center;
border-radius: 50%;
margin: auto;
}
/* ........ Contact Us........... */
#contact {
padding: 5rem 0;
background: rgb[226, 226, 226];
}
.contact-container {
display: flex;
background: #fff;
}
.contact-img {
width: 50%;
}
.contact-img img {
display: block;
height: 400px;
width: 100%;
object-position: center;
object-fit: cover;
}
.form-container {
padding: 1rem;
width: 50%;
margin: auto;
}
.form-container input {
display: block;
width: 100%;
border: none;
border-bottom: 2px solid #ddd;
padding: 1rem 0;
box-shadow: none;
outline: none;
margin-bottom: 1rem;
color: #444;
font-weight: 500;
}
.form-container textarea {
display: block;
width: 100%;
border: none;
border-bottom: 2px solid #ddd;
color: #444;
outline: none;
padding: 1rem 0;
resize: none;
}
.form-container h2 {
font-size: 2.7rem;
font-weight: 500;
color: #444;
margin-bottom: 1rem;
margin-top: -1.2rem;
}
.form-container a {
font-size: 1.3rem;
}
#footer h2 {
text-align: center;
font-size: 1.8rem;
padding: 2.6rem;
font-weight: 500;
color: #fff;
background: rgb[65, 65, 65];
}
/* ......../ media query /.......... */
@media [max-width: 768px] {
.navbar {
opacity: 0.95;
}
.navbar-container input[type="checkbox"],
.navbar-container .hamburger-lines {
display: block;
}
.navbar-container {
display: block;
position: relative;
height: 64px;
}
.navbar-container input[type="checkbox"] {
position: absolute;
display: block;
height: 32px;
width: 30px;
top: 20px;
left: 20px;
z-index: 5;
opacity: 0;
}
.navbar-container .hamburger-lines {
display: block;
height: 23px;
width: 35px;
position: absolute;
top: 17px;
left: 20px;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.navbar-container .hamburger-lines .line {
display: block;
height: 4px;
width: 100%;
border-radius: 10px;
background: #333;
}
.navbar-container .hamburger-lines .line1 {
transform-origin: 0% 0%;
transition: transform 0.4s ease-in-out;
}
.navbar-container .hamburger-lines .line2 {
transition: transform 0.2s ease-in-out;
}
.navbar-container .hamburger-lines .line3 {
transform-origin: 0% 100%;
transition: transform 0.4s ease-in-out;
}
.navbar .menu-items {
padding-top: 100px;
background: #fff;
height: 100vh;
max-width: 300px;
transform: translate[-150%];
display: flex;
flex-direction: column;
margin-left: -40px;
padding-left: 50px;
transition: transform 0.5s ease-in-out;
box-shadow: 5px 0px 10px 0px #aaa;
}
.navbar .menu-items li {
margin-bottom: 1.5rem;
font-size: 1.3rem;
font-weight: 500;
}
.logo {
position: absolute;
top: 5px;
right: 15px;
font-size: 2rem;
}
.navbar-container input[type="checkbox"]:checked ~ .menu-items {
transform: translateX[0];
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
transform: rotate[35deg];
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
transform: scaleY[0];
}
.navbar-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
transform: rotate[-35deg];
}
/* ......./ food /......... */
.food-container {
flex-direction: column;
align-items: stretch;
}
.food-type:not[:last-child] {
margin-bottom: 3rem;
}
.food-type {
box-shadow: 5px 5px 10px 0 #aaa;
}
.img-container {
margin: 0;
}
}
@media [max-width: 500px] {
html {
font-size: 65%;
}
.navbar .menu-items li {
font-size: 1.6rem;
}
.testimonial-container {
flex-direction: column;
text-align: center;
}
.food-menu-container img {
margin: auto;
}
.food-menu-item {
flex-direction: column;
text-align: center;
}
.form-container {
width: 90%;
}
.contact-container {
display: flex;
flex-direction: column;
}
.contact-img {
width: 90%;
margin: 3rem auto;
}
.logo {
position: absolute;
top: 06px;
right: 15px;
font-size: 3rem;
}
.navbar .menu-items li {
margin-bottom: 2.5rem;
font-size: 1.8rem;
font-weight: 500;
}
}
@media [min-width: 769px] and [max-width: 1200px] {
.img-container h3 {
font-size: 1.5rem;
}
.img-container .btn {
font-size: 0.7rem;
}
}
@media [orientation: landscape] and [max-height: 500px] {
.showcase-area {
height: 50vmax;
}
}
Đây là toàn bộ mã CSS của chúng tôi với hơn 600 dòng. Chúng tôi tạo kiểu cho trang web nhà hàng của chúng tôi từng bước. Chúng tôi phong cách lớp tiện ích sau đó tạo kiểu cho navbar của chúng tôi. Sau Navbar, chúng tôi đã tạo kiểu cho mọi phần HTML.
Và vào cuối mã, chúng tôi sử dụng các truy vấn truyền thông để làm cho trang web nhà hàng của chúng tôi hoàn toàn đáp ứng và thân thiện với thiết bị di động. Vì vậy, bạn có thể thấy đầu ra với mã CSS. Sau đó, chúng tôi thêm một chút JavaScript cho hiệu ứng cuộn nếu không trang web của chúng tôi hoàn toàn sẵn sàng với mã.
Hơn 10 ý tưởng dự án JavaScript cho người mới bắt đầu [Mã nguồn dự án]
HTML + CSS Cập nhật đầu ra của trang web nhà hàng
Bạn có thể đầu ra tuyệt vời này với CSS. Bây giờ chúng tôi thêm JavaScript để cuộn trơn tru, đây là hoàn toàn tùy chọn để thêm JS trong dự án này.
Mã JavaScript cho trang web nhà hàng
$[document].ready[function [] {
// Add smooth scrolling to all links
$["a"].on["click", function [event] {
// Make sure this.hash has a value before overriding default behavior
if [this.hash !== ""] {
// Prevent default anchor click behavior
event.preventDefault[];
// Store hash
var hash = this.hash;
// Using jQuery's animate[] method to add smooth page scroll
// The optional number [800] specifies the number of milliseconds it takes to scroll to the specified area
$["html, body"].animate[
{
scrollTop: $[hash].offset[].top,
},
800,
function [] {
// Add hash [#] to URL when done scrolling [default click behavior]
window.location.hash = hash;
}
];
} // End if
}];
}];
Đó là nó cho toàn bộ mã trang web nhà hàng của chúng tôi. Chúng tôi viết mọi mã hữu ích như làm cho trang web thân thiện với thiết bị di động và thêm các truy vấn truyền thông cho việc này. Thêm mã jQuery để cuộn trơn tru trên trang web nhà hàng.
Hơn 50 dự án mặt trước với mã nguồn | Các dự án phía trước có mã nguồn
Sản lượng cuối cùng cho trang web nhà hàng
Bạn có thể thấy đầu ra video này để xem đầu ra hoàn chỉnh. Bạn có thể thấy làm thế nào trơn tru của trang web cuộn và thiết kế này.
//www.codewithrandom.com/wp-content/uploads/2022/08/restourent-website.mp4
Hy vọng bạn thích dự án này, chúng tôi tạo ra của riêng bạn và sử dụng dự án này trong bất kỳ dự án nào như một phần dự án như phần Đánh giá, Mẫu liên hệ. Nếu bạn cần bất kỳ frontend liên quan đến dự án. Ghé thăm trang chủ của chúng tôi và bạn nhận được hơn 100 dự án.
Máy tính tuổi sử dụng HTML CSS JavaScript [Mã nguồn]
Nếu bạn có bất kỳ bình luận nhầm lẫn nào bên dưới hoặc bạn có thể liên hệ với chúng tôi bằng cách điền vào mẫu liên hệ của chúng tôi từ phần nhà. 🤞🎉
Mã bằng cách - Sanket Bodake
Viết bởi - Codewithrandom
Tôi có thể tạo một trang web chỉ sử dụng HTML và CSS không?
Câu trả lời ngắn gọn là có, bạn có thể xây dựng một trang web đơn giản chỉ với HTML và CSS. Tuy nhiên, nếu bạn muốn bắt đầu xây dựng một số trang web thực sự tuyệt vời và linh hoạt hơn trong những gì bạn có thể làm, bạn cần sử dụng JavaScript, ngôn ngữ phụ trợ, lưu trữ web và cơ sở dữ liệu.yes, you can build a simple website with just HTML and CSS. However, if you want to start building some really cool websites, and have more flexibility in what you can do, you need to use JavaScript, a backend language, web hosting, and databases.
Trang web nào là tốt nhất của HTML và CSS?
Biên tập viên HTML và CSS tốt nhất..
Văn bản siêu phàm ..
TextPad..
BBEdit..
Komodo ide ..
Mã Visual Studio ..
Bluefish..
HTML và CSS được sử dụng như thế nào để tạo một trang web?
HTML [ngôn ngữ đánh dấu siêu văn bản] và CSS [bảng kiểu xếp tầng] là hai trong số các công nghệ cốt lõi để xây dựng các trang web.HTML cung cấp cấu trúc của trang, CSS bố cục [trực quan và âm thanh], cho nhiều thiết bị khác nhau.HTML provides the structure of the page, CSS the [visual and aural] layout, for a variety of devices.
7 bước để tạo một trang web bằng HTML và CSS là gì?
Lập kế hoạch bố cục của bạn.Bước đầu tiên của bất kỳ trang web nào là luôn luôn biết những gì bạn muốn trên đó và [mơ hồ] bạn muốn nó trông như thế nào.....
Lấy mã 'mã nồi hơi' được thiết lập.....
Tạo các yếu tố trong bố cục của bạn.....
Điền vào nội dung HTML.....
Thêm một số bố cục cơ bản CSS.....
Thêm phong cách cụ thể hơn.....
Thêm màu sắc và nền.....
Celebrate!.