Hoàn thành trang web danh mục đầu tư cá nhân đáp ứng bằng html css & javascript
Tại đây, bạn có thể tìm hiểu cách tạo trang web danh mục đầu tư cá nhân đáp ứng bằng HTML, CSS, javascript và bootstrap. Tôi đã thiết kế nhiều loại trang web. Đây là một trang web danh mục đầu tư cá nhân đáp ứng đầy đủ mà tôi đã sử dụng mã Bootstrap 4. Ngoài ra, các mã lập trình HTML và CSS phổ biến đã được sử dụng
Các trang web danh mục đầu tư cá nhân nhất quán cần được chăm sóc trong suốt quá trình làm việc của bạn. Nó cung cấp một cách thuận tiện để khách hàng tiềm năng xem công việc của bạn đồng thời cho phép bạn mở rộng các kỹ năng/kinh nghiệm và dịch vụ của mình. Trong trang web này [Danh mục đầu tư cá nhân], có tám phần trên một trang - Trang chủ, Giới thiệu, Dịch vụ, Kỹ năng, danh mục đầu tư, Nhóm và Liên hệ, chân trang và mỗi phần đều hấp dẫn và bắt mắt
Video hướng dẫn
Tải xuống mã nguồn
Hướng dẫn từng bước.
Chức năng điều hướng
FreeFolio
Home
About
Quality
Skill
Service
Portfolio
Review
Contact
Hire Me
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
khu vực anh hùng
Hello, my name
Alaxe Smith
Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer
Download CV
Play Video
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/*===================== Hero section ======================*/
.about-img{
margin-left: -100px;
right: -60px;
}
.display-1{
font-size: 160px;
font-weight: 1000;
}
.position-absolute{
font-weight: 700;
}
.typed-cursor {
font-size: 45px;
color: #ffffff;
}
.blue{
background-color: #1c5ce6;
color: #ffffff;
}
.btn{
border: 2px solid rgb[29, 105, 247];
}
.btn-white{
background-color: #ffffff;
border:2px solid #ffffff;
}
.btn-blue{
border: 2.4px solid #ffffff;
color: #ffffff;
}
@media [max-width: 700px] {
.about-img{
margin-left: 20px;
right: 0px;
top: 30px;
}
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
About
About Me
UI/UX Designer & Web Developer
Tempor eos dolore amet tempor dolor tempor. Dolore ea magna sit amet dolor eirmod. Eos ipsum est tempor dolor. Clita lorem kasd sed ea lorem diam ea lorem eirmod duo sit ipsum. Amet dolor stet lorem diam dolor justo et dolor dolor dolor
Name: Kate Winslet
Birthday: 1 April 1990
Degree: Master
Experience: 10 Years
Phone: +012 345 6789
Email: info@example.com
Address: 123 Street, New York, USA
Freelance: Available
Hire Me
Learn More
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
No CSS Code
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
bắt đầu kỹ năng
Skills
My Skills
HTML
95%
CSS
85%
PHP
90%
Javascript
90%
Angular JS
95%
Wordpress
85%
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/*===================== Progress Bar ====================*/
.progress {
border-radius: 10px;
}
.progress .progress-bar {
width: 0px;
border-radius: 10px;
transition: 2s;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
bắt đầu đủ điều kiện
________số 8
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/* =================== Queality ======================*/
.ex-me{
margin-top: 35px;
}
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bắt đầu dịch vụ
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bắt đầu danh mục đầu tư
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
2Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
3Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bắt đầu chứng thực
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
4Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
5Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Liên hệ bắt đầu
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
6Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
7Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Bắt đầu chân trang
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
8Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
/* ================ Navigation Menu ====================*/
.navbar-light {
display: none;
}
.navbar-light .navbar-nav .nav-link {
padding: 25px 10px;
color: #343a40;
font-weight: 500;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: #0BCEAF;
}
@media [max-width: 991.98px] {
.navbar-light .navbar-nav .nav-link {
padding: 10px 0;
}
}
9Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Trở lại đầu trang
Hello, my name
Alaxe Smith
Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer
Download CV
Play Video
0Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Hello, my name
Alaxe Smith
Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer
Download CV
Play Video
1Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Tải xuống mã nguồn
Nếu bạn có thể học được điều gì đó từ video hoặc nếu video có ích cho bạn, bạn phải thích và đăng ký video. Kết quả là, tôi có động lực để tạo ra những thiết kế mới khác.
Bài liên quan
- Thiết kế chân trang HTML CSS
- Danh sách Todo sử dụng JavaScript
- Đồng hồ bấm giờ đơn giản sử dụng JavaScript
- Hoạt ảnh tải màn hình bộ xương
- Máy tính tuổi Javascript
- Trình tạo mật khẩu JavaScript
- Thanh trượt hình ảnh tự động trong Html CSS
- Menu thanh bên Sử dụng HTML CSS