Ответы пользователя HamSter

Какие есть аналоги Masonry?

HamSter @HamSter007

HTML/CSS верстальщик

Например с помощью css grid - пример на codepen, но поддержка не очень.

Пример с использованием flex

Статья с примерами: Simple Masonry layouts with CSS Flexbox

Ответ написан более трёх лет назад

3 комментария

Как лучше сверстать такую структуру?

HamSter @HamSter007

HTML/CSS верстальщик

Таблицы должны верстаться таблицами:

<div class="table-wrap">
  <table>
  <tbody>
    <tr>
      <td><span>Email</span></td> <td colspan="3">john@fair.com</td>
    </tr>
    <tr>
      <td><span>Phone</span></td> <td colspan="3">02 9282 2888</td>
    </tr>
    <tr>
      <td><span>Adress</span></td><td colspan="3">1 Darling <br> Lorem</td>
    </tr>
    
    <tr>
      <td>
        <span>Postcode</span>
      </td>
      <td>
        2009
      </td>
      
      <td>
        <span>Country</span>
      </td>
      <td>Australia</td>
    </tr>
  </tbody>
</table>
</div>

Пример на codepen

Ответ написан более трёх лет назад

3 комментария

Как найти фрилансера на небольшую точечную работу?

HamSter @HamSter007

HTML/CSS верстальщик

1. Выполнять доработки - не благодарная работа, проще с 0 все сделать, чем копаться в чужом коде и наработках.
2. Работа с любой cms - трудоемкое и времязатратное дело. И то что заказчик считает работой в 4-6 часов как правило оказывается работой на 8-12 часов как минимум.
3. Не забываете и о том, сколько платите - таково и качество работы будет.

Что делать?! - Вы же видете все предложения, если в большинстве случаев предлагается определенная сумма - значит такова она и есть, а не всемирный заговор фрилансеров против Вас!

P.S: Как вариант - если не устраивает цена, то делайте сами!
Весь вопрос звучит ... Как "И рыбку съесть, и в море искупаться." ?

Ответ написан более трёх лет назад

3 комментария

Анимировать svg картинку на js, что лучше для этого подходит?

HamSter @HamSter007

HTML/CSS верстальщик

1. Одним лишь css можно анимировать svg пример, codepen пример
2. smil анимация пример
3. обычный jacascript/jquery codepen пример
4. плагин использовать codepen пример 1, codepen пример 2, codepen пример 3, codepen пример 4

Ответ написан более трёх лет назад

Комментировать

Как объединить float:left и float:right в одном ряду?

HamSter @HamSter007

HTML/CSS верстальщик

body {overflow: hidden; }

* {box-sizing: border-box;}

Ответ написан более трёх лет назад

Комментировать

Как вставить шорт код в файл?

HamSter @HamSter007

HTML/CSS верстальщик

do_shortcode

<?php
  echo do_shortcode(... );
?>

Например для Contact form 7:

<?php
  echo do_shortcode(
    '[contact-form-7 id="11" title="Contact Form 7"]'
  );
?>

Ответ написан более трёх лет назад

1 комментарий

Как вывести форму contact form 7 без стилей?

HamSter @HamSter007

HTML/CSS верстальщик

Добавьте свой класс форме, например, html_class="custom-form":

[contact-form-7 id="93" title="Contact Form 7" html_class="custom-form"]

.custom-form input { ваши стили ... }
.custom-form label{ ваши стили ... }
...

Ответ написан более трёх лет назад

Комментировать

Github pages, сколько время работает?

HamSter @HamSter007

HTML/CSS верстальщик

Наверняка вы внесли какие-то изменения в репозиторий и тем самым нарушили целостность (работы) странички!

У меня уже года 3 (если не больше) страничка висит и все в порядке.

Ответ написан более трёх лет назад

Комментировать

Почему пропадает class при html вёрстке письма?

HamSter @HamSter007

HTML/CSS верстальщик

Не все почтовые клиенты поддерживают media queries и style.
Таблица поддержки: campaignmonitor

Ответ написан более трёх лет назад

Комментировать

Как убрать отступы?

HamSter @HamSter007

