Помогите разобраться с кодом застрял на моменте создания приложения

i_dont_chereshna · 5 июн 2025

Всем привет я напсиал приложение на django
но у меня не получаеться с вертской на html и css кто бы мог подсказать буду рад
Первая фотография как должно быть
Вторая фотография то что получается у меня

i_dont_chereshna · 5 июн 2025

это то что получается у меня

ГИЛТИКУС · 5 июн 2025

Исходник предоставь

Джинкс · 5 июн 2025

Случайно не давыдовская шняга?)

рикка · 5 июн 2025

так кинь стили и разметку

i_dont_chereshna · 5 июн 2025

скинул в ответы первому пользователю
body {
background: #755020;
}

aside {
float: left;
position: fixed;
left: 0px;
background: #181818;
width: 20%;
padding: 2.5%;
height: 500vh;
color: #fff;
border-right: 5px solid #4d4d4d;

}

aside img {
width: 200px;
float: left;
}

aside .logo {
font-size: 40px;
margin-left: 1px;
font-weight: bold;
position: relative;
top: +10px;
color: #FFFFFF;
font-family: Comic Sans MS;
}

aside h3 {
margin-top: 50px;
font-size: 28px;
color: #FFFFFF
}

aside ul {list-style: none}
aside ul li {
color: #fff;
display: block;
margin-top: 20px;
transition: transform .6s ease;
}

aside ul li:hover, aside ul a:hover {
color: #eb5959;
text-decoration: none;
transform: scale(1.05);
}

#features {
float: right;
color: #FFFFFF;
margin-top: 100px;
text-align: center;
width: 75%;
clear: booth;
}

#features h1 {font-size: 50px; font-family: Comic Sans MS;}
#features p {max-width: 700px; margin: 20px auto;}
#features h2 {font-size: 25px; max-width: 700px; margin: 20px auto; font-family: Comic Sans MS;}
#features h3 {font-size: 25px; max-width: 700px; margin: 20px auto; font-family: Comic Sans MS; margin-top:50px;}
.alert-warning {
color: #2c2c2c;
display: inline-block;
background: #CCC7C1;
width: 55%;
margin: 30px 0%;
text-align: center;
}

.phone{
display:block;
font-size: 30px;
}

.photo-wrap{
width: 94%;
padding: 0 5%;
margin: 0 auto;
background: #FFFFFF;
}

.article{
float: right;
color: #FFFFFF;
margin-top: 100px;
text-align: center;
width: 75%;
clear: booth;
}

.article p {max-width: 95%; margin: 20px auto;}
.article h1 {font-size: 50px; font-family: Comic Sans MS;}
.btn{
display:block;
width: 30%;
margin: 0 auto;

}

form {

margin-top: 50px;

}

/* код для карточек и категорий*/

.body1{
margin: 0px;
padding:0px;
}
.maincontainer{
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: repeat(1);
}

.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 500px 500px 500px;
}

.card{
width: 350px;
height:fit-content;
background-color: #FFFFFF;
border-style: solid;
border-width: 5px;
border-color: #181818;
padding: 1em;
margin: 1em;
margin-top: 1.5em;

}

.card-img-top{
width: 300px;
margin-left: auto;
margin-right: auto;
width: 300px;
border-style: groove;
border-width: 4px;
}

/* продукты*/

.container-prod {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 500px 500px;
}

.card-prod {
display: block;
width: 990px;
height: 650px;
background-color: #FFFFFF;
border-style: solid;
border-width: 5px;
border-color: #181818;
padding: 1em;
margin: 1em;
margin-top: 1.5em;
}

.card-img-top-prod {
height: 430px;
margin-left: auto;
margin-right: auto;
border-style: groove;
border-width: 4px;
}

.bron {
margin: auto;
width: 500px;
}

CSS
body {

    background: #755020;

}



aside {

    float: left;

    position: fixed;

    left: 0px;

    background: #181818;

    width: 20%;

    padding: 2.5%;

    height: 500vh;

    color: #fff;

    border-right: 5px solid #4d4d4d;



}



aside img {

    width: 200px;

    float: left;

}



aside .logo {

    font-size: 40px;

    margin-left: 1px;

    font-weight: bold;

    position: relative;

    top: +10px;

    color: #FFFFFF;

    font-family: Comic Sans MS;

}



aside h3 {

    margin-top: 50px;

    font-size: 28px;

    color: #FFFFFF

}



aside ul {list-style: none}

aside ul li {

    color: #fff;

    display: block;

    margin-top: 20px;

    transition: transform .6s ease;

}



aside ul li:hover, aside ul a:hover {

    color: #eb5959;

    text-decoration: none;

    transform: scale(1.05);

}



#features {

    float: right;

    color: #FFFFFF;

    margin-top: 100px;

    text-align: center;

    width: 75%;

     clear: booth;

}



#features h1 {font-size: 50px; font-family: Comic Sans MS;}

#features p {max-width: 700px; margin: 20px auto;}

#features h2 {font-size: 25px; max-width: 700px; margin: 20px auto; font-family: Comic Sans MS;}

