Casy.js

Play Time

here
comes
the
funCooker

Ayo
River

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore in blanditiis illum architecto eius! Nemo, sapiente! Perspiciatis id aut velit labore molestias minima natus necessitatibus.

[email protected]

Copy Landing Page Component Here!

import React, { Component } from 'react';
import styled from 'styled-components';

const vpScale = (minSize, maxSize, minScreen, maxScreen, scaleMode) => {
  let minmaxScale = {
    withPx(viewport) {
      return `calc(${minSize}px + (${maxSize} - ${minSize}) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen}));`;
    },
    withVp(viewport) {
      return `calc(
        calc(${minScreen / 100}px * ${minSize}) + (calc(${maxScreen /
        100} * ${maxSize}) - calc(${minScreen /
        100} * ${minSize})) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen})
      )`;
    }
  };

  switch (scaleMode) {
    case 'vw-vp':
      return minmaxScale.withVp('100vw');
    case 'vh-vp':
      return minmaxScale.withVp('100vh');
    case 'vw-px':
      return minmaxScale.withPx('100vw');
    case 'vh-px':
      return minmaxScale.withPx('100vh');
    case 'vmin-vp':
      return minmaxScale.withVp('100vmin');
    case 'vmin-px':
      return minmaxScale.withPx('100vmin');
    default:
      /* for debugging */
      console.log('vpScale - recieved invalid scale type vvv');
      console.log(
        `${minSize}, ${maxSize}, ${minScreen}, ${maxScreen}, '${scaleMode}'`
      );
  }
};

const Wrapper = styled.div`
  @import url('https://fonts.googleapis.com/css?family=Poppins:400,700');

  @import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
  min-height: 100vh;
  display: grid;
  grid-template-columns:
    1fr
    [Content-start Img2-start]
    ${vpScale(7, 4, 320, 750, 'vw-vp')}
    [Img1-start]
    ${vpScale(33, 33, 320, 750, 'vw-vp')}
    [Img1-end]
    ${vpScale(13, 26, 320, 750, 'vw-vp')}
    [Img3-start]
    ${vpScale(41, 31, 320, 750, 'vw-vp')}
    [Img2-end Img3-end Content-end]
    1fr;
  grid-template-rows:
    minmax(20px, 1fr)
    [Content-start Logo-start]
    ${vpScale(15, 7, 320, 1300, 'vh-vp')}
    [Logo-end Nav-start]
    ${vpScale(20, 8, 320, 1300, 'vh-vp')}
    [Nav-end Img1-start MainHeading-start]
    ${vpScale(25, 15, 320, 1300, 'vh-vp')}
    [MainHeading-end Img2-start]
    ${vpScale(10, 6, 320, 1300, 'vh-vp')}
    [Img1-end]
    ${vpScale(20, 19, 320, 1300, 'vh-vp')}
    [Img3-start]
    ${vpScale(18, 7, 320, 1300, 'vh-vp')}
    [Img2-end]
    ${vpScale(38, 20, 320, 1300, 'vh-vp')}
    [Img3-end Email-start]
    ${vpScale(20, 7, 320, 1300, 'vh-vp')}
    [Email-end Button-start]
    ${vpScale(20, 7, 320, 1300, 'vh-vp')}
    [Button-end Content-end]
    minmax(20px, 1fr);

  /* ------------------------- @media - Wrapper ------- */
  @media (min-width: 750px) {
    grid-template-columns:
      1fr
      [Content-start Img2-start]
      ${vpScale(4, 9, 750, 1050, 'vw-vp')}
      [Img1-start]
      ${vpScale(33, 25, 750, 1050, 'vw-vp')}
      [Img1-end]
      ${vpScale(26, 22, 750, 1050, 'vw-vp')}
      [Img3-start]
      ${vpScale(31, 25, 750, 1050, 'vw-vp')}
      [Img2-end Img3-end Content-end]
      1fr;
    grid-template-rows:
      minmax(20px, 1fr)
      [Content-start Logo-start]
      ${vpScale(11, 7, 600, 1300, 'vh-vp')}
      [Logo-end Nav-start]
      ${vpScale(15, 9, 600, 1300, 'vh-vp')}
      [Nav-end Img1-start MainHeading-start]
      ${vpScale(25, 15, 600, 1300, 'vh-vp')}
      [MainHeading-end Img2-start]
      ${vpScale(10, 6, 600, 1300, 'vh-vp')}
      [Img1-end]
      ${vpScale(30, 19, 600, 1300, 'vh-vp')}
      [Img3-start]
      ${vpScale(14, 7, 600, 1300, 'vh-vp')}
      [Img2-end]
      ${vpScale(42, 20, 600, 1300, 'vh-vp')}
      [Img3-end Email-start]
      ${vpScale(13, 7, 600, 1300, 'vh-vp')}
      [Email-end Button-start]
      ${vpScale(13, 7, 600, 1300, 'vh-vp')}
      [Button-end Content-end]
      minmax(20px, 1fr);
  }
  /* ------------------------- @media - Wrapper ------- */
  @media (min-width: 1050px) {
    grid-template-columns:
      1fr
      [Content-start]
      ${vpScale(33, 24, 1050, 1920, 'vw-vp')}
      [VertNums-start]
      ${vpScale(8, 6, 1050, 1920, 'vw-vp')}
      [Img2-start]
      ${vpScale(7, 7, 1050, 1920, 'vw-vp')}
      [Img1-start]
      ${vpScale(12, 8, 1050, 1920, 'vw-vp')}
      [Img3-start]
      ${vpScale(22, 18, 1050, 1920, 'vw-vp')}
      [Img1-end]
      ${vpScale(8, 8, 1050, 1920, 'vw-vp')}
      [Content-end]
      1fr;
    grid-template-rows:
      minmax(20px, 1fr)
      [Img1-start]
      ${vpScale(19, 13, 720, 1920, 'vh-vp')}
      [Img2-start]
      ${vpScale(8, 6, 720, 1920, 'vh-vp')}
      [Img1-end]
      ${vpScale(30, 23, 720, 1920, 'vh-vp')}
      [Img3-start]
      ${vpScale(10, 8, 720, 1920, 'vh-vp')}
      [Img2-end]
      ${vpScale(30, 16, 720, 1920, 'vh-vp')}
      [Img3-end]
      minmax(20px, 1fr);
  }
`;

