238 lines
7.6 KiB
HTML
238 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
|
|
<link rel="stylesheet" href="./static/css/style.css">
|
|
<script src="./static/js/script.js"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
|
|
</head>
|
|
<body>
|
|
|
|
<!-- NAVBAR -->
|
|
<nav class="navbar is-transparent is-fixed-top">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="./index.html">
|
|
<img src="./static/img/batman.png">
|
|
</a>
|
|
<div class="navbar-burger js-burger" data-target="navbarExampleTransparentExample">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="navbarExampleTransparentExample" class="navbar-menu">
|
|
<div class="navbar-start">
|
|
<a class="navbar-item" href="./index.html"> Home </a>
|
|
<a class="navbar-item" href="./content/contact.html"> Contact </a>
|
|
<a class="navbar-item" href="./content/produits.html"> Produits </a>
|
|
<a class="navbar-item" href="./content/addition.html"> Addition </a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<div class="navbar-item">
|
|
<div class="field is-grouped">
|
|
<p class="control">
|
|
<a
|
|
class="bd-tw-button button"
|
|
data-social-network="Github"
|
|
data-social-action="Gitlab"
|
|
data-social-target="https://bulma.io"
|
|
target="_blank"
|
|
href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=https://bulma.io&via=jgthms"
|
|
>
|
|
<span class="icon">
|
|
<i class="fab fa-twitter"></i>
|
|
</span>
|
|
<span> Tweet </span>
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<br>
|
|
|
|
<!-- HERO -->
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<p class="title">My SuperWebsite</p>
|
|
<p class="subtitle">Made with HTML code!</p>
|
|
</div>
|
|
</section>
|
|
<br>
|
|
|
|
<div class="content has-text-centered">
|
|
<p>Cette page est un exemple d'utilisation des classes du framework Bulma pour le CSS ainsi que
|
|
quelques fonctions basiques JS pour créer un site web responsive rapidement et dynamiser son contenu.
|
|
</p>
|
|
</div>
|
|
|
|
<h1 class="has-text-centered" style="text-decoration: underline;">LA TEAM
|
|
</h1>
|
|
<br>
|
|
|
|
<div class="content">
|
|
<!-- CARDS -->
|
|
<div class="columns is-mobile is-multiline is-centered">
|
|
<!-- CARD 1 -->
|
|
<div class="column is-narrow">
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img
|
|
src="./static/img/pablo.jpg"
|
|
alt="Placeholder image"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<p class="title is-4">Pablo Escobar</p>
|
|
<p class="subtitle is-6">dev1@devWeb.com</p>
|
|
</div>
|
|
</div>
|
|
<div class="content">
|
|
<p>Viva Colombia!
|
|
<a href="#">#colombia</a>
|
|
<a href="#">#responsive</a>
|
|
<br />
|
|
<time datetime="2016-1-1">11:09 PM - 18 04 2024</time>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CARD 2 -->
|
|
<div class="column is-narrow">
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img
|
|
src="./static/img/dev2.png"
|
|
alt="Placeholder image"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<p class="title is-4">dev 2</p>
|
|
<p class="subtitle is-6">dev2@devWeb.com</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<p>Salut le monde.
|
|
<a href="#">#html</a>
|
|
<a href="#">#js</a>
|
|
<br />
|
|
<time datetime="2016-1-1">11:09 PM - 18 04 2024</time>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CARD 3 -->
|
|
<div class="column is-narrow">
|
|
<div class="card">
|
|
<div class="card-image">
|
|
<figure class="image is-4by3">
|
|
<img
|
|
src="./static/img/nicky.webp"
|
|
alt="Placeholder image"
|
|
/>
|
|
</figure>
|
|
</div>
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-content">
|
|
<p class="title is-4">Ryô Saeba</p>
|
|
<p class="subtitle is-6">dev3@devWeb.com</p>
|
|
</div>
|
|
</div>
|
|
<p>
|
|
<a href="#">#python #magnum</a>
|
|
<a href="#">#pitre</a>
|
|
<br />
|
|
<time datetime="2016-1-1">11:09 PM - 18 04 2024</time>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- JAVASCRIPT -->
|
|
<div class="has-text-centered">
|
|
<h1 style="text-decoration: underline;">JAVASCRIPT</h1><br>
|
|
</div>
|
|
|
|
<!-- COMPTEUR -->
|
|
<h3 class="has-text-centered">COMPTEUR</h3>
|
|
<div class="content has-text-centered contour">
|
|
<button id="incrementer">Incrémenter</button>
|
|
<p>Compteur : <span id="compteur">0</span></p>
|
|
</div>
|
|
|
|
<!-- BOUTON DARK MODE -->
|
|
<div class="has-text-centered">
|
|
<h3>DARK MODE</h3>
|
|
</div>
|
|
<div class="switch contour">
|
|
<input type="checkbox" id="switch" /><br>
|
|
<label for="switch">
|
|
<i class="fas fa-sun"></i>
|
|
<i class="fas fa-moon"></i>
|
|
<span class="ball"></span>
|
|
</label>
|
|
</div>
|
|
<br>
|
|
|
|
<!-- CAROUSSEL -->
|
|
<div class="has-text-centered">
|
|
<h3>CAROUSSEL</h3>
|
|
</div>
|
|
<div class="carousel">
|
|
<div class="carousel-track">
|
|
<div class="carousel-slide"><img src="./static/img/1.jpg" alt="1"></div>
|
|
<div class="carousel-slide"><img src="./static/img/2.jpg" alt="2"></div>
|
|
<div class="carousel-slide"><img src="./static/img/3.jpg" alt="3"></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<!-- TRICKY BOUTON -->
|
|
<div class="has-text-centered">
|
|
<div>
|
|
<h3>TRICKY BOUTON</h3>
|
|
</div>
|
|
<div class="button-area">
|
|
<button id="trickyButton">Click me!</button>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
|
|
<!-- FOOTER -->
|
|
<footer class="footer">
|
|
<div class="content has-text-centered">
|
|
<p>
|
|
<strong>SuperWebSite</strong> by <a href="https://www.gregandev.fr">Greg</a>.
|
|
The source code is not licensed.<br>
|
|
The website content is not licensed either.
|
|
</p>
|
|
<img class="logo-footer" src="./static/img/batman.png">
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
</html>
|
