Original idea: https://www.youtube.com/watch?v=kn1bNLMTgdo
A Pen by vaniadimova on CodePen.
<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> |
<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> |
Original idea: https://www.youtube.com/watch?v=kn1bNLMTgdo
A Pen by vaniadimova on CodePen.
A Pen by vaniadimova on CodePen.
<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> |
<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"> |
<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> |