flex-flow : column isn't wroking - html

I'm trying to order items by column
It works very well at 'flex : row wrap'
but 'flex-flow : column wrap '
doesn't work.. also I tried 'flex-direction : column and flex-wrap : wrap '
I can't found any error at my code
please help..
* {
font-size: 0px;
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-flow: column wrap;
width: 90%;
height: 500px;
margin: 3% auto;
padding: 0;
background-color: white;
}
.wrap div {
color: yellow;
width: 33.333333333333%;
}
.wrap div:first-child {
background-color: blue;
}
.wrap div:nth-child(2) {
background-color: blueviolet;
}
.wrap div:last-child {
background-color: crimson;
}
<!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" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>


I've found what you want. You need to use flex-grow for each item so that they grow to take all the space of the container.
* {
font-size: 0px;
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-flow: column wrap;
width: 90%;
height: 500px;
margin: 3% auto;
padding: 0;
background-color: white;
}
.wrap div {
color: yellow;
width: 33.333333333333%;
flex-grow: 1;
}
.wrap div:first-child {
background-color: blue;
}
.wrap div:nth-child(2) {
background-color: blueviolet;
}
.wrap div:last-child {
background-color: crimson;
}
<!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" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Edit : If you don't have any content in the divs then wrapping will not work if you use the above method. To enable wrapping, you will have to provide custom height to the items like in the snippet below:
* {
font-size: 0px;
margin: 0;
padding: 0;
}
.wrap {
display: flex;
flex-flow: column wrap;
width: 90%;
height: 500px;
margin: 3% auto;
padding: 0;
background-color: white;
}
.wrap div {
color: yellow;
width: 33.333333333333%;
height: 150px;
}
.wrap div:first-child {
background-color: blue;
}
.wrap div:nth-child(2) {
background-color: blueviolet;
}
.wrap div:last-child {
background-color: crimson;
}
<!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" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>

Related

Flex / CSS Div won't grow 100% of parent height

I am using flex and have 2 columns. These items both fill all height available.
Inside item 1 I've added 2 div's ... the second one I need it to fill up all space available and scroll Y if items inside it go overflow.
I cannot get .box to go 100% height of it's parent.
Here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="item">
<div class="title">Title here</div>
<div class="box">
Box Here
</div>
</div>
<div class="item"></div>
</div>
</body>
</html>
CSS:
.container {
display: flex;
flex-direction: column;
min-height: 98vh;
}
.item {
flex: 1;
}
.item:nth-child(1) {
background-color: blue;
}
.item:nth-child(2) {
background-color: red;
}
.title {
font-size: 30px;
color: white;
}
.box {
background-color: grey;
height: 100%; /* not working */
align-self: stretch;
overflow-y: scroll;
}
How can I fix this issue?

Use this css:
.container {
min-height: 98vh;
}
.flex {
/* display: flex; */
/* flex-direction: column; */
height: 98vh;
}
.item {
/* flex: 1; */
height: 50%;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
height: 100%;
overflow-y: auto;
background-color: grey;
}
No need to use flex and complicate the problem

I changed the HTML layout a little bit. You can use flex.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="title">Title here</div>
<div class="flex">
<div class="item item1">
<div class="box">
<div>
test
</div>
<div>
test
</div>
<div>
test
</div>
</div>
</div>
<div class="item item2"></div>
</div>
</div>
</body>
</html>
CSS
.container {
min-height: 98vh;
}
.flex {
display: flex;
flex-direction: column;
height: 98vh;
}
.item {
flex: 1;
display: flex;
flex-direction: column;
}
.item1 {
background-color: blue;
}
.item2 {
background-color: red;
}
.title {
font-size: 30px;
color: white;
background: blue;
}
.box {
background-color: grey;
overflow-y: scroll;
flex: 1;
}

Textarea height does not fit content

