CMTTM - Cosas bonitas 💖

In this example below you will see how to do a CMTTM - Cosas bonitas 💖 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Kayanami, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Kayanami ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CMTTM - Cosas bonitas 💖</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <!DOCTYPE html>
<html>
<head>
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=VT323" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Lobster|Questrial" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Sedgwick+Ave" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">

<!--añadir un ícono a lado del título de tab-->
  <link rel="icon" href="https://image.ibb.co/jF2jsF/cmttm_icon.png">
  <title>Cry me to the moon 💖</title> 
</head>
<body>
  <!--Barra de navegación-->
    <div id="barranav" class="box container-fluid">
       <div class="barrita">
      <nav>
        <ul>
          <div class="barratexto">
         <li><a href="#arribita">Cosas bonitas 💖</a></li>
          <li><a href="https://codepen.io/Kayanami/full/xLdOrY/" target="_blank">Regalos 🎁</a></li>
          <li id="fuente8bit"><a href="https://codepen.io/Kayanami/full/ayydKa/" target="_blank">Videos 8-bit 👾</a></li>
          <li><a href="https://codepen.io/Kayanami/full/QMveXm" target="_blank">Fondos 🖼️</a></li>
            <li><a href="https://codepen.io/Kayanami/full/dzWYga" target="_blank">Inicio 🏠</a></li>
            <img id="logo" src="https://image.ibb.co/fP4ThF/logo.png" alt="logo">    
        </div>
        </ul>
      </nav>
    </div>
   </div>
  <!--Contenido-->
<div id="contenido">
  <center>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="strike" id="arribita">
      <span><h1>Imitaciones Kaneoya Sachiko</h1></span>
      <p>Por: <a href="https://www.facebook.com/pedro.catania.aranda" target="_blank">Pedro Catania</a>
</div>
<img id="arriba" class="margentop" src="https://scontent.fgdl1-1.fna.fbcdn.net/v/t1.0-9/20265032_2310314962577929_8635039970367334784_n.jpg?oh=8290565c164f9d30cb24c7206909e2b6&oe=5A334721" />
<img class="margentop" src="https://scontent.fgdl1-1.fna.fbcdn.net/v/t1.0-9/20258289_2303977689878323_59808377179058883_n.jpg?oh=a8eb2b515889d93bb9d83b737e9fbfae&oe=59F47631" />
<!--fila2-->
    <img class="foto" src="https://scontent.fgdl1-1.fna.fbcdn.net/v/t1.0-9/20245332_2303978573211568_5373471494964936434_n.jpg?oh=3bc15c6f3df8e8dbe8011424feaae440&oe=59F1EA3E" />
<img class="foto" src="https://scontent.fgdl1-1.fna.fbcdn.net/v/t1.0-9/20228809_2303977739878318_3195384735539083445_n.jpg?oh=3e2a09ecc54f62ccc24ad1846f9c955c&oe=5A2314E3" />
<!--fila3-->
  <div class="strike">
      <span><h1>EVA  &nbsp A e s t h e t i c s</h1></span>
    <p> Por: <a href="https://www.facebook.com/artcuisi/" target="_blank">CuisiArt</a>
  </div>
    <a href="https://image.ibb.co/bY2t4v/Subir_2.png"><img class="foto" src="https://image.ibb.co/bY2t4v/Subir_2.png" alt="Subir_2" border="0"></a>
    <a href="https://image.ibb.co/dUT0jv/subir.png"><img  class="foto" src="https://image.ibb.co/dUT0jv/subir.png" alt="subir" border="0"></a>
    <div class="strike">
      <span><h1>A e s t h e t i c &nbsp  s t u f f</h1></span>
    <p> Por: <a href="http://sweethaise.deviantart.com/" target="_blank">SweetHaise</a>
  </div>
    <a href="http://sweethaise.deviantart.com/art/Rei-641480758" target="_blank"><img class="foto" src="http://orig08.deviantart.net/f813/f/2016/296/c/2/rei_by_sweethaise-dalx5py.png"></a>
    <a href="http://sweethaise.deviantart.com/art/re-639093366" target="_blank"><img class="foto" src="http://orig10.deviantart.net/1349/f/2016/283/d/a/_re_by_sweethaise-dakhzli.png"></a>
    <a href="http://sweethaise.deviantart.com/art/Sweet-Prince-638330883" target="_blank"><img class="foto" src="http://orig13.deviantart.net/680b/f/2016/278/b/e/sweet_prince_by_sweethaise-dak1n9f.png"></a>
