Campfire Staff

commit 516ccef18c91eb129fad1ea6be53f3db018c1f44 Author: dispainn <1universer@gmail.com> Date: Sun Mar 16 17:11:17 2025 +0500 bug fixes diff --git a/fonts/Heebo-Bold.woff2 b/fonts/Heebo-Bold.woff2 new file mode 100644 index 0000000..8d43428 Binary files /dev/null and b/fonts/Heebo-Bold.woff2 differ diff --git a/fonts/Heebo-Light.woff2 b/fonts/Heebo-Light.woff2 new file mode 100644 index 0000000..e8b3f9a Binary files /dev/null and b/fonts/Heebo-Light.woff2 differ diff --git a/fonts/Yantramanav-Bold.woff2 b/fonts/Yantramanav-Bold.woff2 new file mode 100644 index 0000000..4c490bb Binary files /dev/null and b/fonts/Yantramanav-Bold.woff2 differ diff --git a/icons/arrow-right-down.svg b/icons/arrow-right-down.svg new file mode 100644 index 0000000..84beca9 --- /dev/null +++ b/icons/arrow-right-down.svg @@ -0,0 +1,3 @@ + diff --git a/icons/burger-icon.svg b/icons/burger-icon.svg new file mode 100644 index 0000000..6031332 --- /dev/null +++ b/icons/burger-icon.svg @@ -0,0 +1,8 @@ + diff --git a/images/Logo_Campfire_256x256.png b/images/Logo_Campfire_256x256.png new file mode 100644 index 0000000..9256f6f Binary files /dev/null and b/images/Logo_Campfire_256x256.png differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..9e36599 Binary files /dev/null and b/images/logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..53e4f4d --- /dev/null +++ b/index.html @@ -0,0 +1,77 @@ + + + + + + Campfire Staff + + + +

+ + +

+ +

+ + + +

