<div class="container">
    <nav>
      <a href="/page1.html" class="active">Page 1</a>
      <a href="/page2.html">Page 2</a>
    </nav>

    <section class="page1">
      <div class="card">
        <div class="box box1">
          <h1>Box 1</h1>
        </div>
        <a target="_blank" href="https://bejamas.io/blog/what-is-view-transitions-api/">Check out my article on view transitions on the Bejamas blog!</a> Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsa excepturi, labore quia natus tempore ad unde necessitatibus, dolorem error mollitia praesentium dicta, doloremque id nihil vero quam eos? Sed eos tempore nostrum, quasi <a href="https://codepen.io/seyedi/pen/dywGLpN" target="_blank">See #2</a> accusamus fuga inventore minima ab, culpa nihil facilis mollitia totam voluptates esse omnis quisquam possimus rerum tempora deleniti eveniet odit odio porro. Officia, obcaecati harum iure ducimus aspernatur magnam tempora eveniet adipisci, ipsa cum excepturi perspiciatis. Tenetur voluptate rem aliquid illum! Facilis velit mollitia maiores blanditiis ipsum, voluptates dolorem eum pariatur obcaecati, cumque deserunt odit vero ut. Laudantium, delectus? Corporis debitis iste recusandae facilis numquam laborum.
      </div>
    </section>

    <section class="page2">
      <div class="card">
        <div class="box box2">
          <h1>Box 2</h1>
        </div>
        <a target="_blank" href="https://bejamas.io/blog/what-is-view-transitions-api/">It has many videos and demos!</a>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsa excepturi, labore quia natus tempore ad unde necessitatibus, dolorem error mollitia praesentium dicta, doloremque id nihil vero quam eos? Sed eos tempore nostrum, quasi accusamus fuga inventore minima ab, culpa nihil facilis mollitia totam voluptates esse omnis quisquam possimus rerum tempora deleniti eveniet odit odio porro. Officia, obcaecati harum iure ducimus aspernatur magnam tempora eveniet adipisci, ipsa cum excepturi perspiciatis. Tenetur voluptate rem aliquid illum! Facilis velit mollitia maiores blanditiis ipsum, voluptates dolorem eum pariatur obcaecati, cumque deserunt odit vero ut. Laudantium, delectus? Corporis debitis iste recusandae facilis numquam laborum.
      </div>      
    </section>
  </div>


<a href="https://bejamas.io/blog/what-is-view-transitions-api/" class="source-link">  
  <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="none" viewBox="0 0 131 131">
          <g clip-path="url(#a)">
            <path fill="#F94062" d="M130.618,-0.03h-130.618v130.678h130.618v-130.678z"></path>
            <path fill="#F2F0F7" d="M36.324,87.116c-3.308,0,-5.862,-2.477,-5.862,-5.407v-42.158c0,-3.083,2.704,-5.411,5.862,-5.411h12.7c11.273,0,16.907,7.213,16.907,14.728c0,5.259,-3.38,8.493,-7.891,10.67c4.66,1.878,9.32,5.26,9.32,11.8c0,8.793,-7.063,15.778,-18.639,15.778h-12.397zm13.3,-32.235c2.63,0,5.788,-1.804,5.788,-5.862c0,-2.856,-1.353,-5.41,-5.26,-5.41h-9.172v11.272h8.643zm-8.643,9.619v13.075h8.418c4.962,0,7.438,-2.48,7.438,-6.387c0,-4.284,-3.006,-6.688,-6.987,-6.688h-8.87z"></path>
            <path fill="#2E0276" d="M95.033,86.934c2.63,0,5.184,2.106,5.184,4.81c0,2.708,-2.256,4.734,-5.184,4.734h-20.013c-2.932,0,-5.186,-2.026,-5.186,-4.734c0,-2.704,2.556,-4.81,5.186,-4.81h20.013z"></path>
          </g>
          <defs>
            <clipPath id="a">
              <path fill="#fff" d="M0,0h130.618v130.618h-130.618z"></path>
            </clipPath>
          </defs>
        </svg>
  Read the blog
</a>

.box1 {
  width: 10rem;
  view-transition-name: box;
}

.box2 {
  float: none;
  width: 100%;
  view-transition-name: box;
}






:root {
  --color-primary: #da3654;
  --color-text: #000;
  --color-text-2: #3c4856c2;
}

@font-face {
  font-family: 'Recoleta';
  src: url('https://bejamas.io/fonts/recoleta/Recoleta-SemiBold--subset.woff2')
    format('woff2');
}

@font-face {
  font-family: 'Poppins';
  src: url('https://bejamas.io/fonts/p-vf.woff2')
    format('woff2');
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html *,
html *::after,
html *::before {
  box-sizing: inherit;
}

body {
  margin: 0;
  font: 100%/1.6 'Poppins', sans-serif;
  background-color: #1b1b1b;
}

:is(h1, h2) {
  font-family: 'Recoleta', 'Poppins';
}

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.container {
  max-width: min(90vw, 42rem);
  margin-inline: auto;
}

nav {
  text-align: center;
  padding: 2rem;
  display: flex;
  gap: 2rem;
  justify-content: center;
  
  & a {
    color: #fff;
    text-decoration: none;
  }
}

.active {
  text-decoration: underline;
  text-underline-offset: 10px;
}

.page2 {
  display: none;
}

.card {
  color: #fff5;
  margin: 5rem auto;
}

.box {
  color: #fff;  
  padding: 2rem;
  border-radius: 4px;
  float: left;
  margin-right: 2rem;
  margin-bottom: 2rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
}

.box2 {
  background-image: linear-gradient(to top, #6a85b6 0%, #bac8e0 100%);
}

a {
  color: #ff7dab;
  text-decoration: none;
}

.page2 a {
  color: #6a85b6;
}

.source-link {
  position: fixed;
  right: 32px;
  bottom: 32px;  
  width: fit-content;
  box-sizing: border-box;
  font-size: 16px;
  display: flex;
  padding: 0.75em 1em 0.75em 0.75em;
  justify-content: center;
  align-items: center;
  gap: 0.5em;
  border-radius: 128px;
  background: linear-gradient(270deg, #AFE8EF 0%, #E7E1FA 100%);
  color: #000;
  text-align: center;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-decoration: none;
}

.source-link svg {
  display: block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.25em;
}

const nav1 = document.querySelector('nav a:first-child');
const nav2 = document.querySelector('nav a:nth-child(2)');
const page1 = document.querySelector('.page1');
const page2 = document.querySelector('.page2');

nav1.addEventListener('click', (event) => {
  event.preventDefault();
  document.startViewTransition(() => {
    page2.style.display = 'none';
    page1.style.display = 'block';
    nav2.classList.remove('active');
    nav1.classList.add('active');
  });
})

nav2.addEventListener('click', (event) => {
  event.preventDefault();
  document.startViewTransition(() => {
    page1.style.display = 'none';
    page2.style.display = 'block';
    nav1.classList.remove('active');
    nav2.classList.add('active');        
  });      
})