diff --git a/README.md b/README.md
index 59c8f40..aa4bafb 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,43 @@
 # rolls-calculator-template
 
-Single page template for Wordpress GeneratePress theme that contains a javascript code and form to allow calculate rolls
\ No newline at end of file
+Single page template for Wordpress GeneratePress theme that contains a javascript code and form to allow calculate rolls
+
+## CSS
+
+Add this css code to style.css into Wordpress child theme:
+
+```
+.gb-container-rolls {
+	max-width: 1200px;
+    margin-right: auto;
+    margin-left: auto;
+	margin-top:80px;
+	margin-bottom: 80px;
+	display:flex;
+	align-items:center;
+	justify-content:center;
+}
+
+.gb-inner-rolls {
+	width:50%;
+}
+
+input.error-data-roll {
+	border:1px solid red;
+}
+
+input.data-roll {
+	margin-bottom:20px;
+	width:100%;
+}
+
+#errorrolls {
+	color:red;
+}
+
+#resultrolls {
+	font-size:24px;
+	margin-top:20px;
+	text-align: center;
+}
+```
diff --git a/content-roll.php b/content-roll.php
new file mode 100644
index 0000000..66ab527
--- /dev/null
+++ b/content-roll.php
@@ -0,0 +1,212 @@
+<?php
+/**
+ * The template used for displaying page content in single-roll.php
+ *
+ * @package GeneratePress
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+?>
+
+<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_do_microdata( 'article' ); ?>>
+	<div class="inside-article">
+		<?php
+		/**
+		 * generate_before_content hook.
+		 *
+		 * @since 0.1
+		 *
+		 * @hooked generate_featured_page_header_inside_single - 10
+		 */
+		do_action( 'generate_before_content' );
+
+		if ( generate_show_entry_header() ) :
+			?>
+
+			<header class="entry-header">
+				<?php
+				/**
+				 * generate_before_page_title hook.
+				 *
+				 * @since 2.4
+				 */
+				do_action( 'generate_before_page_title' );
+
+				if ( generate_show_title() ) {
+					$params = generate_get_the_title_parameters();
+
+					the_title( $params['before'], $params['after'] );
+				}
+
+				/**
+				 * generate_after_page_title hook.
+				 *
+				 * @since 2.4
+				 */
+				do_action( 'generate_after_page_title' );
+				?>
+			</header>
+
+			<?php
+		endif;
+
+		/**
+		 * generate_after_entry_header hook.
+		 *
+		 * @since 0.1
+		 *
+		 * @hooked generate_post_image - 10
+		 */
+		do_action( 'generate_after_entry_header' );
+
+		$itemprop = '';
+
+		if ( 'microdata' === generate_get_schema_type() ) {
+			$itemprop = ' itemprop="text"';
+		}
+		?>
+
+		<div class="entry-content"<?php echo $itemprop; // phpcs:ignore -- No escaping needed. ?>>
+			<div class="gb-container gb-container-rolls">
+				<div class="gb-inside-container gb-inner-rolls">
+					<p>
+						<b>Calcular mi cantidad de papel pintado.</b> Determina el número de rollos necesarios para tus paredes:
+					</p>
+			<?php
+			the_content();?>
+			<script>
+			jQuery(document).ready(function($) {
+
+					$("#getrolls").click(function(){
+						$("#resultrolls").empty();
+						$("#errorrolls").text("");
+						$("#widthwall").removeClass("error-data-roll")
+						$("#heightwall").removeClass("error-data-roll")
+						$("#widthroll").removeClass("error-data-roll")
+						$("#heightroll").removeClass("error-data-roll")
+						$("#caseroll").removeClass("error-data-roll")
+						var dataErrors = false;
+						var wWidth = $("#widthwall").val();
+						if(isNaN(wWidth) || wWidth === 0 || wWidth === "") {
+							dataErrors = true;
+							$("#widthwall").addClass("error-data-roll")
+						}
+						var wHeight = $("#heightwall").val();
+						if(isNaN(wHeight) || wHeight === 0 || wHeight === "") {
+							dataErrors = true;
+							$("#heightwall").addClass("error-data-roll")
+						}
+						var rWidth = $("#widthroll").val();
+						if(isNaN(rWidth) || rWidth === 0 || rWidth === "") {
+							dataErrors = true;
+							$("#widthroll").addClass("error-data-roll")
+						}
+						var rHeight = $("#heightroll").val();
+						if(isNaN(rHeight) || rHeight === 0 || rHeight === "") {
+							dataErrors = true;
+							$("#heightroll").addClass("error-data-roll")
+						}
+						var rCase = $("#caseroll").val();
+						if(isNaN(rCase) || rCase === "") {
+							dataErrors = true;
+							$("#caseroll").addClass("error-data-roll")
+						}
+
+						if(dataErrors) {
+							$("#errorrolls").text("Hay errores en los datos introducidos");
+						} else {
+							wWidth = wWidth * 100; //to cm
+							wHeight = wHeight * 100; //to cm
+							rHeight = rHeight * 100; //to cm
+							rWidth = Number(rWidth);
+							rCase = Number(rCase);
+
+							var rolls = (rHeight >= wHeight) ? getRollsIfHeightWallLessThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) :
+								getRollsIfHeightWallGreaterThanRoll(wWidth, wHeight, rWidth, rHeight, rCase)
+
+							$("#resultrolls").append("Necesitas <b>" + rolls + "</b> rollos");
+						}
+					});
+
+					function getRollsIfHeightWallGreaterThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) {
+						//obtenemos rollos para la altura
+						var rolls = Math.ceil(wHeight / rHeight);
+						//contamos rollos para la anchura de pared y los sumamos a los previos
+						return Math.trunc(wWidth / rWidth) + rolls
+					}
+
+					function getRollsIfHeightWallLessThanRoll(wWidth, wHeight, rWidth, rHeight, rCase) {
+						//obtenemos tiras para la altura
+						var tiras = Math.trunc(rHeight / wHeight);
+						var numTiras = 0;
+						if(rCase > 0) {
+							let accHeight = 0;
+							for(let i = 1; i <= tiras; i++) {
+								if(i === 1) accHeight = accHeight + wHeight
+								else accHeight = accHeight + wHeight + rCase
+								//update tiras with case
+								if(accHeight > rHeight) {
+									numTiras = i-1;
+									break;
+								}
+								else numTiras = i
+							}
+						}
+						//calcular rollos ancho
+						var coveredWidth = numTiras * rWidth;
+						return Math.ceil(wWidth / coveredWidth)
+					}
+			});
+			</script>
+			<label for="width-wall">Ancho de la pared (en m):</label><br>
+			<small>Anchura total de las paredes que desea empapelar.</small>
+			<input type="number" step="0.01" min="0.01" id="widthwall" placeholder="Ejemplo: 3.5" class="data-roll"/><br>
+
+			<label for="height-wall">Altura de la pared (en m):</label><br>
+			<small>Altura total desde el suelo hasta el techo (descontado el rodapié y/o la moldura).</small>
+			<input type="number" step="0.01" min="0.01" id="heightwall" placeholder="Ejemplo: 2.4" class="data-roll"/><br>
+
+			<label for="height-roll">Longitud del rollo (en m):</label><br>
+			<small>datos incluidos en la hoja de descripción del producto.</small>
+			<input type="number" step="0.01" min="0.01" id="heightroll" placeholder="Ejemplo: 10" class="data-roll"/><br>
+
+			<label for="width-roll">Anchura del rollo (en cm):</label><br>
+			<small>datos incluidos en la hoja de descripción del producto.</small>
+			<input type="number" step="1" min="1" id="widthroll" placeholder="Ejemplo: 53" class="data-roll"/><br>
+
+			<label for="case-roll">Case o Rapport del rollo (en cm):</label><br>
+			<small>Repetición del patrón: datos incluidos en la hoja de descripción del producto.</small>
+			<input type="number" step="1" min="1" id="caseroll" placeholder="Ejemplo: 64" class="data-roll"/><br>
+
+			<input type="button" value="Calcular" id="getrolls"/><br>
+			<div id="resultrolls">
+
+			</div>
+			<div id="errorrolls">
+
+			</div>
+			<?php
+			wp_link_pages(
+				array(
+					'before' => '<div class="page-links">' . __( 'Pages:', 'generatepress' ),
+					'after'  => '</div>',
+				)
+			);
+			?>
+				</div>
+			</div>
+		</div>
+
+		<?php
+		/**
+		 * generate_after_content hook.
+		 *
+		 * @since 0.1
+		 */
+		do_action( 'generate_after_content' );
+		?>
+
+	</div>
+</article> 
diff --git a/single-roll.php b/single-roll.php
new file mode 100644
index 0000000..5206723
--- /dev/null
+++ b/single-roll.php
@@ -0,0 +1,53 @@
+<?php
+/*
+Template Name: Roll
+*/
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+get_header(); ?>
+
+	<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
+		<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
+			<?php
+			/**
+			 * generate_before_main_content hook.
+			 *
+			 * @since 0.1
+			 */
+			do_action( 'generate_before_main_content' );
+
+			if ( generate_has_default_loop() ) {
+				while ( have_posts() ) :
+
+					the_post();
+
+					get_template_part( 'content', 'roll' );
+
+				endwhile;
+			} ?>
+
+<?php
+			/**
+			 * generate_after_main_content hook.
+			 *
+			 * @since 0.1
+			 */
+			do_action( 'generate_after_main_content' );
+			?>
+		</main>
+	</div>
+
+	<?php
+	/**
+	 * generate_after_primary_content_area hook.
+	 *
+	 * @since 2.0
+	 */
+	do_action( 'generate_after_primary_content_area' );
+
+	generate_construct_sidebars();
+
+	get_footer();