+ + \ No newline at end of file diff --git a/normalize.css b/normalize.css new file mode 100644 index 0000000..27acba5 --- /dev/null +++ b/normalize.css @@ -0,0 +1,43 @@ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..e9898b2 --- /dev/null +++ b/styles.css @@ -0,0 +1,335 @@ +@import url(normalize.css); +@import url(variables.css); + +@font-face { + font-family: 'Heebo'; + src: url(./fonts/Heebo-Light.woff2) format('woff2'); + font-weight: 300; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Heebo'; + src: url(./fonts/Heebo-Bold.woff2) format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: 'Yantramanav'; + src: url(./fonts/Yantramanav-Bold.woff2) format('woff2'); + font-weight: 700; + font-style: normal; + font-display: swap; +} + + +body { + font-family: var(--font-family-base); + font-size: 16px; + line-height: 1.75; + + color: var(--color-light-gray); + background-color: var(--color-dark); +} + + +.container { + max-width: calc(var(--container-width) + var(--container-padding-x) * 2); + margin-inline: auto; + padding-inline: var(--container-padding-x); +} + +a { + color: var(--color-light); + text-decoration: none; +} + +a, +button, +input, +textarea, +svg * { + transition-duration: var(--transition-duration); +} + +a:hover { + color: var(--color-light-gray) +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; + text-transform: uppercase; +} + +.header-actions { + display: flex; + column-gap: 20px; +} + +.header-logo-text { + position: relative; + text-transform: uppercase; + font-weight: 700; + font-size: 24px; + white-space: nowrap; +} + +.header-logo-text::before { + position: absolute; + top: 7px; + left: -28px; + + content: ''; + display: block; + width: 22px; + aspect-ratio: 1; + background: url(images/Logo_Campfire_256x256.png) center/contain no-repeat; +} + +.header-logo-staff { + text-transform: none; + font-weight: 100; + color: var(--color-light-gray) +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + column-gap: 20px; + + min-height: var(--header-height); + + padding-inline: clamp(20px, 5.2vw, 150px); + + background-color: var(--color-dark-alternate-2); +} + +.header-menu-list { + display: flex; + column-gap: 50px; + flex-wrap: wrap; +} + +.header-menu-link { + display: inline-flex; + align-items: center; + column-gap: 7px; + height: var(--header-height); + text-decoration: none; + text-transform: uppercase; + font-weight: 700; + font-size: 12px; + letter-spacing: 1.2px; +} + +.header-menu-link.is-current::after { + content: ''; + width: 5px; + aspect-ratio: 1; + background-color: currentColor; + border-radius: 50%; +} + +.button { + display: inline-flex; + align-items: center; + height: 38px; + padding-inline: 26px; + + font-size: 12px; + font-weight: 700; + line-height: 2; + letter-spacing: 1.2px; + text-transform: uppercase; + + background-color: var(--color-light); + border: none; + border-radius: var(--border-radius); + + white-space: nowrap; + + cursor: default; +} + +.button:not(.header-signup-button):hover { + background-color: var(--color-light-gray); +} + +.header-signup-button { + background-color: transparent; + color: var(--color-light); + border: 1px solid var(--color-light); +} + +.header-signup-button:hover { + border: 1px solid var(--color-light-gray); + color: var(--color-light-gray); +} + +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + margin: -1px !important; + border: 0 !important; + padding: 0 !important; + white-space: nowrap !important; + clip-path: inset(100%) !important; + clip: rect(0 0 0 0) !important; + overflow: hidden !important; +} + +.banner { + display: flex; + flex-direction: column; + justify-content: end; + min-height: calc(95vh - var(--header-height)); + padding: 36px 70px; + color: var(--color-light); + background-color: var(--color-dark-alternate); + user-select: none; + row-gap: 20px; +} + +.banner-body { + text-transform: uppercase; +} + +.banner-info { + display: flex; + align-items: end; + + font-size: clamp(16px, 1.56vw, 30px); + line-height: 1.27; + font-weight: 700; + + margin-bottom: 5px; +} + +.banner-info::before { + content: ''; + width: clamp(60px, 10.1vw, 194px); + aspect-ratio: 1; + margin-right: 30px; + background: url(icons/arrow-right-down.svg) center/contain no-repeat; +} + +.banner-title { + font-size: min(15.62vw, 300px); + line-height: 1; +} + +.banner-title::after { + content: '?'; + font-size: 0.5em; + margin-left: clamp(5px, 2vh, 30px); + color: var(--color-dark-alternate-2); +} + +.banner-pagination-list { + display: flex; + justify-content: center; + column-gap: 10px; +} + +.banner-pagination-item { + display: flex; + border-radius: 20%; + transition-duration: var(--transition-duration); +} +.banner-pagination-item:hover { + background-color: var(--color-dark-alternate-2); +} + +.banner-pagination-button { + display: flex; + justify-content: center; + align-items: center; + + padding: 14px; + background-color: transparent; + border: none; + +} + +.banner-pagination-button.is-current::after { + background-color: var(--color-light); +} + +.banner-pagination-button::after { + content: ''; + width: 10px; + aspect-ratio: 1; + + border: var(--border); + border-radius: var(--border-radius); + + transition-duration: var(--transition-duration); + +} + +.banner-pagination-button:not(.is-current):hover::after { + border-color: var(--color-light-gray); +} + + + + + + + + + +@media (max-width: 1070px) { + + .header { + flex-wrap: wrap; + padding-top: 10px; + row-gap: 10px; + } + + .header, + .banner { + padding-inline: 5.2vw; + } + + .header-menu { + order: 1; + flex-basis: 100%; + } + + .header-menu-link { + height: 50px; + } +} + + + + + +@media (max-width: 540px) { + .header-menu-link { + height: 32px; + } + + .header-menu-list { + column-gap: 24px; + } + + .header-actions { + column-gap: 10px; + } + + .button { + padding-inline: 10px; + } + + .header-logo-text { + font-size: 20px; + } + .banner-info::before { + margin-right: 10px; + } +} \ No newline at end of file diff --git a/variables.css b/variables.css new file mode 100644 index 0000000..0246273 --- /dev/null +++ b/variables.css @@ -0,0 +1,23 @@ +:root { + --color-dark: #000000; + --color-dark-alternate: #131619; + --color-dark-alternate-2: #0d0f11; + --color-light: #FFFFFF; + --color-dark-gray: #404040; + --color-light-gray: #c4c4c4; + + --border-radius: 30px; + --border: 1px solid var(--color-light); + + --font-family-base: 'Heebo', sans-serif; + --font-family-accent: 'Yantramanav', sans-serif; + + --input-height: 54px; + + --container-width: 1300px; + --container-padding-x: 15px; + + --transition-duration: 0.2s; + + --header-height: 90px; +} \ No newline at end of file

Campfire Staff

New projects

Campfire