const Logo = styled.h2`
  grid-column: Content-start / Content-end;
  grid-row: Logo-start / Logo-end;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: 'Poppins', sans-serif;
  font-weight: bold;

  font-size: ${vpScale(28, 46, 320, 750, 'vmin-px')};

  @media (min-width: 750px) {
    font-size: ${vpScale(30, 46, 320, 1050, 'vmin-px')};
  }
  @media (min-width: 1050px) {
    grid-column: Content-start / VertNums-start;
    grid-row: Img1-start / Img2-start;
    justify-content: flex-start;

    font-weight: normal;
    font-size: ${vpScale(30, 60, 320, 1920, 'vmin-px')};
  }
`;

const Nav = styled.ul`
  grid-column: Content-start / Content-end;
  grid-row: Nav-start / Nav-end;
  display: flex;
  justify-content: center;

  list-style: none;
  font-size: ${vpScale(17, 27, 320, 750, 'vmin-px')};

  li {
    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    padding: 10px;
  }

  @media (min-width: 750px) {
    font-size: ${vpScale(18, 27, 320, 1050, 'vmin-px')};
  }
  @media (min-width: 1050px) {
    grid-column: Content-start / VertNums-start;
    grid-row: Img2-end / Img3-end;
    justify-content: flex-start;
    align-items: center;

    font-size: ${vpScale(15, 23, 320, 1920, 'vmin-px')};
  }
`;

const MainHeading = styled.h2`
  grid-column: Img1-end / Content-end;
  grid-row: MainHeading-start / MainHeading-end;
  display: flex;
  justify-content: center;
  align-items: center;

  font-family: 'Josefin Sans', sans-serif;
  font-size: ${vpScale(32, 56, 320, 750, 'vmin-px')};
  font-weight: bold;

  @media (min-width: 750px) {
    font-size: ${vpScale(40, 56, 320, 1050, 'vmin-px')};
  }
  @media (min-width: 1050px) {
    grid-column: Content-start / VertNums-start;
    grid-row: Img2-start / Img2-end;
    justify-content: flex-start;
    align-items: flex-start;

    font-size: ${vpScale(45, 140, 320, 1920, 'vmin-px')};

    position: relative;
    &::after {
      content: '';
      position: absolute;
      background: #000;
      top: ${vpScale(-9, -40, 320, 1920, 'vmin-px')};
      left: ${vpScale(29, 92, 320, 1920, 'vmin-px')};
      width: ${vpScale(48, 130, 320, 1920, 'vmin-px')};
      height: ${vpScale(2, 6, 320, 1920, 'vmin-px')};
    }
  }
`;

const DescText = styled.p`
  grid-column: Content-start / Img3-start;
  grid-row: Img2-end / Img3-end;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  color: #9e9e9e;
  width: ${vpScale(45, 50, 320, 750, 'vw-vp')};
  font-size: ${vpScale(10, 19, 320, 750, 'vmin-px')};

  @media (min-width: 750px) {
    width: ${vpScale(50, 44, 750, 1050, 'vw-vp')};
    font-size: ${vpScale(19, 22, 320, 1050, 'vmin-px')};
  }
  @media (min-width: 1050px) {
    grid-column: Content-start / VertNums-start;
    grid-row: Img2-start / Img2-end;
    justify-self: start;
    justify-content: flex-start;
    align-items: flex-end;

    text-align: left;

    width: 100%;
    font-size: ${vpScale(12, 30, 320, 1920, 'vmin-px')};
    padding-bottom: 20px;
  }
`;

