- Gồm có slider chứa các hình ảnh, slogan của shop và phần trình bày, giới thiệu sơ lược về shop nông sản, giới thiệu các sản phẩm nổi bật của shop.. Hình 3: Giới thiệu về shop và các ch
Trang 1BỘ GIÁO DỤC VÀ ĐẠO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP.HCM
Giảng viên hướng dẫn: GV TS Nguyễn Thành Sơn
Trang 2MỤC LỤC
A BỐ CỤC TRANG WEB 3
1 Header 3
2 Content 3
2.1 Trang chủ (index) 3
2.2 Giới Thiệu 5
2.3 Tư vấn 6
2.4 Sản phẫm 7
2.5 Pages 10
3 Footer: 11
B CÁC HIỆU ỨNG TRONG TRANG WEB: 12
1 Hiệu ứng di chuyển về đầu trang 12
2 Khi con trỏ chuột đi qua sẻ chuyển màu 14
3 Hiệu ứng hình ảnh xoay tròn 16
4 Hiệu ứng hình ảnh đc phóng to lên 1.1 lần khi trỏ chuột vào 18
5 Hiệu ứng tự chạy bình luận 20
Trang 3- Gồm có slider chứa các hình ảnh, slogan của shop và phần trình bày, giới thiệu
sơ lược về shop nông sản, giới thiệu các sản phẩm nổi bật của shop
Hình 2: Slider và Slogan của shop
Trang 4Hình 3: Giới thiệu về shop và các chứng chỉ của shop, thời gian tư vấn và
hotline
Hình 3: Giới thiệu quy trình hình thành nên sản phẫm nông sản của shop
và lời chào của shop đến với khách hàng đến với web shop
Trang 5Hình 4: Hình ảnh và giá tiền, công dụng hàm lượng dinh dưỡng của sản
phẩm nổi bật
2.2 Giới Thiệu
- Show về các chứng chỉ thực phẩm của shop và team sáng lập nên shop
Hình 5: Giới thiệu các chứng chỉ shop đã được công nhận
Trang 6Hình 6: Giới thiệu team sáng lập 2.3 Tư vấn
- Giới thiệu về các chuyên gia tư vấn của công ty, chứng chỉ nông sản lời cam kết khi mua hàng và số hotline của shop
Trang 7Hình 7: Hình ảnh các chuyên gia dinh dưỡng và các chuyên gia nông nghiệp và bảo
đảm khi mua sản phẫm của shop 2.4 Sản phẫm
- Trình bầy các sản phẩm đáng để mua của shop thành 5 tab ( thực phẩm, thịt, hoa quả, rau củ và đặc sản)
Hình 8: Hình ảnh tab thực phẩm của shop hàm và lượng dinh dưỡng của các thực
phẩm
Trang 8Hình 9: Hình ảnh tab thịt của shop hàm và lượng dinh dưỡng của các loại thịt
Hình 10: Hình ảnh tab hoa quả của shop hàm và lượng dinh dưỡng của các hoa quả
Trang 9Hình 11: Hình ảnh tab rau củ của shop hàm và lượng dinh dưỡng của các loại rau
củ
Hình 12: Hình ảnh tab đặc sản của shop hàm và lượng dinh dưỡng của các đặc sản
Trang 10
2.5 Pages
2.5.1 Đặt hàng
- Gồm có các mục để khách hàng có thể điền họ tên, địa chỉ email, ngày giờ
muốn nhận hàng, số lượng hàng muốn mua và sản phẩm muốn mua
Hình 13: div đạt hàng online và div video quy trình trồng trọt của shop
Trang 113 Footer:
Hình 15: Footer của Trang web
Trang 12B CÁC HIỆU ỨNG TRONG TRANG WEB:
1 Hiệu ứng di chuyển về đầu trang
width: 48px; /*chiều cao của nút là 48px*/
height: 48px; /*chiều cao của nút là 48px*/
Trang 13display: flex;
align-items: center; /*mủi tên theo chiều dọc ở giữa nút*/
justify-content: center; /*mủi tên theo chiều ngang ở giữa nút.*/ font-weight: normal; /*độ đậm của font chữ ( mủi tên)*/
Trang 142 Khi con trỏ chuột đi qua sẻ chuyển màu
<h5 style="text-align: center">Cao Thị Thu Hương</h5>
<p style="text-align: center">là một chuyên gia dinh dưỡng hàng đầu với hơn 30 năm kinh nghiệm.</p>
Trang 15/*tốc độ xuất hiện nền khi trỏ chuột 0.5s*/
Trang 16Hình 18: Khi đã trỏ chuột vào
background-position: center center;
/* hình ảnh được căn giữa*/
background-repeat: no-repeat;
background-size: cover;
}
.hero-header img {
Trang 17animation: imgRotate 50s linear infinite;
/* Thời gian để hoàn thành một vòng quay của hình ảnh là 50 giây*/
Trang 184 Hiệu ứng hình ảnh đc phóng to lên 1.1 lần khi trỏ chuột vào
Code HTML:
<div class="team-item text-center rounded overflow-hidden">
<div class="rounded-circle overflow-hidden m-4">
<img class="img-fluid" src="img/THIỆN.jpg" >
</div>
<h5 class="mb-0">Ngô Chí Thiện</h5>
<small>Nhà Đầu Tư</small>
<div class="d-flex justify-content-center mt-3">
<a class="btn btn-square btn-primary mx-1"
href="https://www.facebook.com/profile.php?id=100028873568968"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-square btn-primary mx-1" href="https://x.com/"><i class="fab fa-twitter"></i></a>
<a class="btn btn-square btn-primary mx-1"
href="https://www.instagram.com/"><i class="fab fa-instagram"></i></a>
Trang 20Hình 21: Khi trỏ chuột vào
5 Hiệu ứng tự chạy bình luận.
Code HTML: ( có 4 đoạn code tương tự)
<div class="testimonial-item bg-transparent border rounded p-4">
<i class="fa fa-quote-left fa-2x text-primary mb-3"></i>
<p>Nông sản tươi mát, chất lượng vượt trội! Mỗi sản phẩm đều giữ nguyên hương vị tự nhiên, đúng là đặc sản của vùng.</p>
<div class="d-flex align-items-center">
<img class="img-fluid flex-shrink-0 rounded-circle"
src="img/trung.jpg" style="width: 50px; height: 50px;">
<div class="ps-3">
Trang 21<h5 class="mb-1"><a
href="https://www.facebook.com/lvutr04">Lê Vũ Trung</a></h5> <small>Khách hàng </small>
</div>
</div>
</div>
Code CSS:
.testimonial-carousel owl-item testimonial-item,
.testimonial-carousel owl-item.center testimonial-item * {
transition: 5s;
/* tốc độ xuất hiện hiệu ứng là chuyển bình luận 5s*/
}
.testimonial-carousel owl-item.center testimonial-item {
background: var( primary) !important; /* màu nền của phần tử*/ border-color: var( primary) !important; /*màu viền của phần tử*/}
.testimonial-carousel owl-item.center testimonial-item * {
color: var( light) !important;
}
.testimonial-carousel owl-dots {
margin-top: 24px; /*lề trên cho các nút chấm là 24px.*/
display: flex; /*nút chấm theo kiểu flexbox.*/
align-items: flex-end; /*nút chấm dọc theo phía dưới */
justify-content: center; /*nút chấm ngang theo giữa */
}
.testimonial-carousel owl-dot {
Trang 22position: relative; /*vị nút chấm theo vị trí tương đối*/
display: inline-block; /*nút chấm như một khối nội tuyến.*/
margin: 0 5px;
width: 15px; /*kích thước của nút chấm chiều rộng 15 pixel.*/
height: 15px; /* kích thước của nút chấm chiều cao 15 pixel*/
border: 1px solid #CCCCCC; /*màu sắc của nút và đường viền dày 1 pixel*/