madeindjs/index.html

## index.html
<!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>
	<!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>