ASP.NET MVC multiple layouts - html

im trying to use multiple layouts for each different page using ASP.NET MVC. Default connection of Routing config works fine as you can see Index Screenshot. If i make register page as default connection it also works without any problems.
However, when accessing register page from Index by clicking button above, CSS seems to be not readen as you can see Register Screenshot.
Kayit_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kayitol :: #ViewBag.Title</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/ionicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="assets/css/Brands.css">
<link rel="stylesheet" href="assets/css/Features-Boxed.css">
<link rel="stylesheet" href="assets/css/Footer-Clean.css">
<link rel="stylesheet" href="assets/css/Highlight-Blue.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/Map-Clean.css">
<link rel="stylesheet" href="assets/css/Navigation-Clean1.css">
<link rel="stylesheet" href="assets/css/Registration-Form-with-Photo.css">
<link rel="stylesheet" href="assets/css/Simple-Slider.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/Team-with-rotating-cards.css">
</head>
<body>
<nav class="navbar navbar-default navigation-clean" style="font-family:Ubuntu, sans-serif;font-size:18px;">
<div class="container">
<div class="navbar-header"><a class="navbar-brand" href="#"> <img class="img-responsive" src="assets/img/logo_resized.png" style="width:210px;height:61px;"></a><button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button></div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right" style="padding:34px;">
<li role="presentation">Aramıza katıl</li>
<li role="presentation">Giriş </li>
</ul>
</div>
</div>
</nav>
<div data-bs-parallax-bg="true" class="register-photo" style="background-image:url(assets/img/White-Background-647.jpg);background-position:center;background-size:cover;">
<div class="form-container">
<form method="post">
<h2 class="text-center"><strong>Hemen</strong> bir hesap yaratın.</h2>
<div class="form-group"><input class="form-control input-sm" type="email" name="kullanici_adi" required="" placeholder="Kullanıcı adı" autofocus=""></div>
<div class="form-group"><input class="form-control" type="email" name="kullanici_isim" placeholder="İsim"></div>
<div class="form-group"><input class="form-control" type="email" name="kullanici_soyad" placeholder="Soyad"></div>
<div class="form-group"><input class="form-control" type="date" name="kullanici_dogumtarihi"></div>
<div class="form-group"><input class="form-control" type="email" name="email" required="" placeholder="Email"></div>
<div class="form-group"><input class="form-control" type="password" name="password" required="" placeholder="Şifre"></div>
<div class="form-group"><input class="form-control" type="password" name="password-repeat" required="" placeholder="Şifre (tekrar)"></div>
<div class="form-group">
<div class="checkbox"><label class="control-label"><input type="checkbox">Kuralları okudum ve kabul ediyorum.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit" style="background-color:rgba(0,102,127,0.72);">Üye ol</button></div>Zaten hesabınız var mı? Hemen giriş yapın.
</form>
</div>
</div>
<div class="footer-clean">
<footer>
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-4 item">
<h3>İletişim </h3>
<ul>
<li>E-mail: info#birsorumvar.com</li>
<li>Telefon: +90 232 224 40 08 </li>
<li>Online müşteri hizmetleri</li>
</ul>
</div>
<div class="col-md-3 col-sm-4 item">
<h3>Hakkımızda </h3>
<ul>
<li>birsorumvar.com </li>
<li>Takım </li>
<li>S.S.S </li>
</ul>
</div>
<div class="col-md-3 col-sm-4 item">
<h3>Bizimle çalışın</h3>
<ul>
<li>Açık pozisyonlar</li>
</ul>
</div>
<div class="col-md-3 item social">
<i class="icon ion-social-facebook"></i><i class="icon ion-social-twitter"></i><i class="icon ion-social-snapchat"></i><i class="icon ion-social-instagram"></i>
<p class="copyright">birsorumvar © 2018</p>
</div>
</div>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/bs-animation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script src="assets/js/Simple-Slider.js"></script>
#RenderBody()
</body>
</html>
Kayitol.cshtml
#{
ViewBag.Title = "Kayitol";
Layout = "~/Views/Shared/Kayit_Layout.cshtml";
}
KayitController.cs
public class KayitController : Controller
{
// GET: Kayit
public ActionResult Kayitol()
{
return View();
}
}
}