<div id="descarga">
  <hr>
  <p>Eva wallpapers #1</p>
  <a href="http://sweethaise.deviantart.com/art/Eva-phone-wallpapers-lmao-638332219"target="_blank"><img class="foto2" src="http://orig06.deviantart.net/9df9/f/2016/278/6/f/eva_phone_wallpapers_lmao_by_sweethaise-dak1oaj.png"></a>
  <br>
  <p>Click<a font-family="montserrat" href="http://www.deviantart.com/download/638332219/eva_bg_by_sweethaise-dak1oaj.zip?token=a2ef6257d9b95431f1bf8108bef99cd4fadafa5a&ts=1502497214" target="_blank"> aquí</a> para descargar</p>
 
  <hr>
 <p>Eva wallpapers #2</p>
  <a href="http://sweethaise.deviantart.com/art/more-EVA-shitty-wallpapers-lmao-638819385"target="_blank"><img class="foto2" src="http://pre00.deviantart.net/aa23/th/pre/f/2016/281/c/f/more_eva_shitty_wallpapers_lmao_by_sweethaise-dakc46x.png"></a>
  <br>
  <p>Click<a font-family="montserrat" href="http://www.deviantart.com/download/638819385/eva_bg_2_0_by_sweethaise-dakc46x.zip?token=4d6ef5cc1f3d8af38d9cef2116f5cf640ef6674e&ts=1502497802" target="_blank"> aquí</a> para descargar</p> 
 
  <br>
  
  
 
  
    </div>
  </div>
   <div class="box" id="footer">
<div class="footer">     
 <div class="hechopor">
     <p class="textoa">Material visual y código de la página hecho por: <a href="https://www.facebook.com/ShinjiObilinovic" target="_blank"><b>Moisés Real</b></a> 😎 <br><a href="https://codepen.io/Kayanami/" target="_blank"><b>CodePen ✒️<a><br><a href="http://jesucristoasterisco.deviantart.com/" target="_blank">Deviantart 🎨</b></a></p>

     </div>
     <div class="box graciasa" >
       <p align="justify" class="textob">Muchas gracias a: <a class="hechopor" href="https://github.com/Nyxot" target="_blank"><b>Anthony Hernandez</b></a>,
         <b>Victor Moreno</b> y
         <a href="https://www.facebook.com/yunue.gonzalez.90" target="_blank"><b>Yunue González</b></a> por ayudarme con el código de esta página.  💖</p>
       <div>
         
       </div>
     </div>
  </div>
    </div>
  <!--footer-->
 
</body>
</html>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Kayanami/cmttm-cosas-bonitas-andx1f496-VzzmGK */

body {
  margin-left: 0px;
  background-image: url(https://s-media-cache-ak0.pinimg.com/originals/86/d9/08/86d9088b1691ddedf9b544e9ee4d8b6a.jpg);
  background-attachment: fixed;
  background-repeat: ;
  background-size: cover

}
/*Barra de navegacion*/
#barranav {  
		background: -webkit-linear-gradient(#E00043,#c9003c);
		position: fixed;
		width: 100%;
		margin-top: -20px;
		overflow: hidden;
    box-shadow: 1px 1px 3px .1px
		  
		}
#barranav {
  background: #E00043;
  height: 110px;
  z-index: 1000000
    
}
#barranav after {
  content: '';
  display: table;
  clear: both;
}
#barranav nav {
  float: left;
}
#barranav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#barranav li{
		  list-style-type: none;
		  align: right;
      float: right;
      margin-right: 50px;
		  display: inline-block;
		  overflow: hidden;
      display: inline-block;
      padding-top: 40px;
      position: relative;
		}