const VerticalNums = styled.ul`
  display: none;
  list-style: none;

  @media (min-width: 1050px) {
    display: block;
    grid-column: VertNums-start / Img2-start;
    grid-row: Img1-end / Img3-start;

    line-height: 2;
    font-size: ${vpScale(16, 40, 320, 1920, 'vmin-px')};

    li:nth-of-type(2) {
      text-decoration: underline;
    }
  }
`;

const Img1 = styled.img`
  grid-column: Img1-start / Img1-end;
  grid-row: Img1-start / Img1-end;

  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
`;

const Img2 = styled.img`
  grid-column: Img2-start / Img2-end;
  grid-row: Img2-start / Img2-end;

  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 1px 5px 20px rgba(0, 0, 0, 0.3);

  @media (min-width: 1050px) {
    grid-column: Img2-start / Content-end;
  }
`;

const Img3 = styled.img`
  grid-column: Img3-start / Img3-end;
  grid-row: Img3-start / Img3-end;

  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(90%) invert(10%) sepia(80%) brightness(50%);
  box-shadow: 3px 7px 25px rgba(0, 0, 0, 0.2);

  @media (min-width: 1050px) {
    grid-column: Img3-start / Content-end;
  }
`;

const Email = styled.h6`
  grid-column: Content-start / Content-end;
  grid-row: Email-start / Email-end;
  display: flex;
  justify-content: center;
  align-items: center;

  color: #9e9e9e;
  font-size: ${vpScale(14, 27, 320, 750, 'vmin-px')};
  font-weight: bold;

  @media (min-width: 750px) {
    font-size: ${vpScale(17, 27, 320, 1050, 'vmin-px')};
  }
  @media (min-width: 1050px) {
    grid-column: VertNums-start / Img3-start;
    grid-row: Img2-end / Img3-end;
    align-items: center;

    font-size: ${vpScale(14, 20, 320, 1920, 'vmin-px')};
  }
`;

const CTAButton = styled.button`
  grid-column: Content-start / Content-end;
  grid-row: Button-start / Button-end;
  justify-self: center;
  align-self: center;
  display: flex;
  justify-content: center;
  align-items: center;

  border: 2px solid #000;
  background: #fff;
  padding: 10px;
  font-size: ${vpScale(14, 22, 320, 750, 'vmin-px')};
  font-weight: bold;
  transition: 250ms;

  &:hover {
    background: #000;
    color: white;
  }

  @media (min-width: 750px) {
    font-size: ${vpScale(16, 22, 320, 1050, 'vmin-px')};
  }
  @media (min-width: 1050px) {
    grid-column: Content-start / VertNums-start;
    grid-row: Img2-end / Img3-end;
    justify-self: start;
    align-self: start;
    justify-content: flex-start;
    align-items: flex-start;

    font-size: ${vpScale(13, 28, 320, 1920, 'vmin-px')};
  }
`;

class APlayground extends Component {
  render() {
    return (
      <Wrapper>
        <Logo>Play Time</Logo>
        <Nav>
          <li>here</li>
          <li>comes</li>
          <li>the</li>
          <li>funCooker</li>
        </Nav>
        <MainHeading>
          Ayo<br />River
        </MainHeading>
        <DescText>
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Inventore in
          blanditiis illum architecto eius! Nemo, sapiente! Perspiciatis id aut
          velit labore molestias minima natus necessitatibus.
        </DescText>
        <VerticalNums>
          <li>01</li>
          <li>02</li>
          <li>03</li>
        </VerticalNums>
        <Img1
          src="https://images.pexels.com/photos/127567/pexels-photo-127567.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
          alt="fun"
        />
        <Img2
          src="https://images.pexels.com/photos/267858/pexels-photo-267858.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
          alt="fun"
        />
        <Img3
          src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQLpL8c3Mi1DjbjGLNxYvn7c_wpUq-mjUzmGbtSjlbdbASkvpZ64w"
          alt="fun"
        />
        <Email>mraaroncasanova@gmail.com</Email>
        <CTAButton>get more</CTAButton>
      </Wrapper>
    );
  }
}

export default APlayground;

✂️

See designers original work here!

^ Example Found Here ^

923

Arts

Graphiques

Metiers

Paris

See designers original work here!

^ Example Found Here ^

apicco

Iris von Arnim

Branding Commerce

View Case Study

See designers original work here!

^ Example Found Here ^

News
Archive
Upcoming
Contact

Poke

Rag Time

See designers original work here!

