Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.08.2024, 22:22
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 75

Показывает сайт узким
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>

Показывает сайт узким
Ответить с цитированием
  #2 (permalink)  
Старый 17.08.2024, 22:28
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 75

Ссылка на фото https://postimg.cc/MfGQRym7 администратор извиняюсь не смог разобраться как вставить картинку
Ответить с цитированием
  #3 (permalink)  
Старый 17.08.2024, 23:47
Аспирант
Отправить личное сообщение для riaron86 Посмотреть профиль Найти все сообщения от riaron86
 
Регистрация: 27.11.2021
Сообщений: 75

Как растянуть во весь экран если ширина 800px?
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не переходит с иконки на сайт Алина0000666 Элементы интерфейса 1 30.10.2020 22:06
Не запускается сайт test.ru usa-1450 Серверные языки и технологии 3 06.09.2018 20:21
Facebook не показывает мой сайт в ifame sovsem-nub Ваши сайты и скрипты 0 08.03.2015 19:23
если сайт не отвечает то не грузить JS wlad2 Общие вопросы Javascript 13 13.11.2010 12:17
Наконец-то сайт открыт Илья Кантор Сайт Javascript.ru 9 06.08.2008 02:27