我正在为作业编写一个页面，导航栏中包含三个部分：业务计划、关于我们和联系我们。我有来自 codepen 的导航栏，并且我正在学习标签和单选输入，以具有可单击的按钮，当您单击它们时，这些按钮将显示和隐藏元素。然而，由于我仍在学习，我很难让导航栏按钮与该功能一起使用，同时保持 CSS 样式
我该怎么做？我从根本上做错了什么？
这是我的代码。我试图让按钮具有该功能，但如果我尝试将我的 div 放在那里，它从根本上破坏了布局（它填充了标题导航内的业务计划部分）
这是最接近我想要的，但我最终有两个导航栏，而具有我想要的视觉样式的导航栏并不是真正有效的
HTML：
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIME Design de Serviço</title>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<div class="banner-outer">
<div class="banner-inner responsive-wrapper">
<!-- Placeholder logo in SVG format -->
<div class="logo-wrapper">
<div class="white-square"></div>
<div class="pastel-square"></div>
<img src="logo.svg" class="logo fade-out" alt="Company Logo">
</div>
<!-- End of placeholder logo -->
</div>
</div>
<header class="header-outer">
<div class="header-inner responsive-wrapper">
<div class="header-logo">
<img src="logo2.svg" />
</div>
<nav class="header-navigation">
<a href="#missao">Plano de Negócios</a>
<a href="#ameacas_oportunidades">Localização</a>
<a href="#pontos_fracos">Contato</a>
</nav>
</div>
</header>
<main>
<nav class="header-navigation">
<label class="collapse" for="about-us">Sobre nós</label>
<input id="about-us" type="radio" name="navigation" checked>
<div class="about-us-section">
<!-- Content for "About Us" section with Google Maps map -->
<!-- Replace this with your Google Maps embed code -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d248789.81007519642!2d-0.24168169117477634!3d51.52877184119049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604e9773e46e5%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2suk!4v1647455567883!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<label class="collapse" for="contact-us">Contato</label>
<input id="contact-us" type="radio" name="navigation">
<div class="contact-us-section">
<!-- Content for "Contact Us" section with contact information and "Join Us" ad block -->
<div class="content">
<h2>Contato</h2>
<div class="contact-info">
<p><strong>Endereço:</strong> Rua Exemplo, 1234 - Cidade, Estado</p>
<p><strong>Telefone:</strong> (123) 456-7890</p>
<p><strong>Email:</strong> [email protected]</p>
</div>
<div class="join-us">
<h3>Junte-se a nós!</h3>
<p>Estamos sempre em busca de talentos. Envie seu currículo para [email protected].</p>
<!-- Replace this with your "Join Us" ad block content -->
<img src="join-us-image.jpg" alt="Join Us Image">
</div>
</div>
</div>
<label class="collapse" for="business-plan">Plano de Negócios</label>
<input id="business-plan" type="radio" name="navigation">
<div class="business-plan-section">
<section id="missao" class="section missao">
<div class="content">
<h2>Missão e Objetivos Estratégicos</h2>
<p>A missão da TIME Design de Serviço é revitalizar a estrutura e a qualidade dos serviços prestados por empresas na região, melhorando as relações e a satisfação dos clientes e do ambiente de trabalho. Nossos objetivos estratégicos incluem a otimização do fluxo de informação, aprimoramento da experiência do usuário e a criação de um ambiente de trabalho mais positivo e produtivo.</p>
</div>
</section>
<section id="ameacas_oportunidades" class="section ameacas">
<div class="content">
<h2>Ameaças e Oportunidades</h2>
<p>As ameaças incluem a resistência das empresas conservadoras à mudança e a concorrência de outras empresas de consultoria. No entanto, as oportunidades são vastas, pois muitas empresas estão buscando melhorias em seus processos e estão abertas a novas abordagens que possam otimizar seus negócios, aumentar sua competitividade e oferecer soluções inovadoras e personalizadas para as necessidades específicas de cada cliente.</p>
</div>
</section>
<section id="pontos_fortes" class="section pontosfortes">
<div class="content">
<h2>Pontos Fortes</h2>
<p>A TIME Design de Serviço destaca-se pela sua abordagem centrada no cliente e na melhoria da experiência do usuário, além da expertise de sua equipe em identificar e implementar soluções eficazes para otimizar os processos de trabalho das empresas com análise detalhada dos processos, prototipagem rápida e estratégias de melhoria do ambiente de trabalho.</p>
</div>
</section>
<section id="pontos_fracos" class="section pontosfracos">
<div class="content">
<h2>Pontos Fracos</h2>
<p>Os pontos fracos incluem a necessidade de enfrentar a resistência à mudança por parte de algumas empresas e a dependência da economia regional, a possibilidade da dependência de um modelo de negócios baseado em consultoria poder limitar a capacidade de escalar rapidamente, e a possibilidade da empresa enfrentar desafios para atrair clientes em um mercado competitivo.</p>
</div>
</section>
<section id="descricao_produto" class="section descricao">
<div class="content">
<h2>Descrição do Produto/Serviço</h2>
<p>O serviço que a empresa oferece é uma melhoria na estrutura de trabalho das empresas, otimizando o fluxo de informações e melhorando a experiência do usuário, não só dos clientes da empresa, por meio de melhorias na qualidade do serviço prestado, mas também melhorando a experiência do usuário que trabalha na empresa, tornando-a um lugar melhor para se trabalhar. Um período de imersão é feito pelos pesquisadores da TIME na empresa que está sendo estudada, onde cada processo de trabalho e tarefa é entendido e analisado para ver áreas de melhoria, sistemas, fluxogramas, planilhas que podem ser desenvolvidos para eles pela TIME, ciclos de informação que podem ser automatizados e assim economizar minutos, até horas e dias de trabalho. Durante essa imersão, a TIME também oferece Happy Hours para obter noções acerca das dinâmicas sociais dos funcionários, bem como para inicializar processos de melhorias na atmosfera emocional do local de trabalho.</p>
</div>
</section>
<section id="foco_negocio" class="section foco">
<div class="content">
<h2>Foco do Negócio</h2>
<p>O foco da TIME Design de Serviço está em ajudar empresas de serviços a otimizar suas operações, melhorar a satisfação do cliente e criar um ambiente de trabalho mais positivo e produtivo para seus funcionários. Empresas de comércio podem ter suas operações otimizadas, mas empresas de prestação de serviços podem se beneficiar mais diretamente da carga horária de trabalho reduzida.</p>
</div>
</section>
<section id="diferenciais_produtos" class="section diferenciais">
<div class="content">
<h2>Diferenciais dos Produtos/Serviços</h2>
<p>Nosso diferencial está na combinação de consultoria especializada em serviço com intervenções práticas e expertise técnica em design de serviço, com imersão detalhada nas empresas-cliente, prototipagem rápida e eventos de integração, e a oferta de soluções personalizadas e inovadoras para atender às necessidades específicas de cada cliente.</p>
</div>
</section>
<section id="estrategias_venda" class="section estrategias">
<div class="content">
<h2>Estratégias de Venda/Marketing</h2>
<p>As estratégias de venda e marketing da TIME Design de Serviço serão conduzidas principalmente por meio das redes sociais e visitas direcionadas às empresas-alvo. Ofereceremos uma consulta gratuita, pesquisa e happy hour, onde a TIME desenvolverá um protótipo de solução para os desafios imediatos enfrentados pela empresa em seu pipeline de execução. Isso nos permite demonstrar o valor de nossos serviços e conquistar a confiança das empresas interessadas em melhorar suas operações.</p>
</div>
</section>
</div>
</nav>
</main>
<footer>
<div class="container">
<p>© 2024 TIME Design de Serviço. Todos os direitos reservados.</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
样式.css：
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #f9f7f0;
color: #333333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background-color: #000000;
color: #ffffff;
}
.logo {
font-family: 'Montserrat', sans-serif;
font-size: 48px;
margin: 5px 0 0 -156px;
color: #ffffff;
height: 330px;
filter: invert(4%) sepia(44%) saturate(3197%) hue-rotate(239deg) brightness(89%) contrast(92%);
}
.subtitle {
font-size: 32px;
margin: 0;
color: #ffffff;
}
nav ul {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
nav ul li {
display: inline;
margin: 0 20px;
}
nav ul li a {
color: #ffffff;
text-decoration: none;
font-size: 18px;
}
nav ul li a:hover {
color: #d4a255;
}
main {
padding: 20px 0;
}
.section {
position: relative;
margin-bottom: 40px;
background-size: cover;
background-position: center;
color: #333333;
}
.section:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(255, 199, 95, 0.7), rgba(255, 199, 95, 255));
}
.content {
padding: 40px 40px 25px 40px;
position: relative;
z-index: 1;
min-height: 350px;
/*! display: flex; */
}
h2 {
font-size: 36px;
margin: 0 0 20px;
/*! text-align: center; */
/*! min-width: 532px; */
}
p {
font-size: 18px;
/*! margin: -9px; */
margin-block-start: 101px;
/*! margin-block-end: -21px; */
/*! align-content: end; */
/*! align-self: end; */
/*! display: flex; */
align-self: flex-end;
}
footer {
background-color: #f9f7f0;
padding: 20px 0;
color: #333333;
text-align: center;
}
footer p {
margin: 0;
font-size: 16px;
}
/* Background images for each section */
.missao {
background-image: url('missao.webp'); /* Placeholder address for Missão section */
}
.ameacas {
background-image: url('ameacas.webp');
background-position-y: -200px;
}
.pontosfortes {
background-image: url('pontosfortes.jpeg');
background-position-y: -121px;
background-position-x: 81px;
}
.pontosfracos {
background-image: url('pontosfracos.webp');
background-position-y: -126px
}
.descricao {
background-image: url('descricao.webp');
background-position-y: -174px;
}
.foco {
background-image: url('foco.webp');
background-position-y: -37px;
}
.diferenciais {
background-image: url('diferenciais.webp');
background-position-y: -37px;
}
.estrategias {
background-image: url('estrategias.jpeg');
background-position-y: -348px;
}
/* Add more section classes with background images as needed */
.logo-wrapper {
animation: fadeIn 0.5s forwards;
}
.logo-wrapper.fade-out {
animation: fadeOut 0.5s forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/* Detect scroll event and apply fade-out animation */
body.scrolled-down .logo-wrapper {
animation: fadeOut 0.5s forwards;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.white-square {
position: absolute;
bottom: -79px;
left: 23px;
width: 76%;
height: 180px;
background-color: white;
opacity: 1;
transition: opacity 0.5s;
}
.fade-out .white-square {
opacity: 0;
}
.pastel-square {
position: absolute;
left: 20px;
width: 24%;
height: 135px;
background-color: #fdc8b0;
opacity: 1;
transition: opacity 0.5s;
bottom: -33px;
}
.fade-out .white-square {
opacity: 0;
}
.logobox {
position: relative;
}
.collapse {
cursor: pointer;
display: block;
font-size: 1.125rem;
color: #000000;
text-decoration: none;
}
.collapse + input {
display: none; /* hide the radio inputs */
}
.collapse + input + div {
display: none;
}
.collapse + input:checked + div {
display: block;
}
/* Additional styling for each section */
.about-us-section,
.contact-us-section,
.business-plan-section {
margin-top: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
styles2.css
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
/* Banner */
--banner-outer-height: 100vh;
--banner-inner-height: 5vh;
--banner-height-difference: calc(
var(--banner-outer-height) - var(--banner-inner-height)
);
--banner-bg: #ffc75f;
/* Header */
--header-outer-height: 110px;
--header-inner-height: 70px;
--header-bg: #FFF;
}
body {
font-family: "DM Sans", sans-serif;
background-color: #f2f5f7;
line-height: 1.5;
min-height: 300vh;
position: relative;
}
a {
color: inherit;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
/* Sticky banner */
.banner-outer {
/* Make it stick */
height: var(--banner-outer-height);
position: sticky;
top: calc(var(--banner-height-difference) * -1); /* Multiply by -1 to get a negative value */
display: flex;
align-items: center;
/* Other */
background-color: var(--banner-bg);
z-index: 2;
background-image: url(headerbackground.jpg);
background-size: 144%;
background-position-x: -151px;
}
.banner-outer:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(255, 199, 95, 0.5), rgba(255, 199, 95, 255));
}
.banner-inner {
/* Make it stick */
height: var(--banner-inner-height);
position: sticky;
top: 0;
/* Other */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.25;
z-index: 2;
}
.header-outer {
height: 15vh;
display: flex;
align-items: center;
background-color: var(--header-bg);
box-shadow: 0 2px 10px 0 rgba(0,0,0, .1);
top: 5vh;
position: sticky;
z-index: 2
}
.header-inner {
height: var(--header-inner-height);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Styling of other elements */
.header-logo img {
display: block;
height: calc(var(--header-inner-height) + 20px);
}
.header-navigation {
display: flex;
flex-wrap: wrap;
}
.header-navigation a,
.header-navigation button {
font-size: 1.125rem;
color: #000000;
margin-left: 1.75rem;
position: relative;
font-weight: 500;
}
.header-navigation a {
display: none;
font-size: 1.125rem;
color: #000000;
text-decoration: none;
}
.header-navigation button {
border: 0;
background-color: transparent;
padding: 0;
}
.header-navigation a:hover:after,
.header-navigation button:hover:after {
transform: scalex(1);
}
.header-navigation a:after,
.header-navigation button:after {
transition: 0.25s ease;
content: "";
display: block;
width: 100%;
height: 2px;
background-color: currentcolor;
transform: scalex(0);
position: absolute;
bottom: -2px;
left: 0;
}
.main {
margin-top: 3rem;
}
@media (min-width: 800px) {
.header-navigation a {
display: inline-block;
}
.header-navgitaion button {
display: none;
}
}
如果选中了 id=about-us 的复选框，您可以使用 css .header-navigation:has(#about-us:checked) #missao 中的 :has() 选择器来选择 id=missao 内容的部分然后将其显示给none作为示例
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
/* Banner */
--banner-outer-height: 100vh;
--banner-inner-height: 5vh;
--banner-height-difference: calc(
var(--banner-outer-height) - var(--banner-inner-height)
);
--banner-bg: #ffc75f;
/* Header */
--header-outer-height: 110px;
--header-inner-height: 70px;
--header-bg: #FFF;
}
body {
font-family: "DM Sans", sans-serif;
background-color: #f2f5f7;
line-height: 1.5;
min-height: 300vh;
position: relative;
}
a {
color: inherit;
}
.responsive-wrapper {
width: 90%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
/* Sticky banner */
.banner-outer {
/* Make it stick */
height: var(--banner-outer-height);
position: sticky;
top: calc(var(--banner-height-difference) * -1); /* Multiply by -1 to get a negative value */
display: flex;
align-items: center;
/* Other */
background-color: var(--banner-bg);
z-index: 2;
background-image: url(headerbackground.jpg);
background-size: 144%;
background-position-x: -151px;
}
.banner-outer:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(255, 199, 95, 0.5), rgba(255, 199, 95, 255));
}
.banner-inner {
/* Make it stick */
height: var(--banner-inner-height);
position: sticky;
top: 0;
/* Other */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.25;
z-index: 2;
}
.header-outer {
height: 15vh;
display: flex;
align-items: center;
background-color: var(--header-bg);
box-shadow: 0 2px 10px 0 rgba(0,0,0, .1);
top: 5vh;
position: sticky;
z-index: 2
}
.header-inner {
height: var(--header-inner-height);
display: flex;
align-items: center;
justify-content: space-between;
}
/* Styling of other elements */
.header-logo img {
display: block;
height: calc(var(--header-inner-height) + 20px);
}
.header-navigation {
display: flex;
flex-wrap: wrap;
}
.header-navigation a,
.header-navigation button {
font-size: 1.125rem;
color: #000000;
margin-left: 1.75rem;
position: relative;
font-weight: 500;
}
.header-navigation a {
display: none;
font-size: 1.125rem;
color: #000000;
text-decoration: none;
}
.header-navigation button {
border: 0;
background-color: transparent;
padding: 0;
}
.header-navigation a:hover:after,
.header-navigation button:hover:after {
transform: scalex(1);
}
.header-navigation a:after,
.header-navigation button:after {
transition: 0.25s ease;
content: "";
display: block;
width: 100%;
height: 2px;
background-color: currentcolor;
transform: scalex(0);
position: absolute;
bottom: -2px;
left: 0;
}
.main {
margin-top: 3rem;
}
@media (min-width: 800px) {
.header-navigation a {
display: inline-block;
}
.header-navgitaion button {
display: none;
}
}
.header-navigation:has(#about-us:checked) #missao{ /*this is the example added*/
display:none
}
.header-navigation:has(#business-plan:checked) #ameacas_oportunidades{ /*this is the example added*/
display:none
} <div class="banner-outer">
<div class="banner-inner responsive-wrapper">
<!-- Placeholder logo in SVG format -->
<div class="logo-wrapper">
<div class="white-square"></div>
<div class="pastel-square"></div>
<img src="logo.svg" class="logo fade-out" alt="Company Logo">
</div>
<!-- End of placeholder logo -->
</div>
</div>
<header class="header-outer">
<div class="header-inner responsive-wrapper">
<div class="header-logo">
<img src="logo2.svg" />
</div>
<nav class="header-navigation">
<a href="#missao">Plano de Negócios</a>
<a href="#ameacas_oportunidades">Localização</a>
<a href="#pontos_fracos">Contato</a>
</nav>
</div>
</header>
<main>
<nav class="header-navigation">
<label class="collapse" for="about-us">Sobre nós</label>
<input id="about-us" type="radio" name="navigation" >
<div class="about-us-section">
<!-- Content for "About Us" section with Google Maps map -->
<!-- Replace this with your Google Maps embed code -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d248789.81007519642!2d-0.24168169117477634!3d51.52877184119049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487604e9773e46e5%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2suk!4v1647455567883!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
<label class="collapse" for="contact-us">Contato</label>
<input id="contact-us" type="radio" name="navigation">
<div class="contact-us-section">
<!-- Content for "Contact Us" section with contact information and "Join Us" ad block -->
<div class="content">
<h2>Contato</h2>
<div class="contact-info">
<p><strong>Endereço:</strong> Rua Exemplo, 1234 - Cidade, Estado</p>
<p><strong>Telefone:</strong> (123) 456-7890</p>
<p><strong>Email:</strong> [email protected]</p>
</div>
<div class="join-us">
<h3>Junte-se a nós!</h3>
<p>Estamos sempre em busca de talentos. Envie seu currículo para [email protected].</p>
<!-- Replace this with your "Join Us" ad block content -->
<img src="join-us-image.jpg" alt="Join Us Image">
</div>
</div>
</div>
<label class="collapse" for="business-plan">Plano de Negócios</label>
<input id="business-plan" type="radio" name="navigation">
<div class="business-plan-section">
<section id="missao" class="section missao">
<div class="content">
<h2>Missão e Objetivos Estratégicos</h2>
<p>A missão da TIME Design de Serviço é revitalizar a estrutura e a qualidade dos serviços prestados por empresas na região, melhorando as relações e a satisfação dos clientes e do ambiente de trabalho. Nossos objetivos estratégicos incluem a otimização do fluxo de informação, aprimoramento da experiência do usuário e a criação de um ambiente de trabalho mais positivo e produtivo.</p>
</div>
</section>
<section id="ameacas_oportunidades" class="section ameacas">
<div class="content">
<h2>Ameaças e Oportunidades</h2>
<p>As ameaças incluem a resistência das empresas conservadoras à mudança e a concorrência de outras empresas de consultoria. No entanto, as oportunidades são vastas, pois muitas empresas estão buscando melhorias em seus processos e estão abertas a novas abordagens que possam otimizar seus negócios, aumentar sua competitividade e oferecer soluções inovadoras e personalizadas para as necessidades específicas de cada cliente.</p>
</div>
</section>
<section id="pontos_fortes" class="section pontosfortes">
<div class="content">
<h2>Pontos Fortes</h2>
<p>A TIME Design de Serviço destaca-se pela sua abordagem centrada no cliente e na melhoria da experiência do usuário, além da expertise de sua equipe em identificar e implementar soluções eficazes para otimizar os processos de trabalho das empresas com análise detalhada dos processos, prototipagem rápida e estratégias de melhoria do ambiente de trabalho.</p>
</div>
</section>
<section id="pontos_fracos" class="section pontosfracos">
<div class="content">
<h2>Pontos Fracos</h2>
<p>Os pontos fracos incluem a necessidade de enfrentar a resistência à mudança por parte de algumas empresas e a dependência da economia regional, a possibilidade da dependência de um modelo de negócios baseado em consultoria poder limitar a capacidade de escalar rapidamente, e a possibilidade da empresa enfrentar desafios para atrair clientes em um mercado competitivo.</p>
</div>
</section>
<section id="descricao_produto" class="section descricao">
<div class="content">
<h2>Descrição do Produto/Serviço</h2>
<p>O serviço que a empresa oferece é uma melhoria na estrutura de trabalho das empresas, otimizando o fluxo de informações e melhorando a experiência do usuário, não só dos clientes da empresa, por meio de melhorias na qualidade do serviço prestado, mas também melhorando a experiência do usuário que trabalha na empresa, tornando-a um lugar melhor para se trabalhar. Um período de imersão é feito pelos pesquisadores da TIME na empresa que está sendo estudada, onde cada processo de trabalho e tarefa é entendido e analisado para ver áreas de melhoria, sistemas, fluxogramas, planilhas que podem ser desenvolvidos para eles pela TIME, ciclos de informação que podem ser automatizados e assim economizar minutos, até horas e dias de trabalho. Durante essa imersão, a TIME também oferece Happy Hours para obter noções acerca das dinâmicas sociais dos funcionários, bem como para inicializar processos de melhorias na atmosfera emocional do local de trabalho.</p>
</div>
</section>
<section id="foco_negocio" class="section foco">
<div class="content">
<h2>Foco do Negócio</h2>
<p>O foco da TIME Design de Serviço está em ajudar empresas de serviços a otimizar suas operações, melhorar a satisfação do cliente e criar um ambiente de trabalho mais positivo e produtivo para seus funcionários. Empresas de comércio podem ter suas operações otimizadas, mas empresas de prestação de serviços podem se beneficiar mais diretamente da carga horária de trabalho reduzida.</p>
</div>
</section>
<section id="diferenciais_produtos" class="section diferenciais">
<div class="content">
<h2>Diferenciais dos Produtos/Serviços</h2>
<p>Nosso diferencial está na combinação de consultoria especializada em serviço com intervenções práticas e expertise técnica em design de serviço, com imersão detalhada nas empresas-cliente, prototipagem rápida e eventos de integração, e a oferta de soluções personalizadas e inovadoras para atender às necessidades específicas de cada cliente.</p>
</div>
</section>
<section id="estrategias_venda" class="section estrategias">
<div class="content">
<h2>Estratégias de Venda/Marketing</h2>
<p>As estratégias de venda e marketing da TIME Design de Serviço serão conduzidas principalmente por meio das redes sociais e visitas direcionadas às empresas-alvo. Ofereceremos uma consulta gratuita, pesquisa e happy hour, onde a TIME desenvolverá um protótipo de solução para os desafios imediatos enfrentados pela empresa em seu pipeline de execução. Isso nos permite demonstrar o valor de nossos serviços e conquistar a confiança das empresas interessadas em melhorar suas operações.</p>
</div>
</section>
</div>
</nav>
</main>
<footer>
<div class="container">
<p>© 2024 TIME Design de Serviço. Todos os direitos reservados.</p>
</div>
</footer>