Доработки карточки товара (описания с CSS ) Tech-Store 2.3

[Stackand]

Добрый день!

Добрый день!

Я делаю карточку товара (красивое описание со всеми возможностями CSS) но учитывая то как я в этом разбираюсь, выходит не очень.

Потому я обращаюсь к вам, за платной помощью в организации красивой карточки.

Итак, вот ссылка на товар, в котором я пробую сделать это описание: http://test.audiosources.com.ua/shtatna-magnitola-audiosources-t90-610a-skoda

Моя идея заключаеться в том, что бы сделать это все блоками отдельно, я их запихнул в контейнеры, поставил им определнные флоаты, но не все вышло как я хотел.

Моя задача стоит в том, что бы поставить все эти блоки в какой-то светлосиний градиент,  и правильно записать все что нужно в css, с учетом того как стили работают в шаблоне, потому что я просто добавил CSS в конце страницы.

Спойлер

 

На данный момент есть такое:

01	<style type="text/css">h3 {

02	font-size:24px; color:#e7e8e8; font-weight: bold}

03

h4 {

04	font-size:15px; color:#e7e8e8; font-weight: bold} p {text-align: justify; margin-left: 10px; margin-right: 10px}

05

06

07

08

09	.container1 {

10	height: 100%;

11	min-height: 300px;

12	width: 100%;

13	text-align: center;

14	background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%);

15

}

16	.container1:hover {

17	background-position: right center;

18

}

19

20

21

22

23

24

25

26	.container2

27

{

28

29	width: 100%;

30	text-align: center;

31	background: rgb(1,0,10);

32	background: linear-gradient(90deg, rgba(1,0,10,0.3) 27%, rgba(45,121,9,0.3) 68%), url(https://st3.depositphotos.com/1002997/17867/i/1600/depositphotos_178675890-stock-photo-skoda-logo.jpg);

33

}

34

35

36

37

.card3 {

38

39	padding: 5px;

40	width: 100%;

41	min-height: 280px;

42

43

44

}

45

46

.text {

47	margin-top: 20px;

48	padding: 20px;

49

50

51

}

52

.left {

53	float: left;

54	position: center;

55	padding: 20px;

56	width: 100%;

57	max-width: 450px;

58

59

60

}

61

62

.left2 {

63	float: left;

64	position: center;

65	padding: 20px;

66	width: 100%;

67	max-width: 450px;

68

69

}

70

.right {

71	float: right;

72	padding: 20px;

73	width: 100%;

74	max-width: 450px;

75

76

}

77

</style>

 

 

Оно работает, но я чувствую что оно может не совсем правильно взаимодейстовать с CSS который встроен в шаблон.

Потому задача №1 - это встроить это правильно, так как нужно подстроить под ваш шаблон. Есть же приоритность обработки стилей, вначале активируються те что есть в шаблоне, а потом мои. Вобщем нужно встроить их правильно. Я думаю, лучше вас никто не знает как их интегрировать в ваш шаблон. 

Задача №2 - доработать немного стиль этой карточки товара. 

Что бы я хотел доработать? 

1. Правильно интегрировать все в ваш шаблон.

2. http://prntscr.com/oyn5pn сделать выравнивание картинок в блоке по центру. Если это не возможно, я просто переделаю картинки на большую ширину, так что б выглядело хорошо.

3. Градиенты блоков - мне нужно сделать в светлосинем цвете, переходящим в белый.

4. http://prntscr.com/oyn6k1 в этом блоке сделать на фоновом зеленом градиенте, с логотипом ШКОДА

5. Так что б все тексты читались на фоне этих полупрозрачных градиентах.

[HyperLabTeam]

сверстать балванку и дублировать (это если во всех КТ будут одиноково)

[Stackand]

20 минут назад, AWARO сказал:

сверстать балванку и дублировать (это если во всех КТ будут одиноково)

Ну вот ее надо сверстать