Test_WsCw

In this example below you will see how to do a Test_WsCw with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by muktek, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright muktek ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Test_WsCw</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!-- Vamos a crear un título -->

<h1>El Godin 2.0</h1>

<!-- Ahora un subtítulo -->

<div class="maintext">

  <h2>Y sus aventuras en el mundo TECH :)</h2>

  <!-- Ahora el texto de nuestra entrada de blog -->

  <p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

    <br />
    <br />

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.


  </p>

  <div class="fotogodin">
    <img src="http://scrummethodology.com/wp-content/uploads/2012/12/seth-godin.jpg" alt="No se cargó esta imágen" />
    <ul>
      <li>Un godin siempre debe llevar lentes. Esto no cambia</li>
      <li>Pero, el Godin 2.0, los usa con estilo</li>
      <li>También, el Godin 2.0 trabaja a la hora que quiera, de donde quiera</li>
    </ul>
 </div>


  <p class="ultimoparrafo">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

  </p>
  
</div>


<div class="cierre">
  <h3>Dejanos tu email abajo si quieres saber más sobre lo que es ser un Godin 2.0</h3>

<div class="inputsection">
  <input class="emailinput" type="text" placeholder="escribe aquí tu email"/>
  <input class="button" type="submit" value="enviar"/>
 </div>
  
</div>


<div>
<h6>Derechos Reservados, 
  
  <a href="www.muktek.com">MUKTEK</a>
 
  2017</h6>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/muktek/test_wscw-ybReJP */
body{
  
  background-color: #ecf0f1;
  margin: 0px;
}

h1{
  text-align: center;
  margin-top: 0px;
  padding-top: 50px;
  padding-bottom: 20px;
  background-color: #2980b9;
  color: #ecf0f1;
  font-size: 70px;
}

.maintext{
  
  margin-left: 100px;
  margin-right: 100px;
  
}

h2{
  text-align: center;
  
}


.fotogodin{
  margin-left: 20%;
  
}

img{

  width: 500px;
  margin-top: 60px;
  
}

ul{
  padding: 10px;
}

.ultimoparrafo{
      margin-bottom: 60px;
  
}

.cierre{
  background-color: #2980b9;
  padding-bottom: 10px;
  
}

h3{
  padding-top: 20px;
  text-align: center;
  color: #ecf0f1;
}

.inputsection{
  display: block;
  margin: auto;
  text-align: center;  
}


h6{
  text-align: center;
  
}

a{
  text-decoration: none;
}

Comments