0% found this document useful (0 votes)
17 views

Roundup Css

The document contains CSS code for styling product review elements like ratings, pros and cons lists, and a product item list. It styles elements like setting widths, floats, fonts sizes, and colors. It also includes media queries to adjust the styling for smaller screens.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
17 views

Roundup Css

The document contains CSS code for styling product review elements like ratings, pros and cons lists, and a product item list. It styles elements like setting widths, floats, fonts sizes, and colors. It also includes media queries to adjust the styling for smaller screens.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<style>.Product_Image,.Product_Pros,.Product_Title,.prod_img{width:100%}.

Product_Le
ft{float:left;width:35%;height:100%;padding-
right:23px}.Product_Rating{width:100%;font-weight:bold; min-height:50px;margin-
top:10px}.CTA_Button,.Product_CTA{width:100%;margin-
top:15px}.Product_Main_rating{width:100%;height:35px;line-
height:25px}.Product_Feature_Rank,.Read_All_Reviews{width:100%;display:inline-
table; min-height:25px}.Product_CTA{min-height:50px;text-
align:center}.CTA_Button{min-
height:25px}.Product_Right{float:right;width:65%;height:100%}.Product_Text{width:10
0%;min-height:220px;display:flex}.Cons_Title,.Pros_Title{width:100%;min-
height:25px;font-weight:700}.Pros{font-size: 14px;margin-top: 5px;}.Cons{font-size:
14px;margin-top: 5px;}.Product_Cons{width:100%;margin-top:29px}.stars-
rating,.stars-rating-main{--stars-width:calc(var(--star) * 5);--stars-height:var(--
star);--gap:calc(var(--star) / 100);--rating:0;--rating-width:calc((var(--gap) *
var(--rating)) + (var(--star) * var(--rating)) );position:relative;background-
image:url("data:image/svg+xml,%3Csvg width='328' height='64' viewBox='0 0 328 64'
fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 0L39.1844
22.1115H62.4338L43.6247 35.7771L50.8091 57.8885L32 44.2229L13.1909 57.8885L20.3753
35.7771L1.56619 22.1115H24.8156L32 0Z' fill='%23C4C4C4'/%3E%3Cpath d='M98 0L105.184
22.1115H128.434L109.625 35.7771L116.809 57.8885L98 44.2229L79.1909 57.8885L86.3753
35.7771L67.5662 22.1115H90.8156L98 0Z' fill='%23C4C4C4'/%3E%3Cpath d='M164
0L171.184 22.1115H194.434L175.625 35.7771L182.809 57.8885L164 44.2229L145.191
57.8885L152.375 35.7771L133.566 22.1115H156.816L164 0Z' fill='%23C4C4C4'/%3E%3Cpath
d='M230 0L237.184 22.1115H260.434L241.625 35.7771L248.809 57.8885L230
44.2229L211.191 57.8885L218.375 35.7771L199.566 22.1115H222.816L230 0Z'
fill='%23C4C4C4'/%3E%3Cpath d='M296 0L303.184 22.1115H326.434L307.625
35.7771L314.809 57.8885L296 44.2229L277.191 57.8885L284.375 35.7771L265.566
22.1115H288.816L296 0Z' fill='%23C4C4C4'/%3E%3C/svg%3E%0A");width:var(--stars-
width)}.main_rating_num{font-size:14px;float:right;padding-
right:6px}.main_raiting_count{font-size:14px}.feature_rank_title{font-
size:12px}.feature_rank_number{font-size:12px;float:right;padding-
right:6px}.one_feaure_rank{line-height:25px;height:30px}.rating,.stars-
rating,.stars-rating-main{background-repeat:no-repeat;background-size:var(--stars-
width) auto;height:var(--stars-height)}.CTA_Button_mobile{display:none}.stars-
rating{--star:14px;display:inline-block}.stars-rating-main{--
star:19px;display:inline-
block}.rating{position:absolute;overflow:hidden;transform:translate(0,0);background
-image:url("data:image/svg+xml,%3Csvg width='1030' height='186' viewBox='0 0 1030
186' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M93 0L113.88
64.2614H181.448L126.784 103.977L147.664 168.239L93 128.523L38.336 168.239L59.2158
103.977L4.55174 64.2614H72.1202L93 0Z' fill='gold'/%3E%3Cpath d='M304 0L324.88
64.2614H392.448L337.784 103.977L358.664 168.239L304 128.523L249.336 168.239L270.216
103.977L215.552 64.2614H283.12L304 0Z' fill='gold'/%3E%3Cpath d='M515 0L535.88
64.2614H603.448L548.784 103.977L569.664 168.239L515 128.523L460.336 168.239L481.216
103.977L426.552 64.2614H494.12L515 0Z' fill='gold'/%3E%3Cpath d='M726 0L746.88
64.2614H814.448L759.784 103.977L780.664 168.239L726 128.523L671.336 168.239L692.216
103.977L637.552 64.2614H705.12L726 0Z' fill='gold'/%3E%3Cpath d='M937 0L957.88
64.2614H1025.45L970.784 103.977L991.664 168.239L937 128.523L882.336 168.239L903.216
103.977L848.552 64.2614H916.12L937 0Z' fill='gold'/%3E%3C/svg%3E%0A");width:var(--
rating-
width)}.one_prod_item,.products_list{width:100%;float:left}.container_roundup
ul{margin:0;padding:0}.container_roundup ul li{list-style-type: none;counter-
increment: item;list-style-position: inside;padding: 0px 0 2px 36px;text-indent: -
2.3em;margin-left: -4px;}.container_roundup ul
li:before{content:counter(item);margin-right:10px;font-size:80%;background-
color:#2e2e30;color:#fff;font-weight:700;padding:3px 8px;border-
radius:3px}.one_prod_item{height:72px;border-bottom:1px solid #6c6a5c;margin-
top:10px}.one_prod_item:last-child{width:100%;float:left;height:72px;border-
bottom:none;margin-top:10px}.prod_item_list_img{float:left;margin-
right:10px;height:60px;width:60px}.prod_item_list_texts{float:left;width:58%;margin
-left:10px}.prod_item_list_bt{float:left;width:30%;text-align:right;margin-
top:8px}.prod_item_list_title{font-size:14px;font-
weight:700;overflow:hidden;display:inline-block;text-overflow:ellipsis;white-
space:nowrap;width:93%}.prod_item_list_title a{color:inherit}.Product_Rating
p,.one_prod_item p{all:unset}@media only screen and (max-width:768px)
{.Product_Left,.Product_Right{all:unset}.Product_Rating,.Product_Right{margin-
top:15px}.feature_rank_number,.feature_rank_title{font-
size:14px}.CTA_Button,.prod_item_list_bt{display:none}.CTA_Button_mobile{display:bl
ock;text-align:center;margin-top:25px}.prod_item_list_texts{width:75%!
important}}</style>

You might also like