HTML/CSS верстальщик

Если Вы используете bootstrap 4, то в разметке уже предусмотрены нулевые отступы, для этого вместе с классом .row используют класс .no-gutters

Пример:

<div class="row no-gutters">
  <div class="col-12 col-md-8">.col-12  .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Ответ написан более трёх лет назад

Комментировать

Как переместить элементы навигационной панели направо?

HamSter @HamSter007

HTML/CSS верстальщик

Добавить класс navbar-right:

<div class="container">
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">WebSiteName</a>
        </div>
        
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li> 
            <li><a href="#">Page 3</a></li> 
          </ul>
        </div>
      </div>
    </nav>
  </div>

пример

Ответ написан более трёх лет назад

Комментировать

Как сделать что бы один объект двигался вокруг другого объекта по кругу?

HamSter @HamSter007

HTML/CSS верстальщик

Можно без js обойтись, animate:

<div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
      <circle fill="none" stroke="#000" stroke-width="3" cx="150" cy="150" r="100" />
      <circle cx="150" cy="150" r="10" stroke="red"></circle>
      <g class="orbit">
        <circle cx="80" cy="80" r="20"></circle>
      </g>
    </svg>
  </div>

Анимация:

.box {
  height: 300px;
  width: 300px;
  background: #eee;
}

svg .orbit {
  animation: spin-right 10s 30 linear;
  transform-origin: 150px 150px 0;
}

@keyframes spin-right {
  100% {
    transform: rotate(360deg);
  }
}

пример codepen

Ответ написан более трёх лет назад

1 комментарий

Как сделать прозрачную цифру на белом фоне?

HamSter @HamSter007

HTML/CSS верстальщик

<div class="text">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80" preserveAspectRatio="xMidYMid slice">
    <defs>
      <mask id="mask" x="0" y="0" width="100%" height="100%" >
        <rect x="0" y="0" width="100%" height="100%" />
        <text text-anchor="middle" x="140" y="50" dy="1">Text</text>
        </mask>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" />
  </svg>
</div>

* {
  box-sizing: border-box;
}

