1

Вырезал маленьку часть из своей вёрстки. Изучаю вёрстку(самостоятельно), а проверить на качество мою вёрстку никто не может, потому что некому :( Подскажите, всё ли кодом нормально? Укажите на ошибки, может что-то посоветуете. Буду очень благодарен за обратную связь.

P.S. Внутри services должны были фотографии, я их удалил с кода

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 22px;
  color: #212121;
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.main-inner {
  padding: 0 15px;
  margin-bottom: 52px;
  text-align: center;
}

.main-inner-title {
  margin-bottom: 21px;
  font-size: 30px;
  font-weight: 700;
}

.main-inner p {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 600px;
}

.page-services {
  padding: 100px 0;
  background-color: #E4FDF9;
}

.main-inner {
  margin-bottom: 82px;
}

.services-content {
  display: flex;
  justify-content: space-between;
  text-align: center;
  flex-wrap: wrap;
}

.services {
  position: relative;
  padding: 50px 42px;
  margin: 15px 0;
  width: 30%;
  background-color: white;
  transition: background-color .3s linear;
  opacity: 1;
}

.services:hover {
  background-color: #00897B;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
}

.img-phone {
  pointer-events: none;
  display: block;
  position: absolute;
  top: 30px;
  left: 52%;
  transform: translateX(-52%);
}

.services:hover .img-phone {
  background: url(img/smartphone.svg) no-repeat;
  background-size: 62px 62px;
}

.services img {
  transition: all .3s linear;
}

.services:hover img {
  opacity: 0;
}

.services div {
  margin: 70px 0 14px;
  font-weight: 600;
  font-size: 20px;
  transition: all .3s linear;
}

.services:hover div {
  color: white;
}

.services p {
  margin-bottom: 40px;
  transition: all .4s linear;
}

.services:hover p {
  color: white;
}

.services-btn {
  overflow: hidden;
  display: inline-block;
  padding: 13.3px 12.5px 14.7px 13.5px;
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
  color: #212121;
  border: 2px solid #212121;
  transition: all .4s linear;
  z-index: 1;
  outline: none;
  position: relative;
}

.services-btn:after {
  content: '';
  width: 150%;
  height: 0;
  background-color: #23e3bc;
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-25deg);
  transition: all .75s ease 0s;
}

.services-btn:hover:after {
  height: 250%;
}

.services-btn:hover {
  color: black;
}

.services:hover .services-btn {
  color: white;
  border: 2px solid white;
}

.services-btn:hover {
  color: black;
}
<body>
  <section class='section'>
    <div class="page-services">
      <div class="container">
        <div class="main-inner">
          <div class="main-inner-title">Our Services</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
        </div>
        <div class="services-content">
          <div class="services">
            <div>Research</div>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
            <a class="services-btn" href="#" target='_blank'>read more</a>
          </div>

          <div class="services">
            <div>Portfolio</div>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
            <a class="services-btn" href="#" target='_blank'>read more</a>
          </div>

          <div class="services">
            <div>Support</div>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
            <a class="services-btn" href="#" target='_blank'>read more</a>
          </div>

          <div class="services">
            <div>Documentation</div>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
            <a class="services-btn" href="#" target='_blank'>read more</a>
          </div>

          <div class="services">
            <div>Development</div>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
            <a class="services-btn" href="#" target='_blank'>read more</a>
          </div>

          <div class="services">
            <div>Design</div>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
            <a class="services-btn" href="#" target='_blank'>read more</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

5
  • 1
    щас прилетят БЭМ монахи)) 31 янв 2022 в 17:44
  • Ахаха, уже жду)
    – AlexMan
    31 янв 2022 в 17:45
  • 1
    Все ли тут плохо Вы сами поймете если будете дальше развивать свой проект, существенно любая реакция на этот код практически не имеет никакого значения, важно чтобы этот код было легко поддерживать в течение времени и разным разработчикам, если это не ваш пет-проект, ну и такие вещи как семантика, эффективность тоже держите в голове. 31 янв 2022 в 17:48
  • @AlexMan: начните с того, что сами свой код здесь запустите и, не разворачивая сниппет, опуститесь до блоков Documentation и Development.
    – UModeL
    31 янв 2022 в 17:52
  • За селекторы наподобие .services div нужно руки отрывать.
    – nazarpunk
    1 фев 2022 в 12:11

1 ответ 1

4