#features h3 {font-size: 25px; max-width: 700px; margin: 20px auto; font-family: Comic Sans MS; margin-top:50px;}

.alert-warning {

    color: #2c2c2c;

    display: inline-block;

    background: #CCC7C1;

    width: 55%;

    margin: 30px 0%;

    text-align: center;

}



.phone{

display:block;

font-size: 30px;

}



.photo-wrap{

    width: 94%;

    padding: 0 5%;

    margin: 0 auto;

    background: #FFFFFF;

}



.article{

    float: right;

    color: #FFFFFF;

    margin-top: 100px;

    text-align: center;

    width: 75%;

    clear: booth;

}



.article p {max-width: 95%; margin: 20px auto;}

.article h1 {font-size: 50px; font-family: Comic Sans MS;}

.btn{

    display:block;

    width: 30%;

    margin: 0 auto;



}





form {

    

    margin-top: 50px;



}



/* код для карточек и категорий*/



.body1{

    margin: 0px;

    padding:0px;

}

.maincontainer{

    display: grid;

    grid-template-columns: 1fr 3fr;

    grid-template-rows: repeat(1);

}



.container{

    display:grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: 500px 500px 500px;

}



.card{

    width: 350px;

    height:fit-content;

    background-color: #FFFFFF;

    border-style: solid;

    border-width: 5px;

    border-color: #181818;

    padding: 1em;

    margin: 1em;

    margin-top: 1.5em;



}



.card-img-top{

    width: 300px;

    margin-left: auto;

    margin-right: auto;

    width: 300px;

    border-style: groove;

    border-width: 4px;

}





/* продукты*/



.container-prod {

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: 500px 500px;

}





.card-prod {

  display: block;

  width: 990px;

  height: 650px;

  background-color: #FFFFFF;

  border-style: solid;

  border-width: 5px;

  border-color: #181818;

  padding: 1em;

  margin: 1em;

  margin-top: 1.5em;

}



.card-img-top-prod {

  height: 430px;

  margin-left: auto;

  margin-right: auto;

  border-style: groove;

  border-width: 4px;

}





.bron {

  margin: auto;

  width: 500px;

}
{% extends "main/base.html" %}
{%load static%}
{% block title %}{{ 'Главная страница' }}{% endblock %}

{% block content %}
<body1>
<div class="maincontainer">
<div class="leftbar">

</div>
<div class="container-prod">

<div class="card">
<img src="{% static 'main/img/loggo2.jpg' %}" class="card-img-top-prod" alt="...">

<img src="{% static 'main/img/loggo2.jpg' %}" class="card-img-top-prod" alt="...">

<div class=" card-body">
<h2 class="card-title">Чашечка бодрящего кофе</h2>

<p class="card-text">+ 10 к силе и мотивации</p>
<p class="product_id">id: 02265</p>
<div class="d-flex justify-content-between">
<p><s>100</s>$</p>
<p><strong>90.00 $</strong></p>
<div class="bron">
<a href="#" class="btn btn-dark add-to-cart">Забронировать столик</a>

</div>
</div>

</div>
</div>
</div>
</div>

</body1>

{% endblock %}

HTML
{% extends "main/base.html" %}

{%load static%}

{% block title %}{{ 'Главная страница' }}{% endblock %}



{% block content %}

<body1>

    <div class="maincontainer">

        <div class="leftbar">



        </div>

        <div class="container-prod">



            <div class="card">

                <img src="{% static 'main/img/loggo2.jpg' %}" class="card-img-top-prod" alt="...">



                    

                    <img src="{% static 'main/img/loggo2.jpg' %}" class="card-img-top-prod" alt="...">

                  

                <div class=" card-body">

                    <h2 class="card-title">Чашечка бодрящего кофе</h2>



                    <p class="card-text">+ 10 к силе и мотивации</p>

                    <p class="product_id">id: 02265</p>

                    <div class="d-flex justify-content-between">

                        <p><s>100</s>$</p>

                        <p><strong>90.00 $</strong></p>

                        <div class="bron">

                            <a href="#" class="btn btn-dark add-to-cart">Забронировать столик</a>



                        </div>

                    </div>



                </div>

            </div>

        </div>

    </div>

    

    

</body1>







{% endblock %}
{% extends "main/base.html" %}
{%load static%}
{% block title %}{{ 'Главная страница' }}{% endblock %}

{% block content %}
<body1>
<div class="maincontainer">
<div class="leftbar">
</div>
<div class="container">
<div class="card">
<img src="{%static 'main/img/loggo2.jpg' %}" class='card-img-top' alt="...">
<div class="card-body">
<a href="goods/product.html">
<p class="card-title">Чашечка бодрящего кофе </p>
</a>
<p class="card-text">+ 10 к силе и мотивации</p>
<p class="product_id">id: 02265</p>
<div class="d-flex justify-content-between">
<p><s>100</s>$</p>
<p><strong>90.00 $</strong></p>
<span class="badge bg-warning text-dark"><strong> Скидка 10.00 %</strong></span>
</div>
</div>
</div>
<div class="card">
<img src="{%static 'main/img/loggo2.jpg' %}" class='card-img-top' alt="...">
<div class="card-body">
<a href="goods/product.html">
<p class="card-title">Чашечка бодрящего кофе </p>
</a>
<p class="card-text">+ 10 к силе и мотивации</p>
<p class="product_id">id: 02265</p>
<div class="d-flex justify-content-between">
<p><s>100</s>$</p>
<p><strong>90.00 $</strong></p>
<span class="badge bg-warning text-dark"><strong> Скидка 10.00 %</strong></span>
</div>

