Skip to content

Instantly share code, notes, and snippets.

@madeindjs
Created October 11, 2019 22:07
Show Gist options
  • Save madeindjs/bfe7985cede125421472a67042fffce7 to your computer and use it in GitHub Desktop.
Save madeindjs/bfe7985cede125421472a67042fffce7 to your computer and use it in GitHub Desktop.
isignif mockup
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Act mockup</title>
<!-- <link rel="stylesheet" href="https://bootswatch.com/4/darkly/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://bootswatch.com/4/litera/bootstrap.min.css">
<style>
aside .progress {
height: 10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-9">
<div class="m-5 p-4 card">
<h1>Acte de consignation et mainlevée...</h1>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 25%"></div>
</div>
<ul class="nav nav-tabs nav-fill mt-5">
<li class="nav-item">
<a class="nav-link active" href="#">Lyon</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bordeaux</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Paris</a>
</li>
</ul>
<div class="row pt-5">
<!-- fichiers -->
<div class="col-4">
<h2>Fichiers</h2>
<div class="d-flex justify-content-start">
<div>
<img src="http://icons.iconarchive.com/icons/zhoolego/material/512/Filetype-Docs-icon.png"
class="circle" height="50px">
</div>
<div>
<h6>Acte à signifier</h6>
<p>chargé par Axel Partensky</p>
</div>
</div>
<hr>
<div class="d-flex justify-content-start">
<div>
<img src="http://icons.iconarchive.com/icons/zhoolego/material/512/Filetype-Docs-icon.png"
class="circle" height="50px">
</div>
<div>
<h6>Acte à signifier</h6>
<p>chargé par Axel Partensky</p>
</div>
</div>
</div>
<!-- messagerie -->
<div class="col-8">
<h2>Messagerie</h2>
<div class="row">
<div class="col-6">
<p class="alert alert-secondary">
Mr FERRE est NPAI confirmation par ancien proprietaire. Il serait chez ses
parents
273B route de la grande Vavrette 01250 TOSSIAT Personne n'a pu etre rencontré,
une
voisine a indiqué que le fils ne vivait pas ici. devons nous signifier par 659??
</p>
</div>
</div>
<div class="row justify-content-end">
<div class="col-6">
<p class="alert alert-primary">
Nous avons connaissance d'une autre adresse concernant Mr FERRE : 707 Route des
3
rivières 01660 MEZERIAT. A défaut, je vous remercie de bien vouloir signifier à
la
dernière adresse connue sur TOSSIAT. Votre bien dévouée.
</p>
</div>
</div>
<div class="row">
<div class="col-6">
<p class="alert alert-secondary">
Pouvez-vous me faire retour de l'acte signifié en 659 ? Votre bien dévouée.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<aside class="col-3">
<div class="mt-2">
<button class="btn btn-lg btn-block btn-primary">Déposer un acte</button>
</div>
<div class="mt-2">
<hr>
</div>
<form class="my-2">
<input class="form-control form-control-lg" type="text" placeholder="Rechercher un acte">
</form>
<div class="card my-2">
<div class="card-body">
<h5 class="card-title">Acte de consignation...</h5>
<h6 class="card-subtitle mb-2 text-muted">@Lyon @Bordeaux @Paris</h6>
<p class="card-text">
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 25%"></div>
</div>
</p>
<p class="card-text text-right">
<a href="#" class="card-link">Voir l'acte</a>
</p>
</div>
</div>
<div class="card my-2">
<div class="card-body">
<h5 class="card-title">Acte de consignation...</h5>
<h6 class="card-subtitle mb-2 text-muted">@Lyon @Bordeaux @Paris</h6>
<p class="card-text">
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 25%"></div>
</div>
</p>
<p class="card-text text-right">
<a href="#" class="card-link">Voir l'acte</a>
</p>
</div>
</div>
<div class="card my-2">
<div class="card-body">
<h5 class="card-title">Acte de consignation...</h5>
<h6 class="card-subtitle mb-2 text-muted">@Lyon @Bordeaux @Paris</h6>
<p class="card-text">
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 100%"></div>
</div>
</p>
<p class="card-text text-right">
<a href="#" class="card-link">Voir l'acte</a>
</p>
</div>
</div>
</aside>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment