Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
366 lines (365 sloc) 16.7 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon">
<title>Modal Cards - Free Bulma template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Bulma Version 0.7.x-->
<link rel="stylesheet" href="https://unpkg.com/bulma@0.7.5/css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="../css/hero.css">
<link rel="stylesheet" href="https://unpkg.com/bulma-modal-fx/dist/css/modal-fx.min.css" />
<style>
.columns:nth-child(2)
{margin-top: -10rem;}
</style>
</head>
<body>
<section class="hero is-info is-small">
<div class="hero-body">
<div class="container has-text-centered">
<p class="title">
Modal Cards
</p>
<p class="subtitle">
Subtitle
</p>
</div>
</div>
</section>
<div class="box cta">
<p class="has-text-centered">
<span class="tag is-primary">New</span> Here we have modal cards. When you click on them they will open functional modal examples.
</p>
</div>
<section class="container">
<div class="columns features">
<div class="column is-4">
<div class="card is-shady">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://source.unsplash.com/RWnpyGtY1aU" alt="Placeholder image" class="modal-button" data-target="modal-image2">
</figure>
</div>
<div class="card-content">
<div class="content">
<h4>Click on image above</h4>
<p>Purus semper eget duis at tellus at urna condimentum mattis. Non blandit massa enim nec. Integer enim neque volutpat ac tincidunt vitae semper quis. Accumsan tortor posuere ac ut consequat semper viverra nam.</p>
<span class="button is-link modal-button" data-target="modal-image2">Image modal</span>
</div>
</div>
</div>
</div>
<div class="column is-4">
<div class="card is-shady">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://source.unsplash.com/6Ticnhs1AG0" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<h4>Tempor orci dapibus ultrices in.</h4>
<p>Ut venenatis tellus in metus vulputate. Amet consectetur adipiscing elit pellentesque. Sed arcu non odio euismod lacinia at quis risus. Faucibus turpis in eu mi bibendum neque egestas cmonsu songue. Phasellus vestibulum lorem
sed risus.</p>
<span class="button is-link modal-button" data-target="modal-card">Modal Card</span>
</div>
</div>
</div>
</div>
<div class="column is-4 modal-button" data-target="modal-image">
<div class="card is-shady">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://i.imgsafe.org/ba/baa924a5e3.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<h4>Click anywhere on card</h4>
<p>Imperdiet dui accumsan sit amet nulla facilisi morbi. Fusce ut placerat orci nulla pellentesque dignissim enim. Libero id faucibus nisl tincidunt eget nullam. Commodo viverra maecenas accumsan lacus vel facilisis.</p>
<span class="button is-link modal-button" data-target="modal-image">Image modal</span>
</div>
</div>
</div>
</div>
</div>
<div class="columns features">
<div class="column is-4 modal-button" data-target="modal-card">
<div class="card is-shady">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://i.imgsafe.org/3f/3f0c578f9d.jpeg" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<h4>Click anywhere on card to <br>expand into modal card</h4>
<p>Purus semper eget duis at tellus at urna condimentum mattis. Non blandit massa enim nec. Integer enim neque volutpat ac tincidunt vitae semper quis. Accumsan tortor posuere ac ut consequat semper viverra nam.</p>
<span class="button is-link modal-button">Modal card</span>
</div>
</div>
</div>
</div>
<div class="column is-4">
<div class="card is-shady">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://source.unsplash.com/hLyd1LukQ7E" alt="butterfly image" class="modal-button" data-target="modal-image4">
</figure>
</div>
<div class="card-content modal-button" data-target="modal-card2">
<div class="content">
<h4>Click anywhere on card to <br>expand into modal card - header image expands into bigger image</h4>
<p>Purus semper eget duis at tellus at urna condimentum mattis. Non blandit massa enim nec. Integer enim neque volutpat ac tincidunt vitae semper quis.</p>
<span class="button is-link modal-button">Modal card</span>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<section class="section">
<div class="container">
<div class="columns is-multiline">
<div class="column is-one-third">
<article class="notification media has-background-white">
<figure class="media-left">
<span class="icon">
<i class="has-text-warning fa fa-columns fa-lg"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title is-size-4">Columns</h1>
<p class="is-size-5 subtitle">
The power of <strong>Flexbox</strong> in a simple interface
</p>
</div>
</div>
</article>
</div>
<div class="column is-one-third">
<article class="notification has-background-white media">
<figure class="media-left">
<span class="icon has-text-info">
<i class="fa fa-lg fa-wpforms"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title is-size-4">Form</h1>
<p class="is-size-5 subtitle">
The indispensable <strong>form controls</strong>, designed for maximum clarity
</p>
</div>
</div>
</article>
</div>
<div class="column is-one-third">
<article class="notification has-background-white media">
<figure class="media-left">
<span class="icon has-text-danger">
<i class="fa fa-lg fa-cubes"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title is-size-4">Components</h1>
<p class="is-size-5 subtitle">
Advanced multi-part components with lots of possibilities
</p>
</div>
</div>
</article>
</div>
<div class="column is-one-third">
<article class="notification has-background-white media">
<figure class="media-left">
<span class="icon has-text-grey">
<i class="fa fa-lg fa-cogs"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title is-size-4">Modifiers</h1>
<p class="is-size-5 subtitle">
An <strong>easy-to-read</strong> naming system designed for humans
</p>
</div>
</div>
</article>
</div>
<div class="column is-one-third">
<article class="notification has-background-white media">
<figure class="media-left">
<span class="icon has-text-primary">
<i class="fa fa-lg fa-superpowers"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title is-size-4">Layout</h1>
<p class="is-size-5 subtitle">
Design the <strong>structure</strong> of your webpage with these CSS classes
</p>
</div>
</div>
</article>
</div>
<div class="column is-one-third">
<article class="notification has-background-white media">
<figure class="media-left">
<span class="icon has-text-danger">
<i class="fa fa-lg fa-cube"></i>
</span>
</figure>
<div class="media-content">
<div class="content">
<h1 class="title is-size-4">Elements</h1>
<p class="is-size-5 subtitle">
Essential interface elements that only require a <strong>single CSS class</strong>
</p>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<div class="content has-text-centered">
<div class="control level-item">
<a href="https://github.com/dansup/bulma-templates">
<div class="tags has-addons">
<span class="tag is-dark">Bulma Templates</span>
<span class="tag is-info">MIT license</span>
</div>
</a>
</div>
</div>
</footer>
<!-- ===============
HERE BE MODALS
=============== -->
<!-- 3dFlipVertical card tiny -->
<div id="modal-card" class="modal modal-fx-3dSlit">
<div class="modal-background"></div>
<div class="modal-content is-tiny">
<!-- content -->
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://source.unsplash.com/6Ticnhs1AG0" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="http://www.radfaces.com/images/avatars/linda-barret.jpg" alt="linda barret avatar">
</figure>
</div>
<div class="media-content">
<p class="title is-4">Jane Doe</p>
<p class="subtitle is-6">@jane_doe</p>
</div>
</div>
<div class="content">
Laum Ipsum junkah potatoes bookin' it. Moosetown rig up I'm tellin' you way up north bookin' it can't get theyah from heeyah native bean suppah whawf Powrtland Museum of Aht, back woods hawsun around the pit mummah Yessah, mummah muckle riyht on'ta her
Bean's dinnahbucket bub geez bud sumpin' fierce ayuhpawt Bangah naw, Powrtland Museum of Aht down cellah sumpin' fierce hoppa bub If you can't stand the wintah you don't deserve the summah slower than molasses going uphill in January.
Sgn'wahl shoggor hrii uaaah R'lyeh uh'e k'yarnak Hastur hupadgh li'hee, hai f'nilgh'ri nilgh'ri n'ghftor ngftaghu vulgtlagln h'hrii throd Nyarlathotep lloig, naflsll'ha nnnsll'ha athg y-ebunma goka chtenff ehyeog cehye. Zhro y'hah
nogoth phlegeth stell'bsna orr'e ph'Hastur gnaiih throd, uln ya lw'nafh mg nar'luh li'hee wgah'n, sgn'wahl mg nakadishtu chlirgh hupadgh tharanak h'gnaiih.
<a>@bulmaio</a>.
<a href="#">#css</a>
<a href="#">#responsive</a>
<br>
<time datetime="2018-02-02">12:45 AM - 20 June 2018</time>
</div>
</div>
</div>
<!-- end content -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- end tiny modal card -->
<!-- 3dFlipVertical card tiny [butterfly] -->
<div id="modal-card2" class="modal modal-fx-3dSlit">
<div class="modal-background"></div>
<div class="modal-content is-tiny">
<!-- content -->
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="https://source.unsplash.com/hLyd1LukQ7E" alt="butterfly">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="http://www.radfaces.com/images/avatars/linda-barret.jpg" alt="linda barret avatar">
</figure>
</div>
<div class="media-content">
<p class="title is-4">Jane Doe</p>
<p class="subtitle is-6">@jane_doe</p>
</div>
</div>
<div class="content">
Laum Ipsum junkah potatoes bookin' it. Moosetown rig up I'm tellin' you way up north bookin' it can't get theyah from heeyah native bean suppah whawf Powrtland Museum of Aht, back woods hawsun around the pit mummah Yessah, mummah muckle riyht on'ta her
Bean's dinnahbucket bub geez bud sumpin' fierce ayuhpawt Bangah naw, Powrtland Museum of Aht down cellah sumpin' fierce hoppa bub If you can't stand the wintah you don't deserve the summah slower than molasses going uphill in January.
Sgn'wahl shoggor hrii uaaah R'lyeh uh'e k'yarnak Hastur hupadgh li'hee, hai f'nilgh'ri nilgh'ri n'ghftor ngftaghu vulgtlagln h'hrii throd Nyarlathotep lloig, naflsll'ha nnnsll'ha athg y-ebunma goka chtenff ehyeog cehye. Zhro y'hah
nogoth phlegeth stell'bsna orr'e ph'Hastur gnaiih throd, uln ya lw'nafh mg nar'luh li'hee wgah'n, sgn'wahl mg nakadishtu chlirgh hupadgh tharanak h'gnaiih.
<a>@bulmaio</a>.
<a href="#">#css</a>
<a href="#">#responsive</a>
<br>
<time datetime="2018-02-02">12:45 AM - 20 May 2018</time>
</div>
</div>
</div>
<!-- end content -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- end tiny modal card -->
<!-- Image modal -->
<div id="modal-image2" class="modal modal-fx-3dSlit">
<div class="modal-background"></div>
<div class="modal-content is-huge is-image">
<!-- content -->
<img src="https://source.unsplash.com/RWnpyGtY1aU" alt="image">
<!-- end content -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Image modal -->
<div id="modal-image4" class="modal modal-fx-3dSlit">
<div class="modal-background"></div>
<div class="modal-content is-huge is-image">
<!-- content -->
<img src="https://source.unsplash.com/hLyd1LukQ7E" alt="butterfly">
<!-- end content -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- Image modal-->
<div id="modal-image" class="modal modal-fx-superScaled">
<div class="modal-background"></div>
<div class="modal-content is-image">
<!-- content -->
<img src="https://i.imgsafe.org/ba/baa924a5e3.png" alt="Placeholder image">
<!-- <img src="https://source.unsplash.com/zFrUz_tNjCY" alt="placeholder">
--> <!-- end content -->
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<script src="https://unpkg.com/bulma-modal-fx/dist/js/modal-fx.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="../js/wild.js"></script>
</body>
</html>
You can’t perform that action at this time.