Login
Holding Pages

Holding from the Select Financial Search project

05 Apr 2023

Holding from the Select Financial Search project
HTML
SCSS
PostCSS
JS 
                            <div
	class="holding-select w-full min-h-[calc(100*var(--vh))] max-md:pb-[50px] pb-[100px] flex flex-col overflow-hidden relative"
>
	<span class="select-decor-big-bg">
		<img
			class="w-full h-full object-contain"
			src="./images/select-big-decor.svg"
			alt=""
		/>
	</span>
	<div class="container py-10 max-md:py-6 max-sm:py-3">
		<div class="grid grid-cols-12 max-lg:grid-cols-6">
			<a href="#" class="col-span-3">
				<img src="./images/select-logo.svg" alt="" />
			</a>
		</div>
	</div>
	<div class="flex flex-col items-center justify-center max-sm:grow">
		<div class="container !mb-28 max-md:!mb-12">
			<h1 class="uppercase font-extrabold mt-32 max-md:mt-16 max-sm:mt-8 mb-6">
				<span class="text-light-blue">Introducing</span> Select
			</h1>
			<h2 id="remove-br" class="font-semibold">
				А Talent as a Service and AI-powered wellbeing <br />
				platform for your workforce
			</h2>
		</div>
		<div class="container grid grid-cols-12 gap-6 !mb-4">
			<div class="col-span-3 max-lg:col-span-6 max-md:col-span-full">
				<p class="text-light-blue font-normal mt-3.5 mb-3">Email:</p>
				<a
					href="mailto:Hello@selecttechnology.io"
					class="text-base font-extrabold transition-colors w-fit"
				>
					Hello@selecttechnology.io
				</a>
			</div>

			<div class="col-span-2 max-lg:col-span-6 max-md:col-span-full">
				<p class="text-light-blue font-normal mt-3.5 mb-3">Phone:</p>
				<a
					href="tel:01172840700"
					class="text-base font-extrabold transition-colors w-fit"
				>
					0117 284 0700
				</a>
			</div>

			<p
				class="blur-text-block relative col-span-5 col-start-8 max-lg:col-span-full max-lg:ml-10 max-lg:mt-12 max-sm:mb-8"
			>
				We are currently preparing for launch, but if you’d like to know more,
				then please reach out to us, we’d love to hear from you.
			</p>
		</div>
	</div>
