Asta Valentaite

Subscribe 

<form action="" class="c-subscribe c-subscribe--base shadow-card hover:shadow-card-on bg-white p-8 flex flex-col justify-center md:flex-row items-center relative m-auto w-full max-w-subscribe md:justify-between">

    <div class="o-icon flex items-center justify-center relative">
        <div class="o-icon__bg absolute pin bg-blush"></div>
        <i class="icon icon--ui-message">
		<svg>
			<use class="no-barba" xlink:href="#ui-message"></use>
		</svg>
	</i>

    </div>
    <div class="mb-4 md:m0 md:pr-8 md:mb-0 text-center md:text-left">
        <p class="text-body">Subscribe to the newsletter for updates and exclusive stories.</p>
    </div>
    <div class="relative">
        <label class="hidden" for="subscribeEmail">
			Email address
		</label>
        <input class="appearance-none border border-black-20 text-body w-full h-input md:w-input pb-2 pt-3 pl-4 pr-12 text-black-20" id="subscribeEmail" type="email" placeholder="Email address">
        <button type="submit" class="appearance-none absolute pin-t pt-1 pin-b pin-r pr-4 uppercase text-sm">Submit</button>
    </div>
</form>
 
<form action="" class="c-subscribe c-subscribe--base shadow-card hover:shadow-card-on bg-white p-8 flex flex-col justify-center md:flex-row items-center relative m-auto w-full max-w-subscribe md:justify-between">
	{% include '@icons' with { icon: 'ui-message', color: 'blush' } %}
	<div class="mb-4 md:m0 md:pr-8 md:mb-0 text-center md:text-left">
		<p class="text-body">Subscribe to the newsletter for updates and exclusive stories.</p>
	</div>
	<div class="relative">
		<label class="hidden" for="subscribeEmail">
			Email address
		</label>
		<input class="appearance-none border border-black-20 text-body w-full h-input md:w-input pb-2 pt-3 pl-4 pr-12 text-black-20" id="subscribeEmail" type="email" placeholder="Email address">
		<button type="submit" class="appearance-none absolute pin-t pt-1 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.