Мне сложно понять, как остановить перемещение этих div вверх и вниз + из стороны в сторону при изменении размера окна. Есть ли способ, при котором div просто остаются на месте, а окно просто обрезает веб, когда оно меньшего размера?
Мне трудно понять, как остановить перемещение этих div вверх и вниз + из стороны в сторону при изменении размера окна. Есть ли способ, при котором div просто остаются на месте, а окно просто обрезает веб, когда оно меньшего размера?
var coll = document.getElementsByClassName("year");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
/*font*/
@font-face {
font-family: 'coresansgs55mediuuploadedfile';
src: url('../fonts/core_sans_gs_55_medium-webfont.woff2') format('woff2'),
url('../fonts/core_sans_gs_55_medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
/*background*/
body {
overflow-x: hidden;
background: linear-gradient(to right, #FF76FB 0%, #C57BFF 35%, #00FFFB 100%);
background-size: 200% 200%;
animation: BackgroundGradient 20s ease infinite;
}
@keyframes BackgroundGradient {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
/*content*/
h1 { font-family: 'coresansgs55mediuuploadedfile';
font-size: 100px;
text-align: center;
padding-top: 50px;
margin-top: 50px;
width: 100%;
position: absolute;
margin: auto;
z-index: 1;
}
h1 a{color: #00FFD8;
-webkit-text-stroke: 1px blue;
text-shadow: 0px 0px blue, 0px 0px blue, 3px 3px blue;
text-decoration: none;
-webkit-transition: all 1s ease;
transition: all 1s ease;}
h1 a:hover {color: #febfff;
-webkit-text-stroke: 1px magenta;
text-shadow: 0px 0px magenta, 0px 0px magenta, 5px 4px magenta;
-webkit-transition: all 1s ease;
transition: all 1s ease;
letter-spacing: 10px;}
ul {
-webkit-animation: fadein 1s;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
z-index: 1;
top: 250px;
width: 100%;
text-align: center;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
li {
display: inline;
}
li a {
padding: 100px;
text-decoration: none;
font-family: 'coresansgs55mediuuploadedfile';
font-size: 30px;
color: blue;
width: 100%;
text-decoration: none;
text-align: center;
}
li a:hover {
color: magenta;
}
button { width: 100%; }
[data-toggle="collapse"] {
color: blue;
font-family: 'Be Vietnam', sans-serif;
font-size: 50px;
cursor: pointer;
width: 100%;
text-align: center;
padding: 10px;
background-color: transparent;
border: none;
margin-bottom: -1px;
outline: none;
-webkit-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
[data-toggle="collapse"]:hover {color: magenta; }
[data-toggle="collapse"][aria-expanded="true"] {
color: white;
border: none;
}
.box {
background-color: white;
text-align: center;
border: 1px solid white;
display: none;
margin: 10px 20px 50px 20px;
padding: 0px 50px 50px 50px;
}
.box p { padding: 5px 20px; }
#work{
padding-top: 25%;
}
.work1 {
-webkit-animation: fadein 2s;
}
.work2 {
-webkit-animation: fadein 3s;
}
.work3 {
-webkit-animation: fadein 4s;
}
.work4 {
-webkit-animation: fadein 5s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
p{
font-family: 'Be Vietnam', sans-serif;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="work.css">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<h1>
<a href="../MAIN/main.html">HELLO</a>
</h1>
<ul>
<li><a href="../WORK/work.html"><font color="#ffffff">work</font></a></li>
<li><a href="../ABOUT/about.html">about</a></li>
<li><a href="../CONTACT/contact.html">contact</a></li>
</ul>
<div id="work">
<div class="work1">
<button data-toggle="collapse" data-target="#box1" data-group="toggles" aria-expanded="false">
WORK 1
</button>
</div>
<div class="box" id="box1" aria-expanded="false">
<p>
WORK 1
</p>
</div>
</div>
<div class="work2">
<button data-toggle="collapse" data-target="#box2" data-group="toggles" aria-expanded="false">
WORK 2
</button>
</div>
<div class="box" id="box2" aria-expanded="false">
<p>
WORK 2
</p>
</div>
<div class="work3">
<button data-toggle="collapse" data-target="#box3" data-group="toggles" aria-expanded="false">
WORK 3
</button>
</div>
<div class="box" id="box3" aria-expanded="false">
<p>
WORK 3
</p>
</video>
</div>
</div>
<div class="work4">
<button data-toggle="collapse" data-target="#box4" data-group="toggles" aria-expanded="false">
WORK 4
</button>
</div>
<div class="box" id="box4" aria-expanded="false">
<p>
WORK4
</p>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../WORK/work.js"></script>
<script src="../JS/jquery.collapsible.js"></script>
</body>
</html>