Outiref

Code source de l'URL : http://www.uniite.fr/

<!doctype html>
<html lang="en" class="no-js">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" media="screen" href="https://fontlibrary.org/face/bebas" type="text/css" />
	<link rel="stylesheet" href="css/main.css"> <!-- CSS main -->
	<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
	<script src="js/modernizr.js"></script> <!-- Modernizr -->

	<title>Uniite</title>
</head>

<body>
	<header class="cd-header">
		<div id="cd-logo"><a href="/"><img src="img/logo-uniite.svg" alt="Logo"></a></div>
	</header>

	<!-- SECTION MAIN HEADER -->
	<section id="cd-intro">
		<div id="cd-intro-tagline">
			<div class="cd-intro-container-h1">
				<h1>Une application de gestion de votre communauté<br>à vos couleurs</h1>
			</div>
			<div class="cd-intro-container-h1">
				<img class="img-ecrans" src="img/uniite-actu.png" alt="Logo">
			</div>
		</div> 
	</section> 

	<!-- NAV (FIXED TOP AFTER SCROLLING) -->
	<div class="cd-secondary-nav">
		<a href="#0" class="cd-secondary-nav-trigger">Menu<span></span></a> <!-- button visible on small devices -->
		<nav>
			<ul>
				<li>
					<a href="#cd-placeholder-1">
						<b>Solution</b>
					</a>
				</li>
				<li>
					<a href="#cd-placeholder-2">
						<b>Communautés</b>
					</a>
				</li>
				<li>
					<a href="#cd-placeholder-3">
						<b>Process</b>
					</a>
				</li>
				<li>
					<a href="#cd-placeholder-4">
						<b>Contact</b>
					</a>
				</li>
			</ul>
		</nav>
	</div> 

	<!-- SECTIONS CONTENT -->
	<main class="cd-main-content">

		<!-- SECTION 1 -->
		<section class="highlight-section" id="cd-placeholder-1">
			<!-- SECTION 1 - PART 1 -->
			<div class="cd-section cd-container container-module-1">
				<div class="number-title">
					<h1 style="text-align: start">1</h1>
				</div>
				<h3>La solution</h3>
				<div class="container-module-item-1">
					<div class="container-title">
						<h2>Le socle de fonctionnalités</h2>
						<p>Votre application est basée sur un socle de fonctionnalités, commun à toutes les communautés.
						</p>
					</div>
					<div class="container-section-img">
						<div class="container-socle">
							<img class="img-ecrans" src="img/uniite-membres.png">
							<p>Le trombinoscope</p>
							<div class="color-line"></div>
						</div>
						<div class="container-socle">
							<img class="img-ecrans" src="img/uniite-actu-2.png">
							<p>L'actualité</p>
							<div class="color-line"></div>
						</div>
						<div class="container-socle">
							<img class="img-ecrans" src="img/uniite-messages.png">
							<p>La messagerie</p>
							<div class="color-line"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- SECTION 1 - PART 2 -->
			<div class="section-gradient">
				<div class="cd-section cd-container flexbox-column container-module-1">
					<div class="number-title">
						<h1 style="text-align: start">2</h1>
					</div>
					<div class="container-title">
						<h2>Ensuite, c’est vous qui concevez</h2>
						<p>Nous avons développé des modules personnalisables et évolutifs, pour que vous puissiez
							dessiner
							l’application qui vous ressemble. </p>
					</div>
					<div class="container-section-img">
						<div class="product-card">
							<h3>Le resto</h3>
							<img class="item-img" src="img/icones/restaurant.png">
							<!--Bouton voir la carte (pour mise en place du catalogue produit)
							<a href="" type="submit" class="cd-btn-secondary">Voir</a>-->
						</div>
						<div class="product-card">
							<h3>La carte de visite</h3>
							<img class="item-img" src="img/icones/carte-visite.png">
						</div>
						<div class="product-card">
							<h3>La vitrine</h3>
							<img class="item-img" src="img/icones/devanture.png">
						</div>
						<div class="product-card">
							<h3>L'équipe</h3>
							<img class="item-img" src="img/icones/equipe.png">
						</div>
						<div class="product-card">
							<h3>Les événements</h3>
							<img class="item-img" src="img/icones/evenement.png">
						</div>
						<div class="product-card">
							<h3>Le magazine</h3>
							<img class="item-img" src="img/icones/magazine.png">
						</div>
						<div class="product-card">
							<h3>L'album</h3>
							<img class="item-img" src="img/icones/album.png">
						</div>
						<div class="product-card">
							<h3>Le CV</h3>
							<img class="item-img" src="img/icones/carte-visite.png">
						</div>
					</div>
					<a href="" type="submit" class="cd-btn-contact" style="margin-top: 10%;">Le
						store arrive bientôt</a>
				</div>
			</div>
			<!-- SECTION 1 - PART 3 -->
			<div class="section-gradient">
				<div class="cd-section cd-container container-module-1">
					<div class="container-title">
						<h2>Votre application<br>votre design</h2>
						<p>Réunissez votre réseau et favorisez les intéractions business<br>
							– Communauté renforcée -
						</p>
					</div>
					<div class="container-section-img">
						<img class="img-ecrans" src="img/uniite-events.png">
						<img class="img-ecrans" src="img/uniite-menu.png">
						<img class="img-ecrans" src="img/uniite-profil.png">
					</div>
				</div>
			</div>

		</section>

		<!-- SECTION 2  -->
		<section class="highlight-section" id="cd-placeholder-2">
			<!-- SECTION 2 - PART 1 -->
			<div class="cd-section cd-container container-module-1">

				<div class="container-title">
					<img class="shape" src="img/shape.svg">
					<h2>Des profils bien différents<br>une appli sur-mesure</h2>
					<p>UNIITE s’adresse à tous types de communautés, c’est là son atout.
						Nous prenons en compte chaque détail de votre organisation pour pousser au plus loin le
						paramétrage
						d’une application qui vous ressemble.
					</p>
				</div>
				<div class="container-section-img">
					<img class="container-section-img-specific" src="img/photos/uniite-btb.png">
					<img class="container-section-img-specific" src="img/photos/uniite-employe.png">
					<img class="container-section-img-specific" src="img/photos/uniite-btc.png">
				</div>
			</div>

			<!-- SECTION 2 - PART 2 -->
			<div class="cd-section cd-container container-module-1">
				<div class="container-title">
					<img class="shape" src="img/shape.svg">
					<h2>Une solution qui vous ressemble</h2>
					<div class="container-2col">
						<p>Je suis un </p>
						<p class="text-search"> <span>club de sport professionnel</span><br>groupe
							d'hôtellerie<br>réseau
							professionnel<br>marque de vêtement</p>
					</div>
				</div>
				<div class="container-section-img">
					<img src="img/uniite-foot-employe.png">
				</div>
			</div>
		</section>

		<!-- SECTION 3 PROCESS -->
		<section class="highlight-section" id="cd-placeholder-3">
			<div class="section-process">
				<div class="cd-section cd-container">
					<div class="container-title">
						<h2>Comment procède t-on ?</h2>
					</div>
					<div class="item-process">
						<img class="item-img" src="img/icones/icone-collab.png">
						<div class="h3-module-process">
							<h3>Collaboration & analyse</h3>
						</div>
						<div class="p-module-process">
							<p>
								Un travail en étroite collaboration avec vous et une analyse de vos nécessités et
								exigences
								afin de concevoir ensemble une appli sur-mesure.
							</p>
						</div>
					</div>
					<div class="item-process">
						<img class="item-img" src="img/icones/icone-modules.png">
						<div class="h3-module-process">
							<h3>Ajout de modules personnalisés</h3>
						</div>
						<p>
							Nous implémentons les modules adaptés à votre communauté et assurons tous les
							développements
							nécessaires à la cohérence du fonctionnement.
						</p>
					</div>
					<div class="item-process">
						<img class="item-img" src="img/icones/icone-charte.png">
						<div class="h3-module-process">
							<h3>Votre charte graphique</h3>
						</div>
						<p>
							L’ajout de votre charte graphique pour vous apporter un front d’application qui vous
							ressemble.
						</p>
					</div>
					<div class="item-process">
						<img class="item-img" src="img/icones/icone-store.png">
						<div class="h3-module-process">
							<h3>Votre application sur l'Appstore</h3>
						</div>
						<p>
							Une fois tout ce travail accompli, retrouvez votre application sur l’Appstore et Google Play Store, prête à
							être
							téléchargée par les membres de votre communauté !
						</p>
					</div>
				</div>
			</div>
		</section>

		<!-- SECTION 4 - CONTACT FORM-->
		<section class="highlight-section" id="cd-placeholder-4">
			<div class="section-contact">
				<div class="cd-section cd-container">
					<div class="container-module-item-2">
						<h3>Contact</h3>
						<h2>Faites-nous part de votre projet</h2>
						<p>
							Chaque nouvel échange nous enrichit et nous permet de vous proposer des alternatives
							toujours
							plus
							adaptées à vos besoin.<br>
							Un premier contact ici, Emilien et Maël vous recontacteront pour aller plus loin
							ensemble.
						</p>
					</div>
					<div class="content-contact-form">
						<form class="contact-form" id="contact_us_form" method="POST">
							<h2>Contactez-nous !</h2>
							<div class="input-block">
								<label for="">Votre nom</label>
								<input type="text" name="lastname" id="lastname" class="form-control"
									style="color: #213670" required>
							</div>
							<div class="input-block">
								<label for="">Votre société</label>
								<input type="text" name="company" id="company" class="form-control"
									style="color: #213670">
							</div>
							<div class="input-block">
								<label for="">Votre email</label>
								<input id="email" type="email" name="email" class="form-control" style="color: #213670"
									required>
							</div>
							<div class="input-block textarea">
								<label for="">Votre message</label>
								<textarea id="message" type="text" name="message" rows="3" class="form-control"
									style="color: #213670" required></textarea>
							</div>
							<div class="g-recaptcha" style="padding-top: 15px;"
								data-sitekey="6Ld9towUAAAAAG2ElqpDNttqa8kUmph5DkMt5718"></div>
						</form>
						<a href="" type="submit" class="cd-btn-contact">Envoyer</a>
					</div>
				</div>
			</div>
		</section>


		<footer>
			<section class="cd-section">
				<div class="container-footer-uniite">
					<img src="img/logo-uniite-footer.svg" alt="Logo">
					<div class="footer-link">
						<a href="https://twitter.com/Uniitefr">
							<img src="img/icones/twitter.png"></a>
						<a href="https://www.instagram.com/uniite.fr/">
							<img src="img/icones/insta.png"></a>
						<a href="https://www.linkedin.com/company/71578280/admin/manage-admins/">
							<img src="img/icones/linkdin.png"></a>
					</div>
					<br>
					<h3>contact@uniite.fr</h3>
					<div class="footer-divider"></div>
					<h3>143 rue d'Athènes, 59800 Lille</h3>
				</div>
			</section> <!-- #cd-placeholder-2 -->
		</footer>
	</main> <!-- .cd-main-content -->

	<script src="js/jquery-2.1.1.js"></script>
	<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>

</html>