Report 20232106

June 20, 2023June 21, 2023avrilquach Leave a comment

1 – HTML MOBILE – Chi tiết sản phẩm

Đánh giá trong chi tiết sản phẩm

2 – HTML MOBILE – Đăng ký / Đăng nhập

3 – HTML MOBILE – Thanh toán

Form yêu cầu xuất hóa đơn

4 – HTML MOBILE – Thương hiệu

5 – HTML MOBILE – Chi tiết thương hiệu

6 – HTML MOBILE – Tìm kiếm

7 – HTML MOBILE – Tài khoản – Đánh giá sản phẩm

8 – HTML MOBILE – Nhà bán hàng

Report 20232006

June 16, 2023June 20, 2023avrilquach Leave a comment

1 – HTML MOBILE – Trang chủ

Header trang chủ khi trượt xuống ẩn logo và giữ thanh search nha
Giá sốc hôm nay
Sản phẩm bán chạy

2 – HTML MOBILE – Chi tiết sản phẩm

Đánh giá trong chi tiết sản phẩm

3 – HTML MOBILE – Trang thanh toán – Popup

Không có địa chỉ nhận hàng
Phương thức vận chuyển
Phương thức thanh toán
Xuất hóa đơn
Mã giảm giá
Chi tiết mã giảm giá
Phương thức thanh toán – Tiền mặt
Xuất hóa đơn – Sửa Xóa

4 – HTML MOBILE – Trang Giỏ hàng rỗng

Danh sách các page rỗng chưa có dữ liệu

5 – HTML MOBILE – Trang thanh toán thành công

6 – HTML MOBILE – Thương hiệu

Sản phẩm tương tự
Xem thêm sản phẩm khác

7 – HTML MOBILE – Chi tiết thương hiệu

8 – HTML MOBILE – Trang thanh toán – Chọn địa chỉ nhận hàng

Cập nhật Input type Radio mới

9 – HTML MOBILE – Trang thanh toán – Thêm địa chỉ mới

Cập nhật Input type Radio mới

10 – HTML MOBILE – Tất cả các trang

Jquery không sử dụng style inline display mà chuyển sang class hidden

11 – HTML MOBILE – Danh mục sản phẩm

Thiết bị scroll không hoạt động

Report 20231906

June 14, 2023June 19, 2023avrilquach Leave a comment

1 – HTML MOBILE – Đăng nhập / Đăng ký

2 – HTML MOBILE – Tìm kiếm

Cửa hàng liên quan

3 – HTML MOBILE – Danh mục sản phẩm

Thiết bị lỗi không scroll

4 – HTML MOBILE – Trang chủ

Header trang chủ khi trượt xuống ẩn logo và giữ thanh search nha
Giá sốc hôm nay
Sản phẩm bán chạy

5 – HTML MOBILE – Chi tiết danh mục

6 – HTML MOBILE – Chi tiết sản phẩm

7 – HTML MOBILE – Trang Giỏ hàng

Popup mã giảm giá
Popup chi tiết mã giảm giá

8 – HTML MOBILE – Trang Giỏ hàng rỗng

9 – HTML MOBILE – Trang thanh toán

Địa chỉ nhận hàng và chưa có địa chỉ nhận hàng
Phương thức thanh toán
Phương thức giao hàng
Yêu cầu xuất hóa đơn
Chi tiết thanh toán và điều khoản sử dụng

10 – HTML MOBILE – Trang thanh toán – Popup

Không có địa chỉ nhận hàng
Phương thức vận chuyển
Phương thức thanh toán
Xuất hóa đơn
Mã giảm giá
Chi tiết mã giảm giá

11 – HTML MOBILE – Trang thánh toán – Đặt hàng thành công

12 – HTML MOBILE – Trang thanh toán – Chọn địa chỉ nhận hàng

Danh sách địa chỉ nhận hàng thay đổi nút input type radio

13 – HTML MOBILE – Trang thanh toán – Thêm địa chỉ mới

Thêm địa chỉ mới thay đổi nút input type radio loại địa chỉ

14 – HTML MOBILE – Tất cả các trang

Jquery không sử dụng style inline display mà chuyển sang class hidden

15 – HTML MOBILE – Tài khoản

16 – HTML MOBILE – Tài khoản – Thông tin tài khoản

Đổi mật khẩu
Cập nhật email
Cập nhật số điện thoại
Cập nhật hình ảnh đại diện
Email gửi OTP
Email cập nhật thành công

17 – HTML MOBILE – Tài khoản – Sổ địa chỉ

Sổ địa chỉ
Thêm địa chỉ mới
Xóa địa chỉ

