Website demo

index.html

<div class="bg">storeplus</div>
<nav>
  <div class="logo">
    <img src="https://raw.githubusercontent.com/CleverYeti/TempAssets/main/Icon.png" width="512px" height="512px" alt="Logo">
    <span>Custom Websites</span>
  </div>
  
  <div class="navspace"></div>
  
  <div class="navmenu">
    <div class="label">
      Products
      <ion-icon name="chevron-down-outline"></ion-icon>
    </div>
  </div>
  
  <div class="navmenu">
    <div class="label">
      Services
      <ion-icon name="chevron-down-outline"></ion-icon>
    </div>
    <div class="dropdown">
      <div></div>
      <a href="">Service 1</a>
      <a href="">Service 2</a>
      <a href="">Service 3</a>
      <a href="">Service 4</a>
    </div>
  </div>
  
  <a class="navlink">
    About
  </a>

</nav>

<section class="fullpage hero">
  <div class="herotext">
    <h1>Coding beautiful<br/>websites</h1>
    <p>A well-designed and well-coded website can do wonders when it comes to attracting clients and keeping them on your site</p>
    <button class="mainbutton">
      <span>Get your own website</span>
    </button>
  </div>
  <div class="heroimg">
    <div class="codegraphic">
      <div class="codecontainer">
        <div class="codegraphictext"></div>
      </div>
    </div>
  </div>
</section>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

script.js

let code = document.body.innerHTML;
code = code.replace(/(\r\n|\n|\r)/gm, "");
//code = code.replace(/\s/g, "");

let animEl = document.querySelector(".codegraphictext");

animEl.innerText = code + "\n" + code + "\n" + code;
//animEl.innerText = "" + [Array(100).fill(1), Array(100).fill(2), Array(100).fill(3), Array(100).fill(4), Array(100).fill(5), Array(100).fill(6), Array(100).fill(7)] + [Array(100).fill(1), Array(100).fill(2), Array(100).fill(3), Array(100).fill(4), Array(100).fill(5), Array(100).fill(6), Array(100).fill(7)]

 

style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');

:root {
  font-family: "Inter";
  font-size: 16px;
  --navheight: 6rem;
  --pageheight: calc(100vh - var(--navheight));
  
  --darkaccent: #310357;
  --lightaccent: #8c37dc;
  --glassbg: #d5d6ff55;
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
}

.bg {
  position: fixed;
  inset: 0;
  background: url(https://raw.githubusercontent.com/CleverYeti/TempAssets/main/IMG_4243.png) center center / cover;
  z-index: -1;
}
nav {
  position: sticky;
  top: 0;
  height: var(--navheight);
  width: 100%;
  background: var(--glassbg);
  backdrop-filter: blur(1.5rem);
  -webkit-backdrop-filter: blur(1.5rem);
  border-bottom: 1px solid #ffffff27;
  display: flex;
  padding: 0 1rem;
  z-index: 10;
}

nav .logo {
  display: flex;
  align-items: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--darkaccent);
  font-family: "Gabarito";
}
nav > .logo > img {
  height: 5rem;
  width: 5rem;
  margin-bottom: 0.5rem;
}

nav > .navspace {
  flex-grow: 1;
}

nav > .navmenu,
nav > .navlink {
  border-radius: 0;
  border: none;
  width: 10rem;
  font-size: 1.25rem;
  display: grid;
  place-content: center;
  color: var(--darkaccent);
  background: none;
  position: relative;
  font-weight: 500;
}
nav > .navmenu > .label {
  position: relative;
}
nav > .navmenu > .label > ion-icon {
  position: absolute;
  right: -1.5rem;
  top: 0.25rem;
  
}
nav > .navmenu:hover > .label > ion-icon {
  animation: arrowbounce 200ms forwards;
}
@keyframes arrowbounce {
  50% {
    transform: translateY(0.5rem);
  }
}

nav > .navmenu > .dropdown {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -1.5rem);
  min-width: 12rem;
  padding-top: 0.5rem;
  isolation: isolate;
  transition: transform 0ms 200ms, opacity 100ms ease;
}
nav > .navmenu:hover > .dropdown {
  opacity: 1;
  pointer-events: auto;
  display: block;
  transform: translateX(-50%);
  transition: transform 300ms ease, opacity 200ms linear;
}
nav > .navmenu > .dropdown:before {
  position: absolute;
  content: "";
  inset: 0.5rem 0 0 0;
  background: var(--glassbg);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  border: 1px solid #ffffff37;
  border-radius: 0.5rem;
  z-index: -1;
}

nav > .navmenu > .dropdown > a {
  display: grid;
  place-content: center;
  height: 3rem;
  text-decoration: none;
}








section.fullpage {
  min-height: var(--pageheight);
}

section.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.herotext {
  width: 25rem;
}
.heroimg {
  width: 30rem;
  max-width: calc(var(--pageheight) - 2rem);
  min-width: 25rem;
}
.codegraphic {
  position: relative;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  background: #ffffff44;
  margin: 0 0 0 3rem;
  overflow: hidden;
  font-size: 0.85rem;
  font-family: "Source Code Pro";
  color: var(--lightaccent);
}
.codegraphic:after {
  position: absolute;
  content: "";
  inset: 0;
  border-radius: 50%;
  background: #ffffff01;
  box-shadow: inset 0 0 2rem #d5d6ff;
  border: 1px solid #d5d6ffdd;
}
.codegeaphic > .codecontainer {
  position: absolute;
  inset: 0 0 auto 0;
}
.codegraphictext {
  d-position: absolute;
  d-inset: 0;
  word-break: break-all;
  d-transform: translateY(-33.33%);
  animation: codescroll 50s linear infinite;
}
@keyframes codescroll {
 100% {
    transform: translateY(-33.33%);
  }
}


.herotext > h1 {
  font-size: 3rem;
  line-height: 0.9em;
  font-weight: 700;
  font-family: "Gabarito";
  margin: 0;
}
.herotext > p {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--darkaccent);
  margin-bottom: 1.5rem;
  margin-right: 3rem;
}
.mainbutton {
  margin-left: 0rem;
  font-size: 1.2rem;
  padding: 0.65em 1.25em;
  border-radius: 0.5rem;
  overflow: hidden;
  background: linear-gradient(135deg, #8c37dc, #7b32c2);
  border: none;
  color: #f0f2ff;
  font-weight: 500;
  position: relative;
  transition: transform 300ms ease, box-shadow 300ms ease;
}
.mainbutton:hover {
  box-shadow: #8c37dc 0 0 0.75rem 0;
  transform: scale(1.05);
}

.mainbutton:before {
  position: absolute;
  content: "";
  width: 1rem;
  inset: -1rem auto -1rem -2rem;
  background: linear-gradient(to right, #ffffff00 0%, #ffffff88 30% 70%, #ffffff00 100%);
  transform: rotate(30deg);
  opacity: 50%;
}
.mainbutton:hover:before {
  animation: buttonshine 500ms cubic-bezier(0.645, 0.045, 0.355, 1.000), buttonshine2 500ms ease-in-out;
}
@keyframes buttonshine {
  to {
    inset: -1rem auto -1rem 80%;
    transform: translateX(4rem) rotate(30deg);
  }
}
@keyframes buttonshine2 {
  50% {
    width: 2rem;
    opacity: 1;
  }
  100% {
    width: 0rem;
    opacity: 50%;
  }
}

website-demo.markdown

Website demo

A Pen by Yo on CodePen.

License.