Asta Valentaite

Subscribe: Sm 

<form action="" class="c-subscribe  pt-12 pb-8 px-8 relative m-auto  flex flex-col items-center">
    <div class="mb-4 lg:mb-8 c-subscribe__logo">
        <i class="icon icon--ui-logo-a">
		<svg>
			<use class="no-barba" xlink:href="#ui-logo-a"></use>
		</svg>
	</i>

    </div>
    <div class="mb-4">
        <p class="text-body text-center lg:text-lg">Sign up to the newsletter</p>
    </div>
    <div class="relative c-subscribe--sm w-full mx-auto">
        <label class="hidden" for="subscribeEmail">
			Email address
		</label>
        <input class="appearance-none bg-white text-body w-full h-input pt-3 pb-2 pl-4 pr-12 text-black-20" id="subscribeEmail" type="email" placeholder="Email address">
        <button type="submit" class="appearance-none absolute pt-1 pin-t pin-b pin-r pr-4 uppercase text-sm">Submit</button>
    </div>
</form>
 
{% import '@helpers' as h %}

<form action="" class="c-subscribe  pt-12 pb-8 px-8 relative m-auto  flex flex-col items-center">
  <div class="mb-4 lg:mb-8 c-subscribe__logo">
    {{ h.symbol('ui-logo-a') }}
  </div>
	<div class="mb-4">
		<p class="text-body text-center lg:text-lg">Sign up to the newsletter</p>
	</div>
	<div class="relative c-subscribe--sm w-full mx-auto">
		<label class="hidden" for="subscribeEmail">
			Email address
		</label>
		<input class="appearance-none bg-white text-body w-full h-input pt-3 pb-2 pl-4 pr-12 text-black-20" id="subscribeEmail" type="email" placeholder="Email address">
		<button type="submit" class="appearance-none absolute pt-1 pin-t pin-b pin-r pr-4 uppercase text-sm">Submit</button>
	</div>
</form>
 
{
  "siteTitle": "Asta Valentaite",
  "copyright": "© 2017 Asta Valentaite. All rights reserved.",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "objects": "/02-objects/",
            "global": "../03-global/",
            "components": "/04-components/",
            "pages": "/05-pages/",
            "macros": "/macros/",
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "sitemenu": [
    {
      "title": "About",
      "slug": "/components/preview/about"
    },
    {
      "title": "Fashion",
      "slug": "/components/preview/press"
    },
    {
      "title": "Beauty",
      "slug": "/components/preview/post"
    },
    {
      "title": "Lifestyle",
      "slug": "/components/preview/vertical"
    },
    {
      "title": "Collaborations",
      "slug": "/components/preview/collaborations"
    },
    {
      "title": "Press",
      "slug": "/components/preview/press"
    }
  ]
}
  • Content: 
    .c-subscribe {
	transition: box-shadow 300ms ease;

	.o-icon {
		@apply .absolute .pin-t;

		left: 50%;
		transform: translate3d(-50%, -50%, 0);
	}

	@include placeholder() {
		@apply .text-black;
	}
}

.c-subscribe__logo {
	.icon {
		@apply .text-black-20;

		width: rem(66px);
	}
}

.c-subscribe--sm {
	max-width: rem(370px);
}

.c-subscribe--base {
	input {
		transition: box-shadow 300ms ease;

		&:focus,
		&:hover {
			@apply .shadow-card-on;
		}
	}
}
  • URL: /components/raw/subscribe/_subscribe.scss
  • Filesystem Path: src/templates/04-components/subscribe/_subscribe.scss
  • Size: 458 Bytes

There are no notes for this item.