Share miễn phí bộ Code web Profile Page cực đẹp

Sau thành công của tác phẩm code Web tỏ tình 2018. Hôm nay, mình đã làm thêm một trang Profile theo yêu cầu của member. Mình vẫn dùng BS4, Angular Js, Javascript, HTML5 và CSS3 quen thuộc để viết.

Code website tỏ tình 2018

Giới thiệu về Profile Page

Là trang giới thiệu bản thân và hiển thị thông tin liêc lạc đến người khác thông qua trang website. Bất cứ ai cũng muốn giới thiệu bản thân đến bạn bè, đồng nghiệp hoặc đối tác một cách chu đáo, chuyên nghiệp và ấn tượng.

Do đó, nếu bạn sở hữu một trang Profile độc đáo thì người khác sẽ ấn tượng và đánh giá cao về bạn. Cho thấy bạn là một đối tác khá chuyên nghiệp và đáng tin tưởng. Thử hỏi nếu bạn làm một trang giới thiệu bản thân sơ xài thì người ta có dám đặt niềm tin ?

Trang Profile này có gì đặc biệt ?

Trang được áp dụng Bootstrap 4 và Angular Js nhiều. Đảm bảo hỗ trợ tốt việc hiển thị đa nền tảng – tương thích mọi thiết bị kể cả di động. Do đó, sẽ tăng tính thân thiện của website và mang đến cảm giác chuyên nghiệp.

Xem thêm:  Hướng dẫn làm ảnh giả voucher Tocotoco nhấp nhô theo nhịp troll bạn bè

Hiển thị trên máy tính

share miễn phí code web profile

 

Hiển thị trên di động

share miễn phí code web profile

Tương thích cả trên Ipad

share miễn phí code web profile

Giao diện và bố cục được mình dành nhiều thời gian sắp xếp cẩn thận. Màu sắc và Icons được mình chọn lựa rất kĩ càng. Mang lại cảm giác thiết kế Material, hiện đại và chuyên nghiệp hơn.

Ngoài ra, những hiệu ứng Scroll Action, Draw vector được áp dụng phù hợp tạo nên các chuyển động nhẹ nhàng. Không gây khó chịu cho người dùng.

Video demo

Trên đây là video trải nghiệm thực tế sau khi đã upload lên host của mình. Bây giờ, mình sẽ hướng dẫn bạn cách chỉnh sửa code của mình ngay tại phần dưới đây.

Lưu ý

Do lần trước một số bạn có lấy code của mình đi share và đem đi buôn bán, kinh doanh. Cho nên lần này mình sẽ nén code lại và dùng Angular JS để binding dữ liệu. Việc này sẽ làm trục trặc việc hiển thị lúc đầu một tí nhưng không ảnh hưởng nhiều.

Hướng dẫn chỉnh sửa Source Profile Web page

Trước khi chỉnh sửa code web thì mình mong các bạn có thể đáp ứng được các yêu cầu cần thiết dưới đây.

  • Chuẩn bị một phần mềm chỉnh sửa code web cần thiết – mình dùng Sublime Text 3.
  • Biết cách dùng Ctrl + F để tìm kiếm code web.
  • Có kiến thức cơ bản về HTML.
  • Biết phân biệt ảnh .jpg và .png.
Xem thêm:  Code Tạo Pháo Hoa Cho Website Trang Trí Tết

Hướng dẫn chỉnh sửa code web

Đầu tiên bạn tải về và giải nén ra (extract) sẽ thấy được đống file như ảnh dưới đây. Ai có thắc mắc hãy liên hệ mình qua Facebook fb.com/minhthong.lu.58

share miễn phí code web profile

  • img: thư mục chứa hình ảnh sử dụng trong website.
  • Javascript: thư mục chứa toàn bộ code Javascript của website.
  • index.html: Trang hiển thị của website.
  • main.css: file chứa code css của website.

Bạn vào thư mục Javascript và mở file nlar.js bằngchương trình chỉnh sửa code. Đây là file chứa code web Angular js và toàn bộ nội dung chữ hiển thị trên website.

share miễn phí code web profile

Rất cả nội dung chữ hiển thị trên trang web mình viết tại đây. Bạn sẽ chỉnh nội dung trong ngoặc kép “” thành nội dung mà bạn muốn.

Mở file index.html

Tuy nhiên vì tên Lư Minh Thông mình phải Charming chữ ra để làm hiệu ứng. Nên nếu muốn thay đổi thì bạn phải vào index.html mà chỉnh.

Ctrl + F để tìm chữ Lư Minh Thông và đổi thành tên của bạn.

Chỉnh sửa hình ảnh

Trong thư mục img mình có để hai ảnh story1.jpg và story2.png để làm hai ảnh bài viết trên website.

Bạn tải ảnh mà bạn thích và lưu trong thư mục img. Sau đó, vào file index.html và ấn Ctrl + F rồi tìm như cách trên nhé. Sau đó sửa tên ảnh thành ảnh mà bạn muốn.

Download

Nhớ bỏ qua quảng cáo để ủng hộ mình nhé !

Lưu ý: nếu Upload lên host bị lỗi không chạy được, hãy đổi tên thư mục Javascript thành javascript (chữ j viết thường).

Xem thêm:  Tạo Facebook ma mới nhất 2016

Vậy là xong. Ngoài ra hi vọng bạn không thay đổi bất cứ gì thêm để tránh hư code, hỏng code. Nếu có thắc mắc hãy liên hệ mình tại facebook: fb.com/minhthong.lu.58

Chúc bạn thành công
Lmint.

6
Để lại bình luận

avatar
4 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
6 Comment authors
namdaikkatorivươngLewe-2k6Lmint Recent comment authors

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

newest oldest
alo | <span class="wpdiscuz-comment-count">3 comments</span>
alo | 3 comments

sao đổi đc fb ở web tỏ tình z ad

vương | <span class="wpdiscuz-comment-count">9 comments</span>
vương | 9 comments

liên hệ mình hướng dẫn cho, tuy mình ko giỏi, nhưng có bk chút chút fb.com/1710.super ….nhân tiện cảm ơn ad vì code thông tin , em đã dùng và rất cảm ơn ạ.

Lewe-2k6 | <span class="wpdiscuz-comment-count">474 comments</span>

tks Ad nhieu lam a. ^^

katori | <span class="wpdiscuz-comment-count">2 comments</span>
katori | 2 comments

tên đoạn nhạc trong video là gì vậy ạ?

namdaik | <span class="wpdiscuz-comment-count">6 comments</span>

mấy template này mình thấy bình thường quá