programming html

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

Bỏ qua nội dung

Thách thức
Các giải pháp
Tài nguyên
UnlockproPro

Thiết kế so sánh

Báo cáo

Frontend Mentor. Coded by venkatesh.b.

Tìm hiểu thêm

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

Home

About

Services

Contact

✖ Home About Services Contact Login

Responsive Design

PURCHASE

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

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