Ankhena

Надо разобраться, что именно не знаете?

Давайте так, Вы выкладываете свой код на https://jsfiddle.net/ и мы потом разбираемся с конкретными моментами. Так будет правильнее.

Коротко план:
1. <input type="text"><input type="image"> к первому инпуту placeholer и отступ, чтобы влез второй.

2. textarea и placeholder, тень

3. Дальше вроде все просто, border

Если прям точно нужны несколько карт и способ Сергей Вам не подходит,

то табы на CSS без JS:
inferusvv.ru/blog/css/14-taby-s-pomoschyu-css3.html

Логотип должен быть ссылкой на главную страницу сайта.
Поэтому:

Вариант 1:
Логотип, т.е. картинка с текстом это единое целое и текст в ней не должен быть текстом.
Значит в HTML это просто ссылка без анкора, у которой фон это картинка.

Вариант 2:
Если текст должен быть текстом.
Тоже самое, только в анкоре у ссылки нужны слова. Можно со спанами, если несколько слов или строк и они должны иметь разный вид.

Исхожу из идеи, что картинки в оформлении должны быть background'ами. С помощью img вставляю только картинки которые ими являются с семантической точки зрения.
И второе: городить поменьше тегов. Т.е. img оборачивать еще и в div (это если меня не слушать и вставлять логотип с помощью img) - это вообще лишнее действие для которого нет оснований.

htmlbook.ru/css/transition-timing-function
Там в середине расписаны все типы анимации, а еще пониже показаны.

ease
Анимация начинается медленно, затем ускоряется и к концу движения опять замедляется. Аналогично cubic-bezier(0.25,0.1,0.25,1).
ease-in
Анимация медленно начинается, к концу ускоряется. Аналогично cubic-bezier(0.42,0,1,1).
ease-out
Анимация начинается быстро, к концу замедляется. Аналогично cubic-bezier(0,0,0.58,1).
ease-in-out
Анимация начинается и заканчивается медленно. Аналогично cubic-bezier(0.42,0,0.58,1).
linear
Одинаковая скорость от начала и до конца.
step-start
Как таковой анимации нет. Стилевые свойства сразу же принимают конечное значение.
step-end
Как таковой анимации нет. Стилевые свойства находятся в начальном значении заданное время, затем сразу же принимают конечное значение.
steps
Ступенчатая функция, имеющая заданное число шагов.
transition-timing-function: steps(<число>, start | end)

Здесь: <число> — целое число больше нуля; start — задаёт полунепрерывную снизу функцию; end — задаёт полунепрерывную сверху функцию.
cubic-bezier
Задаёт функцию движения в виде кривой Безье.

Обычные чекбоксы рядом с которыми стоят картинки. У чекбоксов свои value с ценой. Получаете value, прибавляете к сумме.

Причем, в примере, эти картинки даже не стоят в label, что дико.

Фильтрами типа

filter: grayscale(0.7);
filter: saturate(20%);
filter: brightness(2);

и их комбинациями
не получится решить?

Просто кода нет, примера что и как надо затемнить тоже, приходится гадать

Нужно ли рисовать мобильную версию:
зависит от
- дизайна
- содержимого
- квалификации дизайнера
- квалификации верстальщика (и возможно сотрудничества дизайнера, чтобы дорисовать какие-то иконки/мелочевки по требованию верстальщика)
- аудитории сайта и % пользователей с мобильников

Делать ли отдельную мобильную версию:
- если контент существенно отличается - ДА
- если нет или скрыты лишь некоторые несущественные блоки - делать адаптивный

Бутстрап
- зло :)

Без контекста не понятно что они имели в виду.

1. Все элементы на которые может захотеться кликнуть должны быть кликабельными - ДА

2.1 Тыкать для совершения каких-то действий можно только на <a> - НЕТ

2.2. Все кликабельное нужно делать с помощью <a> - НЕТ

Портфолио - это Ваши работы. Что потом с ними сделал заказчик это уже отдельная история.

Иногда выкладываю в портфолио варианты, которые заказчик не принял или заставил переделать в соответствии со своими представлениями. Или несколько вариантов, которые были предложены.

Но (!) в договоре есть строчка, что имею право выкладывать работы в портфолио.
Если заказчик заранее попросил этого не делать, то естественно такие работы никуда не идут.

Еще может быть несколько типов портфолио: публичное и приватное. Т.е. то, что лежит в открытом доступе или то, что показываю при встрече или по запросу.

При необходимости делаю так:

function setEqualHeight(columns){
	var tallestcolumn = 0;
    columns.each(function(){
		currentHeight = $(this).height();
        if(currentHeight > tallestcolumn){
			tallestcolumn = currentHeight;
        }
    });
    columns.height(tallestcolumn);
}

setEqualHeight($(".blocks"));  /*делаем блоки одинаковой высоты*/

p.s. но теперь (2020) для этого есть гриды.

1. Просить портфолио.
2. Например, на fl.ru есть безопасная сделка с арбитражем.
3. Удаленка не отменяет договоров. С нашей почтой это не быстро, но тем не менее, Вы же планируете постоянное сотрудничество. В скайпе можно показать паспорт.
4. Тестовое задание - ну тут кто как. О том, что работа будет постоянная это только Ваши слова ничем не подтвержденные. (Это взгляд со стороны сотрудника) Поэтому делать просто так тесты при наличии портфолио не хочется, точно также как и работать без 50% предоплаты.
Тесты с бОльшим рвением будут делать молодые или очень голодные верстальщики. (Это взгляд со стороны нанимателя)

Лучше так: https://codepen.io/anon/pen/mEqKox

большому блоку задать max-width и display:inline-block - тогда не будет пустого места, если маленьких блоков мало.