Add files via upload

2 years ago · 8603f3de92
commit 8603f3de92
6 changed files with 475 additions and 0 deletions
--- a/Eco/img/violet.png
+++ b/Eco/img/violet.png
--- a/Eco/img/écologie.png
+++ b/Eco/img/écologie.png
--- a/Eco/img/économie.png
+++ b/Eco/img/économie.png
--- a/Eco/index.css
+++ b/Eco/index.css
@ -0,0 +1,95 @@
 * {
  margin: 0;
  padding: 0;
  outline: 0;
 }
 *, ::after, ::before {
    box-sizing: border-box;
 }
 body {
  background-image: url("./img/violet.png");
  text-align: center;
  font-family: 'Roboto', sans-serif;
 }
 button{
  color: orange;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  padding: 10px 20px;
  border-radius: 5px;
 }
 a {
  text-decoration: none;
  color: #FFF;
  padding: 5px;
 }
 a:hover, button:hover {
  opacity: .7;
 }
 .hero-description {
  padding: 25px;
 }
 .hero-section {
  text-align: center;
  padding: 250px;
  margin-bottom: 70px;
 }
 .hero-title {
  margin: 15px;
 }
 .hero-btn-insta{
  background-image: url("./img/insta.png");
 }
 .hero-btn-ytb{
  background-color: red;
 }
 .hero-nav{
  text-align: center;
  list-style: none;
  display: inline;
  margin-right: -200px;
  margin-top: 275px;
  float: right;
  width: 10%;
  height:110px;
 }
 ul{
  list-style: none;
 }
 .actu{
  margin-bottom: 50px;
 }
 .card {
  padding: 60px;
  border-radius: 10px;
  background: #FFF;
  color: #414f7b;
  margin: 15px;
  box-shadow: -1px 1px 20px 2px ;
 }
 .card-description a{
  color: #4F7FE0;
 }
 .row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
 }
 .container {
  padding: 0 15px;
  margin: 0 auto;
 }