</div>

</div>
<div class="card">
<img src="{%static 'main/img/loggo2.jpg' %}" class='card-img-top' alt="...">
<div class="card-body">
<a href="goods/product.html">
<p class="card-title">Чашечка бодрящего кофе </p>
</a>
<p class="card-text">+ 10 к силе и мотивации</p>
<p class="product_id">id: 02265</p>
<div class="d-flex justify-content-between">
<p><s>100</s>$</p>
<p><strong>90.00 $</strong></p>
<span class="badge bg-warning text-dark"><strong> Скидка 10.00 %</strong></span>
</div>
</div>

</body1>

{% endblock %}

HTML
{% extends "main/base.html" %}

{%load static%}

{% block title %}{{ 'Главная страница' }}{% endblock %}



{% block content %}

<body1>

    <div class="maincontainer">

        <div class="leftbar">

        </div>

        <div class="container">

            <div class="card">

                <img src="{%static 'main/img/loggo2.jpg' %}" class='card-img-top' alt="...">

                <div class="card-body">

                    <a href="goods/product.html">

                        <p class="card-title">Чашечка бодрящего кофе </p>

                    </a>

                        <p class="card-text">+ 10 к силе и мотивации</p>

                        <p class="product_id">id: 02265</p>

                        <div class="d-flex justify-content-between">

                            <p><s>100</s>$</p>

                            <p><strong>90.00 $</strong></p>

                            <span class="badge bg-warning text-dark"><strong> Скидка 10.00 %</strong></span>

                        </div>

                    </div>

                    </div>

                            <div class="card">

                <img src="{%static 'main/img/loggo2.jpg' %}" class='card-img-top' alt="...">

                <div class="card-body">

                    <a href="goods/product.html">

                        <p class="card-title">Чашечка бодрящего кофе </p>

                    </a>

                        <p class="card-text">+ 10 к силе и мотивации</p>

                        <p class="product_id">id: 02265</p>

                        <div class="d-flex justify-content-between">

                            <p><s>100</s>$</p>

                            <p><strong>90.00 $</strong></p>

                            <span class="badge bg-warning text-dark"><strong> Скидка 10.00 %</strong></span>

                        </div>



                    

                </div>



                



        </div>

        <div class="card">

                <img src="{%static 'main/img/loggo2.jpg' %}" class='card-img-top' alt="...">

                <div class="card-body">

                    <a href="goods/product.html">

                        <p class="card-title">Чашечка бодрящего кофе </p>

                    </a>

                        <p class="card-text">+ 10 к силе и мотивации</p>

                        <p class="product_id">id: 02265</p>

                        <div class="d-flex justify-content-between">

                            <p><s>100</s>$</p>

                            <p><strong>90.00 $</strong></p>

                            <span class="badge bg-warning text-dark"><strong> Скидка 10.00 %</strong></span>

                        </div>

</div>



</body1>







{% endblock %}

i_dont_chereshna · 5 июн 2025

все исправил спсибо за совет

[TELEGRAM_ACCOUNTS] Ошибка при импорте существующих заказов: Необходимо получить данные об аккаунте

Загрузочный экран | Python ( PyQt5 )

Telegram бот по парсингу выгодных предложений на LZT Market

Бот для обратной связи с админкой | Обход спамблока.

Бот-помощник для скупки рекламы | Сверка статусов/закрепов + аватарок

DICEBOT для форума | AIOGRAM бот с красивым меню

[Актуально] Юзер Бот - авто покупка подарков телеграм

Интеграция API memepay.lol для exteraGram/AyuGram (плагин)

Автосмена пароля mafile

Неподтвержденные заказы - напоминалка для FPC

Как реализовать скрипт,для покупки дешёвых подарков телеграм на питое

Получение курса крипты

Вопрос по django

Софт для генерации OctoBrowser и активации промиков

Софт для смены паролей firstmail

Создам простых ботов в тг за отзыв

Скам бизнес бот грабер подарков через тг бизнес

Граббер тг подарков

Free script python [5/0]

Откючение реакций с помощью Telethon 1.40.0

Не могу получить корректный ответ ендпоинта маркета

Плагин для авто перепродажи тг акков с Lolz на Fp

Скрипт для игры Spray Paint Roblox

Как на Linux запустить .bat скрипт?

Простой сократитель ссылок на Flask в стиле Lolzteam

Скрипт бота ****** Telegram | От местного

Здрасьте, помогите расшифровать .db

Напишу для вас телеграмм бота/скрипт на питоне за отзыв.

Telegram Fish Bot - Работа с сессиями, автоматизации действий

Чистка друзей ВК: Удаление всех тех, с кем нет общих друзей

Помогите разобраться с кодом застрял на моменте создания приложения