Задать вопрос

Tryggvi

Комментарии

  • Является ли хорошей практикой такая структура интернет-магазина?

    @Tryggvi Автор вопроса
    sim3x, Все будет так же статично. Только потом хочу делать логику сайта на django добавление товаров тоже хочется автоматизировать через него, в таком случае такая структура тоже подойдет? Про шрифт знаю, до выхода в продакшен, конечно, буду менять (ставил его чтобы просто посмотреть как оно :) )
    Написано

  • Является ли хорошей практикой такая структура интернет-магазина?

    @Tryggvi Автор вопроса
    sim3x, Так лучше? В каталогах "conditioners", "accessoriesFloors" и images так же предполагаются ветвления.
    Написано

  • Откуда в параграфе непонятные отступы?

    @Tryggvi Автор вопроса
    Большое спасибо!
    Написано

  • Верстка макета CSS стили на каждый чих, что я делаю не так?

    @Tryggvi Автор вопроса
    ned4ded, 
    <!DOCTYPE html>
<html lang="ru">
<head>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/style2.css">

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DiaGram</title>
</head>
<body>
    <header class="Rectangle-2">
        <div class="kz-Ru">
            <a href="#">kz</a><a href="#" class="text-style-1">Ru</a> 
        </div>
        
        <div class="main-mdpi">
            <img src="img/Layer-0.png" alt="" class="Layer-0"> 
            <div class="Vector-Smart-Object">
                <img src="img/Layer-1.png" alt="" class="Layer-1">
            </div> 
        

            <div class="navigation">
               <a href="#">О проекте</a> <a href="#">Преимущества</a>  <a href="#">Отзывы</a>  <a href="#">СМИ о нас</a>         
            </div>
            
            <div class="Rounded-Rectangle-2">
                <button class="layer">Войти</button>
            </div> 
        </div>
    </header>
    <section class="Rectangle">
        <div class="Google-Pixel-2">
            <img src="img/pixel-2.png" alt="">
        </div>
        
        <h1 class="tag-line">
            Мобильный дневник самоконтроля
            Удобно. Эффективно. Доступно.
        </h1>

        <p class="about-the-app">
            Приложение DiaGram - это помощник для 
            наблюдения за вашим самочувствием.
            Здесь вы можете отслеживать уровень сахара, 
            подсчет калорий или хлебных единиц,
            наблюдать за своей активностью и отмечать 
            прием лекарств. 
        </p>
            
        <p class="download">
            Скачать можно уже сайчас в <img class="Google-play-logo" src="img/google-play-logo.png" alt="">
        </p> 
        <h1 class="diary">
            Мобильный дневник диабетического самоконтроля
        </h1>
        <p class="about-sugar">
            Измерения сахара, журнал приема лекарств, записи о питании и физической 
            активности, артериальное давление и множество другой информации –
            записывайте и не теряйте, а также консультируйтесь с Вашим врачом
        </p>
        <div class="layer-2">
           <img class="Rounded-Rectangle-1-copy-4" src="img/rounded-rectangle-1-copy-2.png" alt=""> <img class="Rectangle-3-copy-2" src="img/group-4.png" alt="">
           <img class="Rounded-Rectangle-1-copy-3" src="img/rounded-rectangle-1-copy-3.png" alt=""> <img class="phone-call" src="img/phone-call.png" alt="">
           <img class="Rounded-Rectangle-1-copy-2" src="img/rounded-rectangle-1-copy-4.png" alt=""> <img class="alarm" src="img/alarm.png" alt="">
           <p class="text-diary">дневник</p>
           <p class="text-phone">Звонок к врачу</p>
           <p class="text-alarm">Напоминание</p>
        </div>

        <div>
            
        </div>
    </section>
</body>
</html>
    Написано

  • Верстка макета CSS стили на каждый чих, что я делаю не так?

    @Tryggvi Автор вопроса 
    /* основной фон страницы */
body {
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    -webkit-overflow-scrolling: touch;
  }
 
/* ссылки во всех состояниях */
  a, a:hover, a:focus{
    text-decoration: none;
    color: black;
    outline: 0;
  }

  :visited {
    color: #393939;
    /* Цвет посещенных ссылок */
  }
/* фон шапки сайта */
  .Rectangle-2 {
    position: absolute;
    height: 87px;
    background-color: #ffffff;
    border: solid 1px #cccccc;
    border-right: none;
    border-top: none;
    border-left: none;
    margin: 0;
    padding: 0;
  } 

/* ссылки смены языка */
  .kz-Ru {
    position: relative;
    width: 32px;
    height: 9px;
    font-family: "RobotoRegular";
    font-size: 13.8px;
    padding: 21px 21px 0px 1107px;
    top: -15px;
    /* верхний, правый, нижний, левый */
    color: #393939;
  }

  .kz-Ru .text-style-1 {
    margin-left: 5px; 
    color: #b5b5b5;
  }

/* размер лого сайта для первой картинки*/

.Layer-0 {
    width: 34px;
    height: 34px;
  }
/* размер лого сайта для второй картинки */
.Layer-1 { 
    width: 109px;
    height: 21px;  
    margin: 9px 0px 4px 12px  
  }

/* отсутпы для лого */ 
  .main-mdpi {
    display: inline;  
    padding: 32px 1104px 20px 19px;
  }

  @-moz-document url-prefix() {
    .Vector-Smart-Object {
      position: relative;
      display: inline;  
      margin: 9px 0px 4px 12px ;
      top: -37px;
      right: -60px;;
    }
  }

  .Vector-Smart-Object {
    display: inline;  
    margin: 41px 982px 25px 0px; 
  }

