footer

agile-dev/css/custom.css

@@ -0,0 +1,130 @@
+#img_cover {
+    float: left;
+    margin-right: 10%;
+}
+
+#section2 {
+    margin: 5%;
+    display: flex;
+    justify-content: space-around;
+}
+
+#text2 {
+    display: flex;
+    flex-direction: column;
+    width: 30%;
+    justify-content: center;
+}
+.nav-wrapper{
+    background-color: blue;
+  }
+  .btn{
+    background-color: tomato;
+  }
+  .btn:hover{
+    background-color: darkred;
+  }
+  label.active{
+    color: tomato;
+  }
+  input[type=email]:not(.browser-default):focus:not([readonly]){
+    border-bottom: 1px solid tomato;
+    -webkit-box-shadow: 0 1px 0 0 tomato;
+    box-shadow: 0 1px 0 0 tomato;
+  }
+  header{
+    position: relative;
+    z-index: 999;
+  }
+  .brand-logo img{
+    max-height: 50px;
+    margin: 8px;
+  }
+  .showcase{
+    padding-top: 2rem;
+    background-color: lightskyblue;
+  }
+  .showcase .hero{
+    padding-top: 2rem;
+  }
+  .profit .text-wrapper{
+    padding-top: 4rem;
+  }
+  .profit img{
+    max-height: 450px;
+  }
+  .features{
+    background-color: lightskyblue;
+    padding: 2rem 0;
+  }
+  .page-footer{
+    background-color: darkslategrey;
+  }
+  .page-footer svg{
+    fill: white;
+    height: 35px;
+  }
+  .download{
+    padding-top: 2rem;
+  }
+  .parts{
+    background-color: lightskyblue;
+    padding: 2rem 0;
+    margin: 0;
+  }
+  form .btn{
+    margin-top: 2rem;
+  }
+
+  @media (max-width:768px){
+    .brand-logo img{
+      max-height: 40px;
+      margin: 8px;
+    }
+    .hero,
+    .download,
+    .features .text-wrapper{
+      text-align: center;
+    }
+  }
+
+
+  #section4 {
+    display: flex;
+  }
+
+  #text4 {
+    display: flex;
+    flex-direction: column;
+    width: 35%;
+    margin-left: 8%;
+    margin-right: 8%;
+  }
+
+  #form {
+    text-align: center;
+    margin-top: 10%;
+    border: 1px solid black;
+    width: 40%;
+    height: 80%;
+    padding: 3%;
+  }
+
+  #input, #input1, #input2{
+    border: 1px solid black;
+
+  }
+
+  #submit {
+    background-color: black;
+    color: white;
+    width: 80%;
+    margin-top: 10px;
+  }
+
+  #titleform {
+    background-color: gray;
+    color: white;
+    font-size: 1.8em;
+    margin-top: 15px;
+  }

agile-dev/css/evgenii.css

@@ -0,0 +1,110 @@
+/*sociallinks*/
+.containerz {
+    margin: 60px auto 0px auto;
+    text-align: center;
+  }
+
+  .effect {
+    width: 100%;
+    background-color: #212121;
+  }
+  .effect h2 {
+    color: #fff;
+    font-family: "Playfair Display", serif;
+    font-weight: 400;
+    font-size: 25px;
+    letter-spacing: 3px;
+  }
+  .effect:nth-child(2) {
+    margin-top: 50px;
+  }
+  .effect:nth-child(2n+1) {
+    background-color: #fff;
+  }
+  .effect:nth-child(2n+1) h2 {
+    color: #212121;
+  }
+  .effect .buttons {
+    /*margin-top: 50px;*/
+    display: flex;
+    justify-content: center;
+  }
+  .effect a:last-child {
+    margin-right: 0px;
+  }
+
+  .effect a {
+    text-decoration: none !important;
+    color: #fff;
+    width: 55px;
+    height: 55px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    margin-right: 20px;
+    font-size: 25px;
+    overflow: hidden;
+    position: relative;
+  }
+  .effect a i {
+    position: relative;
+    z-index: 3;
+  }
+  .effect a.fb {
+    background-color: #3b5998;
+  }
+  .effect a.tw {
+    background-color: #00aced;
+  }
+  .effect a.insta {
+    background-color: #bc2a8d;
+  }
+
+  .effect.egeon a {
+    transition: transform 0.2s linear 0s, border-radius 0.2s linear 0.2s;
+  }
+  .effect.egeon a i {
+    transition: transform 0.2s linear 0s;
+  }
+  .effect.egeon a:hover {
+    transform: rotate(-90deg);
+    border-top-left-radius: 50%;
+    border-top-right-radius: 50%;
+    border-bottom-left-radius: 50%;
+  }
+  .effect.egeon a:hover i {
+    transform: rotate(90deg);
+  }
+  .buttons{
+    float: right;
+    margin-right: 3%;
+    position: relative;
+    /*bottom: 42px;*/
+    top: 10px;
+
+  }
+  /*sociallinks end*/
+
+
+
+  /*footer*/
+  .page-footerz {
+
+    color: #fff;
+    background-color: blue;
+  }
+
+  .page-footerz .footer-copyrightz {
+    overflow: hidden;
+    min-height: 75px;
+    display: flex;
+    -webkit-box-align: center;
+            align-items: center;
+    -webkit-box-pack: justify;
+            justify-content: space-between;
+    padding: 10px 0px;
+    color: rgba(255, 255, 255, 0.8);
+    margin: 0%;
+  }
+  /*footer end*/

