<!--
templateType: page
isAvailableForNewContent: true
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
{{ standard_header_includes }}
</head>
<style>
{% set total_columns_count = 12 %}
/* CSS variables */
:root {
--column-gap: 4.13%;
--column-width-multiplier: 8.333;
}
/* Mobile layout */
.row-fluid {
display: flex;
flex-wrap: wrap;
width: 100%;
}
{% for span_num in range(1, total_columns_count + 1) %}
{{ ".row-fluid .span" ~ span_num }}{{ loop.last ? null : "," }}
{%- endfor -%} {
min-height: 1px;
width: 100%;
}
/* Desktop layout */
@media (min-width: 768px) {
.row-fluid {
flex-wrap: nowrap;
justify-content: space-between;
}
{% for span_num in range(1, total_columns_count) %}
{{ ".row-fluid .span" ~ span_num }} {
width: calc(var(--column-width-multiplier) * 1% * {{ span_num }} - var(--column-gap) * ({{ total_columns_count - span_num }} * var(--column-width-multiplier) / 100));
}
{% endfor %}
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Nunito' , sans-serif;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
.header{
width: 100%;
height: 100%;
background-color: red;
position: relative;
}
.header .navbar {
width: 100%;
height: 80%;
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
margin-top: 60px;
}
.logo img {
margin-left: 4%;
}
.menu ul li{
display: inline-block;
padding: 0 25px;
cursor: pointer;
font-size: 19px;
font-weight: 700;
line-height: 80px;
align-items: center;
}
.login-btn{
display: block;
font-size: 19px;
font-weight: 700;
cursor: pointer;
border-radius: 30px;
background-color: #f3ef51;
padding: 8px 40px;
margin-right: 100px;
}
.banner{
width: 80%;
height: 70%;
position: absolute;
top: 25%;
left: 150px;
color: #fff;
}
.app-text{
width: 50%;
float: left;
padding-left: 50px;
}
.app-text h3{
margin-top: 200px;
font-size: 17px;
color: #000;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
.app-text h1{
font-size: 51px;
position: relative;
color: #000;
margin-top: 30px;
font-weight: 700;
line-height: 1;
}
.app-text p{
font-size: 19px;
margin: 30px 30px 30px 0;
letter-spacing: 1px;
color: #000;
padding-right: 250px;
}
.btn-group {
display: flex;
width: 100%;
position: relative;
}
.btn-group .signup-btn{
cursor: pointer;
display: block;
color: #000;
text-align: center;
font-size: 15px;
font-weight: 700;
border-radius: 32px;
background-color: #ffa037;
padding: 15px 50px;
}
/* .image{
margin:10px;
} */
</style>
<body>
<div class="header">
<div class="navbar">
<div class="logo">
<a></a>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>about us</li>
</ul>
</div>
<div class="login-btn">Log In</div>
</div>
<div class="banner">
<div class="app-text">
<h3>{% module "module_17030119602084" path="@hubspot/text", label="text.module" %}</h3>
<h1>{% module "module_17031806612431" path="@hubspot/rich_text", label="rich_text.module" %}</h1>
<div class="btn-group">
<div class="signup-btn">{% module "module_17031818918625" path="@hubspot/growth/modules/button", label="button.module" %}</div>
</div>
{% dnd_area "dnd_area"
label="Main section"
%}
{% dnd_section
padding={
'top': '1em',
'bottom': '1em',
'left': '1em',
'right': '1em'
},
vertical_alignment='TOP'
%}
{# image #}
<div class="image">
{% dnd_module path='@hubspot/image',
offset=0,
width=6
%}
{% end_dnd_module %}
</div>
{# rich text#}
{% dnd_module path='@hubspot/rich_text',
offset=6,
width=6
%}
{% end_dnd_module %}
{% end_dnd_section %}
</div>
</div>
</div>
</div>
{% dnd_module
path="@hubspot/rich_text",
html='<div style="text-align: center; font-size: 0.7rem;"><span>© {{ year }} All rights reserved.</span></div>'
%}
{% end_dnd_module %}
{% end_dnd_area %}
{{ standard_footer_includes }}
</body>
</html>
I have created template in hubspot. I have add image and text layout but width of layout didn’t set in body of template. kindly anyone tell me my mistake.