Skip to content

Commit

Permalink
responsive detail page
Browse files Browse the repository at this point in the history
  • Loading branch information
@LamHaiMy
LamHaiMy committed Dec 5, 2024
1 parent 44aab4a commit e95d536
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 12 deletions.
11 changes: 11 additions & 0 deletions css/detail.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,15 @@
.care-post .post-content {
padding-left: 10px;
padding-right: 10px;
}
.detail-page img {
width: 100%
}
@media screen and (max-width: 650px){
.care-post-column {
margin-bottom: 25px;
}
.updated-post-row .new-post {
margin-bottom: 50px;
}
}
20 changes: 10 additions & 10 deletions detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,13 +71,13 @@
</div>
</div>
</main>
<div class="container mt-5 wow fadeIn" data-wow-duration="2s" data-wow-delay=".25s">
<div class="container detail-page mt-5 wow fadeIn" data-wow-duration="2s" data-wow-delay=".25s">
<div class="row justify-content-start">
<div class="col-12 mb-5 wow fadeInLeft">
<span class="badge text-bg-secondary mb-3">KITCHEN</span>
<h1 class="text-left mt-3">Mix & Match?</h1>
<p >By Helen Powell - Last updated 7 November 2024</p>
<img class="mb-2" src="./images/5.webp" alt="">
<img class="mb-2 main-image" src="./images/5.webp" alt="">
<p>Step into the basement of this historic Bath townhouse and discover a kitchen that seamlessly blends the old and the new. The deVOL design team, working alongside Banjo Beale, has created a space that celebrates the home’s original character while infusing it with modern functionality.</p>
<p>The room exudes a serene, calming atmosphere, with light coming through the original wavy Georgian glass panes. There is a “secretive beauty” to this basement space, as deVOL describes, that evokes a sense of peace amidst the bustling city above. The thick, honey-coloured stone walls and hidden nooks and crannies give the room an undeniable charm and sense of history.</p>
<img class="mb-2" src="./images/4.webp" alt="">
Expand Down Expand Up @@ -130,7 +130,7 @@ <h3>Third slide label</h3>
<div class="container mb-5 care-post">
<h2 class="color-text-primary mb-4">Có thể bạn quan tâm</h2>
<div class="row updated-post-row wow fadeInRight" data-wow-delay=".35s">
<div class="col-3 care-post-column">
<div class="col-md-3 col-sm-12 care-post-column">
<div class="color-column">
<img src="./images/4.webp" alt="" class="mb-4">
<div class="post-content">
Expand All @@ -139,7 +139,7 @@ <h4 class="ellipsis-text clamp-2">Xu hướng thiết kế văn phòng hiện đ
</div>
</div>
</div>
<div class="col-3 care-post-column">
<div class="col-md-3 col-sm-12 care-post-column">
<div class="color-column">
<img src="./images/4.webp" alt="" class="mb-4">
<div class="post-content">
Expand All @@ -148,7 +148,7 @@ <h4 class="ellipsis-text clamp-2">Xu hướng thiết kế văn phòng hiện đ
</div>
</div>
</div>
<div class="col-3 care-post-column">
<div class="col-md-3 col-sm-12 care-post-column">
<div class="color-column">
<img src="./images/4.webp" alt="" class="mb-4">
<div class="post-content">
Expand All @@ -157,7 +157,7 @@ <h4 class="ellipsis-text clamp-2">Xu hướng thiết kế văn phòng hiện đ
</div>
</div>
</div>
<div class="col-3 care-post-column">
<div class="col-md-3 col-sm-12 care-post-column">
<div class="color-column">
<img src="./images/4.webp" alt="" class="mb-4">
<div class="post-content">
Expand All @@ -171,7 +171,7 @@ <h4 class="ellipsis-text clamp-2">Xu hướng thiết kế văn phòng hiện đ
<div class="container update-post">
<h2 class="mb-4">Cập nhật mới</h2>
<div class="row updated-post-row wow bounceIn" data-wow-delay=".60s">
<div class="col-4 new-post 1">
<div class="col-md-4 col-sm-12 new-post 1">
<img src="./images/4.webp" alt="" class="mb-4">
<div class="post-content">
<span>Kinh nghiệm thiết kế không gian kinh doanh</span>
Expand All @@ -181,7 +181,7 @@ <h4 class="mt-2 ellipsis-text clamp-3">Xu hướng thiết kế văn phòng hi
</div>
</div>
</div>
<div class="col-4 new-post 2">
<div class="col-md-4 col-sm-12 new-post 2">
<img src="./images/4.webp" alt="" class="mb-4">
<div class="post-content">
<span>Kinh nghiệm thiết kế không gian kinh doanh</span>
Expand All @@ -191,7 +191,7 @@ <h4 class="mt-2 ellipsis-text clamp-3">Xu hướng thiết kế văn phòng hi
</div>
</div>
</div>
<div class="col-4 new-post 3">
<div class="col-md-4 col-sm-12 new-post 3">
<img src="./images/4.webp" alt="" class="mb-4">
<div class="post-content">
<span>Kinh nghiệm thiết kế không gian kinh doanh</span>
Expand All @@ -217,7 +217,7 @@ <h4>Liên hệ</h4>
<ul>
<li><i class="fas fa-phone"></i><span>0353098155</span></li>
<li><i class="fas fa-envelope"></i><span>[email protected]</span></li>
<li><i class="fas fa-envelope"></i><span>lamgiahani@gmail.com</span></li>
<li><i class="fas fa-envelope"></i><span>lamgiahan.06@gmail.com</span></li>
</ul>
</div>
<div class="col-md-4 col-sm-12">
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ <h4>Liên hệ</h4>
<ul>
<li><i class="fas fa-phone"></i><span>0353098155</span></li>
<li><i class="fas fa-envelope"></i><span>[email protected]</span></li>
<li><i class="fas fa-envelope"></i><span>lamgiahani@gmail.com</span></li>
<li><i class="fas fa-envelope"></i><span>lamgiahan.06@gmail.com</span></li>
</ul>
</div>
<div class="col-md-4 col-sm-12">
Expand Down
2 changes: 1 addition & 1 deletion writer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ <h4>Liên hệ</h4>
<ul>
<li><i class="fas fa-phone"></i><span>0353098155</span></li>
<li><i class="fas fa-envelope"></i><span>[email protected]</span></li>
<li><i class="fas fa-envelope"></i><span>lamgiahani@gmail.com</span></li>
<li><i class="fas fa-envelope"></i><span>lamgiahan.06@gmail.com</span></li>
</ul>
</div>
<div class="col-md-4 col-sm-12">
Expand Down

0 comments on commit e95d536

Please sign in to comment.