<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html>
<head>
<title>Mon portfolio</title>
<meta name="viewport" content="width=device-width">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="icon" href="C:\Users\ismai\Documents\programmation\portfolio\mbn.png" >
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/site.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500i,600" rel="stylesheet">
</head>
<body>
<header class="container-fluid header">
<div class="container">
<nav class="menu">
<a href="#qui">qui suis je ?</a>
<a href="#about">compétences</a>
<a href="#experience">expérience</a>
<a href="#news">parcours</a>
<a href="#contact">contact</a>
</nav>
</div>
</header>
<section class="container-fluid banner">
<div class="ban">
<img src="https://s3.amazonaws.com/codementor_content/2015-Sep-Week5/programming-motivation.jpg" alt="site">
</div>
<div class="inner-banner">
<h1>Bienvenue sur mon portolio</h1>
</div>
</section>
<section class="container-fluid about" style="background-color:#3498d8;height:500px;">
<div class="row">
<h2 id="qui">qui suis je ? </h2>
<hr class="separator3">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-3 col sm-3">
<div class="ratio img-responsive img-circle" style="background-image: url(https://render.bitstrips.com/v2/cpanel/10212038-250900565_3-s1-v1.png?transparent=1&palette=1);bottom:120px;"></div>
</div>
<div class="container">
<div class="para">
<article class="col-md-4 col-lg-4 col-xs12 col sm-12">
<p>Je m'appelle mohamed, j'ai 17 ans .
je suis actuellement en bac pro sen télécom et réseau et je suis passionné par la programmation.
</p>
</article>
<article class="col-md-4 col-lg-4 col-xs12 col sm-12">
<p>mes hobbies sont informatique , configuration d'équipement informatique.
les sports de combats et collectif.
le dessin,tous qui est graphisme. et le bénotevolat.
</p>
</article>
</div>
</section>
<section class="container-fluid about">
<div class="row">
<div id="skills">
<h2 id="about"> compétences</h2>
<hr class="separator">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
<h5>BOOTSTRAP 10%</h5>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
<h5>HTML 30%</h5>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<h5>CSS 20%</h5>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<h5>configuration équipement informatique 60%</h5>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="container-fluid experience ">
<div class="row">
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<div class="container-fluid"style="background-color:#3498d8;">
<h2 id="experience">Éxpérience Professionelle </h2>
<hr class="separator3">
<ul class="timeline">
<li>
<div class="timeline-badge"><span class="glyphicon glyphicon-console"></span></div>
<div class="timeline-panel-container-inverted">
<div class="timeline-panel">
<div class="timeline-heading">
<h3>Langage de programation</h3>
<h4></h4>
<p class="text-muted"><small class=""></small> </p>
</div>
<div class="timeline-body">
<p>autodidacte</p>
<p>css ; html ; bootstrap</p>
</div>
</div>
</div>
</li>
<li>
<div class="timeline-badge"><span class="fa fa-desktop"></span></div>
<div class="timeline-panel-container">
<div class="timeline-panel">
<div class="timeline-heading">
<h3>Configuration équipement informatique</h3>
<h4></h4>
<p class="text-muted"><small class=""></small></p>
</div>
<div class="timeline-body">
<p>configuration poste informatique</p>
<p>configuration de serveur, commutateur, routeur</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="container-fluid news">
<div class="row">
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<h2 id="news">Parcours</h2>
<hr class="separator">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="education-block">
<h5>2015-2017</h5>
<span class="glyphicon glyphicon-education"></span>
<h3>Lycée Paul Bert("MAISON-ALFORT")</h3>
<h5></h5>
<p>Bac Pro SEN(système électronique et numérique) Télécom & Réseau </p>
<p>Administrateur réseau</p>
</div>
</div>
</div>
</section>
<section class="container-fluid contact ">
<div class="container">
<div class="row">
<div class="span6">
<div class="container">
<div class="row">
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12">
<h2 id="contact"> Contactez-moi !</h2>
<hr class="separator3">
<div class="span6">
<form method="post" action="index.php"class="formulaireContact">
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Nom" >
<input id="email" name="email" type="email" class="span3" placeholder="mail" >
</div>
<div class="controls">
<input required name="description" type="description" id="description" class="span3"placeholder="Description"></input>
</div>
<div class="controls">
<textarea id="message" name="message" class="span6" placeholder="votre Message" rows="5"></textarea>
</div>
<div class="controls">
<button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
</div>
</form>
</div>
<p style=" color:white;top: 50px; padding:30px;margin-left:40%;">
</p>
<div class="col-md-12 col-lg-12 col-xs-6 col-sm-6">
<ul class="social-nav">
<li><a href="#" target="_blank" title="Facebook" rel="nofollow" class="facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="#" target="_blank" title="Google plus" rel="nofollow" class="google"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="text-center">
<a href="#">
<span class="glyphicon glyphicon-chevron-up"></span>
</a>
<h5>©copyright 2017 </h5>
</footer>
</body>
</html>
body{
font-family:"Raleway",sans-serif;
margin: 0;
padding:0;
height: 100%;
width: 100%;
overflow-x: hidden;
}
a{
text-decoration: none;
}
a, a:hover {
text-decoration: none;
}
.container-fluid{
padding: 0px;
}
.separator{
height: 3px;
width: 5%;
border:none;
box-shadow: none;
background-color: #3498d8;
}
.header{
background-color: #3498d8;
height: 70px;
line-height: 70px;
width: 100%;
}
.logo{
color:#ffffff;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
float: left;
margin-left:20px;}
.menu{
float: right;
}
.menu a{
color:#ffffff;
margin-right: 20px;
font-size: 15px;
}
.menu a:hover {
color: #2c3e50;
}
.banner {
width: 100%;
max-width: 100%;
position: relative;
}
.ban img {
width: 100%;
max-width: 100%;
}
.inner-banner{
position: absolute;
top:40%;
width: 100%;
text-align: center;
}
.inner-banner h1 {
color:white;
font-weight: bold;
}
#qui {
color: #ffffff;
text-align: center;
padding-top: 2%;
}
.qui article{
margin-top: 2%;
margin-bottom: 2%;
}
.qui article h2{
text-align: center;
}
.caption div {
box-shadow: 0 0 5px ;
transition: all 0.3s ease 0s;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
#about {
text-align: center;
padding-top: 2%;
}
.about article{
margin-top: 2%;
margin-bottom: 2%;
}
.about article h2{
text-align: center;
}
#skills {
background-color: #fff;
}
#skills .heading h2 {
color:#3498d8 ;
}
#skills .progress {
height: 100%;
margin: 30px 20px;
backface-visibility: black;
}
#skills .progress-bar {
background-color:#3498D8;
}
#skills .progress h5 {
text-shadow: 1px 1px 1px #000;
}
#experience{
color: #ffffff;
text-align: center;
padding-top: 2%;
}
.experience article{
margin-top: 2%;
margin-bottom: 2%;
}
.experience article h2{
text-align: center;
}
.separator3{
height: 3px;
width: 5%;
border:none;
box-shadow: none;
background-color: white;
}
.timeline {
padding: 30px 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 5px;
background-color: white;
left: 50%;
margin-left: -2.5px;
}
.timeline > li {
margin-bottom: 20px;
position: relative;
list-style: none;
}
.timeline > li:after {
clear: both;
}
.timeline > li:before, .timeline > li:after {
content: " ";
display: table;
}
.timeline li .timeline-badge {
color: #3498d8;
width: 50px;
line-height: 50px;
font-size: 20px;
text-align: center;
position: absolute;
top: 16px;
left: 50%;
margin-left: -25px;
background-color: white;
border-radius: 50%;
}
.timeline-panel-container {
width: 50%;
float: left;
}
.timeline-panel-container-inverted {
width: 50%;
float: right;
}
.timeline-panel {
width: 90%;
float: right;
margin-right: 40px;
border: 1px solid #d4d4d4;
border-radius: 7px;
padding: 20px 25px;
position: relative;
box-shadow: 0 1px 6px rgba(0, 0, 0, .175);
background-color: #fff;
}
.timeline-panel-container-inverted .timeline-panel {
float: left;
margin-left: 40px;
}
.timeline-panel:after {
position: absolute;
top: 27px;
right: -14px;
display: inline-block;
border-top: 14px solid transparent;
border-left: 14px solid #fff;
border-right: 0 solid #fff;
border-bottom: 14px solid transparent;
content: " ";
}
.timeline-panel-container-inverted .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
.timeline-heading h3 {
margin-top: 5px;
font-size: 20px;
}
.timeline-heading h4 {
color: #2C3E50;
}
#news{
text-align: center;
padding-top: 2%;
}
.news article{
margin-top: 2%;
margin-bottom: 2%;
}
.news article h2{
text-align: center;
}
#education {
background-color: #fff;
}
.education-block {
width: 80%;
margin: 0 auto;
text-align: center;
padding: 30px;
background-color: #ddd;
border-radius: 10px;
border: 2px solid #ccc;
margin-bottom: 20px;
}
.education-block h5 {
color: #888;
font-size: 15px;
margin-bottom: 15px;
}
.education-block .glyphicon {
font-size: 40px;
}
.education-block h3 {
color: #3498d8;
}
.education-block h4 {
margin-bottom: 20px;
}
.education-block p {
font-weight: bold;
}
.education-block .red-divider {
margin-bottom: 20px;
}
.contact{
background-color:#3498d8 ;
}
#contact{
color: #ffffff;
text-align: center;
}
.formulaireContact{
width: 500px;
height: 500px;
display: block;
margin: 0 auto;
float: center;
}
input{
margin-bottom: 20px;
}
input[type=text]{
height: 50px;
width: 500px;
border: none;
float: left;
}
input[type=email]{
height: 50px;
width: 500px;
border: none;
float: left;
}
input[type=description]{
height: 50px;
width: 500px;
border: none;
float: left;
}
textarea{
width: 500px;
height: 200px;
resize: vertical;
float: left;
}
.separator2{
height: 3px;
width: 5%;
border:none;
box-shadow: none;
background-color: #3498d8;
}
/*=========================
Icons
================= */
/* footer social icons */
ul.social-network {
list-style: none;
display: inline;
margin-left:40% !important;
padding: 1%;
}
ul.social-network li {
display: inline;
margin: 0 5px;
}
/* footer social icons */
.social-network a.icoRss:hover {
background-color: #F56505;
}
.social-network a.icoFacebook:hover {
background-color:#3B5998;
}
.social-network a.icoTwitter:hover {
background-color:#33ccff;
}
.social-network a.icoGoogle:hover {
background-color:#BD3518;
}
.social-network a.icoInstagram:hover {
background-color:#3F729B;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i,
.social-network a.icoInstagram:hover i, .social-network a.icoYelp:hover i {
color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
color:#44BCDD;
}
.social-circle li a {
display:inline-block;
position:relative;
margin:0 auto 0 auto;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
text-align:center;
width: 50px;
height: 50px;
font-size:19px;
bottom:9px;
}
.social-circle li i {
margin:0px;
line-height:50px;
text-align: center;
}
.social-circle li a:hover i, .triggeredHover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms--transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.social-circle i {
color: #fff;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
-ms-transition: all 0.8s;
transition: all 0.8s;
}
footer {
background-color: #333;
padding: 15px 0 20px;
}
footer .glyphicon {
font-size: 25px;
margin: 20px;
color: ;
height: 15px;
}
footer .glyphicon:hover {
font-size: 27px;
}
footer h5 {
color: #fff;
font-weight: normal;
}
.para{
font-size: 20px;
}
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css);
/*----- Social Links -----*/
.social-nav {
padding: 0;
list-style: none;
margin: -10px 0 0 -10px;
}
.social-nav li {
float: left;
margin: 10px 0 0 10px;
list-style: none;
}
.social-nav a {
display: inline-block;
float: left;
width: 48px;
height: 48px;
font-size: 20px;
color: #fff;
text-decoration: none;
cursor: pointer;
text-align: center;
line-height: 48px;
background: #000;
position: relative;
transition: all 0.5s;
-ms-transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.social-nav a {
overflow: hidden;
font-size: 26px;
border-radius: 4px;
}
.social-nav a:hover {
background: #fff;
text-shadow: 0px 0px #d4d4d4, 1px 1px #d4d4d4, 2px 2px #d4d4d4, 3px 3px #d4d4d4, 4px 4px #d4d4d4, 5px 5px #d4d4d4, 6px 6px #d4d4d4, 7px 7px #d4d4d4, 8px 8px #d4d4d4, 9px 9px #d4d4d4, 10px 10px #d4d4d4, 11px 11px #d4d4d4, 12px 12px #d4d4d4, 13px 13px #d4d4d4, 14px 14px #d4d4d4, 15px 15px #d4d4d4, 16px 16px #d4d4d4, 17px 17px #d4d4d4, 18px 18px #d4d4d4, 19px 19px #d4d4d4, 20px 20px #d4d4d4, 21px 21px #d4d4d4, 22px 22px #d4d4d4, 23px 23px #d4d4d4, 24px 24px #d4d4d4, 25px 25px #d4d4d4, 26px 26px #d4d4d4, 27px 27px #d4d4d4, 28px 28px #d4d4d4, 29px 29px #d4d4d4, 30px 30px #d4d4d4;
}
.social-nav .twitter {
background: #00ACED;
text-shadow: 0px 0px #0087ba, 1px 1px #0087ba, 2px 2px #0087ba, 3px 3px #0087ba, 4px 4px #0087ba, 5px 5px #0087ba, 6px 6px #0087ba, 7px 7px #0087ba, 8px 8px #0087ba, 9px 9px #0087ba, 10px 10px #0087ba, 11px 11px #0087ba, 12px 12px #0087ba, 13px 13px #0087ba, 14px 14px #0087ba, 15px 15px #0087ba, 16px 16px #0087ba, 17px 17px #0087ba, 18px 18px #0087ba, 19px 19px #0087ba, 20px 20px #0087ba, 21px 21px #0087ba, 22px 22px #0087ba, 23px 23px #0087ba, 24px 24px #0087ba, 25px 25px #0087ba, 26px 26px #0087ba, 27px 27px #0087ba, 28px 28px #0087ba, 29px 29px #0087ba, 30px 30px #0087ba;
}
.social-nav .twitter:hover {
color: #00ACED;
}
.social-nav .facebook {
background: #3B579D;
text-shadow: 0px 0px #2d4278, 1px 1px #2d4278, 2px 2px #2d4278, 3px 3px #2d4278, 4px 4px #2d4278, 5px 5px #2d4278, 6px 6px #2d4278, 7px 7px #2d4278, 8px 8px #2d4278, 9px 9px #2d4278, 10px 10px #2d4278, 11px 11px #2d4278, 12px 12px #2d4278, 13px 13px #2d4278, 14px 14px #2d4278, 15px 15px #2d4278, 16px 16px #2d4278, 17px 17px #2d4278, 18px 18px #2d4278, 19px 19px #2d4278, 20px 20px #2d4278, 21px 21px #2d4278, 22px 22px #2d4278, 23px 23px #2d4278, 24px 24px #2d4278, 25px 25px #2d4278, 26px 26px #2d4278, 27px 27px #2d4278, 28px 28px #2d4278, 29px 29px #2d4278, 30px 30px #2d4278;
}
.social-nav .facebook:hover {
color: #3B579D;
}
.social-nav .google {
background: #DD4A3A;
text-shadow: 0px 0px #c23122, 1px 1px #c23122, 2px 2px #c23122, 3px 3px #c23122, 4px 4px #c23122, 5px 5px #c23122, 6px 6px #c23122, 7px 7px #c23122, 8px 8px #c23122, 9px 9px #c23122, 10px 10px #c23122, 11px 11px #c23122, 12px 12px #c23122, 13px 13px #c23122, 14px 14px #c23122, 15px 15px #c23122, 16px 16px #c23122, 17px 17px #c23122, 18px 18px #c23122, 19px 19px #c23122, 20px 20px #c23122, 21px 21px #c23122, 22px 22px #c23122, 23px 23px #c23122, 24px 24px #c23122, 25px 25px #c23122, 26px 26px #c23122, 27px 27px #c23122, 28px 28px #c23122, 29px 29px #c23122, 30px 30px #c23122;
}
.social-nav .google:hover {
color: #DD4A3A;
}
.social-nav .linkedin {
background: #007BB6;
text-shadow: 0px 0px #005983, 1px 1px #005983, 2px 2px #005983, 3px 3px #005983, 4px 4px #005983, 5px 5px #005983, 6px 6px #005983, 7px 7px #005983, 8px 8px #005983, 9px 9px #005983, 10px 10px #005983, 11px 11px #005983, 12px 12px #005983, 13px 13px #005983, 14px 14px #005983, 15px 15px #005983, 16px 16px #005983, 17px 17px #005983, 18px 18px #005983, 19px 19px #005983, 20px 20px #005983, 21px 21px #005983, 22px 22px #005983, 23px 23px #005983, 24px 24px #005983, 25px 25px #005983, 26px 26px #005983, 27px 27px #005983, 28px 28px #005983, 29px 29px #005983, 30px 30px #005983;
}
.social-nav .linkedin:hover {
color: #007BB6;
}
.social-nav .pinterest {
background: #CB2026;
text-shadow: 0px 0px #9f191e, 1px 1px #9f191e, 2px 2px #9f191e, 3px 3px #9f191e, 4px 4px #9f191e, 5px 5px #9f191e, 6px 6px #9f191e, 7px 7px #9f191e, 8px 8px #9f191e, 9px 9px #9f191e, 10px 10px #9f191e, 11px 11px #9f191e, 12px 12px #9f191e, 13px 13px #9f191e, 14px 14px #9f191e, 15px 15px #9f191e, 16px 16px #9f191e, 17px 17px #9f191e, 18px 18px #9f191e, 19px 19px #9f191e, 20px 20px #9f191e, 21px 21px #9f191e, 22px 22px #9f191e, 23px 23px #9f191e, 24px 24px #9f191e, 25px 25px #9f191e, 26px 26px #9f191e, 27px 27px #9f191e, 28px 28px #9f191e, 29px 29px #9f191e, 30px 30px #9f191e;
}
.social-nav .pinterest:hover {
color: #CB2026;
}
