From d84b4fae7e73dde4c41381854f578b597930e7fb Mon Sep 17 00:00:00 2001 From: black-RAM Date: Thu, 17 Aug 2023 22:40:21 +0300 Subject: [PATCH] updated footer --- index.html | 2 + style.css | 172 +++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 122 insertions(+), 52 deletions(-) diff --git a/index.html b/index.html index 391a8aa..26ba576 100644 --- a/index.html +++ b/index.html @@ -92,6 +92,8 @@

Find us in London

diff --git a/style.css b/style.css index 8d35c7a..8e61a30 100644 --- a/style.css +++ b/style.css @@ -1,11 +1,16 @@ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;0,800;1,300;1,400&family=Oswald:wght@700&display=swap'); -*, *::before, *::after{ + +*, +*::before, +*::after { box-sizing: border-box !important; } -html{ + +html { scroll-behavior: smooth; } -:root{ + +:root { --yellow: hsl(41, 99%, 46%); --dark-brown: hsl(12, 30%, 12%); --gray: hsl(0, 0%, 25%); @@ -14,65 +19,97 @@ html{ --black: hsl(250, 29%, 10%); font-size: 62.5%; } -::selection{ + +::selection { background-color: hsla(195, 53%, 79%, 0.8); } -body{ + +body { font-family: 'Open Sans', Arial, Helvetica, sans-serif; margin: 0px; } + /* resets */ -h1, h2, h3, blockquote, footer, figure{ +h1, +h2, +h3, +blockquote, +footer, +figure { margin: 0px; } -h1{ font-size: clamp(7rem, 9vmax, 14rem);} -h2{ font-size: 4.5rem;} -h3{ font-size: 3rem;} -a{ + +h1 { + font-size: clamp(7rem, 9vmax, 14rem); +} + +h2 { + font-size: 4.5rem; +} + +h3 { + font-size: 3rem; +} + +a { color: inherit; text-decoration: none; } + a:focus { outline: solid 2px lightblue; padding: 0.5em 1em; } -p, a{ + +p, +a { font-size: 1.6rem; line-height: 1.5em; } -img{ + +img { height: 100%; width: 100%; object-fit: cover; } -img:focus{ + +img:focus { border: none; outline: none; } + /* resets end */ /* utilitly classes */ -.underline{ +.underline { text-decoration: underline; } -.caps{ + +.caps { text-transform: uppercase; } + .readmore { text-decoration-color: var(--yellow); text-decoration-thickness: 4px; color: gray; transition: color 400ms ease; } -.readmore:is(:hover, :active){ + +.readmore:is(:hover, :active) { color: var(--blue); } + /* end of utilitly classes */ -h1, h2, h3, h4{ +h1, +h2, +h3, +h4 { font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; color: var(--dark-brown); } + /* header start */ -.main-header{ +.main-header { display: grid; grid-template-columns: repeat(10, 10vw); grid-template-rows: 8% 92%; @@ -80,8 +117,9 @@ h1, h2, h3, h4{ margin: 0 auto; overflow: hidden visible; } -.main-header hr{ - grid-row: 1 / 1 ; + +.main-header hr { + grid-row: 1 / 1; grid-column: 1 / span 4; color: var(--gray); background-color: var(--gray); @@ -89,15 +127,18 @@ h1, h2, h3, h4{ width: 40vw; margin: 40px 0px 10px 40px; } -.main-header figure{ + +.main-header figure { grid-column: 5 / 11; - grid-row: 1 / 3; + grid-row: 1 / 3; background-color: black; } -.main-header figure img{ + +.main-header figure img { object-position: center; } -.header-content{ + +.header-content { position: relative; z-index: 1; grid-column: 1 / 6; @@ -106,17 +147,19 @@ h1, h2, h3, h4{ margin-left: 40px; background-color: hsla(0, 0%, 100%, 0.8); /* align items to center */ - display:flex; + display: flex; flex-flow: column nowrap; justify-content: center; } -.header-content h1{ + +.header-content h1 { position: relative; margin-bottom: 0.2em; line-height: 1em; color: hsl(12, 30%, 18%); } -.header-content h1::before{ + +.header-content h1::before { content: ""; position: absolute; z-index: -1; @@ -126,19 +169,22 @@ h1, h2, h3, h4{ width: 2em; filter: brightness(125%) saturate(150%); } + .header-content p { margin-right: 20%; min-width: 14rem; } + /* header end */ /* introduction start (section 1) */ -.intro{ +.intro { position: relative; margin: 10rem 3vw 10rem 34px; padding-left: max(30px, 5vw); } -.intro::before{ + +.intro::before { content: ""; position: absolute; right: 0; @@ -151,7 +197,8 @@ h1, h2, h3, h4{ max-width: 40rem; background-color: var(--white-gray); } -.intro::after{ + +.intro::after { content: ""; position: absolute; left: 0; @@ -161,53 +208,64 @@ h1, h2, h3, h4{ max-height: 22rem; width: 4px; } -.intro h2{ + +.intro h2 { text-transform: capitalize; } + /* introdection end */ /* section 2 (img gallery) */ -.gallery{ +.gallery { margin: 0 calc(2% + 12px); } -.gallery > .row{ + +.gallery>.row { margin-bottom: 20px; } -.gallery > .row > .row { + +.gallery>.row>.row { flex: 1 1 calc(40rem + 20px); } -.row{ + +.row { display: flex; flex-flow: row wrap; gap: 20px; } -.row>figure{ + +.row>figure { max-width: 100%; flex: 1 1 20rem; } + /* section 2 end */ /* main sections 3 & 4 */ -.main-sect{ +.main-sect { display: flex; flex-flow: row wrap; align-items: center; gap: 20px; background-color: snow; } -.main-sect figure{ + +.main-sect figure { flex: 1 1 300px; height: 60rem; width: 100%; } -.main-sect .content{ + +.main-sect .content { flex: 1 1 300px; padding: calc(2vw + 12px); } -.main-sect h2{ + +.main-sect h2 { position: relative; z-index: 1; } -.main-sect h2::after{ + +.main-sect h2::after { content: ""; position: absolute; left: 0; @@ -218,53 +276,63 @@ h1, h2, h3, h4{ width: 20rem; filter: brightness(125%) saturate(150%); } -.main-sect#main-sect-1{ + +.main-sect#main-sect-1 { margin-top: 5rem; } -.main-sect#main-sect-2 h2::after{ + +.main-sect#main-sect-2 h2::after { inset: auto 0 0 auto; } -.main-sect#main-sect-2 figure{ + +.main-sect#main-sect-2 figure { flex-basis: 340px; } + /* main sectins end */ /* map section start */ -.map{ +.map { padding: 5rem calc(2vw + 2rem); background-color: whitesmoke; clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 40px), 0% 100%); margin-bottom: -40px; - text-align: center; + text-align: center; } -.map *{ + +.map * { margin-bottom: 20px; } -.map iframe{ + +.map iframe { width: 100%; height: 48rem; - border:0 !important; + border: 0 !important; } + /* map section end */ /* testimonial start */ -.testimonial{ +.testimonial { padding: 80px calc(2% + 15px); text-align: right; background-color: hsl(230, 20%, 92%); font-size: 1.5rem; } -.testimonial p{ + +.testimonial p { font-size: 2rem; line-height: 2em; color: hsl(0, 0%, 20%); word-break: break-all; font-style: italic; } + /* testimonial end */ /* footer */ -footer{ +footer { background-color: hsl(240, 50%, 25%); color: var(--white-gray); font-size: 2rem; text-align: center; padding: 2rem; + font-style: italic; } \ No newline at end of file