vaniadimova

<div class="demo-btns">
		<header>
			<h1>Material Design Modals</h1>
		</header>

		<div class="info">
			<div class="buttons">
				<p>
					<a href="" data-modal="#modal" class="modal__trigger">Modal 1</a>
					<a href="" data-modal="#modal2" class="modal__trigger">Modal 2</a>

vaniadimova

<div id="modal-container">
  <div class="modal-background">
    <div class="modal">
      <h2>I'm a Modal</h2>
      <p>Hear me roar.</p>
      <svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
								<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
							</svg>
    </div>
  </div>

vaniadimova

Calendar Vanilla JSSCSS

Original idea: https://www.youtube.com/watch?v=kn1bNLMTgdo

A Pen by vaniadimova on CodePen.

License.

vaniadimova

Food Recipe App Js

A Pen by vaniadimova on CodePen.

License.

vaniadimova

Date and Time

Mobile Date is prototype mockups created by VanDim that has been converted into web version. Here is the original link of Website & Dribbble

A Pen by vaniadimova on CodePen.

License.

vaniadimova

<div class="untitled">
	<div class="untitled__slides">
		<div class="untitled__slide">
			<div class="untitled__slideBg"></div>
			<div class="untitled__slideContent">
				<span>Toronto</span> 
				<span>Ontario</span>
				<a class="button" href="https://vaniadimova.ca/" target="/black">WebSite/WP</a>
			</div>

vaniadimova

<div class="content-width">
  <div class="slideshow">
    <!-- Slideshow Items -->
    <div class="slideshow-items">
      <div class="item">
        <div class="item-image-container">
          <img class="item-image" src="https://images.unsplash.com/photo-1578822043018-0fd3a0293a5b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjE2ODQ0fQ&auto=format&fit=crop&w=500&q=60" />
        </div>
        <!-- Staggered Header Elements -->
        <div class="item-header">

vaniadimova

<form>
  <p>First name (required):<br><input type="text" name="first_name" required></p>
  <p>Last name (required):<br><input type="text" name="last_name" required></p>
  <p>Email, required to recieve email confirmation:<br><input type="email" name="email"></p>
  <p>Phone (required):<br><input type="tel" name="phone" required></p>
  <p>Street Address or P.O. Box (required):<br><input type="text" name="address" required></p>
  <p>Apartment, Suite, or No.:<br><input type="text" name="address_2"></p>
  <p>City (required): <input type="text" name="city" required></p>
  <p>State: <select name="state" required><option value="AL">AL</option><option value="AK">AK</option>
  <option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option>