Мобильная версияКак мне это сделать? Что я принципиально делаю не так?
Это код, который у меня есть. Я пытался разместить кнопки внутри, чтобы иметь эту функцию, но если я попытаюсь разместить там свои элементы div, это фундаментально нарушит макет (он заполняет раздел бизнес-плана внутри навигации по заголовку)
Это самое близкое к тому, что я хотел, но в итоге у меня есть две панели навигации, и та, которая имеет тот визуальный стиль, который мне нужен, на самом деле не работает
Пример: если я нажму Plano de Negócios, я хочу увидеть «Missão...», «Ameaças...» и другие элементы (пример)
Если я нажму Localização, Я хочу, чтобы это отображалось (пример)
Html:
TIME Design de Serviço
Plano de Negócios
Localização
Contato
Sobre nós
https://www.google.com/maps/embed?pb=!1 ... !1sen!2suk
Contato
Contato
Endereço: Rua Exemplo, 1234 - Cidade, Estado
Telefone: (123) 456-7890
Email: [email protected]
Junte-se a nós!
Estamos sempre em busca de talentos. Envie seu currículo para [email protected].
Plano de Negócios
Missão e Objetivos Estratégicos
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.
Ameaças e Oportunidades
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.
Pontos Fortes
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.
Pontos Fracos
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.
Descrição do Produto/Serviço
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.
Foco do Negócio
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.
Diferenciais dos Produtos/Serviços
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.
Estratégias de Venda/Marketing
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.
© 2024 TIME Design de Serviço. Todos os direitos reservados.
styles.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?famil ... splay=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;
}
}
Подробнее здесь: https://stackoverflow.com/questions/781 ... ick-withou