^ Example Found Here ^

Whiskey...

...for all

Copy Landing Page Component Here!

import React, { Component } from 'react';
import styled, { keyframes } from 'styled-components';

const vpScale = (minSize, maxSize, minScreen, maxScreen, scaleMode) => {
  let minmaxScale = {
    withPx(viewport) {
      return `calc(${minSize}px + (${maxSize} - ${minSize}) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen}));`;
    },
    withVp(viewport) {
      return `calc(
        calc(${minScreen / 100}px * ${minSize}) + (calc(${maxScreen /
        100} * ${maxSize}) - calc(${minScreen /
        100} * ${minSize})) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen})
      )`;
    }
  };

  switch (scaleMode) {
    case 'vw-vp':
      return minmaxScale.withVp('100vw');
    case 'vh-vp':
      return minmaxScale.withVp('100vh');
    case 'vw-px':
      return minmaxScale.withPx('100vw');
    case 'vh-px':
      return minmaxScale.withPx('100vh');
    case 'vmin-vp':
      return minmaxScale.withVp('100vmin');
    case 'vmin-px':
      return minmaxScale.withPx('100vmin');
    default:
      /* for debugging */
      console.log('vpScale - recieved invalid scale type vvv');
      console.log(
        `${minSize}, ${maxSize}, ${minScreen}, ${maxScreen}, '${scaleMode}'`
      );
  }
};

const Wrapper = styled.div`
  @import url('https://fonts.googleapis.com/css?family=Playfair+Display');
  overflow: hidden;
  background: #f6f6f6;
  padding: 30px;
  height: ${vpScale(100, 100, 320, 1300, 'vh-vp')};
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
`;

const slideIn = keyframes`
  0% {
    transform: translate(-100vw, 5vh) scale(1.5);
  }
  100% {
    transform: translate(-50%, -50%)  scale(1);
  }
`;

const slideOut = keyframes`
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(15vw, -40vh)  scale(.2);
    opacity: 0;
  }
`;

const Bottle = styled.img`
  width: ${vpScale(170, 600, 320, 1000, 'vmin-px')};
  height: ${vpScale(170, 600, 320, 1000, 'vmin-px')};
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-100vw, -50%);
  animation: ${props =>
    props.whiskeyAni
      ? `1500ms cubic-bezier(0, 0, 0.37, 0.98) 500ms forwards ${slideIn}`
      : `1500ms cubic-bezier(0, 0, 0.37, 0.98) forwards ${slideOut}`};
`;

const Glass = Bottle.extend`
  width: ${vpScale(150, 500, 320, 1000, 'vmin-px')};
  height: ${vpScale(150, 500, 320, 1000, 'vmin-px')};
`;

const Title = styled.h2`
  position: relative;
  z-index: 1;
  align-self: ${props => props.align};
  font-size: ${vpScale(33, 85, 320, 960, 'vmin-px')};
  color: #2c2828;
  font-family: 'Playfair Display', serif;
`;

class WhiskeyLanding extends Component {
  state = {
    whiskeyAni: false
  };

  whiskeyAni = () => {
    let whiskeyAni = !this.state.whiskeyAni;
    this.setState({
      whiskeyAni
    });
  };

  componentWillMount() {
    this.swapProduct = setInterval(() => {
      let whiskeyAni = !this.state.whiskeyAni;
      this.setState({
        whiskeyAni
      });
    }, 2900);
  }

  componentWillUnmount() {
    clearInterval(this.swapProduct);
  }

  render() {
    return (
      <Wrapper>
        <Title align={'flex-start'}>Whiskey...</Title>
        <Bottle
          whiskeyAni={this.state.whiskeyAni}
          src="https://png.pngtree.com/element_origin_min_pic/16/08/19/1957b6ee8468341.jpg"
          alt="whiskey bottle"
        />
        <Glass
          whiskeyAni={!this.state.whiskeyAni}
          src="https://png.pngtree.com/element_origin_min_pic/17/07/19/ef06fd4633838842b5634cfbde4b43a4.jpg"
          alt="whiskey glass"
        />
        <Title align={'flex-end'}>...for all</Title>
      </Wrapper>
    );
  }
}

export default WhiskeyLanding;

✂️

See designers original work here!

^ Example Found Here ^

LIFE

Life
Outdoor
Prize

Search...🔍

Life
Is Art.

Love the life you live. Live the life you love.

Facebook
Instagram
Twitter

Copy Landing Page Component Here!

import React, { Component } from 'react';
import styled from 'styled-components';

