Hướng dẫn responsive product page html css - trang sản phẩm đáp ứng html css

Bỏ qua nội dung

Báo cáo

      Challenge by
      Frontend Mentor. Coded by venkatesh.b.
    

Phản hồi của cộng đồng

Tham gia cộng đồng Slack của chúng tôi

Tham gia hơn 160.000 người thực hiện các thử thách, nói về mã của họ, giúp đỡ lẫn nhau và trò chuyện về tất cả mọi thứ phía trước!

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 cách sử dụng HTML và CSS và hướng dẫn thiết kế trang chủ đáp ứng HTML5. Bạn cũng sẽ nhận được mã nguồn đầy đủ ở cuối!

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

Chúng tôi sẽ học cách tạo một trang đích sản phẩm đẹp và đơn giản mà không cần sử dụng một mẫu. Theo 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 nhiều khách hàng tiềm năng và bán hàng từ khách hàng truy cập trang web của bạn không? Tìm hiểu làm thế nào để dễ dàng tạo và quản lý các trang đích này. Khóa học này sẽ dạy bạn cách đảm bảo các sản phẩm của bạn đại diện cho bạn, các bước tiếp theo của bạn nên là gì, tại sao chúng lại quan trọng và làm thế nào để khiến chúng khiến bạn khác biệt với cuộc thi.

Trong hướng dẫn này, chúng tôi sẽ đưa bạn qua quá 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. Chúng tôi đã làm cho quá trình này dễ dàng nhất có thể để bạn có thể thành công trên đường đi.

Các bước để thực hiện một trang chủ quảng bá sản phẩm!

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

Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo trang đích sản phẩm bằng HTML, CSS và JavaScript và tạo một trang chủ đáp ứng. Bạn cũng sẽ học cách làm cho trang chủ phản ứng nhanh, tránh sử dụng JavaScript và sử dụng một số màu sắc để làm cho trang web nổi bật! Login And Registration Form With Show/Hide Button in jQuery

Chúng tôi sẽ học cách tạo một trang đích sản phẩm đẹp và đơn giản mà không cần sử dụng một mẫu. Theo 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 nhiều khách hàng tiềm năng và bán hàng từ khách hàng truy cập trang web của bạn không? Tìm hiểu làm thế nào để dễ dàng tạo và quản lý các trang đích này. Khóa học này sẽ dạy bạn cách đảm bảo các sản phẩm của bạn đại diện cho bạn, các bước tiếp theo của bạn nên là gì, tại sao chúng lại quan trọng và làm thế nào để khiến chúng khiến bạn khác biệt với cuộc thi.

  
  
  
  
  


 
   
   

      ✖
     Home
     About
     Services
     Contact
     Login 
   
  
   
   

     

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

       

     
   
  
   
 

Trong hướng dẫn này, chúng tôi sẽ đưa bạn qua quá 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. Chúng tôi đã làm cho quá trình này dễ dàng nhất có thể để bạn có thể thành công trên đường đi.

*{
  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(https://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 h2 {
  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 h2 {
    font-size: 40px;
  }
  .column1 p{
    font-size: 17px;
  }
  .row {
    margin-top: 80px;
  }
}

@media screen and (max-width: 600px) {

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

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

Các bước để thực hiện một trang chủ quảng bá sản phẩm!

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