From ae77185c2aba277e7a00ac97425885d2a66d8685 Mon Sep 17 00:00:00 2001 From: LamHaiMy <37772651+LamHaiMy@users.noreply.github.com> Date: Sun, 17 Nov 2024 14:10:40 +0700 Subject: [PATCH] new web test seo --- css/stylecommon.css | 437 ++++++++++++++++++-------------------------- detail.html | 143 +++++++++++++++ index.html | 394 +++++++++++++++++++++++++++------------ 3 files changed, 602 insertions(+), 372 deletions(-) create mode 100644 detail.html diff --git a/css/stylecommon.css b/css/stylecommon.css index 61afddb..fde4faf 100644 --- a/css/stylecommon.css +++ b/css/stylecommon.css @@ -1,232 +1,171 @@ - -#myBtn { - display: none; - position: fixed; - bottom: 20px; - right: 30px; - z-index: 99; - font-size: 18px; - border: none; - outline: none; - background-color: #d29c7d; - color: #fff; - cursor: pointer; - padding: 15px; - border-radius: 4px; -} -#myBtn:hover { - color: #d29c7d; - border: 2px solid #f1e1d8; - background: #fff; +/* General Reset */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Raleway", sans-serif; + font-style: normal; } + body { - height: 2000px; + font-family: "Raleway", sans-serif; + color: #333; } -.wapperPage { + +.header { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #ddd; } -/* number on scroll */ -.stats { + +.navbar { + display: flex; + justify-content: space-between; width: 100%; - height: 300px; - position: relative; } -.stats-overlay{ -width: 100%; -height: 100%; -float: left; +.nav-links, +.categories { + display: flex; + list-style: none; + gap: 20px; + margin-bottom: 0px; + padding-right: 32px; } -.personality-overlay { - width: 100%; - height: 300px; - float: left; - background: rgb(0, 200, 200); - background: rgba(52, 119, 206, 0.7); - background-attachment: fixed; +.nav-links a, +.categories a { + text-decoration: none; + color: #333; + font-weight: bold; } -.statsbar { - width: 50%; - height: 100%; - display: block; - margin: 0 auto; + +.main-content { + display: flex; + padding: 20px; + border-bottom: 1px solid #ddd; } -.stat-number { - float:left; - text-align:left; - text-transform: uppercase; - color:#FFF; - font-size: 90px; - font-weight: bold; - line-height: 1.32em; - font-family: 'Montserrat'; + +.featured { + flex: 2; + margin-right: 20px; } -.stat-title { - float: left; - text-align: center; - font-size: 14px; - padding-top: 40px; - padding-left: 20px; - color: #d29c7d; - font-size: 20px; - font-weight: normal; - line-height: 1.41em; - font-family: 'Montserrat'; - width: 50%; - text-align: left; + +.featured img { + width: 100%; + border-radius: 10px; } -.boxStart { - display: flex; - justify-content: space-between; + +.sidebar { + flex: 1; } -.titleBox { - color: #ffffff; - font-size: 32px; - font-weight: 500; + +.sidebar-item { + margin-bottom: 20px; } -/*end number on scroll https://codepen.io/Hivvu/pen/vKVjXO*/ -.sectionContainer { - padding-top: 140px; + +.sidebar-item h3 { + font-size: 18px; + margin-bottom: 10px; } -.bgBanner { - background: url(../images/1.webp); - background-repeat: no-repeat; - padding-bottom: 500px; - padding-top: 150px; + +.sidebar-item p { + font-size: 14px; + color: #666; +} + +.primary-menu-container .menu { display: flex; + flex-wrap: wrap; justify-content: center; - flex-direction: column; - text-align: center; + align-items: center; + list-style: none; + margin: 0; + padding: 0; } -.primaryText { - color: #343549; - font-family: 'Montserrat'; +ul { + list-style-type: none; } -.primaryFont { - font-family: 'Montserrat'; +.primary-menu-container > ul > li.menu-item > a:hover { + color: #27241d; } -h1 { - font-weight: 600; - font-size: 62px; - margin-bottom: 20px; - font-family: 'Montserrat', sans-serif; +.primary-menu-container > ul li.menu-item > a { + font-style: normal; + font-weight: normal; + font-size: 15px; + letter-spacing: 1px; + text-transform: uppercase; } -h2 { - font-size: 32px; - font-weight: 500; - margin-bottom: 30px; +.primary-menu-container > ul > li.menu-item > a { + padding-left: calc(3em / 2); + padding-right: calc(3em / 2); + padding-top: 0.1em; + padding-bottom: 0.1em; + color: #27241d; } -h4 { - font-size: 24px; - margin-bottom: 30px; - font-weight: 500; +li.menu-item>a { + display: block; + width: 100%; + text-decoration: none; + color: #27241d; + transition: all .2s ease-in-out; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } -p { - color: #717280; - font-size: 20px; - font-family: 'Montserrat', sans-serif; - margin-bottom: 45px; -} -.underlineText { - font-size: 25px; - text-decoration: underline; - color: #fff; - margin-bottom: 18px; - font-family: 'Montserrat'; -} -.boxedButton { - padding: 15px 20px; +li { + display: list-item; + text-align: -webkit-match-parent; + unicode-bidi: isolate; +} +.site-container { + background-color: #faf9f7; + padding: 60px 20px 45px; +} +.white-container { background-color: #fff; - text-align: center; - border: thin solid #fff; - border-radius: 5px; - color: #222; - font-family: 'Montserrat'; + padding: 80px 20px 45px; } -.dividerSeparator { - width: 44px; - text-align: center; - padding-top: 33px; - padding-bottom: 33px; - border-top: 5px solid #d29c7d; +.card-item { + position: relative; } -.boxDiv { - display: block; - margin: 0 auto; +.card-item.pr-26 { + padding-right: 26px; } -.row { +.card-item img { width: 100%; - height: 530px; } -.column { +.card-item .card-body { float: left; - display: inline-block; - width: 50%; -} -.leftColumn img { - height: 100%; - object-fit: cover; -} -.cardBox { - height: 530px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding-left: 170px; - /* padding-right: 386px; */ - text-align: justify; -} -.rightColumn .cardBox .primaryText { - padding-right: 368px; -} -.rightColumn .cardBox p { - padding-right: 368px; + text-align: left; + padding-top: 15px; } -.cardBox h2 { - align-self: flex-start; +.card-item .card-body a { + font-size: 18px; + color: #969044; } -.dividerLeft { - height: 44px; - border-left: 5px solid #d29c7d; - align-self: flex-start; - margin-bottom: 22px; +.card-item .card-body .card-text { + padding: 10px 0px; } -.boxButton { - font-family: 'Montserrat', sans-serif; +.card-item .card-body a.read-more { + color: #27241d; + padding: 4px 8px 4px 0px; font-size: 13px; + letter-spacing: 0.5px; + font-weight: bold; text-decoration: none; - text-transform: uppercase; +} +.card-item .card-body h4.tab { + margin-bottom: 0px; +} +.card-item .card-body a.read-more-tab { + color: #969044; + padding: 0px 8px 4px 0px; + font-size: 15px; + letter-spacing: 0.5px; font-weight: bold; - align-self: flex-start; - position: relative; - display: flex; - overflow: hidden; + text-decoration: none; } - -.boxButton .overlap { - opacity: 1; - color: #d29c7d; - background: transparent; - border: 2px solid #f1e1d8; - padding: 15px 25px; - transition: all .3s cubic-bezier(.5,.12,.46,.88); -} -.boxButton .overlapHover { - opacity: 1; - background: #d29c7d; - color: #fff; - border: 2px solid #fff; - padding: 15px 25px; - transition: all .3s cubic-bezier(.5,.12,.46,.88); - transform: translateX(100%); - position: absolute; -} -.boxButton:hover .overlapHover { - transform: translateX(0); -} -.overlapHover:hover { - /* transform: translateX(-100%); */ +.sectionContainer { } .backgroundOverlay { background: url(../images/7.png); @@ -237,81 +176,69 @@ p { transition: background 0.3s, border-radius 0.3s, opacity 0.3s; background-attachment: fixed; } -.slideShow { - height: 100%; - width: 100%; - top: 0; - left: 0; - position: absolute; -} .numberOnScroll { background-color: #343549; - padding-top: 130px; - position: relative; + padding-top: 130px; + position: relative; } -.dividerRight { - margin-left: 100%; - height: 44px; - border-left: 5px solid #d29c7d; - align-self: flex-start; - margin-bottom: 22px; +.slideShow { + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; } -.cardBox h2.alignTextRight { - align-self: flex-end; - padding-right: 0 !important; +.stats { + width: 100%; + height: 300px; + position: relative; } -.cardBox p.alignTextRight { - align-self: flex-end; - padding-right: 0 !important; +.stats-overlay { + width: 100%; + height: 100%; + float: left; } -.cardBox.rightPadding { - padding-right: 170px; - padding-left: 186px; +.statsbar { + width: 50%; + height: 100%; + display: block; + margin: 0 auto; } -.cardBox.rightPadding p{ -align-self: flex-end; +.titleBox { + color: #ffffff; + font-size: 32px; + font-weight: 500; } -.learnMore { - font-family: 'Montserrat', sans-serif; - font-size: 16px; - color: #343549; - text-decoration: none; - text-transform: uppercase; - font-weight: bold; - align-self: flex-end; - +.boxStart { + display: flex; + justify-content: space-between; } -.learnMore.startPosition { - align-self: flex-start; +.right-tab .col-12{ + padding-right: 0px !important; + padding-left: 0px !important; } -.learnMore span { - font-family: 'Montserrat', sans-serif; - font-size: 16px; - color: #343549; - text-decoration: none; - text-transform: uppercase; - font-weight: bold; - border-bottom: 2px solid #d29c7d; - padding-bottom: 4px; +.nav-tabs.right-site { + background-color: #fff !important; + border-color: #fff; } -.centerAlign { - text-align: center; +.nav-tabs.right-site .nav-link.active { + background-color: #faf9f7 !important; + border-color: #faf9f7 !important; + border-radius: 5px; + font-weight: 700; +} +.nav-tabs.right-site .nav-link { + background-color: #fff !important; + color: #27241d; + padding-left: 30px; + padding-right: 30px; + padding-top: 12px; + font-weight: 500; } -.paddingLeft { - padding-left: 20px; +.right-tab .tab-content .tab-pane { + padding-right: 30px; + padding-left: 30px; } -.boxButtonCenter { - background: transparent; - text-decoration: none; - display: flex; - justify-content: center; - font-family: 'Montserrat', sans-serif; - font-size: 46px; -} -.boxButtonCenter .overlap { - padding: 15px 25px; - border: 2px solid #f1e1d8; - background: linear-gradient(to right, #30CFD0 0%, #330867 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; +.border-bottom-tab { + border-bottom: 1px solid #ddd; } \ No newline at end of file diff --git a/detail.html b/detail.html new file mode 100644 index 0000000..304d65e --- /dev/null +++ b/detail.html @@ -0,0 +1,143 @@ + + +
+ + +By Helen Powell - Last updated 7 November 2024
+ +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.
+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.
+ +Rather than stripping the space and starting anew, the design team made the decision to preserve the original woodwork, panelling, doors and cabinets. This choice “has saved the history and character of the house, making it feel like a time capsule.” By honouring the room’s inherent features, they’ve created a kitchen that feels authentic and true to the home’s origins.
+deVOL’s classic cabinetry was a natural fit for this historic setting. The Georgian-inspired detailing and sturdy simplicity of the units complement the aged stone and other original elements perfectly. Painted in the brand’s signature Printer’s Black shade and topped with bespoke copper countertops, the cabinets strike a perfect balance – blending seamlessly with the old while introducing subtle modern touches.
+Practical considerations were also woven into the design, with the addition of a Lacanche range cooker, deVOL brass rails, and the brand’s own heirloom lighting fixtures. These functional elements lend a fresh, new energy to the space, preparing it to be enjoyed for many years to come.
+Our main aim is to build both a reliable and modern house in the Scandinavian style. Your comfort and security matters for us.
- -