version beta projet terminé

matthews-crypto · Sep 23, 2022 · 688f873 · 688f873
commit 688f873
Show file tree

Hide file tree

Showing 5 changed files with 282 additions and 0 deletions.
diff --git a/ResponsiveSite/image/img1.jpeg b/ResponsiveSite/image/img1.jpeg
diff --git a/ResponsiveSite/image/img2.jpeg b/ResponsiveSite/image/img2.jpeg
diff --git a/ResponsiveSite/image/img3.jpeg b/ResponsiveSite/image/img3.jpeg
diff --git a/ResponsiveSite/index.html b/ResponsiveSite/index.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    <link rel="stylesheet" href="responsive.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <title>Mariaresponsive</title>
+</head>
+
+<body>
+    <!-- Navbar -->
+    <div class="topnav" id="myTopnav2">
+
+        <a href="#contact" class="btn btn-primary">SERVICE CLIENT</a>
+        <a href="#">TEL : +221 78 376 14 20</a>
+    </div>
+    <div class="topnav" id="myTopnav1">
+
+        <a href="#contact">SE CONECTER</a>
+        <a href="#news">CREER UN COMPTE</a>
+        <a href="#home" class="active">QUI SOMMES NOUS ? </a>
+    </div>
+    <!-- end navbar -->
+    <!-- images defilentes avec boostrap -->
+    <div class="container">
+
+        <div id="myCarousel" class="carousel slide" data-ride="carousel">
+
+            <ol class="carousel-indicators">
+                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
+                <li data-target="#myCarousel" data-slide-to="1"></li>
+                <li data-target="#myCarousel" data-slide-to="2"></li>
+            </ol>
+
+            <!-- images defilentes -->
+            <div class="carousel-inner">
+
+                <div class="item active">
+                    <img src="image/img3.jpeg" alt="" style="width:100%;height: 600px;">
+                    <h1 class="texte">Augmenter votre productivité Avec la nouvelle technologie</h1>
+
+
+                </div>
+
+                <div class="item">
+                    <img src="image/img1.jpeg" alt="" style="width:100%;height: 600px;">
+                    <h1 class="texte">Suivez les activités de vos exploitations à distance</h1>
+
+
+
+                </div>
+
+                <div class="item">
+                    <img src="image/img2.jpeg" alt="" style="width:100%;height: 600px;">
+                    <h1 class="texte">Laissez nous nous occuper de la santé de vos végétaux</h1>
+
+
+                </div>
+            </div>
+
+            <!-- Bouton qui permettent de zapper l'image -->
+            <a class="left carousel-control" href="#myCarousel" data-slide="prev">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="right carousel-control" href="#myCarousel" data-slide="next">
+                <span class="glyphicon glyphicon-chevron-right"></span>
+                <span class="sr-only">Next</span>
+            </a>
+        </div>
+    </div>
+    <!--fin images defilentes -->
+    <!-- les 5 images de differentes tailles -->
+    <div class="boites">
+        <div id="boite1">
+            <p><i class="fa-sharp fa-3x fa-solid fa-leaf"></i></p>
+            <h1>Portail de Vente</h1>
+        </div>
+
+        <div>
+            <p><i class="fa-sharp fa-3x fa-solid fa-book-open-reader"></i></p>
+            <h1>Espace de Formation</h1>
+        </div>
+        <div id="boite1">
+            <p><i class="fa-solid fa-3x fa-money-bill"></i></i>
+            </p>
+            <h1>Crowdfunding</h1>
+        </div>
+        <div>
+            <p><i class="fa-sharp fa-3x fa-solid fa-people-group"></i></p>
+            <h1>Espace de collaboration</h1>
+        </div>
+
+
+    </div>
+    <footer>
+        <a href="#"><i class="fa-brands fa-facebook"  ></i></a>
+        <a href="#"> <i class=" fa-brands fa-twitter"></i></a>
+    </footer>
+
+</body>
+
+</html>
diff --git a/ResponsiveSite/responsive.css b/ResponsiveSite/responsive.css
@@ -0,0 +1,172 @@
+body {
+    /* font-family: 'Roboto', 'Helvetica', 'sans-serif'*/
+    font-family: "Roboto", sans-serif;
+}
+
+
+/* css navbar */
+
+.topnav {
+    overflow: hidden;
+}
+
+
+/* 1ere navbar */
+
+#myTopNav1 {
+    background-color: white;
+}
+
+
+/* 2eme navbar */
+
+#myTopnav2 {
+    background-color: #f2f2f2;
+    margin-right: 3px;
+    margin-bottom: 10px;
+}
+
+#myTopnav1 a {
+    color: #005645;
+    margin-bottom: 15px;
+}
+
+#myTopnav2 a {
+    color: white;
+    background-color: #005645;
+}
+
+
+/* positionner la navbar en haut */
+
+.topnav a {
+    /* nous permet de placer les element a gauche */
+    float: right;
+    display: block;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+
+/* survol d'un element du navbar la couleur change */
+
+.topnav a:hover {
+    background-color: #ddd;
+    color: black;
+}
+
+
+/* aucun css sur les elements de la liste */
+
+.topnav .icon {
+    display: none;
+}
+
+
+/* css pour la responsivité (les ecrans <= 600px) */
+
+@media screen and (max-width: 600px) {
+    .topnav a:not(:first-child) {
+        display: none;
+    }
+    .topnav a.icon {
+        float: right;
+        display: block;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .topnav.responsive {
+        position: relative;
+    }
+    .topnav.responsive .icon {
+        position: absolute;
+        right: 0;
+        top: 0;
+    }
+    .topnav.responsive a {
+        float: none;
+        display: block;
+        text-align: left;
+    }
+}
+
+
+/* end navbar */
+
+
+/* texte sur les images defilentes */
+
+.texte {
+    position: absolute;
+    bottom: 10%;
+    color: white;
+    margin-left: 10%;
+    font-size: 45px;
+    font-weight: bolder;
+    font-family: 'Poppins', sans-serif;
+}
+
+
+/*css des images de differentes tailles  */
+
+#resIm {
+    display: flex;
+}
+
+#Im img {
+    margin-bottom: 2%;
+    margin-right: 2%;
+}
+
+#Im {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+
+/* container des images defilentes */
+
+.container {
+    width: 100%;
+}
+
+
+/* css des boites de menu */
+
+.boites {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.boites>div {
+    width: 25%;
+    margin-bottom: 2%;
+    background-color: rgb(101, 201, 101);
+    color: white;
+    height: 200px;
+    text-align: center;
+}
+
+#boite1 {
+    background-color: rgb(67, 142, 81);
+}
+
+.boites>div i {
+    margin-top: 5%;
+}
+
+footer {
+    background-color: #f2f2f2;
+    margin-top: 10%;
+    text-align: end;
+}
+
+footer i {
+    font-size: 300%;
+    margin-right: 3%;
+    color: #005645;
+}