K G

Пробежись по курсам(и купи подписку на пару месяцев, не жлобись) htmlacademy и codacademy. Врубишься НЕ в табличную верстку и даже во флексбоксы. Подпишись на рассылку html академии, они присылают вместе с новостями по 3 макета для верстки или найди любые макеты в инете. Сверстай, выкладывай ход работы на GitHub, заодно будет тебе портфолио. Добавляй к голому html/css препроцессоры LESS/SASS, методологии BEM/SMACSS/OOCSS, Gulp, научись с svg немного работать, можно так же подтянуть будет Pug(раньше Jade).
Ничто не мешает тебе работать из твоего города на фрилансе(рекомендую сначала русскоязычные биржи типа fl, фрилансим), но можешь походить по собеседованиям у себя в городе, расспроси только про стек технологий. И Москва у нас в стране не единственный крупный город, там уже сам смотри. И удаленную фулл-тайм работу на компанию так же никто не отменял.

У тебя не правильный путь к картинке 100%.
Покажи структуру каталогов и путь, который ты прописал.

Дополнил скрипт Виктор Виктор следующим кодом:

$(document).mouseup(function (e) {
    var popupblock= $(".popup-block");
    if (popupblock.has(e.target).length === 0){
        popupblock.hide();
    }
});

Все прекрасно работает, всем спасибо

а использовать переменную в препроцессоре в случае с цветом, не?
И ваша идея с классами для css свойств - это полный пизд**ц!
Забудьте об этом навсегда и удалите отсюда вопрос.

Если ширину контейнера знаешь, то посчитай, если нет сделай просто в процентах. Еще вариант сделай на flexbox, если древние браузеры не требуются.
А во втором на родителя text-align:center и position:relative, а кружок позиционируй абсолютно уже, будет считать от родителя.

BohdanK Спасибо за помощь, но у меня 5 разных диаграмм с разными ID, как в таком случае сделать? в условие вместо одной запихнуть 5? Так вроде не работает, да и переменная у нас вверху только одна объявлена

В данный момент код такой

var circle_viewed = false;  // Вспомогательная переменная
    var circle_scroll = $('#perc1');     // Класс самой диаграммы
    var offset = circle_scroll.offset(); // Расстояние в пикселях до самой диаграммы от верха страницы 

$(window).scroll(function(){
        if ((($(document).scrollTop()) > ((parseFloat(offset.top)) - parseFloat($(window).height()))) && (!(circle_viewed ))) { //если страница прокручена то проверяем докрутили ли мы до самой диаграммы
            $('#perc1').circleProgress({
				value: 0.10,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(10 * progress));
			});
			$('#perc2').circleProgress({
				value: 0.15,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(15 * progress));
			});
			$('#perc3').circleProgress({
				value: 0.25,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(25 * progress));
			});
			$('#perc4').circleProgress({
				value: 0.25,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(25 * progress));
			});
			$('#perc5').circleProgress({
				value: 0.55,
				size: 105,
				fill: {
					color: "#ed9c10"
				},
				emptyFill: "rgba(215, 217, 216, .4)"
			}).on('circle-animation-progress', function (event, progress) {
				$(this).find('strong').html(parseInt(50 * progress));
			});

            circle_viewed = true;
});

P.S. Использую бутстраповскую сетку, вот на xs экранах все резинится, и текст как нужно переностится и изображения растягиваются, а на остальных экранах горизонтальный скролл и изображениям пофиг (хотя у них есть класс img-responsive). Может как-то криво использую этот бутстрап? Кроме сетки и респонсив фич ничего не использую.

Sergey Что здесь не так сверстано?

<body>
<div class="row">

<section class="sidebar col-md-3">
 </section>

<main class="page-main col-md-9">
</main>

</div>
</body>

Реализовано все правильно, во всех браузерах все прекрасно работает, это не код.