system
You are an assistant that generates WordPress patterns.
user
Sử dụng cột và nền để mô phỏng thanh tiến trình, tiến độ hiện tại có thể được thay đổi trong gradient nền của cột
assistant
<!-- wp:group {"metadata":{"name":"Skills section with image and percentage bars"},"align":"full","style":{"color":{"background":"#f7f7f7"},"spacing":{"padding":{"top":"40px","bottom":"40px"}}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#f7f7f7;padding-top:40px;padding-bottom:40px"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":{"top":"0px","left":"0px"}}}} -->
<div class="wp-block-columns" style="margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"verticalAlignment":"center","width":"40%","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"0px"}},"layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;flex-basis:40%"><!-- wp:cover {"url":"https://crimsonblocks.local/wp-content/uploads/2024/03/Ulises.Freitas.Me_.Square.512.png","id":591,"hasParallax":true,"dimRatio":30,"minHeight":100,"minHeightUnit":"vh","align":"center","style":{"color":[]},"layout":{"type":"constrained","contentSize":"100%"}} -->
<div class="wp-block-cover aligncenter has-parallax" style="min-height:100vh"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span><div class="wp-block-cover__image-background wp-image-591 has-parallax" style="background-position:50% 50%;background-image:url(https://crimsonblocks.local/wp-content/uploads/2024/03/Ulises.Freitas.Me_.Square.512.png)"></div><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Viết tiêu đề…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Ulises</strong> Frietas</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"center","width":"60%","style":{"spacing":{"padding":{"top":"0","right":"10px","bottom":"0","left":"10px"},"blockGap":"0px"}}} -->
<div class="wp-block-column is-vertically-aligned-center" style="padding-top:0;padding-right:10px;padding-bottom:0;padding-left:10px;flex-basis:60%"><!-- wp:group {"metadata":{"name":"Description"},"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"},"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"10px","right":"0px","bottom":"20px","left":"0px"}}},"fontSize":"large"} -->
<h2 class="wp-block-heading has-large-font-size" style="margin-top:10px;margin-right:0px;margin-bottom:20px;margin-left:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;font-style:normal;font-weight:700;text-transform:capitalize">15 năm tạo ra các trang web</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Tôi là một nhà phát triển WordPress đầy đam mê với 15 năm kinh nghiệm trong việc xây dựng các trang web vừa đẹp mắt vừa dễ sử dụng.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Status bar"},"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","orientation":"horizontal","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>wordpress</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>100%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"cyan-bluish-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-cyan-bluish-gray-background-color has-background"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":{"top":"0px","left":"0px"}},"color":{"gradient":"linear-gradient(90deg,rgb(70,55,55) 100%,rgb(221,221,221) 100%)"}}} -->
<div class="wp-block-columns has-background" style="background:linear-gradient(90deg,rgb(70,55,55) 100%,rgb(221,221,221) 100%);margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"","style":{"border":{"width":"0px","style":"none"}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px"><!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Status bar"},"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>CSS</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>95%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"cyan-bluish-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-cyan-bluish-gray-background-color has-background"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":{"top":"0px","left":"0px"}},"color":{"gradient":"linear-gradient(90deg,rgb(70,55,55) 90%,rgb(221,221,221) 90%)"}}} -->
<div class="wp-block-columns has-background" style="background:linear-gradient(90deg,rgb(70,55,55) 90%,rgb(221,221,221) 90%);margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"","style":{"border":{"width":"0px","style":"none"}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px"><!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Status bar"},"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>jQuery</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>85%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"cyan-bluish-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-cyan-bluish-gray-background-color has-background"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":{"top":"0px","left":"0px"}},"color":{"gradient":"linear-gradient(90deg,rgb(0,0,0) 82%,rgb(221,221,221) 82%)"}}} -->
<div class="wp-block-columns has-background" style="background:linear-gradient(90deg,rgb(0,0,0) 82%,rgb(221,221,221) 82%);margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"","style":{"border":{"width":"0px","style":"none"}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px"><!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->

<!-- wp:group {"metadata":{"name":"Status bar"},"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>WPO</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>97%</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:group {"backgroundColor":"cyan-bluish-gray","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-cyan-bluish-gray-background-color has-background"><!-- wp:columns {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"margin":{"top":"0px","bottom":"0px"},"blockGap":{"top":"0px","left":"0px"}},"color":{"gradient":"linear-gradient(90deg,rgb(0,0,0) 96%,rgb(221,221,221) 96%)"}}} -->
<div class="wp-block-columns has-background" style="background:linear-gradient(90deg,rgb(0,0,0) 96%,rgb(221,221,221) 96%);margin-top:0px;margin-bottom:0px;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:column {"width":"","style":{"border":{"width":"0px","style":"none"}}} -->
<div class="wp-block-column" style="border-style:none;border-width:0px"><!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

<!-- wp:spacer {"height":"10px"} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->