#barranav a {
  color: white;
  text-decoration: none;
  font-size: 30px;
  font-family: 'Questrial', sans-serif;
  

  

}
#barranav a:hover {
  color:#E0E0E0;
}
#barranav a::before {
  content: '';
  display: block;
  height: 8px;
  background-color: white;
  position: absolute;
  top: 13px;
  width: 0%;

  transition: all ease-in-out 350ms;
}
#barranav a:hover::before {
  width: 100%;
}
#barratexto {
  
}
#logo {
  width: 12%;
  height: px !important;
  margin-top: 15px;
  float: left;
  margin-left: 20px;
  overflow: hidden;
}


/*Cuerpo*/
#contenido {
  background-color: WHITE;
  width: 85%;
  margin: auto;
  box-shadow: 1px 1px 25px 1px  


}
.margentop {
  margin-top: 20px;
  width: 40%;
  margin-left: 50px;
  margin-right: 50px;
   box-shadow: 2px 2px 2px #888888;
}
.foto {
  margin-top: 20px;
  width: 40%;
  margin-left: 50px;
  margin-right: 50px;
   box-shadow: 2px 2px 2px #888888;
}
.foto2 {
  margin-top: 20px;
  width: 80%;
  margin-left: 50px;
  margin-right: 50px;
   box-shadow: 2px 2px 2px #888888;
}
hr {
  height: 2px;
  background-color:#404040;
  width: 85%
  
}
#descarga {
  Margin-top: 70px;
}
h1 {
  font-family: montserrat;
  color:#404040
}
.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 550px;
    height: 2px;
    background: #404040;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}
p {
  font-family: montserrat;
  font-size: 25px;
  color: #404040;
}
a {
  color: #AE5D7C;
  text-decoration: none;
}
a:hover {
  color: #AE5D7C;
  text-decoration: underline;
}
/*Pie de página*/   
 #footer {
  background: -webkit-linear-gradient(#E00043,#c9003c);
  height: 120px;
  overflow: hidden;
  box-shadow: 1px -1px 4px .2px;
    font-family: 'Quicksand', sans-serif;
   font-size: 20px;
		  overflow: hidden;
		  z-index: 1000;
		  
		  font-family: 'Quicksand', sans-serif;
		  display: inline-block;
      position: absolute;
		  width: 100%;
      
	
	
		
		  

		
  
		  
   
}
.textoa {
  font-size: 22px;
  color: white;
  float: left;
  padding-left: 1cm;
}
.textob {
  color:white;
  float:right;
  text-align: justify; 
  padding-right: 1cm;
}
.hecho por ul {
  list-style: none;
}
.hechopor a {
  text-decoration: none;
  color: white;
  list-style: none;
}
.hechopor a:hover {
  color: salmon;
}
.graciasa {
  margin-right: ;
  width: 40%;
  float: right;
  text-aling: justify;
}
.graciasa a {
  text-decoration: none;
  color: white
}
.graciasa a:hover {
  color: salmon;
}
.lista {
  position: absolute;
  
}
.lista li {
  list-style: none
}
/*Botón de descarga*/
body {
	background-color: #1a1a1a;
}
.buttonDownload {
	display: inline-block;
	position: relative;
	padding: 10px 25px;
	background-color: #4CC713;
	color: white;
	font-family: 'Poppins', sans-serif;
	text-decoration: none;
	font-size: 20px;
	text-align: center;
	text-indent: 15px;
  
}
.buttonDownload:hover {
	background-color: #333;
	color: white;
}
.buttonDownload:before, .buttonDownload:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}
/* Download box shape  */
.buttonDownload:before {
	width: 10px;
	height: 2px;
	border-style: solid;
	border-width: 0 2px 2px;
}
/* Download arrow shape */
.buttonDownload:after {
	width: 0;
	height: 0;
	margin-left: 3px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 1.5s linear infinite;
	animation-play-state: play;
}
.buttonDownload:hover:before {
	border-color: #4CC713;
}
.buttonDownload:hover:after {
	border-top-color: #4CC713;

}

/* keyframes for the download icon anim */
@keyframes downloadArrow {
	/* 0% and 0.001% keyframes used as a hackish way of having the button frozen on a nice looking frame by default */
	0% {
		margin-top: -7px;
		opacity: 1;
	}
	
	0.001% {
		margin-top: -15px;
		opacity: 0;
	}
	
	50% {
		opacity: 1;
	}
	
	100% {
		margin-top: 0;
		opacity: 0;
	}
}

Comments