18 – HTML MOBILE – Tài khoản – Quản lý đơn hàng

Danh sách đơn hàng
Chi tiết đơn hàng
Đơn hàng giao thành công
Đơn hàng bị hủy
Popup chọn đánh giá
Đánh giá đơn hàng
Popup hủy đơn hàng
Popup hủy đơn hàng thành công
Đơn hàng rỗng

19 – HTML MOBILE – Tài khoản – Quản lý đơn hàng – Đánh giá sản phẩm

Đánh giá
Popup đánh giá thành công
Popup rời khỏi đánh giá

20 – HTML MOBILE – Tài khoản – Thông báo

Thông báo đã xem
Thông báo chưa xem

21 – HTML MOBILE – Tài khoản – Đánh giá sản phẩm

22 – HTML MOBILE – Tài khoản – Sản phẩm đã xem

23 – HTML MOBILE – Tài khoản – Sản phẩm yêu thích

24 – HTML MOBILE – Tài khoản – Trợ giúp

25 – HTML MOBILE – Thương hiệu và Chi tiết thương hiệu

25 – HTML MOBILE – Nhà bán hàng

Report 20231606

June 14, 2023June 18, 2023avrilquach Leave a comment

1 – HTML DESKTOP – Trang Chi tiết sản phẩm => HTML

2 – HTML MOBILE – Trang Chi tiết sản phẩm => HTML

Popup sản phẩm thêm vào giỏ hàng

3 – HTML MOBILE – Trang Giỏ hàng = > HTML

Sản phẩm trên giỏ hàng
Jquery không sử dụng style inline display mà chuyển sang class hidden

4 – HTML MOBILE – Trang Giỏ hàng => HTML

Popup mã giảm giá
Popup chi tiết mã giảm giá

5 – HTML MOBILE – Trang thanh toán => HTML

Địa chỉ nhận hàng và chưa có địa chỉ nhận hàng
Phương thức thanh toán
Phương thức giao hàng
Yêu cầu xuất hóa đơn
Chi tiết thanh toán và điều khoản
Popup khi người dùng thanh toán không có địa chỉ đơn hàng
Khuyến mãi giảm giá
Popup mã giảm giá
Popup chi tiết mã giảm giá

6 – HTML MOBILE – Trang địa chỉ => HTML

Danh sách địa chỉ nhận hàng thay đổi nút input type radio

7 – HTML MOBILE – Trang thêm địa chỉ mới => HTML

Thêm địa chỉ mới thay đổi nút input type radio loại địa chỉ

8 – HTML MOBILE – Tất cả các trang

Thay đổi đường dẫn Image cho đúng folder trong bright_theme

9 – CSCART MOBILE – Trang chủ => Code Danh mục nổi bật trang cho đúng thiết kế chỉ hiện 5 danh mục cộng với xem tất cả

10 – CSCART MOBILE – Danh mục => Code trên thiết bị điện thoại không scroll được phần danh mục

Report 20231506

June 14, 2023June 16, 2023avrilquach Leave a comment

1 – HTML DESKTOP – Trang Chi tiết Sản Phẩm => HTML

2 – HTML DESKTOP – Trang Thương hiệu và Chi tiết thương hiệu => Cập nhật Jira

Thay đổi đường dẫn Image vào Folder Bright_theme
HTML Thương hiệu
HTML Chi tiết thương hiệu

3 – HTML DESKTOP – Trang chủ => Cập nhật Jira

HTML Danh Mục Nổi Bật đổi sang owl carousel
Thay đổi đường dẫn Image vào Folder Bright_theme

4 – CSCART MOBILE – Trang chủ, Danh mục, Chi tiết Danh Mục, Sản Phẩm, Tài khoản, Thông tin tài khoản , Địa chỉ, Thêm Địa chỉ, Quản lý đơn hàng, Chi tiết đơn hàng => Code Header

Thay đổi đường dẫn Image cho đúng folder trong bright_theme
Bỏ lazy Image

HTML, CSS, JAVASCRIPT là gì?

November 19, 2018avrilquach Leave a comment

HTML là ngôn ngữ dùng để viết website cấu trúc cơ bản như sau:

Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ dòng đầu tiên.
Thẻ <html> cho trình duyệt biết mở đầu và kết thúc của trang HTML.
Thẻ <head> chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác.
Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML.

=> Nói tóm lại html được ví như gạch đá xi măng để xây dựng một ngôi nhà (website).

CSS là ngôn ngữ thiết kế của nhiều thành phần HTML cho phép bạn chỉnh sửa trên những khu vưc html cho giao diện nó nhìn trông đẹp hơn trong mắt người dùng.