--- a/Eco/index.html
+++ b/Eco/index.html
@ -0,0 +1,173 @@
 <!DOCTYPE html>
 <html lang="fr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/png" sizes="16x16" href="./img/channels4_profile.jpg">
    <script src="https://kit.fontawesome.com/df0c92c59c.js" crossorigin="anonymous"></script>
    <title>C.Velo - positionnement économique et écologique</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./style.css">
  </head>  
  <body>
    <nav class="navbar">
      <ul class="nav-ul">
        <li class="nav-item"><a href="#acceuil">Acceuil</a></li>
        <li class="nav-item"><a href="#positionnement">Positionnements</a></li>
        <li class="nav-item"><a href="#swot">SWOT</a></li>
        <li class="nav-item"><a href="https://www.c-velo.fr/">Site officiel</a></li>
      </ul>
    </nav>
    <header class="hero-section" id="acceuil">
      <div>
        <h1 class="hero-title">
          C.Vélo - positionnement économique et écologique
        </h1>
        <p class="hero-description">
          Plus d'informations sur le site officiel !
        </p>
        <button class="hero-btn-ytb">
          <a href="https://www.c-velo.fr/">
            Site C.Vélo
          </a>
        </button>
      </div>
    </header>
    <div class="time-load-section" id="positionnement">
      <div class="container">
        <div class="actu">
          <h1 >
            Le positionnement économique et écologique de C.Vélo
          </h1>
          <p>
            Cliquez pour en savoir plus
          </p>
        </div>
        <div class="row">
          <div class="card">
            <h1 class="card-timing">
              Économique
            </h1>
            <br>
            <a href="">
              <img class="card-image" src="./img/économie.png" width="175">
            </a>
            <br><br>
            <p class="card-description">
              L'entreprise mise vers une stratégie de différenciation vers le bas c'est à dire qu'ils baissent les prix pour que les vélos soient accessible à tous. On peut aussi affirmer que C.Vélo utilise une stratégie d'impartition en utilisant des entreprises externes comme les fournisseurs de vélos. C.Vélo peut-être aussi sous concession avec les fournisseurs, c'est à dire que C.Vélo s’approvisionne exclusivement chez un fournisseur.
            </p>
          </div>
          <div class="card">
            <h1 class="card-timing">
              Écologique
            </h1>
            <br>
            <a href="">
              <img class="card-image" src="./img/écologie.png" width="175">
            </a>
            <br><br>
            <p class="card-description">
              L'entreprise cherches à réduire l'utilisation des véhicules thermiques, ils mettent donc en place des tarifs à longue durée moins cher que la location à durée de 1 jour, par exemple 1 jour coute 5€ contre 12€ pour la semaine. De plus, C.Vélo ne fait pas de publicité papier ni de publicité informatique, la seule publicité qui est présente est celle présente avec les stations.
            </p>
          </div>
        </div>
      </div>
    </div>
    <br><br><br>
    <html>
  <head>
    <title>Analyse SWOT</title>
  </head>
  <body>
    <center>
      <h1 id="swot">Analyse SWOT</h1>
      <br><br><br>
      <table>
        <tr>
          <th class="forces">Forces</th>
          <th class="faiblesses">Faiblesses</th>
        </tr>
        <tr>
          <td class="forces">- Prix (service gratuit de location)</td>
          <td class="faiblesses">- Relative dépendance de l’étranger par rapport à l’approvisionnement en composants </td>
        </tr>
        <tr>
          <td class="forces">- Connaissance du marché français proximit culturelle (langue, conception et attentes autour du vélo)</td>
          <td class="faiblesses">- Absence de stratégie globale vis-à vis des marchés de la location</td>
        </tr>
        <tr>
          <td class="forces">- Notoriété</td>
          <td class="faiblesses">- Image marketing des marques françaises moins attrayante que certains concurrents étrangers (ex : américains) </td>
        </tr>
        <tr>
          <td class="forces">- Savoir-faire reconnu à l’international sur certains segments de la location (ex : VLS)</td>
          <td class="faiblesses">- Coûts de production supérieurs à de nombreux concurrents étrangers malgré une amélioration</td>
        </tr>
        <tr>
          <td class="forces">- Satisfaction globale des loueurs vis-à vis des fabricants français</td>
          <td class="faiblesses">- Taille restreinte</td>
        </tr>
        <tr>
          <td class="forces">- Dynamisme du marché avec l’apparition de nouveaux acteurs</td>
          <td class="faiblesses">- Rentabilité variable dont un service gratuit</td>
        </tr>
        <tr>
          <td class="forces">- Volonté affichée de relocalisation de la fabrication de certains composants</td>
          <td rowspan="3"></td>
        </tr>
        <tr>
          <td class="forces">- Collaboration avec des marques reconnus</td>
        </tr>
        <tr>
          <td class="forces">- Réputation auprès des utilisateurs (très bonne image de marque)</td>
        </tr>
        <tr>
          <th class="opportunites">Opportunités</th>
          <th class="menaces">Menaces</th>
        </tr>
        <tr>
          <td class="opportunites">- Essor de l’usage du cycle et de la location en France</td>
          <td class="menaces">- Contexte de crise et de réduction du pouvoir d’achat des ménages</td>
        </tr>
        <tr>
          <td class="opportunites">- Dynamisme des marchés de la location</td>
          <td class="menaces">- Contexte de déréglementation favorisant la libre circulation des produits au sein de l’UE, y compris via internet</td>
        </tr>
        <tr>
          <td class="opportunites">- France : 1ère destination de tourisme à vélo</td>
          <td class="menaces">- Contraintes en termes de délais de paiement (LME)</td>
        </tr>
        <tr>
          <td class="opportunites">- Mise en place de politiques publiques favorisant l’usage du vélo particulièrement à Clermont-Ferrand</td>
          <td class="menaces" rowspan="4"></td>
        </tr>
        <tr>
          <td class="opportunites">- Développement du marché du VAE et de la location longue durée</td>
        </tr>
        <tr>
          <td class="opportunites">- Segmentation des marchés de la location. Avec une diversification des usages, et croissance de la <br> location « utilitaire »</td>
        </tr>
        <tr>
          <td class="opportunites">- Intérêt pour le « Made in France » de la part des utilisateurs</td>
        </tr>
      </table>
    </center>
    <br><br><br>
  </body>
 </html>
