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

  
     class="navbar fixed-top shadow-sm navbar-expand-lg bg-light navbar-light py-3 py-lg-0 px-lg-5">
         href="index.html" class="navbar-brand ml-lg-3">
             class="m-0 display-5"> class="text-primary">FreeFolio
        
         type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
             class="navbar-toggler-icon">
        
         class="collapse navbar-collapse px-lg-3" id="navbarCollapse">
             class="navbar-nav m-auto py-0">
                 href="#home" class="nav-item nav-link active">Home
                 href="#about" class="nav-item nav-link">About
                 href="#qualification" class="nav-item nav-link">Quality
                 href="#skill" class="nav-item nav-link">Skill
                 href="#service" class="nav-item nav-link">Service
                 href="#portfolio" class="nav-item nav-link">Portfolio
                 href="#testimonial" class="nav-item nav-link">Review
                 href="#contact" class="nav-item nav-link">Contact
            
href="" class="btn btn-menu d-none d-lg-block" style="background-color:#457efa; color: #ffffff;">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

 
     class="container-fluid bg-primary d-flex align-items-center mb-5 py-5" id="home" style="min-height: 100vh;">
         class="container">
             class="row align-items-center">

                 class="col-lg-7 text-center text-lg-left">
                     class="text-white font-weight-normal mb-3">Hello, my name
                     class="display-3 text-uppercase text-primary mb-2" style="-webkit-text-stroke: 4px #ffffff;">Alaxe Smith
                     class="typed-text-output d-inline font-weight-lighter text-white">
                     class="typed-text d-none">Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer
 class="d-flex align-items-center justify-content-center justify-content-lg-start pt-5">
 href="" class="btn btn-white mr-4">Download CV
 href="" class="btn btn-blue d-none d-sm-block">Play Video


 class="col-lg-6 px-8 pl-lg-0 pb-5 pb-lg-4 about-img">
 class="img-fluid w-100 rounded-circle shadow-sm" src="img/profile.png" alt="">





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

  
     class="container-fluid py-5" id="about">
         class="container">
             class="position-relative d-flex align-items-center justify-content-center">
                 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">About
                 class="position-absolute text-uppercase text-primary">About Me
            
             class="row align-items-center">
                 class="col-lg-5 pb-4 pb-lg-0">
                     class="img-fluid rounded w-100" src="img/about.jpg" alt="">
                
                 class="col-lg-7">
                     class="mb-4">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

class="row mb-3"> class="col-sm-6 py-2">
Name: class="text-secondary">Kate Winslet
class="col-sm-6 py-2">
Birthday: class="text-secondary">1 April 1990
class="col-sm-6 py-2">
Degree: class="text-secondary">Master
class="col-sm-6 py-2">
Experience: class="text-secondary">10 Years
class="col-sm-6 py-2">
Phone: class="text-secondary">+012 345 6789
class="col-sm-6 py-2">
Email: class="text-secondary">[email protected]
class="col-sm-6 py-2">
Address: class="text-secondary">123 Street, New York, USA
class="col-sm-6 py-2">
Freelance: class="text-secondary">Available
href="" class="btn blue btn-outline-primary mr-4">Hire Me href="" class="btn btn-outline-primary">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


    
     class="container-fluid py-5" id="skill">
         class="container">
             class="position-relative d-flex align-items-center justify-content-center">
                 class="display-1 text-uppercase text-white" style="-webkit-text-stroke: 1px #dee2e6;">Skills
                 class="position-absolute text-uppercase text-primary">My Skills
            
             class="row align-items-center">
                 class="col-md-6">
                     class="skill mb-4">
                         class="d-flex justify-content-between">
                             class="font-weight-bold">HTML
                             class="font-weight-bold">95%
                        
                         class="progress">
                             class="progress-bar bg-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                        
                    
                     class="skill mb-4">
                         class="d-flex justify-content-between">
                             class="font-weight-bold">CSS
                             class="font-weight-bold">85%
                        
                         class="progress">
                             class="progress-bar bg-warning" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                        
                    
                     class="skill mb-4">
                         class="d-flex justify-content-between">
                             class="font-weight-bold">PHP
                             class="font-weight-bold">90%
                        
                         class="progress">
                             class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                        
                    
                
                 class="col-md-6">
                     class="skill mb-4">
                         class="d-flex justify-content-between">
                             class="font-weight-bold">Javascript
                             class="font-weight-bold">90%
                        
                         class="progress">
                             class="progress-bar bg-danger" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                        
                    
                     class="skill mb-4">
                         class="d-flex justify-content-between">
                             class="font-weight-bold">Angular JS
                             class="font-weight-bold">95%
                        
                         class="progress">
                             class="progress-bar bg-dark" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100">
                        
                    
                     class="skill mb-4">
                         class="d-flex justify-content-between">
                             class="font-weight-bold">Wordpress
                             class="font-weight-bold">85%
                        
                         class="progress">
                             class="progress-bar bg-info" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
                        
                    
                
            
        
    
    

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;
  }
}
0

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;
  }
}
1

