Mobile adaptation. Content justification, burger menu, font size 85% for mobile.
This commit is contained in:
Nikita
parent
94024587e8
commit
1adf56a316
23
about.html
23
about.html
|
|
@ -15,6 +15,16 @@
|
|||
<div class="nav_box">
|
||||
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
|
||||
<h2>About Us</h2>
|
||||
|
||||
<!-- burger menu -->
|
||||
<input type="checkbox" id="burger-toggle" class="burger-toggle">
|
||||
<label for="burger-toggle" class="burger">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
|
||||
|
||||
<div class="navigation">
|
||||
<a class="nav_butt_2" href="about.html">About Us</a>
|
||||
<a class="nav_butt_2" href="news.html">News</a>
|
||||
|
|
@ -27,18 +37,7 @@
|
|||
<div class="content_wrap">
|
||||
<div class="content_box">
|
||||
|
||||
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum, asperiores!</h2>
|
||||
<br>
|
||||
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, laboriosam.</h2>
|
||||
<br>
|
||||
<h3>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, incidunt.</h3>
|
||||
<br>
|
||||
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Assumenda dolor fuga officia, culpa tenetur minus numquam dolore repellendus eum provident atque quo aut enim, alias hic odio totam consequatur in optio. Nemo quod magnam consequuntur!</p>
|
||||
<br>
|
||||
<img src="dog.webp" alt="" width="450px">
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus illo voluptatibus atque eos in neque mollitia sapiente deserunt inventore dolores ex minima sint beatae omnis dolor exercitationem amet quod consectetur alias, commodi quasi tenetur itaque quae dolore porro! Distinctio quis inventore voluptates autem suscipit illum? Totam corrupti rem, officiis inventore ab quas temporibus. Officia, ex aliquam blanditiis consectetur impedit quo, numquam id, beatae animi unde quod! Quidem reiciendis facilis nemo neque accusamus, odio distinctio placeat saepe earum illum facere voluptate quibusdam, illo consequuntur eos? Earum corporis ab animi numquam nulla eius, facere voluptas fugiat debitis, eveniet expedita minus sunt quis qui natus nam sint impedit recusandae quam perspiciatis ipsa, officia unde. Error, vitae! Nostrum quo quod, minus similique qui obcaecati harum illum distinctio nihil molestias, sed ullam sint at officiis, unde sequi asperiores fugiat ratione nulla provident aliquid! Labore corrupti excepturi in ducimus perspiciatis doloremque amet consectetur sunt expedita aut aliquid, accusantium, eligendi porro dolores harum repellat magnam similique quia omnis esse ratione provident aliquam tempora cumque eum. Ad quidem aperiam explicabo accusamus odit alias ducimus nulla laborum expedita voluptate repellat quas ullam dignissimos, saepe voluptatibus, doloremque dicta. Blanditiis minus iste vero praesentium minima, dolorum dicta quidem aliquam unde corporis atque delectus error numquam recusandae laudantium rem placeat quis beatae illo eum, ipsa sint eveniet amet? Optio architecto nostrum labore quisquam doloremque. Maxime esse excepturi vero nulla minima fugiat porro ullam veritatis quisquam soluta aperiam blanditiis, eum laudantium voluptas aut consequatur, perferendis ipsa sequi quidem quibusdam numquam quo minus, deserunt, harum! Voluptate ipsa pariatur totam laudantium eveniet culpa dicta necessitatibus, aliquid amet, exercitationem aut neque quae eaque temporibus nobis porro illo dolores eum rerum cumque nulla tempora, fugit obcaecati perferendis iste. Porro tempora ex pariatur dolorum eveniet vitae, ab accusantium, modi ipsa ducimus voluptates culpa iusto mollitia cumque nesciunt harum.</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,15 @@
|
|||
<div class="nav_box">
|
||||
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
|
||||
<h2>Contact</h2>
|
||||
|
||||
<!-- burger menu -->
|
||||
<input type="checkbox" id="burger-toggle" class="burger-toggle">
|
||||
<label for="burger-toggle" class="burger">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
|
||||
<div class="navigation">
|
||||
<a class="nav_butt_2" href="about.html">About Us</a>
|
||||
<a class="nav_butt_2" href="news.html">News</a>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,15 @@
|
|||
<div class="nav_box">
|
||||
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
|
||||
<h2>Download</h2>
|
||||
|
||||
<!-- burger menu -->
|
||||
<input type="checkbox" id="burger-toggle" class="burger-toggle">
|
||||
<label for="burger-toggle" class="burger">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
|
||||
<div class="navigation">
|
||||
<a class="nav_butt_2" href="about.html">About Us</a>
|
||||
<a class="nav_butt_2" href="news.html">News</a>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,15 @@
|
|||
<div class="nav_box">
|
||||
<a href="index.html" class="logo_home"><img src="logo.svg" class="logo" alt="logo"></a>
|
||||
<h2>News</h2>
|
||||
|
||||
<!-- burger menu -->
|
||||
<input type="checkbox" id="burger-toggle" class="burger-toggle">
|
||||
<label for="burger-toggle" class="burger">
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
<div class="line"></div>
|
||||
</label>
|
||||
|
||||
<div class="navigation">
|
||||
<a class="nav_butt_2" href="about.html">About Us</a>
|
||||
<a class="nav_butt_2" href="news.html">News</a>
|
||||
|
|
|
|||
169
style.css
169
style.css
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
body,a,p,h1,h2,h3,h5{padding: 0; margin: 0}
|
||||
body{
|
||||
background-color: #000; /*Цвет фона всей страницы*/
|
||||
|
|
@ -139,7 +140,7 @@ p, a, ul, li{
|
|||
}
|
||||
|
||||
.content_box{
|
||||
margin: 50px;
|
||||
margin: 40px;
|
||||
}
|
||||
.logo_home, .logo_home:link, .logo_home:visited, .logo_home:hover, .logo_home:active {
|
||||
border: none;
|
||||
|
|
@ -175,6 +176,168 @@ p, a, ul, li{
|
|||
float: right;
|
||||
}
|
||||
.readmore{
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* BURGER and MOBILE */
|
||||
.burger-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
.burger .line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #eee;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
html {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
/*Главная*/
|
||||
|
||||
.main_container{
|
||||
max-width: 90%;
|
||||
max-height: 100vh;
|
||||
text-align: center;
|
||||
padding-top: 25vh;
|
||||
}
|
||||
.logo{
|
||||
max-width: 80px;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
.links{
|
||||
padding-top: 50px;
|
||||
justify-content: space-between;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
/*Вторичные страницы*/
|
||||
.content_wrap{
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
float: left;
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.content_box{
|
||||
width: 90%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.post_box{
|
||||
width: 99%;
|
||||
padding: 4px 2px 4px 2px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.logo{
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.nav_box {
|
||||
width: 100%;
|
||||
border-right: none;
|
||||
border-bottom: solid 1px #eee;
|
||||
position: relative;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: auto;
|
||||
grid-gap:20px;
|
||||
}
|
||||
|
||||
.burger {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 30px;
|
||||
height: 24px;
|
||||
z-index: 2;
|
||||
}
|
||||
.burger .line {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: #eee;
|
||||
margin: 5px 0;
|
||||
transition: transform 0.1s ease, opacity 0.1s ease, background-color 0.1s ease;
|
||||
}
|
||||
|
||||
/*Анимаця*/
|
||||
.burger-toggle:checked + .burger .line:nth-child(1) {
|
||||
transform: translateY(8px) rotate(45deg); /* Первая линия становится диагональной */
|
||||
}
|
||||
|
||||
.burger-toggle:checked + .burger .line:nth-child(2) {
|
||||
opacity: 0; /* Вторая линия исчезает */
|
||||
}
|
||||
|
||||
.burger-toggle:checked + .burger .line:nth-child(3) {
|
||||
transform: translateY(-8px) rotate(-45deg); /* Третья линия становится диагональной */
|
||||
}
|
||||
.burger-toggle:checked ~ .navigation {
|
||||
display: flex;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.navigation {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
flex-direction: column;
|
||||
border-bottom: solid 1px #eee;
|
||||
align-items: center;
|
||||
transform: translateY(-20px); /* Начальная позиция меню */
|
||||
opacity: 0; /* Меню скрыто */
|
||||
visibility: hidden; /* Скрыть элемент визуально */
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
z-index: 1;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.burger-toggle:checked ~ .navigation {
|
||||
transform: translateY(0); /* Возвращаем меню в исходное положение */
|
||||
opacity: 1; /* Делаем меню видимым */
|
||||
visibility: visible; /* Убираем скрытие */
|
||||
}
|
||||
.navigation a {
|
||||
width: 100%;
|
||||
border: none;
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* Показать меню, если чекбокс включен */
|
||||
.burger-toggle:checked ~ .navigation {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.burger {
|
||||
display: none;
|
||||
}
|
||||
.navigation {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue