Bootstrap modal avec un formulaire newsletter

<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap modal avec un formulaire de la newsletter | Par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Bootstrap modal avec un formulaire de la newsletter">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body class="container">
	<div class="row">
	    <div class="col-lg-8 loading">
		<div id="myModal" class="modal fade">
			<div class="modal-dialog modal-newsletter">
				<div class="modal-content">
					<form action="/examples/actions/confirmation.php" method="post">
						<div class="modal-header">
							<div class="icon-box">
								<i class="fa fa-envelope"></i>
							</div>
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span>&times;</span></button>
						</div>
						<div class="modal-body text-center">
							<h4>Inscrivez-vous</h4>	
							<p>Abonnez-vous à notre newsletter pour recevoir les dernières mises à jour et promotions.</p>
							<br>
							<div class="form-group">
								<input type="email" class="form-control" placeholder="Entrer votre email" required>
								<input type="submit" class="btn btn-primary" value="Inscrivez-vous">
							</div>
						</div>
					</form>			
				</div>
			</div>
		</div>
		<p class="hint-text text-center">
			<strong>Infos:</strong> Veuillez actualiser la page ou exécuter le code pour recharger le modal, ou 
			<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">cliquer ici</button>.
		</p>		
		</div>		
	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
body {
    font-family: 'Open Sans', sans-serif;
}	
.modal-newsletter {	
    color: #999;
    width: 480px;
    font-size: 15px;
}
.modal-newsletter .modal-content {
    padding: 40px 50px;
    border-radius: 1px;		
    border: none;
}
.modal-newsletter .modal-header {
    border-bottom: none;   
    position: relative;
    text-align: center;
    border-radius: 5px 5px 0 0;
}
.modal-newsletter h4 {
    color: #000;
    text-align: center;
    font-family: 'Lato', sans-serif;
    font-weight: 900;
    font-size: 30px;
    margin: 0 0 25px;		
    text-transform: uppercase;
}
.modal-newsletter .close {
    position: absolute;
    top: -15px;
    right: -25px;
    color: #c0c3c8;
    text-shadow: none;
    opacity: 0.5;
    width: 22px;
    height: 22px;
    border-radius: 20px;
    font-size: 16px;
    border: 2px solid;
}
.modal-newsletter .close:hover {
    opacity: 0.8;
}
.modal-newsletter .icon-box {
    color: #49c5c1;		
    display: inline-block;
    z-index: 9;
    text-align: center;
    position: relative;
}
.modal-newsletter .icon-box i {
    font-size: 110px;
}
.modal-newsletter .form-control, .modal-newsletter .btn {
    min-height: 46px;
    text-align: center;
    border-radius: 1px; 
}
.modal-newsletter .form-control {
    box-shadow: none;
    border-color: #dbdbdb;
}
.modal-newsletter .form-control:focus {
    border-color: #49c5c1;
    box-shadow: 0 0 8px rgba(73, 197, 193, 0.5);
}
.modal-newsletter .btn {
    color: #fff;
    background: #49c5c1;
    text-decoration: none;
    transition: all 0.4s;
    line-height: normal;
    padding: 6px 20px;
    min-width: 180px;
    border: none;
    margin-top: 20px;
    font-family: 'Airal', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
.modal-newsletter .btn:hover, .modal-newsletter .btn:focus {
    background: #39b3af;
    outline: none;
}
.modal-newsletter .form-group {
    margin-top: 30px;
}
.hint-text {
    margin: 100px auto;
    text-align: center;
}
$(document).ready(function(){
    $("#myModal").modal('show');
});
toggle switch style02

toggle switch style02

input radio checkbox b4 style

input radio checkbox b4 style

Vidéo background en html5 style02

Vidéo background en html5 style02

Titre section avec une anmation style01

Titre section avec une anmation style01

Radio button style

Radio button style

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Planète animée style01

Planète animée style01

Manual Slideshow

Manual Slideshow

Loading style book loader

Loading style book loader

Bootstrap4 datepicker

Bootstrap4 datepicker

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Background overlay

Background overlay