{"id":921,"date":"2025-09-13T20:48:53","date_gmt":"2025-09-13T23:48:53","guid":{"rendered":"https:\/\/sergiodilu.com.br\/fotos\/?page_id=921"},"modified":"2025-09-14T22:51:08","modified_gmt":"2025-09-15T01:51:08","slug":"comeco","status":"publish","type":"page","link":"https:\/\/sergiodilu.com.br\/fotos\/comeco\/","title":{"rendered":"Come\u00e7o"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"921\" class=\"elementor elementor-921\">\n\t\t\t\t<div class=\"elementor-element elementor-element-eb8e14b e-flex e-con-boxed e-con e-parent\" data-id=\"eb8e14b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72714c7 elementor-widget elementor-widget-html\" data-id=\"72714c7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!doctype html>\r\n<html lang=\"pt-BR\">\r\n<head>\r\n<meta charset=\"utf-8\" \/>\r\n<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" \/>\r\n<title>Menu Circular - 20 Itens<\/title>\r\n<style>\r\n  :root{\r\n    --size: 600px;      \/* di\u00e2metro do c\u00edrculo *\/\r\n    --radius: calc(var(--size) \/ 2 - 60px); \/* dist\u00e2ncia do centro at\u00e9 o centro da imagem *\/\r\n    --item-size: 60px;  \/* tamanho da imagem *\/\r\n  }\r\n\r\n  body{\r\n    font-family: system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    height:100vh;\r\n    margin:0;\r\n    background:#f4f6f8;\r\n  }\r\n\r\n  .circle-wrap{\r\n    width:var(--size);\r\n    height:var(--size);\r\n    position:relative;\r\n    border-radius:50%;\r\n    display:block;\r\n    box-shadow: 0 6px 18px rgba(0,0,0,0.06);\r\n    background: linear-gradient(180deg, #fff, #fafafa);\r\n  }\r\n\r\n  \/* centro guia (opcional, para refer\u00eancia) *\/\r\n  .center-dot{\r\n    position:absolute;\r\n    left:50%;\r\n    top:50%;\r\n    transform:translate(-50%,-50%);\r\n    width:6px;height:6px;border-radius:50%;\r\n    background:#bbb;\r\n    opacity:0.35;\r\n  }\r\n\r\n  ul.menu{\r\n    list-style:none;\r\n    padding:0;\r\n    margin:0;\r\n    width:100%;height:100%;\r\n    position:relative;\r\n  }\r\n\r\n  ul.menu li{\r\n    --i: 0; \/* fallback *\/\r\n    position:absolute;\r\n    left:50%;\r\n    top:50%;\r\n    transform-origin: 0 0;\r\n    \/* o transform principal ser\u00e1 sobrescrito por nth-child *\/\r\n  }\r\n\r\n  \/* cada item \u00e9 um link com coluna: imagem em cima, legenda embaixo *\/\r\n  ul.menu a{\r\n    display:flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    flex-direction:column;\r\n    width: calc(var(--item-size));\r\n    text-decoration:none;\r\n    color:#222;\r\n    font-size:13px;\r\n    line-height:1.1;\r\n    text-align:center;\r\n    transform: translate(-50%, -50%);\r\n  }\r\n\r\n  ul.menu img{\r\n    width:var(--item-size);\r\n    height:var(--item-size);\r\n    object-fit:cover;\r\n    border-radius:8px;\r\n    display:block;\r\n    box-shadow: 0 4px 10px rgba(0,0,0,0.08);\r\n    background: #ddd;\r\n    margin-bottom:6px;\r\n  }\r\n\r\n  ul.menu .label{\r\n    display:block;\r\n    width: 90px; \/* largura para quebrar textos longos *\/\r\n    margin-top:0;\r\n  }\r\n\r\n  \/* Posicionamento dos 20 itens: cada nth-child recebe um \u00e2ngulo.\r\n     Cada regra: rotaciona o li em Ndeg e translada para o raio; ent\u00e3o\r\n     o conte\u00fado (a) \u00e9 contra-rotacionado para ficar leg\u00edvel. *\/\r\n\r\n  \/* c\u00e1lculo manual: passo = 360\/20 = 18deg *\/\r\n  ul.menu li:nth-child(1)  { transform: rotate(-90deg) translate(var(--radius)) rotate(90deg); }\r\n  ul.menu li:nth-child(2)  { transform: rotate(-72deg) translate(var(--radius)) rotate(72deg); }\r\n  ul.menu li:nth-child(3)  { transform: rotate(-54deg) translate(var(--radius)) rotate(54deg); }\r\n  ul.menu li:nth-child(4)  { transform: rotate(-36deg) translate(var(--radius)) rotate(36deg); }\r\n  ul.menu li:nth-child(5)  { transform: rotate(-18deg) translate(var(--radius)) rotate(18deg); }\r\n  ul.menu li:nth-child(6)  { transform: rotate(0deg)   translate(var(--radius)) rotate(0deg); }\r\n  ul.menu li:nth-child(7)  { transform: rotate(18deg)  translate(var(--radius)) rotate(-18deg); }\r\n  ul.menu li:nth-child(8)  { transform: rotate(36deg)  translate(var(--radius)) rotate(-36deg); }\r\n  ul.menu li:nth-child(9)  { transform: rotate(54deg)  translate(var(--radius)) rotate(-54deg); }\r\n  ul.menu li:nth-child(10) { transform: rotate(72deg)  translate(var(--radius)) rotate(-72deg); }\r\n  ul.menu li:nth-child(11) { transform: rotate(90deg)  translate(var(--radius)) rotate(-90deg); }\r\n  ul.menu li:nth-child(12) { transform: rotate(108deg) translate(var(--radius)) rotate(-108deg); }\r\n  ul.menu li:nth-child(13) { transform: rotate(126deg) translate(var(--radius)) rotate(-126deg); }\r\n  ul.menu li:nth-child(14) { transform: rotate(144deg) translate(var(--radius)) rotate(-144deg); }\r\n  ul.menu li:nth-child(15) { transform: rotate(162deg) translate(var(--radius)) rotate(-162deg); }\r\n  ul.menu li:nth-child(16) { transform: rotate(180deg) translate(var(--radius)) rotate(-180deg); }\r\n  ul.menu li:nth-child(17) { transform: rotate(198deg) translate(var(--radius)) rotate(-198deg); }\r\n  ul.menu li:nth-child(18) { transform: rotate(216deg) translate(var(--radius)) rotate(-216deg); }\r\n  ul.menu li:nth-child(19) { transform: rotate(234deg) translate(var(--radius)) rotate(-234deg); }\r\n  ul.menu li:nth-child(20) { transform: rotate(252deg) translate(var(--radius)) rotate(-252deg); }\r\n\r\n  \/* garantir que o link interno n\u00e3o herde rota\u00e7\u00e3o do li *\/\r\n  ul.menu li a { transform: translate(-50%, -50%) rotate(0deg); }\r\n\r\n  \/* responsivo: reduz tamanho em telas pequenas *\/\r\n  @media (max-width:520px){\r\n    :root{ --size:320px; --item-size:48px; --radius: calc(var(--size)\/2 - 48px); }\r\n    ul.menu .label{ width:70px; font-size:12px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"circle-wrap\" role=\"navigation\" aria-label=\"Menu circular com 20 itens\">\r\n  <div class=\"center-dot\" aria-hidden=\"true\"><\/div>\r\n\r\n  <ul class=\"menu\">\r\n    <!-- 20 itens -->\r\n    <li><a href=\"#\" title=\"Item 1\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=1\" alt=\"Item 1\"><span class=\"label\">Item 1<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 2\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=2\" alt=\"Item 2\"><span class=\"label\">Item 2<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 3\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=3\" alt=\"Item 3\"><span class=\"label\">Item 3<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 4\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=4\" alt=\"Item 4\"><span class=\"label\">Item 4<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 5\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=5\" alt=\"Item 5\"><span class=\"label\">Item 5<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 6\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=6\" alt=\"Item 6\"><span class=\"label\">Item 6<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 7\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=7\" alt=\"Item 7\"><span class=\"label\">Item 7<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 8\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=8\" alt=\"Item 8\"><span class=\"label\">Item 8<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 9\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=9\" alt=\"Item 9\"><span class=\"label\">Item 9<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 10\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=10\" alt=\"Item 10\"><span class=\"label\">Item 10<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 11\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=11\" alt=\"Item 11\"><span class=\"label\">Item 11<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 12\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=12\" alt=\"Item 12\"><span class=\"label\">Item 12<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 13\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=13\" alt=\"Item 13\"><span class=\"label\">Item 13<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 14\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=14\" alt=\"Item 14\"><span class=\"label\">Item 14<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 15\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=15\" alt=\"Item 15\"><span class=\"label\">Item 15<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 16\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=16\" alt=\"Item 16\"><span class=\"label\">Item 16<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 17\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=17\" alt=\"Item 17\"><span class=\"label\">Item 17<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 18\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=18\" alt=\"Item 18\"><span class=\"label\">Item 18<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 19\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=19\" alt=\"Item 19\"><span class=\"label\">Item 19<\/span><\/a><\/li>\r\n    <li><a href=\"#\" title=\"Item 20\"><img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/60?text=20\" alt=\"Item 20\"><span class=\"label\">Item 20<\/span><\/a><\/li>\r\n  <\/ul>\r\n<\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Menu Circular &#8211; 20 Itens Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 Item 10 Item 11 Item 12 Item 13 Item 14 Item 15 Item 16 Item 17 Item 18 Item 19 Item 20<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"","ocean_second_sidebar":"","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"","ocean_custom_header_template":"","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"","ocean_menu_typo_font_family":"","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"on","ocean_disable_heading":"on","ocean_post_title":"","ocean_post_subheading":"","ocean_post_title_style":"","ocean_post_title_background_color":"","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"default","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"","footnotes":""},"class_list":["post-921","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/pages\/921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/comments?post=921"}],"version-history":[{"count":97,"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/pages\/921\/revisions"}],"predecessor-version":[{"id":1046,"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/pages\/921\/revisions\/1046"}],"wp:attachment":[{"href":"https:\/\/sergiodilu.com.br\/fotos\/wp-json\/wp\/v2\/media?parent=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}