I am trying to create a guided template and i have this error : Error in variable declaration: duplicate value for id attribute.
Now, i am not a marketo expert, i have been actively with HTML and CSS with marketo for a little over 3 weeks now and i seek help with my code and i would like to know what i am doing wrong.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- META MARKETO HERE -->
<meta class="mktoString" id="event-title" mktoName="event-title" default="!!! event title goes here !!!">
<meta class="mktoString" id="event-subtitle-orange" mktoName="event-subtitle-orange" default="!!! event subtitle goes here!!!">
<meta class="mktoString" id="content-description" mktoName="content-description" default="!!! content description goes here!!!">
<!-- META MARKETO END -->
<title>Content</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,700');
html, body, form, mktoForm {
font-family: 'Titillium Web', sans-serif !important;}
.container1{
background-color: #E6E6E6;
border: 3px solid purple;
height: 1000px;
display: grid;
grid-template:
[row1-start] "div-event-title div-event-title div-event-title div-event-title"[row1-end]
[row2-start] "div-event-subtitle-orange div-event-subtitle-orange div-event-subtitle-orange div-event-subtitle-orange " [row2-end]
[row3-start] "div-image-header div-image-header . div-marketo-form" [row3-end]
[row4-start] "div-content-description div-content-description . ." [row4-end]
[row5-start] "div-complete-from div-complete-from . ." [row5-end];
grid-column-gap: .1em;
grid-template-columns: 4% 60% auto 4%;
grid-template-rows: repeat(5, auto);
}
/*<!-- CUSTOM CSS HERE -->*/
.div-event-title{
border: 3px solid blue;
color: #003c71;
font-weight: bolder;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
.div-event-subtitle-orange{
border: 3px dashed pink;
color: #ff9e1b;
grid-column-start: 2;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 3;
}
.div-image-header{
border: 3px dashed red;
max-width: 100%;
height: auto;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
}
.div-content-description{
border: 3px solid green;
height: auto;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 5;
}
.div-complete-from{
border: 3px dashed blue;
text-align: right;
height: auto;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
}
.div-marketo-form{
border: 3px solid red;
height: auto;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 3;
grid-row-end: 6;
}
/*CUSTOM CSS END*/
</style>
</head>
<body>
<div class="container1"> <!-- div container 1-->
<div class="div-event-title"> <!-- div event title -->
<div class="mktoText" id="event-title" mktoName="event-title">
<h1> Row 1 - Event Title </h1>
</div> <!-- div marketo text -->
</div> <!-- div event title -->
<div class="div-event-subtitle-orange"> <!-- div text color -->
<div class="mktoText" id="event-subtitle-orange" mktoName="event-subtitle-orange">
<h3>Event time and date orange</h3>
</div><!-- div marketo text -->
</div><!-- div text color -->
<div class="div-image-header"> <!-- div image -->
<div class="mktoImg" id="headerimage" mktoName="header image"> <!-- marketo image -->
Row 2 - header image
<img class="img-responsive" src="http://www.optelgroup.com/wp-content/uploads/2019/03/Carton-Tracker_1050x235px.png">
</div><!-- marketo image -->
</div><!-- div row 2 image -->
<div class="div-marketo-form"> <!-- marketo from -->
<div class="mktoForm" id="Form-event" mktoName="Form"> <!-- marketo from for marketo -->
MARKETO FORM GOES HERE!
<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
</div><!-- marketo from for marketo -->
</div> <!-- marketo from -->
<div class="div-content-description"> <!-- div text description -->
<div class="mktoText" id="content-description" mktoName="content-description"><!-- div content-description -->
<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. </p>
</div> <!-- div content-description -->
</div> <!-- div text description -->
<div class="div-complete-from"> <!-- div complete from -->
<h3>COMPLETE THIS FORM TO DOWNLOAD YOUR WHITE PAPER</h3>
</div><!-- div complete from -->
</div> <!-- end div container -->
</body>
</html>
.png)