body {
    font-family: 'Open Sans', sans-serif;
    /* Не нужно так делать.
Юзер может в настройках браузера изменить базовый размер шрифта,
чтобы ему было удобнее (плохо видит или наоборот, сделать меньше,
чтобы влезало больше), поэтому без явной причины принудительно
выставлять свой размер нежелательно */
    font-size: 15px;
    /* Лучше используйте коэффициенты.
Вообще, этим занимается типографика, но обычно для заголовков это 1.2,
а для текста - 1.5 */
    line-height: 22px;
    color: #212121;
    margin: 0;
    /* Насколько знаю, у body нет padding */
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

.container {
    width: 100%;
    /* Также можете использовать rem вместо px везде, кроме таких моментов,
как border: 1px. 1rem = 100% base font size.
Это полезно, когда вы не задаёте принудительно размер шрифта, как выше.
Используя rem'ы, можно быть увереным, что даже при аномально
больших/маленьких размерах шрифта будут сохраняться пропорции и читабельный вид */
    max-width: 1240px;

    margin: 0 auto;
    padding: 0 20px;
}

.main-inner {
    padding: 0 15px;
    margin-bottom: 52px;
    text-align: center;
}

.main-inner-title {
    margin-bottom: 21px;
    font-size: 30px;
    font-weight: 700;
}

.main-inner p {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    max-width: 600px;
}

.page-services {
    padding: 100px 0;
    background-color: #E4FDF9;
}

.main-inner {
    margin-bottom: 82px;
}

.services-content {
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-wrap: wrap;
}

.services {
    position: relative;

    padding: 50px 42px;
    margin: 15px 0;
    width: 30%;
    background-color: white;
    transition: background-color .3s linear;
    opacity: 1;
}

.services:hover {
    background-color: #00897B;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .35);
}

.img-phone {
    pointer-events: none;
    display: block;
    position: absolute;
    top: 30px;
    left: 52%;
    transform: translateX(-52%);
}

.services:hover .img-phone {
    background: url(img/smartphone.svg) no-repeat;
    background-size: 62px 62px;
}

.services img {
    transition: all .3s linear;
}

.services:hover img {
    opacity: 0;
}

.services div {
    margin: 70px 0 14px;
    font-weight: 600;
    font-size: 20px;
    transition: all .3s linear;
}

.services:hover div {
    /* Не ошибка, но всё же желательно следовать единому стилю.
Если задаёте цвета в HEX, то делайте так везде.
К тому же так и писать меньше: #fff VS white */
    color: white;
}

.services p {
    margin-bottom: 40px;
    transition: all .4s linear;
}

.services:hover p {
    color: white;
}

.services-btn {
    overflow: hidden;
    display: inline-block;
    padding: 13.3px 12.5px 14.7px 13.5px;

    font-weight: 600;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    color: #212121;

    border: 2px solid #212121;
    transition: all .4s linear;
    z-index: 1;
    outline: none;

    position: relative;
}

.services-btn:after {
    content: '';
    width: 150%;
    height: 0;

    background-color: #23e3bc;
    z-index: -1;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);

    transition: all .75s ease 0s;
}

.services-btn:hover:after {
    height: 250%;
}

.services-btn:hover {
    color: black;
}

.services:hover .services-btn {
    color: white;
    border: 2px solid white;
}

.services-btn:hover {
    color: black;
}
<body>
    <!-- Возможно придирка, но если нет необходимости переопределять стандартные
стили каких-либо библиотек, то <section class="section"> излишне.
Хотя прекрасно понимаю, что многим привычно всё писать классами, но я не сторонник этого -->
    <section class='section'>
        <div class="page-services">
            <div class="container">
                <div class="main-inner">
                    <div class="main-inner-title">Our Services</div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
                </div>
                <div class="services-content">
                    <div class="services">
                        <!-- Это вполне мог бы быть заголовок -->
                        <div>Research</div>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
                        <a class="services-btn" href="#" target='_blank'>read more</a>
                    </div>

                    <div class="services">
                        <div>Portfolio</div>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
                        <a class="services-btn" href="#" target='_blank'>read more</a>
                    </div>

                    <div class="services">
                        <div>Support</div>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
                        <a class="services-btn" href="#" target='_blank'>read more</a>
                    </div>

                    <div class="services">
                        <div>Documentation</div>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
                        <a class="services-btn" href="#" target='_blank'>read more</a>
                    </div>

                    <div class="services">
                        <div>Development</div>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
                        <a class="services-btn" href="#" target='_blank'>read more</a>
                    </div>

                    <div class="services">
                        <div>Design</div>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum iti atque corrupti quos.</p>
                        <a class="services-btn" href="#" target='_blank'>read more</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

А в целом, норм. Правда, стоит понимать, что качество кода - понятие всё же субъективное.

Ваш ответ

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

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