Và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;
  }
}
2

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;
  }
}
3

Và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;
  }
}
4

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;
  }
}
5

Và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;
  }
}
6

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;
  }
}
7

Và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;
  }
}
8

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;
  }
}
9

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trở lại đầu trang

 
     class="container-fluid bg-primary d-flex align-items-center mb-5 py-5" id="home" style="min-height: 100vh;">
         class="container">
             class="row align-items-center">

                 class="col-lg-7 text-center text-lg-left">
                     class="text-white font-weight-normal mb-3">Hello, my name
                     class="display-3 text-uppercase text-primary mb-2" style="-webkit-text-stroke: 4px #ffffff;">Alaxe Smith
                     class="typed-text-output d-inline font-weight-lighter text-white">
                     class="typed-text d-none">Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer
                     class="d-flex align-items-center justify-content-center justify-content-lg-start pt-5">
                         href="" class="btn btn-white mr-4">Download CV

                         href="" class="btn btn-blue d-none d-sm-block">Play Video
                    
                
                 class="col-lg-6 px-8 pl-lg-0 pb-5 pb-lg-4 about-img">
                     class="img-fluid w-100 rounded-circle shadow-sm" src="img/profile.png" alt="">
                
            
        
    
    
0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

 
     class="container-fluid bg-primary d-flex align-items-center mb-5 py-5" id="home" style="min-height: 100vh;">
         class="container">
             class="row align-items-center">

                 class="col-lg-7 text-center text-lg-left">
                     class="text-white font-weight-normal mb-3">Hello, my name
                     class="display-3 text-uppercase text-primary mb-2" style="-webkit-text-stroke: 4px #ffffff;">Alaxe Smith
                     class="typed-text-output d-inline font-weight-lighter text-white">
                     class="typed-text d-none">Web Designer, Web Developer, Front End Developer, Apps Designer, Apps Developer
                     class="d-flex align-items-center justify-content-center justify-content-lg-start pt-5">
                         href="" class="btn btn-white mr-4">Download CV

                         href="" class="btn btn-blue d-none d-sm-block">Play Video
                    
                
                 class="col-lg-6 px-8 pl-lg-0 pb-5 pb-lg-4 about-img">
                     class="img-fluid w-100 rounded-circle shadow-sm" src="img/profile.png" alt="">
                
            
        
    
    
1

Và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

  1. Thiết kế chân trang HTML CSS
  2. Danh sách Todo sử dụng JavaScript
  3. Đồng hồ bấm giờ đơn giản sử dụng JavaScript
  4. Hoạt ảnh tải màn hình bộ xương
  5. Máy tính tuổi Javascript
  6. Trình tạo mật khẩu JavaScript
  7. Thanh trượt hình ảnh tự động trong Html CSS
  8. Menu thanh bên Sử dụng HTML CSS