const vpScale = (minSize, maxSize, minScreen, maxScreen, scaleMode) => {
  let minmaxScale = {
    withPx(viewport) {
      return `calc(${minSize}px + (${maxSize} - ${minSize}) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen}));`;
    },
    withVp(viewport) {
      return `calc(
        calc(${minScreen / 100}px * ${minSize}) + (calc(${maxScreen /
        100} * ${maxSize}) - calc(${minScreen /
        100} * ${minSize})) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen})
      )`;
    }
  };

  switch (scaleMode) {
    case 'vw-vp':
      return minmaxScale.withVp('100vw');
    case 'vh-vp':
      return minmaxScale.withVp('100vh');
    case 'vw-px':
      return minmaxScale.withPx('100vw');
    case 'vh-px':
      return minmaxScale.withPx('100vh');
    case 'vmin-vp':
      return minmaxScale.withVp('100vmin');
    case 'vmin-px':
      return minmaxScale.withPx('100vmin');
    default:
      /* for debugging */
      console.log('vpScale - recieved invalid scale type vvv');
      console.log(
        `${minSize}, ${maxSize}, ${minScreen}, ${maxScreen}, '${scaleMode}'`
      );
  }
};

const Wrapper = styled.div`
  position: relative;
  z-index: -2;
  min-height: 100%;
  padding: ${vpScale(50, 300, 320, 2500, 'vw-px')} 0;
  background: #cfdcd3;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`;

const Os = styled.div`
  z-index: -1;
  font-size: ${vpScale(280, 2500, 320, 2500, 'vmin-px')};
  font-weight: bold;
  color: #dce7e1;

  &:first-child {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-33%, -33%);
  }
  &:last-child {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(33%, 33%);
  }
`;

const CardWrapper = styled.div`
  width: ${vpScale(300, 2200, 320, 2500, 'vw-px')};
  min-height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  @media (max-width: 1210px) {
    flex-direction: column;
  }
`;

const LeftWrap = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
`;
const RightWrap = styled.div`
  width: ${vpScale(600, 1000, 1210, 2500, 'vw-px')};
  @media (max-width: 1210px) {
    width: 100%;
  }
`;

const NavWrapper = styled.div`
  display: flex;
  @media (max-width: 900px) {
    flex-direction: column;
    align-items: center;
  }
`;

const NavItemsWrapper = styled.div`
  color: #fff;
  width: 100%;
  background: #4e7e64;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  @media (max-width: 900px) {
    flex-direction: column;
  }
`;

const Logo = styled.h2`
  color: #fff;
  border-bottom: 2px solid #fff;
`;

const NavItems = styled.ul`
  list-style: none;
  display: flex;

  li {
    padding: 20px 0 20px 20px;
    font-size: ${vpScale(18, 32, 320, 2500, 'vw-px')};
  }
`;

const NavSearch = styled.div`
  font-size: ${vpScale(18, 30, 320, 2500, 'vw-px')};
  padding: 20px 40px;
  text-align: bottom;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  @media (max-width: 900px) {
    justify-content: center;
  }

  & > span {
    padding-bottom: 4px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #000;
  }
`;

const MagGlass = styled.span`
  margin-left: ${vpScale(150, 400, 320, 2500, 'vw-px')};
`;

const CardBody = styled.div`
  padding: ${vpScale(20, 60, 320, 2500, 'vw-px')};
  display: flex;
  @media (max-width: 600px) {
    flex-direction: column;
  }
`;

const BodyContentWrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 30px;
  padding-left: ${vpScale(0, 200, 320, 2500, 'vw-px')};
  padding-right: 50px;

  h2 {
    line-height: 0.85;
    font-size: ${vpScale(60, 100, 320, 2500, 'vw-px')};
    color: #4e7e64;
    font-weight: bold;
  }

  p {
    padding: 40px 0;
    color: #aaa;
    font-weight: bold;
    font-size: ${vpScale(16, 24, 320, 2500, 'vw-px')};
  }

  @media (max-width: 600px) {
    p {
      text-align: center;
    }
  }
`;

const ArrowWrapper = styled.div`
  display: flex;
  & > div {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #dddddd;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 50px;

    &:nth-of-type(2) {
      margin-left: 50px;
    }
  }
  @media (max-width: 600px) {
    & {
      align-self: center;
    }
  }
`;

const RightArrow = styled.div`
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  border-left: 10px solid white;
`;

const LeftArrow = styled.div`
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;

  border-right: 10px solid white;
`;

const transX = vpScale(100, 300, 1210, 2500, 'vw-px');
const BodyImgWrapper = styled.div`
  --transX: ${transX};
  flex: 1 1 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 90px;

  img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  @media (min-width: 1210px) {
    & {
      transform: translateX(var(--transX));
    }
  }
`;

const NumberBox = styled.div`
  position: absolute;
  bottom: 60px;
  left: -40px;
  width: ${vpScale(80, 250, 320, 2500, 'vw-px')};
  height: ${vpScale(80, 250, 320, 2500, 'vw-px')};
  background: #4e7e64;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  color: #ffffff;
  font-size: ${vpScale(50, 150, 320, 2500, 'vw-px')};
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  @media (max-width: 600px) {
    & {
      top: -25%;
      left: 60%;
    }
  }
`;

