Skip to content

Instantly share code, notes, and snippets.

@avalko

avalko/gist:5d28b8871afb20c43655674379990347

Last active October 4, 2019 11:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save avalko/5d28b8871afb20c43655674379990347 to your computer and use it in GitHub Desktop.
Save avalko/5d28b8871afb20c43655674379990347 to your computer and use it in GitHub Desktop.
Download ZIP
example-bt4-template.html
Raw
gistfile1.txt
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
@media (min-width: 1200px) {
.col-fixed-sidebar {
flex: 0 0 300px !important;
}
}
.font-weight-600 {
font-weight: 600 !important;
}
.font-size-sm {
font-size: 0.9em;
}
.nowrap {
white-space: nowrap;
}
html, body {
height: 100%;
}
</style>
</head>
<body class="bg-light d-flex flex-column">
<div class="container mt-4 mt-md-5 mb-4">
<div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
<div class="h2">LOGO</div>
<div class="mt-3 mt-md-0">
<ul class="list-unstyled d-flex font-weight-600">
<li><a class="text-dark" href="#">Home</a></li>
<li class="ml-5"><a class="text-dark" href="#">News</a></li>
<li class="ml-5"><a class="text-dark" href="#">Store</a></li>
<li class="ml-5"><a class="text-dark" href="#">Profile</a></li>
<li class="ml-5"><a class="text-dark" href="#">Search</a></li>
</ul>
</div>
</div>
<div class="row mt-4 mt-md-5">
<div class="col bg-white border py-3 px-5 mx-2">
<div class="row mt-2">
<div class="col order-1 order-xl-0">
<div>
<div class="d-flex flex-column flex-md-row align-items-md-center mb-2">
<a class="h4 text-dark mr-1" href="#">News Title</a>
<div class="ml-auto">
<div class="blockquote-footer nowrap">Опубликовал <cite>Admin</cite> в 20:12</div>
</div>
</div>
<div class="text-justify d-flex flex-column">
<div>
<img src="https://via.placeholder.com/250x200"
class="img-thumbnail mx-auto d-block d-md-inline float-none float-md-left mb-2 mb-md-0 mr-0 mr-md-2"
alt="Image!">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium ad adipisci
aliquid
beatae dicta doloremque ducimus eaque eligendi enim ex harum in nihil numquam obcaecati
possimus, quae quam quasi quos ratione, recusandae repudiandae, saepe similique suscipit
totam veritatis voluptas voluptate? Animi autem dolorem illum libero maxime non quo quos
soluta veniam voluptatem? Alias architecto culpa cupiditate delectus deleniti dolorum
ducimus esse, hic impedit inventore iste labore, natus non nulla obcaecati porro
possimus
quam quas quos recusandae saepe tenetur ullam, vitae? Consectetur debitis deleniti, enim
facere ipsam iusto laudantium, magnam nesciunt nostrum quam ratione repudiandae, sit
tenetur
veritatis voluptatibus? Reiciendis, velit.
</div>
<div class="ml-auto mt-2 mt-md-0">
<button class="btn btn-outline-dark btn-sm">Читать далее</button>
</div>
</div>
<hr/>
</div>
<div>
<div class="d-flex flex-column flex-md-row align-items-md-center mb-2">
<a class="h4 text-dark mr-1" href="#">Lorem ipsum dolor sit amet.</a>
<div class="ml-auto">
<div class="blockquote-footer nowrap">Опубликовал <cite>Admin</cite> в 20:12</div>
</div>
</div>
<div class="text-justify d-flex flex-column">
<div>
<img src="https://via.placeholder.com/250x200"
class="img-thumbnail mx-auto d-block d-md-inline float-none float-md-left mb-2 mb-md-0 mr-0 mr-md-2"
alt="Image!">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque cupiditate,
dignissimos, eveniet id mollitia officia, quas quisquam recusandae soluta ullam
voluptatem! Accusamus amet animi, asperiores, dolorum eius eveniet, explicabo illum
iusto libero modi nesciunt nobis nostrum quaerat quam repellat repudiandae sequi vel
veniam voluptas voluptate. Eaque eum illo inventore magnam neque placeat quaerat qui
sequi suscipit. Assumenda nobis odio possimus rerum tenetur. Accusantium eaque iste
maiores rem sapiente temporibus ullam ut. Dolorum enim excepturi in ipsum, iste
laboriosam magni molestiae molestias nisi quis repellat saepe sapiente sunt ut
voluptates?
</div>
<div class="ml-auto mt-2 mt-md-0">
<button class="btn btn-outline-dark btn-sm">Читать далее</button>
</div>
</div>
<hr/>
</div>
<div>
<div class="d-flex flex-column flex-md-row align-items-md-center mb-2">
<a class="h4 text-dark mr-1" href="#">Lorem ipsum dolor sit amet, consectetur adipisicing
elit.
Corporis, iure.</a>
<div class="ml-auto">
<div class="blockquote-footer nowrap">Опубликовал <cite>Admin</cite> в 20:12</div>
</div>
</div>
<div class="text-justify d-flex flex-column">
<div>
<img src="https://via.placeholder.com/250x200"
class="img-thumbnail mx-auto d-block d-md-inline float-none float-md-left mb-2 mb-md-0 mr-0 mr-md-2"
alt="Image!">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam dicta doloribus ex
laudantium molestias nulla voluptas! Adipisci aliquid asperiores aut commodi consectetur
corporis cupiditate dolor dolore doloremque dolorum ea eaque earum error, est illo
incidunt ipsam iste labore magnam minima modi, nam neque nisi nobis nulla officia omnis
perspiciatis praesentium provident quasi quidem quisquam quos ratione rerum temporibus,
totam voluptas. Cumque debitis earum incidunt magni numquam officia, recusandae vel.
Atque nesciunt porro quas repudiandae voluptatum.
</div>
<div class="ml-auto mt-2 mt-md-0">
<button class="btn btn-outline-dark btn-sm">Читать далее</button>
</div>
</div>
<hr/>
</div>
</div>
<div class="col-xl col-fixed-sidebar order-0 order-xl-1">
<div class="mb-3 mb-xl-0">
<div class="h5">Search</div>
<div>
<input type="text" class="form-control shadow-none rounded-0"/>
<small>Search in site</small>
</div>
<div class="pb-3 pb-xl-0 border-bottom d-xl-none"></div>
</div>
<div class="mt-5 d-none d-xl-block">
<div class="h5">Sidebar</div>
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, ratione!
</div>
</div>
<div class="mt-5 d-none d-xl-block">
<div class="h5">Last News</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-2 d-xl-none">
<div class="col bg-white border py-4 px-5 mx-2">
<div class="">
<div class="h5">Sidebar</div>
<div class="card card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, ratione!
</div>
</div>
<div class="mt-5">
<div class="h5">Last News</div>
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="mt-auto p-2 bg-dark text-light">
<div class="container d-flex">
Code by <span class="badge badge-light text-dark ml-1 font-size-sm">@avalko</span>
<div class="ml-auto">
2019
</div>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment