Jump to content
Sign in to follow this  
Stackand

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

Recommended Posts

Добрый день!

Добрый день!

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
20 минут назад, AWARO сказал:

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.