You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
5.6 KiB
95 lines
5.6 KiB
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<title>Lorem Ipsum</title>
|
|
<meta charset="utf-8">
|
|
<link href="style/common.css" rel="stylesheet">
|
|
<link href="style/index.css" rel="stylesheet">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<nav id="navbar" class="container justify-between">
|
|
<a href="index.html" id="navbar-left" class="container align-items-center">
|
|
<img id="navbar-brand" width="40" height="40" src="img/logo.png" alt="Logo">
|
|
<h1>Lorem Ipsum</h1>
|
|
</a>
|
|
<ul id="navbar-right" class="container">
|
|
<li class="container align-items-center"><a href="#">Accueil</a></li>
|
|
<li class="container align-items-center"><a href="snake.html">Snake</a></li>
|
|
<li class="container align-items-center"><a href="https://www.youtube.com/watch?v=y1HCrYAVeu0" target="_blank">Nous contacter</a></li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div id="header-content" class="container align-items-center justify-between">
|
|
<div id="content-left">
|
|
<h2 id="content-title">Texte écrit en gros, parce que c'est moderne.</h2>
|
|
<p id="content-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi quis cum expedita accusantium, nemo error consequuntur quasi, quas, illum adipisci commodi officiis cupiditate dignissimos provident! Quis recusandae unde dicta laborum.</p>
|
|
<a id="content-button" class="button is-black" target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Cliquez pour en savoir plus</a>
|
|
</div>
|
|
<div id="content-right">
|
|
<img src="img/mac.svg" alt="Image Mac">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
<div id="staff" class="section">
|
|
<h1>Notre équipe de travail</h1>
|
|
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, ex. Corporis ipsa, facere non maxime quis veritatis quibusdam similique, aperiam hic minus animi reiciendis accusantium assumenda enim quam iste tempora. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laboriosam, quae ducimus nemo tempore distinctio ratione alias accusantium, veritatis, cumque ab nam quibusdam ea quaerat! Possimus sed laudantium alias accusamus totam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima nulla ratione, hic tempore, maiores cupiditate placeat molestias soluta sed suscipit dicta, voluptate aut nobis explicabo assumenda odio nam id nesciunt.</p>
|
|
<div id="staff-list" class="container container-wrap justify-around">
|
|
<div class="card floating-shadow">
|
|
<img src="img/zemmour.gif" alt="Eric Zemmour">
|
|
<div>
|
|
<h2>Eric Zemmour</h2>
|
|
<p>Community Manager</p>
|
|
</div>
|
|
</div>
|
|
<div class="card floating-shadow">
|
|
<img src="img/jmarie.webp" alt="Jean-Marie Le Pen">
|
|
<div>
|
|
<h2>Jean-Marie Le Pen</h2>
|
|
<p>Développeur Full-Stack</p>
|
|
</div>
|
|
</div>
|
|
<div class="card floating-shadow">
|
|
<img src="img/xi-jinping.jpg" alt="Xi Jinping">
|
|
<div>
|
|
<h2>Xi Jinping</h2>
|
|
<p>Ressources humaines</p>
|
|
</div>
|
|
</div>
|
|
<div class="card floating-shadow">
|
|
<img src="img/vladimir-putin.gif" alt="Vladimir Putin">
|
|
<div>
|
|
<h2>Vladimir Putin</h2>
|
|
<p>Eradication de la concurrence</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="help">
|
|
<h1>Besoin d'aide?</h1>
|
|
<input type="text" placeholder="Faites une recherche!">
|
|
<a class="button is-border-white" href="">Rechercher</a>
|
|
</div>
|
|
|
|
<div id="tutorial" class="section">
|
|
<h1>Tutoriel de programmation indien</h1>
|
|
<div class="container">
|
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/pYWX8hISm4A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
<p id="tutoral-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates omnis iure dignissimos rerum repellat mollitia, sint inventore similique laborum sed quas eaque dicta itaque ea magni adipisci cum praesentium voluptatem? Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, maiores in nostrum illo harum molestias modi unde quos, aperiam totam, rem sequi sit animi. Amet consequuntur illum sint animi asperiores! Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium iure error a mollitia est, delectus voluptates dicta nesciunt iusto, ipsa dolores aperiam ratione blanditiis perspiciatis illum quasi nisi odit facilis!</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</section>
|
|
|
|
<footer>
|
|
<p>Lorem Ipsum - 2021</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|