Trong bài đăng trên blog này, bạn sẽ tìm hiểu Cách tạo Trang đích Sản phẩm bằng HTML và CSS và Hướng dẫn Thiết kế Trang chủ Responsive trong HTML5. Bạn cũng sẽ nhận được mã nguồn hoàn chỉnh ở cuối

Trong hướng dẫn này, bạn sẽ học Cách tạo trang đích của sản phẩm bằng HTML, CSS và JavaScript và cách tạo trang chủ đáp ứng. Bạn cũng sẽ tìm hiểu cách làm cho trang chủ phản hồi nhanh, tránh sử dụng javascript và sử dụng một số màu sắc để làm nổi bật trang web

Chúng ta sẽ tìm hiểu cách tạo landing page sản phẩm đẹp và đơn giản mà không cần sử dụng Template. Bằng cách này, chúng tôi sẽ trải nghiệm mọi sản phẩm và các tính năng của nó

Xây dựng trang đích sản phẩm bằng HTML và CSS

Bạn có muốn có thêm khách hàng tiềm năng và bán hàng từ những khách hàng truy cập trang web của bạn không? . Khóa học này sẽ hướng dẫn bạn cách đảm bảo sản phẩm của bạn đại diện cho bạn, bước tiếp theo bạn nên làm là gì, tại sao chúng lại quan trọng và cách khiến chúng khác biệt với đối thủ cạnh tranh

Trong hướng dẫn này, chúng tôi sẽ hướng dẫn bạn quy trình tạo trang đích sản phẩm. Chúng tôi sẽ sử dụng HTML, CSS và JavaScript. Chúng tôi cũng sẽ chỉ cho bạn cách tạo một trang chủ đáp ứng. Cuối cùng, chúng tôi sẽ chỉ cho bạn cách làm cho trang chủ phản hồi nhanh. Chúng tôi đã làm cho quá trình này trở nên dễ dàng nhất có thể để bạn có thể thành công trên đường đi

Đề xuất cho bạn

• 10 Dự án HTML CSS dễ dàng cho người mới bắt đầu với mã nguồn
• Cách chạy mã PHP trong Bảng điều khiển đầu cuối VSCode
• Cách nhận Email từ biểu mẫu HTML bằng PHP

Các bước để tạo Trang chủ Quảng cáo Sản phẩm

Xem Video hướng dẫn bên dưới để hiểu hoàn toàn cách xây dựng trang đích sản phẩm đáp ứng bằng HTML và CSS

cũng đọc. Biểu mẫu đăng nhập và đăng ký với nút hiển thị/ẩn trong jQuery

Mã nguồn để tạo trang đích đáp ứng bằng HTML

Bây giờ, bạn sẽ nhận được mã nguồn của dự án trang web trang đích sản phẩm

Mã nguồn HTML

  
  
  
  
  Product Landing Page


 
   
Brand
   
   ☰

   

     

       
Home
       
About
       
Services
       
Contact
       Login
     
   
 
   
   

      ✖
     Home
     About
     Services
     Contact
     Login 
   
  
   
   

     

       
Responsive Design
       
Contact us for responsive web design to grow your business!

  


       PURCHASE
     
     

       

     
   
  
   
 
   function openNav[] {
     document.getElementById["sidenav"].style.width = "50%";
   }
   function closeNav[] {
     document.getElementById["sidenav"].style.width = "0%";
   }
 

Mã nguồn CSS

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-image: linear-gradient[to right, rgba[200, 8,207, 0.75], rgba[28, 70, 184, 0.8]], url[//www.hmablogs.com/wp-content/uploads/2022/06/background-1-scaled.jpg];
  background-size: cover;
  background-attachment: fixed;
  color: white;
  font-family: 'Fira Sans', sans-serif;
}
nav {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 35px 5%;
}
nav .logo{
  font-size: 30px;
  font-weight: 700;
}
nav ul{
  display: flex;
  list-style: none;
}
nav ul li{
  padding: 8px 15px;
  border-radius: 10px;
  transition: 0.2s ease-in;
}
nav ul li a{
  color: white;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}
nav .navLinks button{
  padding: 2px 20px;
  border-radius: 10px;
  color: blue;
  font-size: 16px;
  border-style: none;
  font-weight: 700;
  margin-left: 10px;
}
nav ul li:hover{
  background-color: rgb[44, 1, 197];
}
nav .menubtn{
  font-size: 30px;
  font-weight: bolder;
  cursor: pointer;
  display: none;
}

/* responsive navbar css */
@media screen and [max-width: 600px] {
  nav .menubtn{
    display: flex;
  }
  nav .navLinks{
    display: none;
  }
  .sideNav {
    display: block !important;
  }
}

.sideNav{
  height: 100%;
  position: fixed;
  top: 0;
  right: 0%;
  background-color: rgb[44, 1, 197];
  overflow-x: hidden;
  transition: 0.3s ease-in;
  padding-top: 60px;
  display: none;
}

.sideNav a{
  padding: 8px 8px 8px 40px;
  display: block;
  font-size: 25px;
  font-weight: 500;
  color: #d1d1d1;
  transition: 0.3s;
  text-decoration: none;
}
.sideNav a button {
  padding: 10px 20px;
  border-radius: 10px;
  color: blue;
  font-size: 16px;
  border-style: none;
  font-weight: 700;
}
.sideNav a:hover{
  color: white;
}
.sideNav .closeBtn{
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 20px;
  margin-left: 50px;
}

.row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2% 5%;
}
.row .column1 {
  padding-right: 50px;
}
.column1 h1 {
  font-size: 60px;
  margin-bottom: 10px;
}
.column1 p {
  font-size: 25px;
  margin-bottom: 20px;
}
.column1 button {
  width: 150px;
  padding: 12px 20px;
  border-radius: 20px;
  border-style: none;
  color: blue;
  font-size: 17px;
  font-weight: 600;
}
/* Header content responsive */
@media screen and [max-width: 980px] {
  .column2 img {
    width: 350px;
  }
  .column1 h1 {
    font-size: 40px;
  }
  .column1 p{
    font-size: 17px;
  }
  .row {
    margin-top: 80px;
  }
}

@media screen and [max-width: 600px] {

  .column1 h1 {
    font-size: 35px;
  }
  .row {
    flex-direction: column;

  }
  .row .column1 {
    padding: 30px;
  }
}

Phần kết luận

Bạn đã học Cách tạo trang đích sản phẩm bằng HTML và CSS để tạo trang chủ đáp ứng. Tôi hy vọng bạn thích bài viết này, nếu bạn gặp khó khăn trong việc hiểu nó, bạn có thể liên hệ với tôi. Xin đừng quên đăng ký kênh Youtube của tôi