Permalink
Switch branches/tags
Nothing to show
Find file Copy path
a959548 Oct 17, 2018
2 contributors

Users who have contributed to this file

@lowlevelm @diomed
440 lines (428 sloc) 24.2 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bulma cards</title>
<link rel="shortcut icon" href="../images/fav_icon.png" type="image/x-icon">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css'>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="../css/cards.css">
</head>
<body>
<!-- START NAV -->
<nav class="navbar">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="../">
<img src="../images/bulma.png" alt="Logo">
</a>
<span class="navbar-burger burger" data-target="navbarMenu">
<span></span>
<span></span>
<span></span>
</span>
</div>
<div id="navbarMenu" class="navbar-menu">
<div class="navbar-end">
<a class="navbar-item is-active">
Home
</a>
<a class="navbar-item">
Examples
</a>
<a class="navbar-item">
Features
</a>
<a class="navbar-item">
Team
</a>
<a class="navbar-item">
Archives
</a>
<a class="navbar-item">
Help
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
Account
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
Dashboard
</a>
<a class="navbar-item">
Profile
</a>
<a class="navbar-item">
Settings
</a>
<hr class="navbar-divider">
<div class="navbar-item">
Logout
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- END NAV -->
<div class="container">
<div id="flow">
<span class="flow-1"></span>
<span class="flow-2"></span>
<span class="flow-3"></span>
</div>
<div class="section">
<div class="box">
<div class="field has-addons">
<div class="control is-expanded">
<input class="input has-text-centered" type="search" placeholder="» » » » » » find me « « « « « «">
</div>
<div class="control">
<a class="button is-info">Search</a>
</div>
</div>
</div>
<!-- Developers -->
<div class="row columns">
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://images.unsplash.com/photo-1475778057357-d35f37fa89dd?dpr=1&auto=compress,format&fit=crop&w=1920&h=&q=80&cs=tinysrgb&crop=" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="https://i.imgsafe.org/a4/a4bb9acc5e.jpeg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">Okinami</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Lead Developer</p>
</div>
</div>
<div class="content">
The Beast stumbled in the dark for it could no longer see the path. It started to fracture and weaken, trying to reshape itself into the form of metal. Even the witches would no longer lay eyes upon it, for it had become hideous and twisted.
<div class="background-icon"><span class="icon-twitter"></span></div>
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com/uzDLtlPY8kQ" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="https://cdn.discordapp.com/avatars/244932903530659841/0c924a19fcf1b5c59bc9dc1b58b61bb0.jpg?size=1024" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">McSocks</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Developer</p>
</div>
</div>
<div class="content">
The soul of the Beast seemed lost forever. Then, by the full moon's light, a child was born; child with the unbridled soul of the Beast that would make all others pale in comparison.
<div class="background-icon"><span class="icon-facebook"></span></div>
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com/pe_R74hldW4" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="https://i.imgsafe.org/a5/a5e978ce20.jpeg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">The Conceptionist</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Developer</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
<div class="background-icon"><span class="icon-barcode"></span></div>
</div>
</div>
</div>
</div>
</div>
<!-- End Developers -->
<!-- Staff -->
<div class="row columns is-multiline">
<div class="column is-one-third">
<div class="card large round">
<div class="card-image ">
<figure class="image">
<img src="https://source.unsplash.com/Jy6luiLBsrk" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/profile-sample5.jpg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">Atsui</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com//i1CR3CY2hE4" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src='http://www.radfaces.com/images/avatars/richard-wang.jpg' alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">Sphirou Sapphirou</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com/b6VzeoRZiS0" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src='http://www.radfaces.com/images/avatars/jeffrey-douglas.jpg' alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">PlayTheFallen</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Sometimes I dip my nose into my cereals. I do it coz it's funny.
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://i.imgsafe.org/a4/a4bda71ae4.jpeg" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="http://www.radfaces.com/images/avatars/scrappy-doo.jpg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">FelixCAT</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com/ogYIzsNGu3Y" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="http://www.radfaces.com/images/avatars/scrappy-doo.jpg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">ScoobyDOG</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com/KgjcndVr7tU" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="http://www.radfaces.com/images/avatars/scrappy-doo.jpg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">Scrappy Doo</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://i.imgsafe.org/a5/a5e978ce20.jpeg" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="http://www.radfaces.com/images/avatars/alex-mack.jpg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">Prototyp3</p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com/Gnxquq4oYQc" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="http://www.radfaces.com/images/avatars/alex-mack.jpg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4 no-padding">Alex Mack</p>
<p><span class="title is-6"><a href="http://twitter.com/#">@twitterid</a></span></p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
<div class="column is-one-third">
<div class="card large">
<div class="card-image">
<figure class="image">
<img src="https://source.unsplash.com/qbtyUQtqJ8k" alt="Image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-96x96">
<img src="http://www.radfaces.com/images/avatars/alex-mack.jpg" alt="Image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">Alex Mack</p>
<p class="subtitle is-6">Moderator</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum consequatur numquam aliquam tenetur ad amet inventore hic beatae, quas accusantium perferendis sapiente explicabo, corporis totam! Labore reprehenderit beatae magnam animi!
</div>
</div>
</div>
</div>
</div>
<!-- End Staff -->
</div>
</div>
<footer class="footer">
<div class="container">
<div class="content has-text-centered">
<div class="soc">
<a href="#"><i class="fa fa-github-alt fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-youtube fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a>
<a href="#"><i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a>
</div>
<p>
<strong>Bulma</strong> by <a href="http://jgthms.com">Jeremy Thomas</a>.
The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. <br>
</p>
</div>
</div>
</footer>
<script src="../js/bulma.js"></script>
</body>
</html>