I am working on a simple code editor application and I stumbled upon a visual bug, basically the textarea is a little bit taller than the container.
This is the index.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>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
This is the index.css:
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
.lines {
height: 100%;
background-color: black;
flex: 1;
display: flex;
flex-direction: column;
background-color: #34495e;
}
.editor {
height: 100%;
flex: 20;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.page {
height: 80vh;
margin: 0;
padding: 0;
}
textarea {
width: 100%;
height: 100%;
resize: none;
border: none;
outline: none;
background-color: #2c3e50;
}
.files {
height: 30px;
width: 100%;
display: flex;
flex-direction: row;
}
.file {
}
<!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>
<link rel="stylesheet" href="index.css">
</head>
<body class="page">
<div class="files">
</div>
<div class="container">
<div class="lines">
</div>
<div class="editor">
<textarea></textarea>
</div>
</div>
</body>
</html>
I have tried everything but cannot find a solution, searched around Stackoverflow but could not find an answer I thought it was caused by the resize, border and outline, but appearently those are not the problem.

Add box-sizing: border-box; to your textarea styles

how to set width 100% always

I wrote html & css like below.
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
header {
height: 40px;
background-color: skyblue;
margin-right: 0;
width: 100%;
}
.container{
display: flex;
}
aside {
background-color: yellow;
min-width: 200px;
}
main {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.content {
height: 300px;
min-width: 500px;
background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>My test page</title>
</head>
<body>
<header>
header
</header>
<div class="container">
<aside>side menu</aside>
<main>
<div class="content">
content
</div>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>
then, I resize browser size less than 700px(aside width + content width.) width.
as result, header width is less than contents like below(scroll to the far right).
I guess this because of contents has min-width property.
Then, I want to manage header width based on contents width.
do you know any idea?
thanks.

Not an ideal solution. But if you want to maintain a min-width of 200px for the aside and a min-width of 500px for the content (with 10px padding), you can provide a min-width of 720px (200px+500px+10px+10px) for the header.
* {
padding: 0;
margin : 0;
box-sizing: border-box;
}
header {
height: 40px;
background-color: skyblue;
margin-right: 0;
width: 100%;
min-width: 720px;
}
.container{
display: flex;
}
aside {
background-color: yellow;
min-width: 200px;
}
main {
background-color: green;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.content {
height: 300px;
min-width: 500px;
background-color: red;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css">
<title>My test page</title>
</head>
<body>
<header>
header
</header>
<div class="container">
<aside>side menu</aside>
<main>
<div class="content">
content
</div>
</main>
</div>
<script src="js/main.js"></script>
</body>
</html>

complex responsive design achive using flexbox

I'm trying to make a layout design for my webpage, but it's a little complex to build that design responsive.
I have hidden the sidebar using media query but still struggling with flex-order.
in desktop, it looks like this, and I have achieved this design using flexbox
but I'm trying in mobo device it should look like this
How should I add a media query to rearrange items. I'm new to flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width: 100%;
margin: 0;
}
.conatiner{
display: flex;
}
.sidebar{
max-width: 30%;
width: 100%;
height: 100vh;
background-color: blue;
}
.main{
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper{
display: flex;
flex-direction: column;
}
.wrapper-1{
display: flex;
}
.item-1{
background-color: blanchedalmond;
width: 70%;
height: 200px;
}
.item-2{
background-color: chartreuse;
width: 30%;
height: 200px;
}
.item-3{
background-color: darkcyan;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</body>
</html>

i tweeked a little bit your code and it is probably solve yor problem
<!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>
<style>
body {
width: 100%;
margin: 0;
}
.conatiner {
display: flex;
height: 100vh;
}
.sidebar {
max-width: 30%;
width: 100%;
background-color: blue;
}
.main {
max-width: 70%;
width: 100%;
background-color: black;
}
.wrapper {
display: flex;
flex-direction: column;
}
.wrapper-1 {
display: flex;
flex-wrap: wrap;
}
.item-1 {
background-color: blanchedalmond;
width: 70%;
height: 200px;
flex: 0 0 50%;
}
.item-2 {
background-color: chartreuse;
width: 30%;
height: 200px;
flex: 0 0 50%;
}
.item-3 {
background-color: darkcyan;
width: 100%;
height: 300px;
flex: 1;
}
#media only screen and (max-width: 480px) {
.sidebar {
display: none;
}
.wrapper-1 {
flex-direction: column;
}
.item-1 {
order: 1;
flex: 0 0 200px;
}
.item-2 {
order: 3;
flex: 0 0 200px;
}
.item-3 {
order: 2;
flex: 0 0 300px;
}
.item-1, .item-2, .item-3 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="conatiner">
<div class="sidebar">
sidebar
</div>
<div class="main">
<div class="wrapper">
<div class="wrapper-1">
<div class="item-1">
1
</div>
<div class="item-2">
2
</div>
<div class="item-3">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Why my image slider does not work in Javascript but works with CSS as a property

Why this sliding is not working I couldn't understand., when I click on div(nex) it translateX(-100%) with Javascript,
but when I use this property transform:translateX(-100%) in CSS it works.
I am not getting why this is not working
Please give a proper explanation in detail and let me know how you do it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.holder {
position: relative;
}
img {
min-width: 100%;
height: 500px;
}
.slider {
width: 80%;
margin: 20px auto;
display: inline-flex;
overflow: hidden;
position: relative;
}
h1 {
color: white;
}
.pre {
position: absolute;
height: 100%;
display: flex;
align-items: center;
}
.nex {
position: absolute;
right: 0;
height: 100%;
display: flex;
align-items: center;
}
<!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">
<link rel="stylesheet" href="styler.css">
<title>Document</title>
</head>
<body>
<div class="slider">
<img id="images" src="https://www.howtogeek.com/wp-content/uploads/2019/12/GG-Banner.jpg?height=200p&trim=2,2,2,2" alt="">
<img id="images" src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUVFRgVFRUYGRgYGRgZGBgaGBgYGRgYGBgZGRgYGBgdIS4lHB4rIRgYJjgmKy80NTU1GiQ7QDszPy40NTEBDAwMEA8QHxISHzcrJSs1OjQ0NDE0NDQ2NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0NTQ0NDQ0NDY0NDQ0NDQ0NDQxNP/AABEIAKIBNwMBIgACEQEDEQH/xAAbAAACAwEBAQAAAAAAAAAAAAADBAIFBgABB//EAEkQAAIBAgMEBAoIAwcCBwEAAAECAAMRBBIhBTFBUSJhcZETMlJTgZKhsdHSBkJicoKyweEUI0MVJDNzk6LwY4MHNLPC0/HyFv/EABoBAAIDAQEAAAAAAAAAAAAAAAABAgMFBAb/xAAuEQACAgEEAQMDAwMFAAAAAAAAAQIRAwQSITFRBRNBYXGhIlLBI9HxFDKRseH/2gAMAwEAAhEDEQA/APmaQqwSwyy4iwiQywKQ6xkQiwyiCSGWAgqCFQSCCMIsAPcAP7x/2m/Ok0NMShwY/vA/ym/Okv6cQxmmI3TSL0Uj9JY7A5KcOiQlNIYJCwBqkKqR7DYDMtybeiQxGGyNa9+MFJN0FPsXVIVUk1STVJIRBUiWM2LRqtmZMr2sKqFqdQDlnQhrdRNuqWgWewoVmffC42kL0qiYgcBWGSoOsOgCueoqv3p7gtpUM4GIzpWvZVxICC/KiR/Lb8BJ5y/kK9FHUo6q6MLMrAMpHIqdDI7fAbgvont+qUn9hmnrhaz0f+mf5tA9XgnN0H3GWQq7XxFFScRhmcD6+HJqIetkIDpz0DgczFQF49PNoSLHQjfftlJiKS0ny0jnYb6I6QHY39PsbTlaEwVcYlc4rIybilFtAfJd/Hv1dHslhTpqgCooVeQFhGBV08c7EqKLhl3qz0wwHOxbUdY0kjWfzDevT+aPYnCq9swuRqpBsynmrDURCq70SA7ZlbxSB0/xINW+8o9AjVCPDWfzDevT+aCao5/oN69P5oelj0bUByp3EUqpB7CE1hP4xB9Wp/o1vkiArn8J5lvXT5oCoX8y3rp80tWxyeTU/wBGr8kVq4pOVT/Sq/JCxlU7uP6TesnzQT1H803rJ8ZZVsUh4P8A6VX5Ym9ceS/+nU+WAigVwl0cFMpsL2tY6qMw03ED0TytQVtba8CND6CI5jnGcMQwDDKxZHUXGq6sANxbui/8LbVDl7NUP4fhaNkjP7TpstVQTfoPbSx8ZN/CKusf2oWNZAwHiPqDcHpJ6RE6gghirzp64nQoBJIZZXqx5wiseZgkDkWKwyysVjzPfJhzzPfJbSDkWyCFWVKueZ74RXPM98Ngbi6QRqmJQo55nvMYR28o95jWJ+Rby5w3/mR/lN/6iS+oC5mJp1GFUHMfEbifKWX2AxL28c+nX3w9p8j3qzVURHaSyiw2MfqPo+Es6GLPFR3ytxaJKSZaIIdBEUxQ4qffEqm0nq3FBglNTleuwzHNxSkn1m690ozZo4o3J0WQg5cI1Z2jRoU1atVRAb2zMATqfFXefRKnFfSXD1CGp+EcWtdKNUjvyypwoo0zmSmXc+NVqnO5Pb9X0Wlgu2anJO4/GY8/U5qVwj/yzqWlbXJy7fpjxqWIQc2oOB7AZY4DaNGsL0nV7bwDZh2qdR6RB4bbYJs65ftDUekb4bH7Io4izsLPvSqhyuvIhxv7DcRQ9anGVZI8fQhPTpfQYnSiq7TqYVlp4lXqBjanWRQS48l0vo46t/fLTAbQpVlLU3DW0I3Mp5Mp1U9om7gzwzRUoO0ckouLpjM6egQipLbIpAp0KyQtTBkLmvwBt2xbkPaymx2xqFVs7LlqWsKqE06oHLOhDEdRuOqKiljKPiOmKTyalqVa3U6DIx6iq9bS5nQcUKyiobdVn8HVLYVibBHUK9T7lRv5bdilj1iXdCkiXyrYnexuWb7zHU+kzzEUEdSjoro2hVlDKR1qdDKh9hFB/da70OSG1Wju0tTfVR1KyjqMVMdj2LoIl6iOKZJ1v4jn7Saa9Yse3dFV2rqFek4Y7vFCt9wuVJ7CAeqKJialA5sRh2a39ekWxAt1pbwidiqyjnGaeOpYhD4ILWTcxBGQHkxPHsBIjVAEbGHzVT/Z88C+IY/0n/2fPF3erT0R1cX1QKzunUHLC/47dvCetXq8j6if/JDaKwb4i++m59T54J8SeFJ/Tk+eBq4qoCQF71X54MYupxHci/PHtCwO0qjshtTe4sy+JvU38r0emVWRG1QlSRe2699blDoe0d8u3ZzqL+qnzyqdGUFXUFQxy5gBpvFjcqLXtqRugMz+1FYVkDW8R9Rx6ScOHtidQRj6Q6VKdi3iPv4dJNzcR6TKd3PM98lGNqwk6DVBOiTMeZ750e0W4Grr1QiuvV3RJZNZBRJtj61F5juhVqJzHdK9ZMSW1FbZZLVTmO6GSqnMd0qxCrHsQbmXCVk5ju/aNU66cx3ftKSnDpJLGiLm0WS1qfh1N1t4NuHHOnVL/CNSIHiewTGX/mD7jfmEucC+gi9vvke/6GsoJTPk+t+8eWmgF/cZlziQiM53KCe4bo9gNlVayI9TEOgdVbJTCplDC4Bc3Ymx6pxarUQ06uTfPRfig59INtjGlQtJDZ6lwD5CAdNz7h1nqngxlJFVPCIqoLKpdRYcTv3k6k8THKP0awwN2p5zzqO7n/cSJY0dkYdfFoUR2U0H6Tzuq12PK754NDFDYiiG1KHnqfrL8Y1RxdNvFqI3Y6n3GXQ2VQO+hSP/AG0+Eg2wcI2/DUfRTUe4Tl9/F4f4Lt0ivj+zMeabWJ6B3jl9oTK4Oi2GRaupw7u4ceYbwjqrD7BAUHke2XQN9R3yeXGvuhpqapmq2pgExFJqbG17FWG9HGqup5gzHYjabIy1WQDE4clMRbQVaZsCSRqbdFweV+AE1Ow8VmTId6butf23d0o/pRhgmJSqRdaqFHHAsnA9bIWH4Zf6TneLP7Uun/2cGohw/KLPBbcVhcoR2MD+glnS2gh8odo+Ey2xceETwLorNSZqZY2uwU9Bt3FcstmxiEWVAGOgnrppVur8nDFu6stzi6e7OB26e+WmIt4I8so/SZ/F4OkqBXcK7DS5sC1r2udL9W+T2xtnDU8IorVCodVToqznMACQcoOXtawnLuTasv2v45CzplkXDjxa7r+E/pDrVIF0xLOBvBDCw7WJnZOCjFyb/BzQk5yUUvyaO060+b/SDGByVZs1+bH2C+kq8FtjE4YH+HqkrbxH/mJ2oGN1PUDYzg/1UU6aaNaPpk5RuMk34T5PruUzN/TXZtMYeviMgSvTpsVqLdH01AZlsWX7LXHVM9sn6d1xURq7U3oFgHy08jKG0zXzfVNiRyvNX/4iYgfwuJXKxzUTZgpK6rp0hpLYZFO9pyZtPLA0p/I01O2gFgNwAsB2CAqJKg7Mw3mKP+mnwi21NnYYUapFGkCKb2IRL3yG1tJa0yikW1alcaj2SrdCNLQ52dhvMUfUT4QT7Pw3maXqJ8I1YqRBKbHcSJzUByueZlfjHwKNkdaCt5ORL68wBpItg8OwDLTpEHUEIhBHMG0hdgkil+ktNUrUybAFKnD7VPfzlPUqpzHdGvpJQRKtPIqrdXvlULfpLvtKepLYRtcilKgr1E5junRNp7HtFuYiIRYMSayCJsIsIIJYRZJEGFWFWBWFWTQmMU4ZYuhhkMmiD6O/qD7h/MsscK9jaVv9Qfcb8yxtTCPyN/BZVE8M9OhwqOM/3E6TT6AigAAbhuExf0Rpl6z1D9Rci9p1b07ptUnj/WM2/O4rpcGrpY7YL6hVjCwCQ6zFZ1BUkma2vLXukUi21auSmx6j7rn2CKK3SSGJbGUNgkzAENTYkHUENc698zn0YJFPKfqlh6rsPhNDhGy4SgvE007goMz2xNHqryq1R3sGHvmhDqf3sI9o0ezq2Sop4Xsew6fv6JafSvCeEwz28ZB4ROYZOlp1lcw9MoprcHUD01J1zLZus7m/WUTbhOM18FeZdM+ftiV8MWU+NSoFuRfwY3fhyx2jjLOnUQfaPhM8tHwbunFHdPUOUe6DxDlWVxw9nIz3sFv06kvlWYlqOWmX3/iLtZgRSAXI6rWR9S2dH1AHAZeP2pQ7c2ktTCqFFmzF313sVtfq0URXbYFUeEGYOoGY5SQyrz7ATu+Fq04S/RB0tZmNzpe9hw9Mzsj2ys9FooRyY1Xa/k0uD2klRioDAgBukALqdARrpu3Gxmh2VicuigM1iVFg12uvA7+jeZz6NbOeoj1Fy2ZyASTqEAXgOeaJ1MUW8ViLM1iDyJFwfROvPqf6MXPtvmjOwaD3M+SGLpKk2fR2xGItf+GUHmcgGvVaYH6RsPDjoIjZOmqBQM2Zt4XS9ssQerUYWaq5HIsSO46QSUwN04c2qxyg4xXZp6H0nPizLJOSpfUVtlcj6r304X4j07++WX8YzYSvSd2JppkBJJJpkdDuF1/DEdoL0CfJIbuOvsvJLiSquBr4fD1KXawGZPTdWH4otJmcWn5TT/gv9U0yyY2l2mmv7GpTCh6bOpYte6Mcy5xlVspXcBfMtwL6X36yrxJdqVTLqoRjfo3KlCyk9djr1gy3d2p0hTRSz5SWCjNkUk6m2+w0A3mxtKuoxRGp00ZyUurpkscy9EsWYajd2Adk1nJxRlavDBYkkuVVv5CmnW8n8kg1OpxFhrrZDbTTS442hUZ2vloVOvpUgPzwWIzqpZqNQKoJY56egAJJsKsjLNKukZqxwXyynNdkQoKrZWzZwEIUkkA9MrZiczHqy79QIphXJqZUv0tSOG48Dpy7jGij1gURajlR0gzoQoI6NibG9wdL7lG/WL7PwzmoGRS1lVmsVBAObSzsN+vZOKMpb0yGSOK17bbsBtZWFRcwt0Wtu8peURqSy26G8ImZWXova5U36S+SxlY00IO1YSVcAWnsi09jARk1nvgT1SS0T1Si0WtM4Qqzlonqk1oHqk1JEZJnKYZTPFw7dUIuHbqj3IVMkhhlniYVurvh0wrdXf8AtJqS8kKfgAD/ADB9xvzLGs9gTyF5BMKxqgXHiMePlL1RnE4IhQM2ruiAAeU2uvZeQlljGMnZJQcmkar6JUclEX8ZrOed3ufcQPRNIkzSRhXI3EzxeaDnNyvs24xrg0awytzmcWo3lHvMkDOd4PqSUTQNi0X61+oaym23ii1Oo24LTcgdiE98ipi+1BehVHNGHepEnixRjJMdUhqlfKoPBVHYAN0psAbYisP+pf1qay7lDRNsVW+9SbvWx90th1L7fyhv4L6aDYFW6FfJPsb9wZn5Y7Fq5agHBgR6d493tnPljcWLIriVO0KCLi8QGVTco4uAdHQA7/tKYRco0CjuEJ9J0y4tG4PRt+JHJ9ziJhp6z0ye7Sx+ioyMySkE/hUPD2mV/wD/ADOGJ3PbyQ7BewAbh1CPB5IPOxwi+0KOSUP9ra+w3hkRFVEUKq6BRoAJ852eLIoO8Zge0MbzfLUmHr08tWrT3WdmX7rnMpHrEeiceuhcE/DNf0bIlmafbRODeqq6E68gCT22HCJ1MayXDJu0zDd224SdDDMek7MCxvlBItyuRqTM54tquX+T0Hvbntgufm/gYrAMrDmpHeJWqM9NKYNmZ0CnU9IkLuGvE7pZOMqnfu4kn3y++iGxaa00xBFY1GBKEICiAkgFAQdSPrdek6dLBST8WZ/qWdYo2+2mjQ4JqSJezAMST0WFyeLi5bqszG1raQuHNBQwQAAsWYKrWLG1+HVw0gxXIUi+IJ3C6L3k5bc4t4YqLZq5NhZSqjv6Ok1Gl8Hm51Vp9jFU0t4NhysQPdFsTXpWKnW4IPRJ39okWqsNS1cta18gsOwFdIEYgnxjV9RPliop4EWxSJ4gVV5BLC/PTeYph66K5yKoLeMQtidSSTYaxurS32er1dBPabA8Il4Iqcxd+qyjjpy64iDXKpFN9J3BqU9fqv8AmWUjmXO3znqoAWJCP4wA+su6wlU+HbqlsGlEJxbYqxnkI1BuqdJ7kKmDE9EiJOcx0hUMIpgUMIpjIsOphVMAphFMCI0jRlGiSNGEaNDCUj/PH+W351jR6VemvBAzn8q+0mJUD/OH+W351hlzCswDFS6DIwCnxL5kFwRfUH0Tm1LaxOi3Cv1I0KGDbadFTYupPJbse5bmU5pBvGLN94kj1fF9kZpAAWAAHIC0wGoo0U2Pf2wvCnVPXkt+YiNUdoK2uV1+8B+hMrVMIpkJU+kSVlkdpou8N6EZvcDB1dpU3UorG7C1irKevxgIoDCK0hx4HyXqPmAI4zP1TbF1OtEbuJEJTxjUiWNyh8Yb8v2h9nmPTzgcTUDYkMPrU2HaAykfrJQjV/Vf+hJ9GjkqblWDDeCD3G8Dh3uoPV7tISUEx76ZU7rQrD6tTKT9mqtr96rKaaDHUvDYF1HjKhK/epnMv5R3zHHbFPRVJdyAciDMwuL2bgn4iJteiZP6csb+GZWojTLG8FiMQtNczsqLzYhR7Yqvhn/xCtBOSGnVqt2EtlQ+hpa4HCYekwdKeZ/O1alOpU/Dmey/hsOqbTk/g5qRXrWrVBejQbL5yrejT7QGGdvVA65R7a2ZXUfxLtny2V8qBFVL6FRmLMASbk30PVN1/FodWBY82eke4Z7D0ATOfTLGNkRUOWkxK1iGRmsbZVurEhDqCewcZCb/AEuzo0smsy2unfyZLDp4Rs58UHT7Tc+wSwgTmA6IUrbQDTTqO73SD4oW039YtbnfrmNJSyy4/wAHsYOOOP6nz39zysjVGWkgu7sEX7zadwFyeyfUMNRekiU1Tooiouo3KABfpdUxn0KoojHE1BfQrS6SCwOjuQzA3O4dV+c09XaqvzC8s6Ant6eg6t/66mHHsjSPL+o6n3stLpBHxLsSEQaaZtLDnbpan/nVIWcDRO0ki5PMnNBnaSDcNB9qnu9eQfayHcD69P55cZxJnfyPd80GQ2/IO8fNAf2mN9v91P55F9qDl/vp/PCmASpUYb0Hs+Mr8S5YjogbzwG4W58yJz44H/8ASfPFHxa5uweUnE6/W6hCgKXbrHwyXFrI/wCZOuVrmPbaqhqqW4I/FT9ZORMr3McehgXM6RczowFRPRPJwlZNhFMKpgBCoYwYZTCKYBTCqYyLDKYdGiwMIrQAPh2/nD/Lb86x7EUs66GzA5kbkw3GVuGb+aPuN+dZaK8i0mmmSQt/aa/Wur3IZACSGG+1uBk1xzHxaTntAUe2RwP+GjHxnLOT943HstGVaYOTYpNJGjHc1yyC4msf6QHa4/SEWrX8hPXPwk1aFVpS5L9q/JNL6gfD4jzaH8fxnq4uvxw/c6xkNJgyG5ftX5/uNJ+RcY6pxoN6ymBwNN/CqcjKihsoYjo5vqix1F93KWAaTDQ9yk0l39w2+WWmz30I5G/f/wDUcBlTgHs1uYPx/SWQac9FiNF9HnurqeBB9DCx/LKPYOFsjJmstOpUSyixJV2HSbstuseuPbBrWqEeUp7xY/GLUq2TE4pMjHprUGUD+oik7yOIM7fS5bdS4+UcOqjwyzp0gvii3PmesneT2wg04xI40j+m/cvzSJ2iPIfuX5p6SjPHKgJ3Gx/5vEratMm4YXve4IuCDvBHEQ5xn2H7l+aBxG0MoLeDqG3ABfjBDM5tD6KfWoMaXNCM6egb19GnVKzDfRWqag/iMuTxiEYlqp8gAgFRzJ4ceI0NbbDPdVVywtcKAFW/lMDcm31b3PVvnU6qoS+SpnO9zkzG3C2bRfs/rcytRhdpGgsmpUNt8eO6LZKVgC1gFAyoPFQDdbmevhwtxC7xMbZDHL4NweBIWx/3aHqnNij5D9y/GWHBJNOmMM0WdtZFsSfIfuX4wZqk6ZH7l+MCJIPIO8g5Pkv3L80Uq12GhR/Z8YDDO8SFTVj1+4Ae+89fEHyG9nxiiVjlBytrrw+sb8+uIZU7db+an3H/ADJK12jm2nvUTQjovvt5SyvYxxGQYzpBzOkgBCeiRkpWTPRJqYMSQjAOpk1MCphAYyIZTCAwAMmDAiGwx/m/gP5ljmMqZUcjfaw7W0Hvlfhj/N/AfzLGsQ12RObgnsTpH3CVzdRbLIK2kOEZQqjcqqvcJJWgqj9Iz1GmDJGih7D083UI9Sw67gCSe39ItS0AEf8A4jwVFqg8djkp/ebQH3n8MrafSCUqVnjmkjZGuzjeiLncfe1Cr6TB1a4BsMO5J3AugbtyrcieYDClVCZutsuhYneWfeT2WlhTUJoFAHE/qec08fp0K/U22cctVK+Cqo1gz5HRqbkEqCQytbeAdNeqTvbSNbaw/hKd08emQ6EcWXUr13Fx22ijVA6pUXc4B9JH/O6cWr0ywtbemdOHM5rnsLRqWYHrltmlEGlrRqXUHqnG0dCZZbPq5aiH7QHfp+sntFP76wuwz0EbRityjspvbfoRK5Xsb8te6P7cqZcRQfykqp+Rx7jLdG9mqi/No5tSriDrYYA+M9vvt8YF0VRcu/rt8YZ69+EBWZbXe3dffwA4nqE9QmZggazXJDuOrO27vg6mPYqTmfKNSc7ktbgoJ9vdC4jBFhmtYeRv9LfL74FqZyObHQcuvX2CStAuxfC02CArmS/SZQ7gXbU6X39cZoqHuc734gu9/fJM4tYbvfAMg3roeqUtp9mtFSXXQWphFP1n9dvjC4U/UZnvwOdtRyOu+LrWbj3/APD+kHiK9ukDYgggxxdcFeaClFuuS0NIeU/rt8YR6I8t/Xb4ytoY0kgNbW9iONuqGOJtpvEkzgcXF0whpDyn9dvjBPRHlP67fGQfFchB1MQT1RCFcWllazNuNuk2/hBtSFrZm5eMZ7iW3Dmw9nS/9sg7wAotsraomp8Vt5J+ssQYx7bT3dPut71lcTHHoZBjPZFjPIDICSE0g2bR82nqiSGzaPmk9USreSozU9mlGzKHmk9USY2XQ80nqiG8dGZUwqmaCps2jcAUU1OpyiFGyqHmk9UR7xUZwGTBmiGysP5pPVEkdlYe2lFPVEN/0FRncO4FS5Nugd/3ljNJw9UEbkRjci2rEDT0Ay6o7MogX8CgPGyiUWKxdKnWqhbAdBQFGmi3bd1mUZpSlFpIsxqpK+hjNxjGFN27BKn+0afleyTTaiA3DewzPeKXg6dy8miV4fa5bNRpoASis5BNtdFBvbmWlEm2qPlHuMs9nYiliqjsVDhERbMOJLkkAwxYZ+4m10RyyuPDGUqV/IT1z8sJ4XEH6ieuflji7NoeaT1RPRs2jm/waeW3ki95o3PycOyXkXp1cQNyJ65+WJ4LMrVKLgKQc6AG4CuSdDyDX75drsvD+ZT1RKTbVFaJTEIi01RsjqBYsj8esggd8pzxeSDTLsO6ErfR4HjuBr6FfSJnhtel5fsb4SS7XpDUP/tb4TL9iX7Wd++Pk1XhI59IKpNGjUUAlXTebDpqyEE8BciZNPpFS4t3BvhDYn6RUWoPSzk5hdei2jAhhw3XEUcOSM4ySfDIZHGUast/CYjzaf6h+WDC4nU5ELagHOeiD5Iy6du+WOEwOGdEcUE6ahvEAtcSY2TQzH+RSy206IvebanPyZnty8lN4DE+bT12v32h0fEhbMiHfrnI06+jH6Wy6HSzUKY106I3Sf8AZeG8ynqiG6fkm4zfbRSeDxIABRDbTV/2kGp4g7kT1z8Jc19l0Mt1oUyfuieLsvD2F6CA21GUaRXLyWKeZcWUhoYnyE9f9oKthsQQRkT1z8JfNszD+ZT1RBtszD+ZT1RC5+Qc8zVNlClKuCpyJ0b/AFzxFuUJ4asdMiev+0tm2bh/NJ6ogP7Oo3N6KW4Gw1kt0vJXKM5O2ysZ63kJ6/7SDVK3kJ6/7R9MHRYE+BQDhoNZBNn0ra0kB7BDdLyR2S8la71iQciaX+vz05RatVqn6qi3Jv2lviNm07dGml78hJHZ1HzaeqIbpeR7JeTI47NnXMAOi3G/FYuxmzfZdA76SH8IgzsnD+ZT1RLI5GlySUeDFsZ02Z2Vh/Mp6onR7x7QQMmDBAz0uBvMrJBgZ49S2gFyZ4DJAwAMDJAxOvjETxmF+W89wlViduMdEXL9ptT3bh7YAX7uiXdiF5km3vlZifpAi6IC55nor8TM9Wd3N3Yses+7lIBIAN4vaVWpoz6eSui/v6YmJLJOCQEdee3nmSM4PBs5sNAPGbl8T1QAls/BPWfKugHjNwUfHqm1wOGSkgRBpxPFjxJPEwOAoIiBUFhv13k8z1xkGAxhXhlqRLNKTae3bXSibni+8D7vM9e7tgBd7T2ylAa9J+CA69p8kTG4/aVSs2Z2+6o0Vewfrvib5iSSSSdSSbk9pnBYATzT0NIBZxSAEw8b2XhfC1UTgT0vujVvYLemJKlpp/olhcoeqePQXsGrHvt3QA2Wed4SJeEneEkR2OGpIM/CKmpPDUgAwjBRYbp41SKmpA1sSFFzflJCHGqSDPFjUgWdswtu4n9IANM8GzwZM8JgBItB1HsL756TIloAcrXFyLdU8JnEyJMAPSZEmDcnS1rcf2nFoAekzoCqGY2vYe2dABSQO8Tp0ADiK7UchDYkdhtOnQAz4nCezoAeyKcZ7OgImJ7OnQGezU7HQeBTQbyd3HXWeToAWAns6dACu24x8Hv32v16GZqdOgIivjGTnToADo8YUTp0Bns2Gw/8FOz9TOnQAenTp0APDIzp0AImeTp0APDPDOnQA6RM6dACJnGdOgBEyBnToAeGQM9nQAiZ06dAD//Z" alt="">
<img id="images" src="data:image/jpeg;base64,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" alt="">
<div class="pre">
<h1>
<</h1>
</div>
<div class="nex">
<h1>></h1>
</div>
</div>
</body>
<script>
var next = document.querySelector('.nex');
var previous = document.querySelector('.pre');
next.onclick = () => {
document.getElementById("images").style.transform = "translateX(-100%)";
}
</script>
</html>