=> Nói tóm lại css được ví như sơn, hay những bộ phận trang trí cho ngôi nhà (website) trông đẹp hơn.

JAVASCRIPT là ngôn ngữ thao tác từ phía người dùng như đổi html này thành html khác, hoặc css này thành css khác nhưng nó không có lưu lại vào database, nó chủ yếu được nhìn thấy trên máy của người dùng.

=> Nói tóm lại bạn muốn thay đổi màu sắc của ngôi nhà màu gì cũng được, vị trí phòng ngủ(html) nằm đâu cũng được nhưng ngay khi bạn refresh giao diện nó quay trở lại ban đầu đó là ngôn ngữ javascript chỉ thực hiện chủ yếu trên thao tác của người dùng. Nó không có lưu lại để mọi người cùng thấy nó.

Data-animation

August 26, 2014avrilquach Leave a comment

.animated {
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
.animated.hinge {
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 0;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 0;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
0% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInLeft {
0% {
opacity: 0;
-moz-transform: translateX(-20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInLeft {
0% {
opacity: 0;
-o-transform: translateX(-20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInLeft {
-webkit-animation-name: fadeInLeft;
-moz-animation-name: fadeInLeft;
-o-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
0% {
opacity: 0;
-webkit-transform: translateX(20px);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes fadeInRight {
0% {
opacity: 0;
-moz-transform: translateX(20px);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes fadeInRight {
0% {
opacity: 0;
-o-transform: translateX(20px);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes fadeInRight {
0% {
opacity: 0;
transform: translateX(20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.fadeInRight {
-webkit-animation-name: fadeInRight;
-moz-animation-name: fadeInRight;
-o-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-moz-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-o-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
-moz-animation-name: fadeOut;
-o-animation-name: fadeOut;
animation-name: fadeOut;
}
@-webkit-keyframes fadeOutUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-20px);
}
}
@-moz-keyframes fadeOutUp {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(-20px);
}
}
@-o-keyframes fadeOutUp {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(-20px);
}
}
@keyframes fadeOutUp {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(-20px);
}
}
.fadeOutUp {
-webkit-animation-name: fadeOutUp;
-moz-animation-name: fadeOutUp;
-o-animation-name: fadeOutUp;
animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutDown {
0% {
opacity: 1;
-webkit-transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(20px);
}
}
@-moz-keyframes fadeOutDown {
0% {
opacity: 1;
-moz-transform: translateY(0);
}
100% {
opacity: 0;
-moz-transform: translateY(20px);
}
}
@-o-keyframes fadeOutDown {
0% {
opacity: 1;
-o-transform: translateY(0);
}
100% {
opacity: 0;
-o-transform: translateY(20px);
}
}
@keyframes fadeOutDown {
0% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(20px);
}
}
.fadeOutDown {
-webkit-animation-name: fadeOutDown;
-moz-animation-name: fadeOutDown;
-o-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(-20px);
}
}
@-moz-keyframes fadeOutLeft {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(-20px);
}
}
@-o-keyframes fadeOutLeft {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(-20px);
}
}
@keyframes fadeOutLeft {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
.fadeOutLeft {
-webkit-animation-name: fadeOutLeft;
-moz-animation-name: fadeOutLeft;
-o-animation-name: fadeOutLeft;
animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutRight {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
100% {
opacity: 0;
-webkit-transform: translateX(20px);
}
}
@-moz-keyframes fadeOutRight {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
100% {
opacity: 0;
-moz-transform: translateX(20px);
}
}
@-o-keyframes fadeOutRight {
0% {
opacity: 1;
-o-transform: translateX(0);
}
100% {
opacity: 0;
-o-transform: translateX(20px);
}
}
@keyframes fadeOutRight {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(20px);
}
}
.fadeOutRight {
-webkit-animation-name: fadeOutRight;
-moz-animation-name: fadeOutRight;
-o-animation-name: fadeOutRight;
animation-name: fadeOutRight;
}

http://jsfiddle.net/9aE2N/5/

Camera_slider

August 25, 2014avrilquach Leave a comment

css3_pr_transform

August 25, 2014avrilquach Leave a comment

-ms-transform: rotate(7deg); /* IE 9 */

-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */

transform: rotate(7deg);

Thuộc tính focus css

August 22, 2014avrilquach Leave a comment

The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example:

textarea:focus {
    background: pink;
}

And here’s what that code looks like in action:

Any element (most commonly <input>s and <textarea>s) are in “focus” when they are selected and ready to enter text (like when a cursor is blinking.

nguồn :http://css-tricks.com/almanac/selectors/f/focus/

Front End Developer

Uncategorized