const CardFooter = styled.ul`
  list-style: none;
  display: flex;
  margin-left: ${vpScale(0, 200, 320, 2500, 'vw-px')};

  & > * {
    font-weight: bold;
    padding: 20px 20px ${vpScale(20, 60, 320, 2500, 'vw-px')} 20px;
    font-size: ${vpScale(14, 20, 320, 2500, 'vw-px')};
  }

  @media (max-width: 1210px) {
    justify-content: center;
    margin-left: 0;
  }
`;

const CardSide = styled.div`
  padding: 20px;
  text-align: center;
  font-size: ${vpScale(20, 40, 320, 2500, 'vw-px')};
  color: #fff;
  background: #4e7e64;
  height: 100%;

  span {
    padding: 0 30px;
  }
`;

class LifeLanding extends Component {
  render() {
    return (
      <Wrapper>
        <Os>O</Os>
        <CardWrapper>
          <LeftWrap>
            <NavWrapper>
              <NavItemsWrapper>
                <Logo>LIFE</Logo>
                <NavItems>
                  <li>Life</li>
                  <li>Outdoor</li>
                  <li>Prize</li>
                </NavItems>
              </NavItemsWrapper>
              <NavSearch>
                <span>
                  Search...<MagGlass>
                    <span role="img" aria-label="Magnifying Glass">
                      🔍
                    </span>
                  </MagGlass>
                </span>
              </NavSearch>
            </NavWrapper>
            <CardBody>
              <BodyContentWrapper>
                <h2>
                  Life<br />Is Art.
                </h2>
                <p>Love the life you live. Live the life you love.</p>
                <ArrowWrapper>
                  <div>
                    <LeftArrow />
                  </div>
                  <div>
                    <RightArrow />
                  </div>
                </ArrowWrapper>
              </BodyContentWrapper>
              <BodyImgWrapper>
                <img
                  src="https://images.pexels.com/photos/301614/pexels-photo-301614.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                  alt="open water"
                />
                <NumberBox>03</NumberBox>
              </BodyImgWrapper>
            </CardBody>
            <CardFooter>
              <li>Facebook</li>
              <li>Instagram</li>
              <li>Twitter</li>
            </CardFooter>
          </LeftWrap>
          <RightWrap>
            <CardSide>
              Login<span>☰</span>
            </CardSide>
          </RightWrap>
        </CardWrapper>
        <Os>O</Os>
      </Wrapper>
    );
  }
}

export default LifeLanding;

✂️

See designers original work here!

^ Example Found Here ^

We're Lost

aaron
casanova

CREATE A SHARED RITUAL

Friday 20 April
AM

To Build
Relationships

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam voluptatibus ut eveniet soluta ipsum quam enim libero obcaecati cum architecto nisi

Copy Landing Page Component Here!

import React, { Component } from 'react';
import styled from 'styled-components';

const vpScale = (minSize, maxSize, minScreen, maxScreen, scaleMode) => {
  let minmaxScale = {
    withPx(viewport) {
      return `calc(${minSize}px + (${maxSize} - ${minSize}) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen}));`;
    },
    withVp(viewport) {
      return `calc(
        calc(${minScreen / 100}px * ${minSize}) + (calc(${maxScreen /
        100} * ${maxSize}) - calc(${minScreen /
        100} * ${minSize})) * (${viewport} - ${minScreen}px) /
        (${maxScreen} - ${minScreen})
      )`;
    }
  };

  switch (scaleMode) {
    case 'vw-vp':
      return minmaxScale.withVp('100vw');
    case 'vh-vp':
      return minmaxScale.withVp('100vh');
    case 'vw-px':
      return minmaxScale.withPx('100vw');
    case 'vh-px':
      return minmaxScale.withPx('100vh');
    case 'vmin-vp':
      return minmaxScale.withVp('100vmin');
    case 'vmin-px':
      return minmaxScale.withPx('100vmin');
    default:
      /* for debugging */
      console.log('vpScale - recieved invalid scale type vvv');
      console.log(
        `${minSize}, ${maxSize}, ${minScreen}, ${maxScreen}, '${scaleMode}'`
      );
  }
};

const Wrapper = styled.div`
  @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville');
  min-height: 100vh;
  display: grid;
  grid-template-columns:
    minmax(40px, auto)
    auto
    auto
    minmax(40px, auto);
  grid-template-rows:
    minmax(40px, auto)
    auto
    minmax(40px, auto);

  @media (max-width: 900px) {
    grid-template-columns:
      minmax(5px, auto)
      auto
      minmax(5px, auto);
    grid-template-rows:
      minmax(95px, auto)
      auto
      auto
      minmax(95px, auto);
  }
`;

