mqxu

#app
  input(type="text", placeholder="type your name", v-model="name")
  each val in [1,2,3]
    p.name {{name}}
  

mqxu

#app
  h1#responsive-text {{name}}
  // Try resizing window

mqxu

link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet")


h1 Vue Carousel
script#v-carousel(type="x/template")
  .card-carousel-wrapper
    .card-carousel--nav__left(
      @click="moveCarousel(-1)"
      :disabled="atHeadOfList"
    )

mqxu

Animated Login Form

Using and possibly abusing some CSS animations.

Firefox users, let the animation play through once, then click replay. Firefox is quite buggy with animations, it never seems to load correctly the first time.

Full source for this Pen including build tools are up on Git: https://github.com/nicklassandell/Animated-Login-Form

I wrote a library for the automatic form filling as well. Fyll.js is a lightweight, dependency free form filler with expressive syntax. It's cool, check it out.

mqxu

<h2>Weekly Coding Challenge #1: Sign in/up Form</h2>
<div class="container" id="container">
	<div class="form-container sign-up-container">
		<form action="#">
			<h1>Create Account</h1>
			<div class="social-container">
				<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
				<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
				<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
			</div>

mqxu

<div class="tile">
  <div class="tile-header">
    <h2 style="color: white; opacity: .75; font-size: 4rem; display: flex; justify-content: center; align-items: center; height: 100%;">SIGN IN</h2>
  </div>
  
  <div class="tile-body">
    <form id="form">
      <label class="form-input">
        <i class="material-icons">person</i>
        <input type="text" autofocus="true" required />

mqxu

DailyUI #001 | Sign Up Form

Sign up & Sign in Form for a flower company app animated with jQuery. Design inspiration by lavender flowers with pastel colors

A Pen by Julie Park on CodePen.

License.

mqxu

<div class="cont">
  <div class="demo">
    <div class="login">
      <div class="login__check"></div>
      <div class="login__form">
        <div class="login__row">
          <svg class="login__icon name svg-icon" viewBox="0 0 20 20">
            <path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" />
          </svg>
          <input type="text" class="login__input name" placeholder="Username"/>

mqxu

[
  {
    "sku_id": "1092469025979895808",
    "type": "ebook",
    "description": "\u300c\u7ef4\u7eb3\u65af\u300d\u4e0d\u662f\u67d0\u4e2a\u4eba\uff0c\u800c\u662f\u5b58\u5728\u4e8e\u6211\u4eec\u6bcf\u4e2a\u4eba\u5fc3\u4e2d\u4ee4\u4eba\u75af\u72c2\u7684\u4e1c\u897f\u3002 ",
    "title": "\u5371\u9669\u7684\u7ef4\u7eb3\u65af",
    "url": "https://www.zhihu.com/pub/book/119601575",
    "cover": "https://pic1.zhimg.com/v2-c70fa52c486461e7d62f8c1f30269932_xld.jpg",
    "book_size": 911633,
    "id": 119601575,

mqxu

Card Flip

3D card flip effect with a 3d button

A Pen by Charles Ojukwu on CodePen.

License.