</div>
                        
                            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2'),
  url('../fonts/ProximaNova-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
  url('../fonts/ProximaNova-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../fonts/ProximaNova-Extrabld.woff2') format('woff2'),
  url('../fonts/ProximaNova-Extrabld.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.holding-select {
  --dark-blue: #003453;
  --medium-blue: #1D445F;
  --light-blue: #47798F;

  --font-main: "Proxima Nova", sans-serif;
  --font-second: "Inter", sans-serif;

  h3,
  h4,
  h5,
  h6,
  p,
  a {
    font-family: var(--font-main);
    color: var(--dark-blue);
  }

  h1 {
    font-family: var(--font-second);
    color: var(--dark-blue);
    font-size: ac(64px, 32px);
    letter-spacing: 0.02em;
    line-height: 150.00%;
  }

  h2 {
    color: var(--medium-blue);
    font-size: ac(24px, 18px);
    line-height: 166.67%;
  }

  .text-light-blue {
    color: var(--light-blue);
  }

  p, a {
    font-size: ac(20px, 14px);
    line-height: 120.00%;
  }

  a {
    position: relative;

    &:before {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 2px;
      background: var(--dark-blue);
      width: 0;
      transition: all .25s ease;
    }

    &:hover {
      color: var(--light-blue);

      &:before {
        right: auto;
        left: 0;
        background: var(--light-blue);
        width: 100%;
        transition: all .25s ease;
      }
    }
  }

  .holding-select {
    --dark-blue: #003453;
    --medium-blue: #1d445f;
    --light-blue: #47798f;

    --font-main: "Proxima Nova", sans-serif;
    --font-second: "Inter", sans-serif;

    h3,
    h4,
    h5,
    h6,
    p,
    a {
      font-family: var(--font-main);
      color: var(--dark-blue);
    }

    h1 {
      font-family: var(--font-second);
      color: var(--dark-blue);
      font-size: ac(64px, 32px);
      letter-spacing: 0.02em;
      line-height: 150%;
    }

    h2 {
      color: var(--medium-blue);
      font-size: ac(24px, 18px);
      line-height: 166.67%;
    }

    .text-light-blue {
      color: var(--light-blue);
    }

    p,
    a {
      font-size: ac(20px, 14px);
      line-height: 120%;
    }

    a {
      position: relative;

      &:before {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 2px;
        background: var(--dark-blue);
        width: 0;
        transition: all 0.25s ease;
      }

      &:hover {
        color: var(--light-blue);

        &:before {
          right: auto;
          left: 0;
          background: var(--light-blue);
          width: 100%;
          transition: all 0.25s ease;
        }
      }
    }

    .container {
      margin: 0 auto;
      max-width: 1280px;
      width: perc(1280);

      @include media(901) {
        width: 89%;
      }
    }

    .select-decor-big-bg {
      @include aspect-ratio(1263, 1752);
      position: absolute;
      right: 0;
      top: 50%;
      z-index: -10;
      transform: translateY(-52%) translateX(34.5%);
      width: 87.71%;
      max-width: 1263px;
      min-width: 660px;

      @include max-md {
        opacity: 0.5;
        transform: translateY(-60%) translateX(49%);
      }
    }

    .blur-text-block {
      font-size: ac(23px, 16px);
      line-height: 139.13%;

      &:after {
        content: "";
        background: rgba(var(--white), 0.8);
        backdrop-filter: blur(16px);
        position: absolute;
        left: ac(-109px, -52px);
        top: ac(-72px, -34px);
        bottom: ac(-72px, -34px);
        right: -100vw;
        z-index: -1;
        border: ac(6px, 4px) solid #b3c4c4;
        border-radius: 10000px;
      }
    }
  }
}
                        
                            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Semibold.woff2') format('woff2'),
    url('../fonts/ProximaNova-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Regular.woff2') format('woff2'),
    url('../fonts/ProximaNova-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Proxima Nova';
    src: url('../fonts/ProximaNova-Extrabld.woff2') format('woff2'),
    url('../fonts/ProximaNova-Extrabld.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



.holding-select {
    --dark-blue: #003453;
    --medium-blue: #1D445F;
    --light-blue: #47798F;

    --font-main: "Proxima Nova", sans-serif;
    --font-second: "Inter", sans-serif;

    h3,
    h4,
    h5,
    h6,
    p,
    a {
        font-family: var(--font-main);
        color: var(--dark-blue);
    }

    h1 {
        font-family: var(--font-second);
        color: var(--dark-blue);
        font-size: ac(64px, 32px);
        letter-spacing: 0.02em;
        line-height: 150.00%;
    }

    h2 {
        color: var(--medium-blue);
        font-size: ac(24px, 18px);
        line-height: 166.67%;
    }

    .text-light-blue {
        color: var(--light-blue);
    }

    p, a {
        font-size: ac(20px, 14px);
        line-height: 120.00%;
    }

    a {
        position: relative;

        &:before {
            position: absolute;
            right: 0;
            bottom: 0;
            height: 2px;
            background: var(--dark-blue);
            width: 0;
            transition: all .25s ease;
        }

        &:hover {
            color: var(--light-blue);

            &:before {
                right: auto;
                left: 0;
                background: var(--light-blue);
                width: 100%;
                transition: all .25s ease;
            }
        }
    }

.holding-select {
	--dark-blue: #003453;
	--medium-blue: #1d445f;
	--light-blue: #47798f;

	--font-main: "Proxima Nova", sans-serif;
	--font-second: "Inter", sans-serif;

	h3,
	h4,
	h5,
	h6,
	p,
	a {
		font-family: var(--font-main);
		color: var(--dark-blue);
	}

	h1 {
		font-family: var(--font-second);
		color: var(--dark-blue);
		font-size: ac(64px, 32px);
		letter-spacing: 0.02em;
		line-height: 150%;
	}

	h2 {
		color: var(--medium-blue);
		font-size: ac(24px, 18px);
		line-height: 166.67%;
	}

	.text-light-blue {
		color: var(--light-blue);
	}

	p,
	a {
		font-size: ac(20px, 14px);
		line-height: 120%;
	}

	a {
		position: relative;

		&:before {
			position: absolute;
			right: 0;
			bottom: 0;
			height: 2px;
			background: var(--dark-blue);
			width: 0;
			transition: all 0.25s ease;
		}

		&:hover {
			color: var(--light-blue);

			&:before {
				right: auto;
				left: 0;
				background: var(--light-blue);
				width: 100%;
				transition: all 0.25s ease;
			}
		}
	}

	.container {
		margin: 0 auto;
		max-width: 1280px;
		width: perc(1280);

		@mixin tab-md {
			width: 89%;
		}
	}

	.select-decor-big-bg {
		@mixin aspect-ratio 1263, 1752;
		position: absolute;
		right: 0;
		top: 50%;
		z-index: -10;
		transform: translateY(-52%) translateX(34.5%);
		width: 87.71%;
		max-width: 1263px;
		min-width: 660px;

		@mixin tab-sm {
			opacity: 0.5;
			transform: translateY(-60%) translateX(49%);
		}
	}

	.blur-text-block {
		font-size: ac(23px, 16px);
		line-height: 139.13%;

		&:after {
			content: "";
			background: rgba(var(--white), 0.8);
			backdrop-filter: blur(16px);
			position: absolute;
			left: ac(-109px, -52px);
			top: ac(-72px, -34px);
			bottom: ac(-72px, -34px);
			right: -100vw;
			z-index: -1;
			border: ac(6px, 4px) solid #b3c4c4;
			border-radius: 10000px;
		}
	}
}
                        
                            let root = document.documentElement;
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
root.style.setProperty("--vh", `${vh}px`);

// We listen to the resize event
window.addEventListener("resize", () => {
	// We execute the same script as before
	let vh = window.innerHeight * 0.01;
	root.style.setProperty("--vh", `${vh}px`);
});


Holding секція з проекту Select Financial Search

В основному зроблена за допомогою Tailwind CSS + PostCSS.

Треба додати в проєкт також шрифти та зображення

fonts.7z

images.7z

0