const TopText = styled.h3`
  grid-column: 2/3;
  grid-row: 2/3;
  justify-self: end;
  transform: translate(50%, -25px);
  margin-bottom: 50px;
  font-weight: bold;
  letter-spacing: 5px;
  color: #565656;

  @media (max-width: 900px) {
    grid-column: 2/3;
    grid-row: 2/3;
    justify-self: start;
    transform: translate(0%, -28px);
    font-size: ${vpScale(10, 25, 320, 900, 'vmin-px')};
  }
`;

const SideText = styled.h3`
  white-space: nowrap;
  font-weight: bold;
  color: #565656;
  font-size: ${vpScale(14, 25, 320, 1400, 'vmin-px')};
  writing-mode: vertical-rl;
  text-orientation: upright;
  grid-column: 1/2;
  grid-row: 2/3;
  justify-self: end;
  align-self: start;
  padding: ${vpScale(8, 5, 320, 1400, 'vmin-px')};

  @media (max-width: 900px) {
    padding: 0;
    grid-column: 2/3;
    grid-row: 3/4;
    align-self: end;
    writing-mode: vertical-lr;
    padding-bottom: 30px;
    padding-right: ${vpScale(20, 40, 320, 900, 'vw-px')};
  }
`;
const transX = vpScale(-12, -20, 320, 900, 'vw-px');
const CircleLogo = styled.div`
  --transX: ${transX};
  grid-column: 3/4;
  grid-row: 2/3;
  justify-self: end;
  transform: translate(-50%, -35px);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #000;
  color: white;
  font-size: 16px;
  line-height: 50px;
  letter-spacing: 8px;
  padding-left: 8px;
  text-align: center;

  @media (max-width: 900px) {
    grid-column: 2/3;
    grid-row: 2/3;
    transform: translate(var(--transX), -35px);
  }
`;

const OutlineBox = styled.div`
  grid-column: 2/4;
  grid-row: 2/3;
  border: 2px solid #d4d4d4;

  @media (max-width: 900px) {
    grid-column: 2/3;
    grid-row: 2/4;
  }
`;

const ImagesSection = styled.section`
  grid-column: 2/3;
  grid-row: 2/3;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr min-content 1fr;

  @media (max-width: 900px) {
    transform: translate(0, 0);
  }
`;

const LargeImgWrapper = styled.div`
  border-color: white;
  border-style: solid;
  border-width: ${vpScale(10, 100, 320, 2500, 'vmin-px')};
  overflow: hidden;
  transform: rotate(-45deg);
  grid-column: 1/2;
  grid-row: 2/3;
  width: ${vpScale(190, 460, 320, 1400, 'vmin-px')};
  height: ${vpScale(190, 460, 320, 1400, 'vmin-px')};
  align-self: center;
  justify-self: center;

  & > img {
    width: 150%;
    height: 150%;
    object-fit: cover;
    transform: rotate(45deg) translate(-25%, -10%);
  }

  @media (max-width: 900px) {
    width: ${vpScale(163, 425, 320, 900, 'vmin-px')};
    height: ${vpScale(163, 425, 320, 900, 'vmin-px')};
  }
`;

const SmallImgWrapper = styled.div`
  background: white;
  border-top-style: solid;
  border-top-color: white;
  border-top-width: ${vpScale(10, 100, 320, 2500, 'vmin-px')};
  border-left-style: solid;
  border-left-color: white;
  border-left-width: ${vpScale(10, 100, 320, 2500, 'vmin-px')};
  width: 50%;
  height: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;

  &::after {
    content: '';
    position: absolute;
    background: #dada00;
    top: -5%;
    left: -5%;
    right: -5%;
    bottom: -5%;
    z-index: 1;
  }

  & > img {
    position: relative;
    z-index: 2;
    transform: rotate(45deg) translate(-24%, -7%);
    width: 150%;
    height: 150%;
    object-fit: cover;
  }
`;

const ContentBox = styled.div`
  grid-column: 1/2;
  grid-row: 2/3;
  align-self: end;
  justify-self: center;
  z-index: 1;
  white-space: nowrap;
  background: white;
  text-align: center;
  padding: 10px 20px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
  transform: translateY(50%);
  font-size: ${vpScale(12, 30, 320, 1400, 'vmin-px')};

  @media (max-width: 900px) {
    transform: translateY(50%);
    grid-column: 1/2;
    grid-row: 2/3;
    align-self: end;
    font-size: ${vpScale(12, 50, 320, 2500, 'vmin-px')};
  }
`;