--- a/Eco/style.css
+++ b/Eco/style.css
@ -0,0 +1,207 @@
 * {
    margin: 0;
    padding: 0;
    outline: 0;
 }
 *, ::after, ::before {
    box-sizing: border-box;
 }
 aside{
    border-width:1px;
    border-style:dotted;
    border-color:gray;
 }
 .navbar{
    background-image: url("./img/violet.png");
    position: sticky;
    top: 0;
    list-style-type: none;
    padding: 30px;
 }
 .navbar .nav-item{
    float: left;
    padding: 10px;
 }
 .navbar .nav-item:last-child{
    float: right;
    padding: 10px 15px;
    margin: 10px;
    color: white;
    background-color: orangered;
    border-radius: 10px;
 }
 .sub-menu {
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: white;
 }
 .nav-item-forum{
    color: white;
    float: left;
    padding: 10px;
 }
 .nav-item-forum .sub-menu{
    padding: 10px;
    border-bottom: none;
 }
 .nav-item-forum:hover .sub-menu{
    text-decoration: none;
    display: block;
    border-bottom: none;
    background-color: RGBa(200, 200, 200, 0.1);
    border-radius: 10px;
    border-width:1px;
    border-style:inset;
    border-color:black;
    border-collapse: collapse;
 }
 .nav-item-actu{
    color: white;
    float: left;
    padding: 10px;
 }
 .nav-item-actu .sub-menu{
    padding: 10px;
    border-bottom: none;
 }
 .nav-item-actu:hover .sub-menu{
    text-decoration: none;
    display: block;
    border-bottom: none;
    background-color: RGBa(200, 200, 200, 0.1);
    border-radius: 10px;
    border-width:1px;
    border-style:inset;
    border-color:black;
    border-collapse: collapse;
 }
 .s-m-section {
    text-align: center;
    background: linear-gradient(45deg, #F47850, #FFA93A, #F47850);
    border-radius: 10px;
    padding: 20px;
    margin-top: 10px;
 }
 .s-m-title {
    margin: 20px;
 }
 .s-m-descritpion {
    margin: 0 0 40px 0;
 }
 .s-m-btn {
    color: #4F7FE0;
    border: 2px solid;
    padding: 8px 20px;
    background: 0;
 }
 .s-m-btn-2 {
    color: #F47850;
 }
 table {
    border-collapse: collapse;
 }
 td, th {
    border: 1px solid #dddddd;
    padding: 8px;
 }
 th {
    background-color: #dddddd;
    font-weight: bold;
 }
 h1 {
    text-align: center;
 }
 .forces {
    color: rgb(0, 179, 0);
 }
 .faiblesses {
    color: orange;
 }
 .opportunites {
    color: rgb(0, 95, 0);
 }
 .menaces {
    color: red;
 }
@media (min-width: 768px) {
    .container {
      width: 750px;
    }
 }
@media (min-width: 992px) {
    .container {
      width: 970px;
    }
 }
@media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
 }
@media (min-width: 576px) {
    .card {
      -ms-flex: 0 0 100%;
      flex: 0 0 100%;
      max-width: 100%;
    }
    .statics-rows {
      flex: 100%;
      -ms-flex: 0 0 100%;
      max-width: 100%;
    }
 }
@media (min-width: 768px) {
    .card {
      -ms-flex: 0 0 45%;
      flex: 0 0 45%;
      max-width: 45%;
    }
    .statics-rows {
      flex: 33.33%;
      max-width: 33.33%;
      flex: 0 0 33.33%;
    }
 }
@media (min-width: 992px) {
    .card {
      -ms-flex: 0 0 45%;
       flex: 0 0 45%; 
       max-width: 45%;
    }
    .statics-rows {
      flex: 33.33%;
      max-width: 33.33%;
      flex: 0 0 33.33%;
    }
 }
@font-face {
    font-family: 'quadranta';
    src: url('quadranta.eot');
    src: url('quadranta.otf') format('truetype'), 
    url('quadranta.otf') format('woff'),
    url('quadranta.eot?#iefix') format('embedded-opentype');
    font-weight: normal;
    font-style: normal;
 }