Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
4 contributors

Users who have contributed to this file

@diomed @usoghisa @rene-ph @dansup
98 lines (98 sloc) 4.2 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 rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.9.1/css/OverlayScrollbars.min.css'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<!-- Bulma Version 0.8.x-->
<link rel="stylesheet" href="https://unpkg.com/bulma@0.8.0/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="container">
<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"> <!-- <figure class="image is-128x128">-->
<img src="https://ultraimg.com/images/yHrYA.jpg" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<h4> no modAL5 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"> more info....</span>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
</footer>
<!-- ===============
HERE BE MODALS style="z-index: 100;"
=============== -->
<!-- 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 class="is-rounded"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">
222Laum 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
<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 -->
<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='https://cdnjs.cloudflare.com/ajax/libs/overlayscrollbars/1.9.1/js/OverlayScrollbars.min.js'></script>
<script src="../js/wild.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
//The first argument are the elements to which the plugin shall be initialized
//The second argument has to be at least a empty object or a object with your desired options
OverlayScrollbars(document.querySelectorAll("body"), { });
});
</script>
-->
</body>
</html>
You can’t perform that action at this time.