const textTransX = vpScale(50, 50, 320, 1400, 'vmin-px');
const ContentSection = styled.section`
  --textTransX: ${textTransX};
  grid-column: 3/4;
  grid-row: 2/3;
  display: grid;
  grid-template-rows: 1fr auto auto auto 1fr;
  grid-template-columns: auto;
  text-align: right;
  padding: 30px 30px 30px 0;

  p,
  h2,
  h6 {
    justify-self: end;
    align-content: center;
    padding: ${vpScale(8, 60, 320, 1400, 'vmin-px')} 0;
    background: white;
    transform: translateX(var(--textTransX));
    background: white;
  }

  p {
    grid-row: 2/3;
    font-weight: bold;
    color: slategrey;
    font-size: ${vpScale(16, 25, 320, 1400, 'vmin-px')};
  }
  h2 {
    grid-row: 3/4;
    font-family: 'Libre Baskerville', serif;
    letter-spacing: ${vpScale(15, 1, 320, 1400, 'vmin-px')};
    font-size: ${vpScale(40, 45, 320, 1400, 'vmin-px')};
    font-weight: bold;
  }
  h6 {
    grid-row: 4/5;
    font-size: ${vpScale(10, 15, 320, 1400, 'vmin-px')};
    color: #888888;
    width: ${vpScale(300, 400, 901, 1400, 'vw-px')};
  }

  @media (max-width: 900px) {
    grid-column: 2/3;
    grid-row: 3/4;
    grid-template-rows:
      ${vpScale(50, 40, 320, 1400, 'vmin-px')}
      auto auto auto 1fr;
    grid-template-columns: auto;
    text-align: left;
    padding: 0;

    p,
    h2,
    h6 {
      justify-self: start;
      align-content: start;
      padding: 0;
      background: transparent;
      transform: translateX(0);
    }

    p {
      grid-row: 2/3;
      text-align: right;
      justify-self: right;
      padding: 0 20px 20px 20px;
      font-size: ${vpScale(12, 20, 320, 900, 'vmin-px')};
      margin-right: ${vpScale(0, 40, 320, 900, 'vmin-px')};
    }
    h2 {
      grid-row: 3/4;
      margin-left: ${vpScale(0, 20, 320, 900, 'vmin-px')};
      font-size: ${vpScale(25, 60, 320, 900, 'vmin-px')};
      padding: 0 20px 40px 20px;
      letter-spacing: -1px;
    }
    h6 {
      grid-row: 4/5;
      font-size: ${vpScale(12, 20, 320, 900, 'vmin-px')};
      margin-left: ${vpScale(0, 40, 320, 900, 'vmin-px')};
      width: ${vpScale(170, 400, 320, 900, 'vmin-px')};
      padding: 0 20px 60px 20px;
    }
  }
`;

class BoxyLanding extends Component {
  render() {
    return (
      <Wrapper>
        <TopText>We're Lost</TopText>
        <SideText>
          aaron<br />casanova
        </SideText>
        <CircleLogo>LA</CircleLogo>
        <OutlineBox />
        <ImagesSection>
          <LargeImgWrapper>
            <img
              src="https://images.unsplash.com/photo-1517423568366-8b83523034fd?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=92b82a18bf4bfbdfe1bd7eed8cd4ba49&auto=format&fit=crop&w=675&q=80"
              alt="dog"
            />
            <SmallImgWrapper>
              <img
                src="https://images.unsplash.com/photo-1517213849290-bbbfffdc6da3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=943dfad4aa75252116f83032204a5608&auto=format&fit=crop&w=800&q=80"
                alt="cat"
              />
            </SmallImgWrapper>
          </LargeImgWrapper>
          <ContentBox>CREATE A SHARED RITUAL</ContentBox>
        </ImagesSection>
        <ContentSection>
          <p>
            Friday 20 April<br />AM
          </p>
          <h2>
            To Build<br />Relationships
          </h2>
          <h6>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam
            voluptatibus ut eveniet soluta ipsum quam enim libero obcaecati cum
            architecto nisi
          </h6>
        </ContentSection>
      </Wrapper>
    );
  }
}

export default BoxyLanding;

✂️

See designers original work here!

^ Example Found Here ^

Casy.js

Play Time

AyoRiver

[email protected]

Copy Landing Page Component Here!

See designers original work here!

923

Arts

Graphiques

Metiers

Paris

See designers original work here!

apicco

Iris von Arnim

Branding Commerce

See designers original work here!

Poke

Rag Time

See designers original work here!

Whiskey...

...for all

Copy Landing Page Component Here!

See designers original work here!

LIFE

LifeIs Art.

Copy Landing Page Component Here!

See designers original work here!

We're Lost

aaroncasanova

To BuildRelationships

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam voluptatibus ut eveniet soluta ipsum quam enim libero obcaecati cum architecto nisi

Copy Landing Page Component Here!

See designers original work here!

Ayo
River

Life
Is Art.

aaron
casanova

To Build
Relationships