Expecting 'OPEN_INVERSE_CHAIN', 'INVERSE', 'OPEN_ENDBLOCK', got 'EOF' - html

This is my code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ pageTitle }}</title>
<link rel="stylesheet" href="/css/main.css">
{{#if formsCSS}}
<link rel="stylesheet" href="/css/forms.css">
{{/if}}
{{#if productCSS}}
<link rel="stylesheet" href="/css/product.css">
{{/if}}
</head>
<body>
<header class="main-header">
<nav class="main-header__nav">
<ul class="main-header__item-list">
<li class="main-header__item"><a class="{{#if activeShop }}active{{/if}}" href="/">Shop</a></li>
<li class="main-header__item"><a class="{{#if activeAddProduct }}active{{/if}}" href="/admin/add-product">Add Product</a></li>
</ul>
</nav>
</header>
{{{ body }}}
</body>
</html>
and I am getting this.
Error: Parse error on line 30:
...}}}</body></html>
--------------------^
Expecting 'OPEN_INVERSE_CHAIN', 'INVERSE', 'OPEN_ENDBLOCK', got 'EOF'
Why? Did I miss something?
My html in body is:
<main>
{{#if hasProducts }}
<div class="grid">
{{#each prods}}
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">{{ this.title }}</h1>
</header>
<div class="card__image">
<img src="data:image/jpeg;base64,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"
alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
{{/each}}
</div>
{{ else }}
<h1>No Products Found!</h1>
{{/if}}
</main>

Related

HTML, CSS, Bootstrap - Horizontally align texts of different divs

I am using the container-lg class of Bootstrap, and I am experiencing the current situation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I am trying to horizontally align the text of the left div with the header's one, without affecting to the right container, which must have a width of 100% without paddings or margins.
This is what I have tried:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="container-lg py-5">
<div class="row" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6" style="background-color: red;"></div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But, as you can notice, this is not my expected behavior, because it affects to the right container.
Any ideas?

Yes, enjoy both of the worlds by using absolute positioning. It's not that awful.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<header>
<div class="container-lg">
<h1>Brand</h1>
</div>
</header>
<main>
<div class="containers-container position-relative">
<div class="container-fluid-lg">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
</div>
<div class="col-md-6" style="background-color: red;">
</div>
</div>
</div>
<div class="container-lg position-absolute" style="left:0; right:0; top:0;">
<div class="row py-5" style="height: 400px;">
<div class="col-md-6">
<h2>Left</h2>
</div>
<div class="col-md-6">
<h2>Right</h2>
</div>
</div>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

How to use offline w3.css

I downloaded two css files from https://www.w3schools.com/w3css/4/w3.css and https://www.w3schools.com/lib/w3-theme-blue.css. When using them locally, somehow they cannot work(i.e. cannot reflect the desired output).
(Desired output)Using online css:
online result
html code using online css :
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="styles.css">
<body class="w3-theme-l4">
<div style="min-width:400px">
<div class="w3-bar w3-large w3-theme-d2">
<span class="w3-bar-item">UpLevel Admin</span>
</div>
<div class="w3-bar w3-medium w3-theme-d2">
Categories
Level
Progress
</div>
<br>
<div class="grid-container">
<div class="w3-bar-item w3-btn"><img src="images/admin_math.png"><span class="caption">Math</span></div>
<div class="w3-bar-item w3-btn"><img src="images/languages.png"><span class="caption">Languages</span></div>
<div class="w3-bar-item w3-btn"><img src="images/sat.png"><span class="caption">SAT</span></div>
<div class="w3-bar-item w3-btn" onclick="location.href='progress.html';"><img src="images/coding.png"><span class="caption">Coding</span></div>
</div>
</div>
</body>
</html>
===================================================
Using offline css:
offline result
html code using offline css:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-blue.css">
<link rel="stylesheet" href="styles.css">
<body class="w3-theme-l4">
<div style="min-width:400px">
<div class="w3-bar w3-large w3-theme-d2">
<span class="w3-bar-item">UpLevel Admin</span>
</div>
<div class="w3-bar w3-medium w3-theme-d2">
Categories
Level
Progress
</div>
<br>
<div class="grid-container">
<div class="w3-bar-item w3-btn"><img src="math.png"><span class="caption">Math</span></div>
<div class="w3-bar-item w3-btn"><img src="languages.png"><span class="caption">Languages</span></div>
<div class="w3-bar-item w3-btn"><img src="sat.png"><span class="caption">SAT</span></div>
<div class="w3-bar-item w3-btn" onclick="location.href='progress.html';"><img src="coding.png"><span class="caption">Coding</span></div>
</div>
</div>
</body>
</html>

The issue is maybe, the level of hierarchy of your files and folders where you are keeping your CSS stylesheet.
Make sure to place your CSS files at the same hierarchy (in the same project folder)
Note: The files shouldn't be any folder because your math is absolute and will work at the same level only.
And Make sure of any typos you may have done to the file names

Background image adjustment in CSS

#home::before
{
content: "";
position: absolute;
background: url(1a.jpg) no-repeat center center/cover;
/* opacity: 1; */
height: 100%;
width: 100%;
z-index: -1;
filter: blur(1.5px);
}
here's my code but I want to include only a specific part of image to cover the whole background ..any suggestions/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cakes by nandani</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
</head>
<body>
<nav id="navbar">
<div id="leftpor">
<ul>
<li class="items">Home</li>
<li class="items">About us</li>
<li class="items">Items</li>
</ul>
</div>
<!-- <div id="logo"><img src="logo.png" alt="Cakes by nandani"></div> -->
<div id="rightpor">
<ul>
<li class="items">Contact</li>
<li class="items">Gallery</li>
<li class="items">Our Story</li>
</ul>
</div>
</nav>
<section id="home">
<a class="Brand center"> Cakes By Nandani</a>
<a class="Tag center"> Many Emotiions One delight</a>
<button class="btn">Order Now</button>
</section>
<section id="services-container">
<h1 class="hprimary center">Our services</h1>
<div id="services">
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
<div class="box">
<img src="Oreo.jpg" alt="">
<p class="center">Oreo</p>
</div>
</div>
</section>
</body>
</html>
enter code here
only some part of image is cropped and used ....how to stop that

keeping images aligned with text with flask

I am trying to create a web app with flask. On each image I am adding descriptors underneath but for some images the descriptions are longer then others.
The image below is an example of my app running but as you can see the third image got shifted over and so the fourth image is now below that
full view of what's going on:
the pictures are the size I want but you can see how the longer text shifts the 3rd image,
here is the html (warning I know very little html )
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
{{image_names}}
<hr>
{% for image_name in image_names %}
<img class="img-responsive" src=" {{url_for('send_image', filename=image_name)}}">
<p>Hi</p>
{% endfor %}
</body>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- <h1 class="page-header">Thumbnail Gallery</h1> -->
</div>
<!-- {{image_names}} -->
<hr>
{% for element in range(size) %}
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<img class="img-responsive" src=" {{url_for('send_image', filename=image_names[element])}}">
<p> {{test[element]}}</p>
<!-- grabbing from a dictionary <p> {{test2["bob"]}}</p> -->
</div>
{% endfor %}
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
</body>
</html>

Error: CSS: text parse Error

I just put my HTML through validation at W3C and got back the following error:
ERROR: CSS: text parse error - it's talking about the sidebar-container DIV.
What am I doing wrong? I have a couple of errors relating to the same sidebar-container div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prisma Kitchens</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desctiption" content="Kitchen designers in Manchester.">
<meta name="author" content="Prisma Kitchens">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css.css" style="text/css">
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" style="text/css>
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<div class="logo">
<!--Logo is here-->
</div>
<div class="links">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="right-container">
<div class="head_image_mobile"></div>
<div class="heading_image">
<!--Holds the image at top of page-->
</div>
<div class="content">
<div class="subheading">Why Choose Prisma Kitchens?</div>
<a class="button" href="about.html">Learn More...</a>
<div class="content_gap"></div>
<div class="subheading">What Can We Offer?</div>
<a class="button" href="services.html">Our Services...</a>
<div class="content_gap"></div>
</div>
</body>
</html>

It's type="text/css" not style="text/css". Also there was a " in type="text/css missing and a closing </div> at the end.
Cleaned up
<!DOCTYPE html>
<html lang="en">
<head>
<title>Prisma Kitchens</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="desctiption" content="Kitchen designers in Manchester.">
<meta name="author" content="Prisma Kitchens">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="css.css" type="text/css" >
<link rel="stylesheet" href="responsive.css" media="screen and (max-width:970px)" type="text/css">
</head>
<body>
<div class="sidebar-container">
<div class="sidebar">
<div class="logo">
<!--Logo is here-->
</div>
<div class="links">
<ul>
<li>home</li>
<li>about</li>
<li>services</li>
<li>gallery</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
<div class="right-container">
<div class="head_image_mobile"></div>
<div class="heading_image">
<!--Holds the image at top of page-->
</div>
<div class="content">
<div class="subheading">Why Choose Prisma Kitchens?</div>
<a class="button" href="about.html">Learn More...</a>
<div class="content_gap"></div>
<div class="subheading">What Can We Offer?</div>
<a class="button" href="services.html">Our Services...</a>
<div class="content_gap"></div>
</div>
</div>
</body>
</html>