Obviously, the relative path of css files can't be found. (The browser tries to find them with ...kayit/kayitol/assets/...) You should navigate root the relative paths by starts with /
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
Also, I suggest you to use Bundles to import static css and js files.
bundles.Add(new StyleBundle("~/assets/css").Include(
"~/assets/bootstrap/css/bootstrap.min.css");

Related

Center div vertically in Bootstrap 5

How can I center a div vertically in bootstrap 5?
It should be aligned in the middle between of content before the div and the screen end.
Tried this:
<div>some content</div>
<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div>div that should be centered</div>
</div>
It makes the pages longer than it actually is. The div doesn´t looks centered.

You can do it like this:
Wrap everything with one div that has 100% screen width and height.
Use flex-grow-1 for the second div so it takes the remaining height and center everything inside.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="d-flex flex-column min-vh-100 min-vw-100">
<div>This div is not centered.</div>
<div class="d-flex flex-grow-1 justify-content-center align-items-center">
<div>This div is centered.</div>
</div>
</div>
</body>
</html>

<!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>Document</title>
<!-- CSS only -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<style>
.card
{
min-width: 320px;
width: 480px;
}
</style>
</head>
<body>
<div class="d-flex align-items-center justify-content-center vh-100">
<div class="card shadow-lg">
<div class="card-header text-bg-danger">
<h2>
<i class="fa-solid fa-user"></i>
Login
</h2>
</div>
<div class="card-body">
<form action="">
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input
placeholder="your registered email"
class="form-control"
type="email"
name="email"
id="email"
/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
placeholder="your password"
class="form-control"
type="password"
name="password"
id="password"
/>
</div>
<div class="d-flex justify-content-end">
<button class="btn btn-danger">Login</button>
<button type="reset" class="btn btn-secondary">Reset all</button>
</div>
</form>
</div>
</div>
</div>
<script
src="https://kit.fontawesome.com/266b76cb57.js"
crossorigin="anonymous"
></script>
<!-- JavaScript Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous"
></script>
</body>
</html>

Bootstrap button doesn't render properly

I have tried to use a bootstrap search box in my code that is supposed to be rendered like this:
But for some reason it does not render correctly in my layout which is something like this:
Here is my html code for this basic layout. Is there anything I can do so the button renders corrctly on the search box?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>

You can check the below code. or below youtube link for the better explanation:
https://youtu.be/34Ee-HLtMgU
Only fontawesome library was missing.
I have added one more search box. try to add submit button instead of adding span tag. This is the best practice.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>Weather Dashboard</title>
</head>
<body>
<div class="container">
<div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div>
<div class="row" id="secondRow">
<div class="col col-lg-3">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control my-0 py-1 amber-border" type="text" placeholder="Search"
aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="input-group mt-3">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-append">
<button class="btn btn-secondary" type="submit">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
<div class="col">
2 of 3
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>
</body>
</html>

I don't know if you missed this point, but you didn't include the "fontAwesome" CDN link. You need to use it to display the search icon. I also interpreted some of your code to create the image. You can check it.
And if you want search input to cover the entire line, you should use col-lg-12 instead of col-lg-3. The Bootstrap grid system uses a 12 column system. You must know that. https://getbootstrap.com/docs/4.4/layout/grid/
I used bootstrap's own classes to set border and icon background color. warning color for your situation
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/dc0c634418.js" crossorigin="anonymous"></script>
<div class="container">
<!-- <div class="row" id="firstRow">
<div class="col" id="top-bar">
1 of 2
</div>
</div> -->
<div class="row" id="secondRow">
<div class="col col-lg-12">
<h4>Search for a city:</h4>
<div class="input-group md-form form-sm form-2 pl-0">
<input class="form-control border border-warning my-0 py-1 amber-border" type="text" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<span class="input-group-text amber lighten-3 bg-warning" id="basic-text1">
<i class="fas fa-search text-grey" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
<!-- <div class="col">
2 of 3
</div> -->
</div>
</div>

First try changing fa fa-search in order to the icon display.
in this line => idk if u can use amber try using bg-warning (this is bootstrap), but if you want the exact color i would use css.
and maybe it is grey because the icon is not there.

Need guidance in CSS materialize in navbar

I'm trying to learn materialize CSS framework and I'm facing a little problem. It appears messy when I add a search input or when I add a grid system. I don't know why.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<title></title>
</head>
<body>
<nav>
<div class="row">
<div class="col s12 l12">
<div class="nav-wrapper navbar-fixed">
<div class="row">
<div class="brand-logo left col s12 l4">
opplance
</div>
</div>
<div class="row">
<form class="col s6 l4 " method="GET">
<input type="search" name="" value="">
<button type="submit" name="button" class="btn"> <i class="material-icons">search</i>
</button>
</form>
</div>
<div class="row">
<ul class="right col s6 l4">
<li> <button type="button" name="button" class="btn">Register</button> </li>
<li><button type="button" name="button" class="btn">Login</button></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>

SyntaxError: Unexpected token / while compiling EJS

I've tried many things but I am still getting this error.
SyntaxError: Unexpected token / in <path> while compiling ejs
I've looked at multiple issues like this one but with no success
This is the part with the error:
<% include ./partials/messages %>
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>404 Page not found</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
</head>
<body id="page-top">
<div id="wrapper">
<div class="d-flex flex-column" id="content-wrapper">
<div id="content" style="background-color: #000000 !important;height: 100vh;">
<nav class="navbar navbar-light navbar-expand bg-white shadow-lg mb-4 topbar static-top" style="background-color: rgb(247,23,53) !important;">
<div class="container-fluid"><img class="img-fluid" src="assets/img/Logo.png" style="width: 140px;margin: 0 auto;"></div>
</nav>
<% include ./partials/messages %>
<div class="container-fluid">
<div class="text-center border rounded shadow-lg mt-5" style="background-color: #ffffff;padding: 25px;max-width: 450px;margin: 0 auto;">
<form method="post" action="auth/login">
<h1 style="color: rgb(0,0,0);"><strong>Login</strong></h1>
<div class="form-group"><label for="password" style="color: rgb(0,0,0);"><strong>ID</strong></label><input class="form-control" type="text" name="id" placeholder="Voer hier het id in." autofocus="" required="" minlength="6" maxlength="6" pattern="\d{6}"></div>
<div class="form-group"><label for="password" style="color: rgb(0,0,0);"><strong>Password</strong></label><input class="form-control" type="password" placeholder="Password" name="password" maxlength="8" required=""><div><button class="btn btn-primary" type="submit"><strong>Login</strong></button>
</form>
</div>
</div>
</div>
</div>
<a class="border rounded d-inline scroll-to-top" href="#page-top">
<i class="fas fa-angle-up"></i></a></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>

Try using this syntax:
<%- include('partials/messages'); %>

bootstrap 3 have two buttons aligned in the same row

i have the following html code, and i use bootstrap 3. What i try to achieve is to have the 4 buttons with the klasse text, be the first two in the same row, and the next two, in the next row. Now each button is shown in its own row.
How the below code should be altered?
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center"><a class="button" href="http://site/">klasse 1</a><a class="button" href="http://site">klasse 2</a><a class="button" href="http://site/">klasse 3</a><a class="button" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem with all suggested solutions, is that when i use the following drupal theme button class, it does not force buttons to be on the same row, when i have for instance text as large as the following in all buttons:
Use Bootstrap’s custom button styles for actions in forms...
https://www.drupal.org/project/showcase_lite

you need something like this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<a class="btn btn-primary" href="http://site/">klasse 1</a>
<a class="btn btn-primary" href="http://site">klasse 2</a>
</div>
<br>
<div class="row">
<a class="btn btn-primary" href="http://site/">klasse 3</a>
<a class="btn btn-primary" href="http://site/">klasse 4</a>
</div>
</div>

Not sure if it is what you would like to achieve, please let me know, if not I'll give you more solutions:
Basically I have deleted button klasse3 & klasse4 from the "p class text-center" and I have added them into another "p class text-center" below.
This is a simple solution, but I think you could achieve a better result with a different solution
Actual Button
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
</head>
<body >
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center">
<a class="btn btn-default" href="http://site/">klasse 1</a>
<a class="btn btn-default" href="http://site">klasse 2</a>
</p>
<p class="text-center">
<a class="btn btn-default" href="http://site/">klasse 3</a>
<a class="btn btn-default" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Plain text
<!DOCTYPE html>
<html class="jelly-page">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.17.custom.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/encstyle.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-wysihtml5.css" />
</head>
<body >
<div class="background-image background-image--attachment-scroll" style="background-image: url(http://sitefront.png);"> </div>
<div class="background-image-overlay region--dark-typography region--white-background" style="opacity: 0.0;background-size:contain;"> </div>
<div class="container-fluid region--dark-typography region--white-background">
<div class="clearfix block block-block-content block-block-content58f3bb9a-975d-4cef-bb21-a0e3d14ec934" id="block-howprofessionalisourstaff">
<div class="content">
<div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="row bottom-spacing-medium">
<div class="col-md-8 col-md-offset-2 text-center">
<div class="bottom-spacing-large">
<p class="text-center">
<a class="button" href="http://site/">klasse 1</a>
<a class="button" href="http://site">klasse 2</a>
</p>
<p class="text-center">
<a class="button" href="http://site/">klasse 3</a>
<a class="button" href="http://site/">klasse 4</a></p>
</div>
<div class="scroll-button smooth-scroll"><span class="sr-only">Content start</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>