-3

Если че использую Jinja, bootstrap3, python(Djnago), css , html, Jquery

введите сюда описание изображения

wrapper.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="witdh=device, initial-scale=1.0">

    <title>Rapter</title>
      {% load staticfiles %}

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="{% static 'css/main.css' %}"type="text/css">

    <link rel="stylesheet" href="css/font-awesome.min.css">


    <script>

    </script>

  </head>
  <body>

<!-- Шапка -->
    <div class="navbar navbar-inverse ">
      <div class="container">
        <div class="navbar-header">
          <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <a href="https://google.com"> <img src="{% static 'MainPage/image/RapterLogo.png' %}" ></a>
        </div>

        <div class="navbar-collapse collapse ">

        <ul class="nav navbar-nav">

          <li class="li"><a href="/news/">Главная</a></li>
          <li class="li"><a href="/shop/">Игры</a></li>
          <li class="li"><a href="/">Товары</a></li>
          <li class="li"><a href="/">О нас</a></li>

          <li id="Buttons"><button class="btn btn-success btn-lg" data-toggle="modal" data-target="#Enter">Войти</button>
          <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#Register">Зарегестрироваться</button></li>


        </ul>

        </ul>

        </div>

      </div>

    </div>


    <div id="headrwrap">
      <div class="container">
        <div class="row centered">
          <div class="col-lg-11 col-lg-offset">


            <div class="container">
            {% block content %}

            {% endblock %}

        </div>

      </div>

    </div>

<!-- Кнопка Войти -->

    <div class="modal fade" tabindex="-1" id="Enter">
      <div class="modal-dialog">
        <div class="modal-content" id="Entered">

          <button class="close" data-dismiss="modal">X</button>

          <h1 class="centered">Войти</h1>

          <h3 class="EnterText">Введите Логин или E-mail</h3>
          <input type="text" class="form-control centered" placeholder="Email or Login">


          <h3 class="EnterText">Введите Пороль</h3>
          <input type="password" class="form-control centered" placeholder="password" >

          <button class="btn btn-info btn-lg" id="EnterButton">Войти</button>

          <a href="#" id="enterVK"> <img src="{% static 'MainPage/image/enterVk.png' %}" > </a>
          <br>

          <a href="#" id="ForgetPasswords" > Забыли пароль</a>


        </div>

      </div>

    </div>
<!-- Кнопка Войти -->


<div class="modal fade" tabindex="-1" id="Register">
  <div class="modal-dialog">
    <div class="modal-content" id="Entered">
      <button class="close" data-dismiss="modal">X</button>
      <h1 class="centered">Регестрация</h1>
      <h3 class="EnterText">Введите Логин или E-mail</h3>
      <input type="text" class="form-control centered" placeholder="Email or Login">
      <h3 class="EnterText">Введите Пороль</h3>
      <input type="password" class="form-control centered" placeholder="password" >
      <h3 class="EnterText">Повторите пороль Пороль</h3>
      <input type="password" class="form-control centered" placeholder="password" >
      <button class="btn btn-info btn-lg" id="RegisterButton">Зарегестрироваться</button>
    </div>
  </div>
</div>

<script src="js/main.js">
</script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

products.html (сюда надо блоки добовлять)

{% extends "ShapeHtml/wrapper.html" %}

{% block content %}

    {% for product in object_list  %}


      <div id="next-block">
            <div class="panel panel-default">
              <div class="panel-heading">
                  <p><img src="{{ MEDIA_URL }}{{ product.img.url }}"/></p>
              </div>
              <div class="panel-body">
                  <a href="/shop/{{product.id}}"> <h1> {{product.title}} </h1> </a>
                  <h3 align="right">{{products.date|date:"d-m-Y"}}</h3>
              </div>
            </div>
        </div>
      </div>

    {% endfor %}

{% endblock %}

main.css

@import url('https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');


body {
  background-color: #77C4C4;
  font-family: "Lato" ;
  font-weight: 300;
  font-size: 16px;
  color: #555;

  -webkit-font-soothing: antialiased;
  -webkit-overflow-scrolling: touch;

  margin-top: 70px;

}

h2,h4,h5,h6{
  font-family: "Lato";
  font-weight: 300;
  color:#333;
}

h3{
  font-family: 'Ramabhadra', sans-serif;
  font-weight: 400;

}

h1{
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  color:#333;
}


p{
  line-height: 28px;
  margin-bottom: 25px;
}

.centered{
  text-align: center;
}

a{
  font-family: "Oswald";
  font-size: 30px;
}

a:hover , a:focus{
  color:#7b7b7b;
  text-decoration: none;
  outline: 0;
}

hr {
  height: 1px;
  border: 0;
  border-top:1px solid #ccc;
  margin: 1em 0;
  padding:0;
}


li {
  margin-top:60px;
  margin-left: 10px;
}

.li:active, .li:hover{
  background-color: #ff7878 ;

}




.navbar{
  margin-top: -80px;
  font-weight:800;
  font-size:14px;
  padding-top:15px;
  padding-bottom: 15px;
}

.navbar-inverse{
  background:#005367;
  border-color: #2d2d2d;
}



.navbar-inverse .navbar-brand{
  color: #999 ;
  font-weight: bolder;
  font-size: 22px;
  letter-spacing: 1px;
}

#headrwrap{

  margin: 300px ;

}

#Buttons{
  margin-left: 100px
}

.form-control{
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius:4px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.075) inset;
  color: #555 ;
  display: block;
  font-size: 14px;
  height: 34px;
  line-height: 1.42857;
  padding: 6px 12px;
  width: 50%;
  margin-top: 20px;
  margin-left: 25%;
}

#Entered{
  height: 500px;
}

#EnterButton{
  margin-top: 50px;
  margin-left: 250px;
}


#enterVK{
  margin-left: 160px;
}

#ForgetPasswords{
  margin-left:240px;
}

#ForgetPasswords:hover{
  color: #DE4E5F;
  text-decoration:underline;
}


#containerEMail{
  margin-left: 25%;

}

.EnterText{
  margin-left: 150px;
}

.close{
  margin-right: 10px;
  margin-top: 10px;
}

#RegisterButton{
  margin-left: 180px;
  margin-top: 30px;
}

#H1changeColor{
    color:white;
}

#next-block{
  width: 300px;
  height: 60px;
  background:#f1f1f1;
  float:left;
  margin-left: 400px;
  padding-top:10px
  text-align:center;
}
4

1 ответ 1

0

Я СМОГГГГГГГГГГГ

products.html

{% extends "ShapeHtml/wrapper.html" %}

{% block content %}

    {% for product in object_list  %}


        <div class="panel panel-default" id="next-block">
          <div class="panel-heading">
                  <p><img src="{{ MEDIA_URL }}{{ product.img.url }}"/></p>
          </div>

          <div class="panel-body">
                  <a href="/shop/{{product.id}}"> <h1> {{product.title}} </h1> </a>
          </div>
        </div>
    {% endfor %}

{% endblock %}

и это добавить ваш css

#next-block{
    width:300px;
    height:400px;
    margin-left:30px;
    float:left;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.