/* навигация по сайту */
.navigation {
    position: absolute;
    font-family: "RobotoLight";
    font-size: 18.2px;
    font-weight: 300;
    text-align: right;
    color: #393939;
    padding-top: 48px;
    top: -20px ;
    padding-left: 346px;
    padding-right: 321px;
  }

.navigation>a {
    margin: 20px;
}

/* кнопка */
.Rounded-Rectangle-2 {
    position: relative;
    width: 87px;
    height: 21px;
    text-align: center;
    top: -22px;
    left: 1057px;
   
  }

@-moz-document url-prefix() {
    .Rounded-Rectangle-2 {
        position: relative;
        width: 87px;
        height: 21px;
        text-align: center;
        top: -81px;
        left: 1057px; 
    }
}

@-moz-document url-prefix() {
    .layer {
        height: 20px;
        width: 87px;
        text-align: center;
        border: none;
        font-family: "RobotoRegular";
        font-size: 18.2px;
        border-radius: 10px;
        color: #ffffff;
        background-color: #99ca3e;
        
      }
}

.layer {
    line-height: 18px;
    width: 87px;
    text-align: center;
    border: none;
    font-family: "RobotoRegular";
    font-size: 18.2px;
    border-radius: 10px;
    color: #ffffff;
    background-color: #99ca3e;
    
  }

/* контент рядом с телефоном */
.Rectangle {
    position: absolute;
    width: 100%;
    top: 150px;
    height: 394px;
    background-color: #eeeff0;

  }

.Google-Pixel-2 {
    position: relative;
    top: -70px;
    margin: 28px 0px 0px 35px;   
     
  }

  .tag-line { 
    position: relative;
    top: -685px;
    left: 300px;
    width: 700px;
    
    height: 86px;
    font-family: "RobotoLight";
    font-size: 40px;
    font-weight: 300;
    color: #393939;
    margin: 199px 161px 267px 46px;
  }


  .about-the-app {
     position: relative;
     margin:0 auto;
     padding: 0 auto;
     top: -900px;
     right: -115px;
     width: 800px;
     height: 139px;
     color: #393939;
     font-family: "RobotoLight";
     font-size: 20px;
     font-weight: normal;
   
   }
   
   .download {   
    margin:0 auto;
    padding: 0 auto;
    position: relative;
    top: -900px;
    left: -145px;
    width: 280px;
    height: 19px;
    color: #393939;
    font-family: "RobotoLight";
    font-size: 20px;
    font-weight: 300;
  }  
  
  .Google-play-logo {
    position: relative;
    float: right;
    top: -40px;
    left: 165px;
  }

  .diary {
    position: relative;
    width: 650px;
    height: 24px;
    top: -720px;
    left: 350px;
    font-family: "RobotoLight";
    font-size: 25px;
    font-weight: 300;
    text-align: left;
    color: #393939;
  }

  .about-sugar {
    display: block;
    position: relative;
    top: -700px;
    left: 330px;
    width: 642px;
    height: 61px;
    font-family: RobotoLight;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    color: #393939;
  }

  /* колонка с особенностями программы */
  .layer-2  {
    position: relative;
    
    width:100%;
    height: 331px;
    background: url(../img/group-3.png) center no-repeat;
    top: -635px;
    background-size:cover;
    -moz-background-size:cover;
    -webkit-background-size:cover;
    background-size:cover;
    
}

/* рамки в колонке */
.Rounded-Rectangle-1-copy-4 {
    position: relative;
    left: 300px;
    bottom: -45px;
    width: 176px;
    height: 160px;
}

.Rounded-Rectangle-1-copy-3 {
    position: relative;
    width: 176px;
    height: 160px;
    left: 350px;
    bottom: -45px;
  }

  .Rounded-Rectangle-1-copy-2 {
    position: relative;
    width: 176px;
    height: 160px;
    left: 400px;
    bottom: -45px;
  }

  /* иконки в колонке */
    .Rectangle-3-copy-2 {
        position: relative;
        width: 48px;
        height: 53px;
        bottom: -45px;
        left: 185px;
    }


    .phone-call {
        position: relative;
        width: 54px;
        height: 55px;
        left: 235px;
        bottom: -45px;
    }

    .alarm {
        position: relative;
        width: 61px;
        height: 56px;
        left: 283px;
        bottom: -45px;
    }
/* текст в колонки */
    .text-diary {
        position: relative;
        top: -2px;
        left: 345px;
        font-family: "RobotoLight";
        font-size: 25px;
        font-weight: 300;
        text-align: left;
        color: #ffffff;
    }

    .text-phone {
        position: relative;
        top: -53px;
        left: 590px;
        font-family: "RobotoLight";
        font-size: 23px;
        font-weight: 300;
        text-align: left;
        color: #ffffff;
    }

    .text-alarm {
        position: relative;
        top: -102px;
        left: 880px;
        font-family: "RobotoLight";
        font-size: 25px;
        font-weight: 300;
        text-align: left;
        color: #ffffff;
    }
    Написано

  • Верстка макета CSS стили на каждый чих, что я делаю не так?

    @Tryggvi Автор вопроса
    cssdeck.com/labs ну, там много position: relative; и сдвигов с top, left, bottom, right. И это очень мешает адаптивной верстки. Я особо не видел, чтобы так верстали, поэтому и сомневаюсь в правильности верстки.
    Написано