.text {
  width: 100%;
  height: 250px;
  z-index: 10;
  background: url(https://image.freepik.com/free-photo/blue-sky-with-clouds_1127-282.jpg) no-repeat top center;
  background-size: cover;
  position: relative;
  padding: 20px;
}

svg { 
  width: 100%;
  text-align: center;
}
svg text {
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 38px;
}
svg rect {
  fill: white;
}
svg > rect {
    -webkit-mask: url(#mask);
    mask: url(#mask);
}

Ответ написан более трёх лет назад

Комментировать

Можно ли сделать горизонтальный скорлл колесиком?

HamSter @HamSter007

HTML/CSS верстальщик

Для этого плагин нужен, как например malihu jquery-custom-content-scroller

Ответ написан более трёх лет назад

4 комментария

Параллельное обучение программированию, возможно ли?

HamSter @HamSter007

HTML/CSS верстальщик

Главное это мотивация!

Работала по 8-10 часов на заводе обычным рабочим и при этом пыталась учить программирование. Времени удавалось уделять даже не по 2-3 часа, а по часику.
Минимальный результат уже через пол года был, какое никакое первое портфолио склепала.

Конечно, это не тот уровень который достигается если полноценно заниматься каждый день по несколько часов. Но стоит пробовать! Дом строится по кирпичикам и двигаемся мы делая шаг за шагом (кто-то маленькими шажками, кто-то большими).

По Python в интернете уже много хороших уроков. Главное не только смотреть уроки или читать, а сразу же повторять.

Ответ написан более трёх лет назад

7 комментариев

Как адаптивно сверстать под телефон?

HamSter @HamSter007

HTML/CSS верстальщик

Обычные стили:

.block {
  стили ... 
}

Под мобильные, например с разрешение 420px и меньше:

@media screen and (max-width: 420px) {
  стили ...
}

Ресурс для обучения

Ответ написан более трёх лет назад

Комментировать

Можно ли быть хорошим программистом и плохим олимпиадником?

HamSter @HamSter007

HTML/CSS верстальщик

Олимпиадные задачи требуют нестандартное мышление, поэтому да!

Вы можете быть хорошим программистом и необязательно при этом уметь решать олимпиаду.

Ответ написан более трёх лет назад

Комментировать

Как сделать адаптивное меню для Емаил письма?

HamSter @HamSter007

HTML/CSS верстальщик

Как например jsbin:

<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>One Letter</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

	<style>
		.ReadMsgBody {width: 100%; background-color: #ffffff;}
		.ExternalClass {width: 100%; background-color: #ffffff;}

				/* Windows Phone Viewport Fix */
		@-ms-viewport { 
		    width: device-width; 
		}
	</style>

	<!--[if (gte mso 9)|(IE)]>
	    <style type="text/css">
	        table {border-collapse: collapse;}
	        .mso {display:block !important;} 
	    </style>
	<![endif]-->

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="background: #e7e7e7; width: 100%; height: 100%; margin: 0; padding: 0;">
	<!-- Mail.ru Wrapper -->
	<div id="mailsub">
		<!-- Wrapper -->
		<center class="wrapper" style="table-layout: fixed; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; padding: 0; margin: 0 auto; width: 100%; max-width: 960px;">
			<!-- Old wrap -->
	        <div class="webkit">
				<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="padding: 0; margin: 0 auto; width: 100%; max-width: 960px;">
					<tbody>
						<tr>
							<td align="center">								
								<!-- Navigation -->
								<table id="icon__article" class="device" cellpadding="0" cellspacing="0" border="0" bgcolor="#78be3d" align="center" style="width: 100%; padding: 0; margin: 0; background-color: #78be3d">
									<tbody>								
										<tr>
											<td align="center">
												<div style="display: inline-block;">
													<table width="192" align="left" cellpadding="0" cellspacing="0" border="0" style="padding: 0; margin: 0; mso-table-lspace:0pt; mso-table-rspace:0pt;"  class="article">
													<tbody>
														<tr> <td colspan="3" height="40"></td> </tr>
														<tr>
															<td width="80" style="width: 8%;"></td>
															<td align="center">
																<a href="#" border="0" style="border: none; line-height: 14px; color: #ffffff; font-family: Verdana, Geneva, sans-serif; font-size: 16px; text-transform: uppercase; font-weight: normal; overflow: hidden; margin:17px 0 0px 0; text-decoration: none;">О нас
																</a>
															</td>
															<td width="80" style="width: 8%;"></td>
														</tr>
														<tr><td colspan="3" height="10"></td></tr>							
													</tbody>
													</table>
												</div>

												<div style="display: inline-block; margin-left: -4px;">
													<table width="192" align="left" cellpadding="0" cellspacing="0" border="0" style="padding: 0; margin: 0; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="article">
													<tbody>
														<tr> <td colspan="3" height="40"></td> </tr>
														<tr>
															<td width="80" style="width: 8%;"></td>
															<td align="center">
																<a href="#" border="0" style="border: none; line-height: 14px; color: #ffffff; font-family: Verdana, Geneva, sans-serif; font-size: 16px; text-transform: uppercase; font-weight: normal; overflow: hidden; margin:17px 0 0px 0; text-decoration: none;">Артисты
																</a>
															</td>
															<td width="80" style="width: 8%;"></td>
														</tr>
														<tr><td colspan="3" height="10"></td></tr>					
													</tbody>
													</table>
												</div>

												<div style="display: inline-block; margin-left: -4px;">
													<table width="192" align="left" cellpadding="0" cellspacing="0" border="0" style="padding: 0; margin: 0; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="article">
													<tbody>
														<tr> <td colspan="3" height="40"></td> </tr>
														<tr>
															<td width="80" style="width: 8%;"></td>
															<td align="center">
																<a href="#" border="0" style="border: none; line-height: 14px; color: #ffffff; font-family: Verdana, Geneva, sans-serif; font-size: 16px; text-transform: uppercase; font-weight: normal; overflow: hidden; margin:17px 0 0px 0; text-decoration: none;">Букинг
																</a>
															</td>
															<td width="80" style="width: 8%;"></td>
														</tr>
														<tr><td colspan="3" height="10"></td></tr>						
													</tbody>
													</table>
												</div>

												<div style="display: inline-block; margin-left: -4px;">
													<table width="192" align="left" cellpadding="0" cellspacing="0" border="0" style="padding: 0; margin: 0; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="article">
													<tbody>
														<tr> <td colspan="3" height="40"></td> </tr>
														<tr>
															<td width="80" style="width: 8%;"></td>
															<td align="center">
																<a href="#" border="0" style="border: none; line-height: 14px; color: #ffffff; font-family: Verdana, Geneva, sans-serif; font-size: 16px; text-transform: uppercase; font-weight: normal; overflow: hidden; margin:17px 0 0px 0; text-decoration: none;">Блог
																</a>
															</td>
															<td width="80" style="width: 8%;"></td>
														</tr>
														<tr><td colspan="3" height="10"></td></tr>					
													</tbody>
													</table>
												</div>
                                              
                                                <div style="display: inline-block; margin-left: -4px;">
													<table width="192" align="left" cellpadding="0" cellspacing="0" border="0" style="padding: 0; margin: 0; mso-table-lspace:0pt; mso-table-rspace:0pt;" class="article">
													<tbody>
														<tr> <td colspan="3" height="40"></td> </tr>
														<tr>
															<td width="80" style="width: 8%;"></td>
															<td align="center">
																<a href="#" border="0" style="border: none; line-height: 14px; color: #ffffff; font-family: Verdana, Geneva, sans-serif; font-size: 16px; text-transform: uppercase; font-weight: normal; overflow: hidden; margin:17px 0 0px 0; text-decoration: none;">Контакты
																</a>
															</td>
															<td width="80" style="width: 8%;"></td>
														</tr>
														<tr><td colspan="3" height="10"></td></tr>					
													</tbody>
													</table>
												</div>
											</td>
										</tr>
										<tr> <td colspan="5" height="40"></td> </tr>
									</tbody>
								</table> <!-- End Navigation -->						
								
								<!-- Footer -->
								<table id="news__article" cellpadding="0" cellspacing="0" border="0" bgcolor="#242424" align="center" style="width: 100%; padding: 0; margin: 0; background-color: #242424">
									<tbody>
										<tr><td colspan="3" height="23"></td></tr>
										<tr>
											<td align="center">
												<div border="0" style="border: none; line-height: 14px; color: #727272; font-family: Verdana, Geneva, sans-serif; font-size: 16px;">
													2017 © 
												</div>
											</td>
										</tr>
										<tr><td colspan="3" height="23"></td></tr>
									</tbody>
								</table> <!-- End Footer -->
							</td>
						</tr>
					</tbody>
				</table>
			</div> <!-- End Old wrap -->
		</center> <!-- End Wrapper -->
	</div> <!-- End Mail.ru Wrapper -->
</body>

</html>

Ответ написан более трёх лет назад

1 комментарий

Скрыть каждый вторую картинку в блоки - jQuery?

HamSter @HamSter007

HTML/CSS верстальщик

Как вариант, можно обойтись без скриптов, используя один лишь css:

.card:nth-of-type(2n) img {
  display: none;
}

Если все же использовать jquery, то например так:

$('.card').each(function(i) {
    if(i%2){
      $(this).find('img').hide();
    }
});

jsbin

Ответ написан более трёх лет назад

Комментировать

Как вывести последнюю запись wordpress?

HamSter @HamSter007 Автор вопроса

HTML/CSS верстальщик

Помог WP_Query:

<?php 
  $args = array(
    'posts_per_page'      => 1,
    'orderby'          => 'post_date',
    'order'            => 'DESC',
    'post_type'        => 'post',
    'post_status'      => 'publish'
  ); 

  $query = new WP_Query( $args );
  if ( $query->have_posts() ) {
    while ( $query->have_posts() ) {
      $query->the_post(); ?>
        ...
   <?php } 
   wp_reset_postdata();
  } ?>

Но с wp_get_recent_posts все же загадка

Ответ написан более трёх лет назад

Комментировать

Войдите на сайт