Css
body{
padding: 0;
background-color: black;
}
div.parent{
display: flex;
justify-content: center;
}
div.solreb{
text-align: center;
width: 100%;
height: 100%;
margin-top: 20%;
margin-bottom: 5%;
box-shadow: 0 0 5px 2px;
background-color: white;
}
div.header{
width: 100%;
margin-left: 4%;
border-bottom: 1px solid black;
box-shadow: 0 0 5px 2px;
}
div.shpka{
float: left;
}
div.mybox{
height: 100%;
width: 17%;
background-color: black;
}
div.wrap{
height: 100%;
background-image: radial-gradient(circle, #0f8ca8 0%, #05313b 100%);
margin-bottom: -10%;
box-shadow: 0 0 5px 2px;
}
p.zagalovok{
text-align: center;
font-size: 23px;
color:gold;
}
div.left{
margin-top: 1%;
padding-left: 1%;
padding-right: 1%;
margin-left: 2%;
box-shadow: 0 0 5px 2px;
}
div.right{
margin-top: 1%;
margin-right: 0.5%;
padding-left: 0.5%;
padding-right: 1%;
box-shadow: 0 0 5px 2px;
}
div.usl{padding-top: 2%
}
div.nazv{
text-shadow: 1px 1px 2px;
margin-top: 7%;
margin-left: 5%;
color:gold;
font-size: 27px;
}
img.logovec{
height:70%;
width: 55%;
}
div.usl:hover{
cursor: pointer;
}
div.disp{
display: inline-block;
}
img.vk{
height: 15%;
width:17%;
margin-top: 50%;
}
img.uslimg{
height: 20%;
width:20%;
box-shadow: 5px 5px black;
margin:2%;
}
div.imgd{
padding-top: 50%;
box-shadow: 0 0 5px 2px;
}
img.hash{
height: 80%;
width: 60%;
margin-top: 6%;
}
p.uslug{
text-align: justify;
color:gold;
padding: 0%;
}
div.btn{
padding-top: 0%;
background: none;
border: none;
}
div.btn:hover{
background: none;
border: none;
}
div.btn:active{
background: none;
border: none;
}
Html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles/style.css">
<script type="text/javascript">
if (/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)){
window.onload = function (){
document.getElementById('mybox').style.display = 'none';
document.getElementById('wrap').style.width = '100%';
}
};
</script>
<link rel="shortcut icon" href="images/vect.ico" />
<title>Защитникнко</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="parent container">
<div class="wrap disp col-12 col-sm-12 col-md-9 col-lg-9 col-lg-9 col-xxl-9">
<div class="header container">
<div class="shpka col-3 col-sm-3 col-md-3 col-lg-3 col-lg-3 col-xxl-3"><img class="logovec" src="./images/logovec.png"/></div>
<div class="shpka nazv col-9 col-sm-9 col-md-9 col-lg-9 col-lg-9 col-xxl-9">Автономная некоммерческая организация «Защитник»</div>
</div><br/>
<div class="container">
<div class="solreb">
<img src="./images/soldreb.png">
</div>
</div>
<div class="container d-flex justify-content-between">
<div class="left col-4 col-sm-4 col-md-4 col-lg-4 col-lg-4 col-xxl-4">
<div class="usl sloder1">
<p class="uslug">Основная наша работа – дополнительное образование молодежи в части историко-познавательной деятельности, обще – физической и начальной военной подготовки.</p><br/>
<div class="btn btn-primary imgd" data-bs-toggle="modal" data-bs-target="#exampleModal1">
<img class="uslimg" src="./images/1/1.png"/>
<img class="uslimg" src="./images/1/2.png"/>
<img class="uslimg" src="./images/1/3.png"/>
<img class="uslimg" src="./images/1/4.png"/>
</div>
</div>
<div class="usl">
<p class="uslug sloder2">Вместе с тем мы организовываем и участвуем в организации массовых культурных (историко-событийного характера) мероприятий.</p><br/>
<div class="btn btn-primary imgd" data-bs-toggle="modal" data-bs-target="#exampleModal2">
<img class="uslimg" src="./images/2/1.png"/>
<img class="uslimg" src="./images/2/2.png"/>
<img class="uslimg" src="./images/2/3.png"/>
</div>
</div>
<div class="usl">
<p class="uslug sloder3">Поддерживаем гармоничное и разностороннее физическое и культурное развитие личности.</p><br/>
<div class="btn btn-primary imgd" data-bs-toggle="modal" data-bs-target="#exampleModal3">
<img class="uslimg" src="./images/3/1.png"/>
<img class="uslimg" src="./images/3/2.png"/>
<img class="uslimg" src="./images/3/3.png"/>
</div>
</div>
</div>
<div class="right col-8 col-sm-8 col-md-8 col-lg-8 col-lg-8 col-xxl-8">
<p class="zagalovok">Об организации</p>
<p class="uslug">
Автономная некоммерческая организация «Защитник» прививает молодежи устойчивую гражданскую позиции через игровое общение и предоставление знаний об исторических и культурных ценностях России.
Основные направления:
- дополнительное образование;
- выставочная работа;
- организация и проведение комплексных нравственных военно-спортивных мероприятий с молодежью;
- прочие задачи по направлению историко-культурной и военно-спортивной работы
Самая большая доля деятельности Защитника – дополнительное образование и спортивно-воспитательные мероприятия. Формат мы используем разный – от встреч в школах в виде уроков до выездных мероприятий, где участники проходят этап за этапом абсолютно разных направлений, объединенных общей темой. Дополнительное образование – стремление подтолкнуть ребенка к уверенному выбору профессии и расширению кругозора.
Второе по величине направление – выставочная деятельность. Самостоятельно и в составе групп мы организуем или участвуем в организации открытых выставочных площадок и рамках фестивалей, торжественных, памятных и просто познавательных мероприятий. Тематические выставки сопровождаются грамотными инструкторами, которые свои знания предлагают посетителям этих самых выставочных площадок.
В проведении комплексных мероприятий все предельно просто: для больших и малых групп; при выезде или на территории учебных заведений и организаций мы подготавливаем и проводим тематические встречи с широким спектром задач – от выставки до полосы препятствий от медико-специальной подготовки до историко-познавательной лекции от основ туризма до декламации стихов.
Прочие задачи по темам нравственного, историко-культурного и военно-спортивного развития мы выполняем после обсуждения задач и утверждения сроков выполнения
</p>
</div>
</div>
<div class="container d-flex justify-content-between">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-lg-4 col-xxl-4">
<a href="https://vk.com/ano_defender">
<img class="vk" src="./images/vk.png"/>
</a>
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-lg-4 col-xxl-4"><img class="hash" src="./images/hashcode.jpeg"></div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script type="text/javascript">
function slideshow(cntImgs,divClassName){
document.getElementsByClassName(divClassName);
}
</script>
</body>
</html>
Показывает сайт узким