agile-dev/index.html

@@ -4,22 +4,139 @@
     <!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
-    <link type="text/css" rel="stylesheet" href=""/>
+
+    <link type="text/css" rel="stylesheet" href="css/custom.css"/>
     <!--Import your custom.css-->
-    <link type="text/css" rel="stylesheet" href=""/>
+    <link type="text/css" rel="stylesheet" href="css/materialize.css"/>
+
     <!--Let browser know website is optimized for mobile-->
+    <link type="text/css" rel="stylesheet" href="css/evgenii.css"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>🤙 Yo! application 🤙 | Simplon</title>
   </head>
   <body>
+    <header>
+      <div class="navbar-fixed">
+        <nav>
+          <div class="nav-wrapper">
+            <a href="" class="brand-logo"><img src="img/logo_application.png"></a>
+            <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
+            <ul class="right hide-on-med-and-down">
+                <li><a href="#profit">Bénéfices</a></li>
+                <li><a href="#features">Fonctionnalités</a></li>
+                <li><a href="#download" class="waves-effect waves-light btn">Télécharger</a></li>
+            </ul>
+          </div>
+        </nav>
+        <ul class="sidenav" id="mobile-demo">
+          <li><a href="#profit">Bénéfices</a></li>
+          <li><a href="#features">Fonctionnalités</a></li>
+          <li><a href="#download" class="waves-effect waves-light btn">Télécharger</a></li>
+      </ul>
+      </div>
+    </header>
+    <section class="showcase">
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m6 hero">
+            <h1>Découvrez notre toute nouvelle App</h1>
+            <p class="flow-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, ad hic ?</p>
+            <div class="row">
+              <div class="col s12 m6">
+                <a href="#!"><img src="img/download_android.png" class="responsive-img"></a>
+              </div>
+              <div class="col s12 m6">
+                  <a href="#!"><img src="img/download_ios.png" class="responsive-img"></a>
+              </div>
+            </div>
+          </div>
+          <div class="col s12 m6">
+            <img src="img/iphone_cover_light.png" class="responsive-img">
+          </div>
+        </div>
+        </div>
+    </section>
 
-    <!-- Start code here -->
+    <!-- Start code here -->  
+    <div id="section2">
+      <img src="img/iphone_side_light.png" width="300px" id="img_cover"/>
+      <div id="text2">
+        <h2>Benefice</h2>
+        <p>
+          dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <a class="waves-effect waves-light btn">Lorem ipsum</a>
+      </div>
+    </div>
+
+    <section class="features" id="features">
+      <div class="container">
+        <div class="row">
+          <div class="col s12 m4 right-align text-wrapper">
+            <h3>Fonctionnalité 1</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias assumenda itaque doloremque voluptatum sit architecto!</p>
+            <h3>Fonctionnalité 2</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias assumenda itaque doloremque voluptatum sit architecto!</p>
+            <h3>Fonctionnalité 3</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias assumenda itaque doloremque voluptatum sit architecto!</p>
+          </div>
+          <div class="col s12 m4">
+            <img src="img/iphone_features_light.png" class="responsive-img">
+          </div>
+          <div class="col s12 m4 left align text-wrapper">
+            <h3>Fonctionnalité 4</h3>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias assumenda itaque doloremque voluptatum sit architecto!</p>
+              <h3>Fonctionnalité 5</h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias assumenda itaque doloremque voluptatum sit architecto!</p>    
+              <h3>Fonctionnalité 6</h3>
+              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias assumenda itaque doloremque voluptatum sit architecto!</p>  
+          </div>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        </div>
+      </div>
+    </section>
+
+    <div id="section4">
+      <div id="text4">
+      <h2>
+        Win a new Iphone
+      </h2>
+      <p>
+        dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+      <img src="img/iphone_isometric_light.png" />
+      </div>
+      <div id="form">
+        <h3 id="titleform">Contact</h3>
+        <form method="get" action="">
+          <input type="text" name="name" id="input" placeholder="Name" width="300px">
+          <input type="text" name="firstname" id="input1" placeholder="Firstname">
+          <input type="email" name="mail" id="input2" placeholder="Email">
+          <input type="submit" id="submit" value="envoyer">
+        </form>
+      </div>
+
+    </div>
 
     <!-- finish code here -->
 
     <!--Import materialize.js - JavaScript at end of body for optimized loading-->
-    <script type="text/javascript" src=""></script>
+    <script type="text/javascript" src="js/custom.js"></script>
     <!--Import your custom.js-->
-    <script type="text/javascript" src=""></script>
+    <script type="text/javascript" src="js/materialize.js"></script>
+
+  <footer class="page-footerz">
+
+    <div class="effect egeon">
+      <div class="buttons">
+        <a href="https://facebook.com" class="fb" title="Join us on Facebook">f<i class="fa fa-facebook" aria-hidden="true"></i></a>
+        <a href="https://twitter.com" class="tw" title="Join us on Twitter">t<i class="fa fa-twitter" aria-hidden="true"></i></a>
+        <a href="https://instagram.com" class="insta" title="Join us on Instagram">I<i class="fa fa-instagram" aria-hidden="true"></i></a>
+      </div>
+    </div>
+
+    <p class="footer-copyrightz">Yo! © 2023</p>
+
+  </footer>
   </body>
 </html>