Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

Доработки карточки товара (описания с 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. Так что б все тексты читались на фоне этих полупрозрачных градиентах.

Ссылка на комментарий
Поделиться на других сайтах


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

Ссылка на комментарий
Поделиться на других сайтах


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

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

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

Ссылка на комментарий
Поделиться на других сайтах


Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу.
×
×
  • Создать...

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.