Пожалуйста, кто-нибудь может мне помочь. Мне бы хотелось, чтобы мои три раздела выглядели точно так же, как в режиме рабочего стола, но для мобильных устройств. Однако я бы хотел, чтобы три раздела были сложены вместо трех вкладок рядом друг с другом. Может ли кто-нибудь помочь?
В случае, если я кого-то запутал, я хочу, чтобы он выглядел как:
Situation
(paragraph text)
Solution
(paragraph text)
Success
(paragraph text)
и чтобы заголовки "Ситуация / Решение / Успех" были черными с синим подчеркивается при нажатии и становится серым, когда не нажата, например, как для представления на рабочем столе.
Мой код выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import "https://fonts.googleapis.com/css?family=DM+Sans:400,400i,500,500i,700,700i&display=swap";
@import url('https://fonts.googleapis.com/css?family=Merriweather:300,400&display=swap');
/* colors */
/* tab setting */
/* breakpoints */
/* selectors relative to radio inputs */
@media screen and (max-width: 768px) {
#content-desktop {display: none;}
#content-mobile {display: block;}
}
html {
width: 100%;
height: 100%;
}
body {
background: #ffffff;
color: #333;
font-family: "DM Sans";
font-weight: 400;
height: 100%;
}
body h1 {
text-align: center;
color: #004FFF;
padding: 40px 0 20px 0;
margin: 0;
}
.tabs {
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
background: white;
padding: 50px;
padding-bottom: 80px;
width: 100%;
min-height: 100px;
border-radius: 5px;
min-width: 240px;
}
.tabs input[name="tab-control"] {
display: none;
}
.tabs .content section h2,
.tabs ul li label {
font-family: "DM Sans";
font-weight: 600;
font-size: 23px;
color: #004FFF;
}
.tabs ul {
list-style-type: none;
padding-left: 0;
display: flex;
flex-direction: row;
margin-bottom: 10px;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
.tabs ul li {
box-sizing: border-box;
flex: 1;
width: 25%;
padding: 0 10px;
text-align: center;
}
.tabs ul li label {
transition: all 0.3s ease-in-out;
color: #929daf;
padding: 5px auto;
overflow: hidden;
text-overflow: ellipsis;
display: block;
cursor: pointer;
transition: all 0.2s ease-in-out;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.tabs ul li label br {
display: none;
}
.tabs ul li label svg {
fill: #929daf;
height: 1.2em;
vertical-align: bottom;
margin-right: 0.2em;
transition: all 0.2s ease-in-out;
}
.tabs ul li label:hover, .tabs ul li label:focus, .tabs ul li label:active {
outline: 0;
color: #bec5cf;
}
.tabs ul li label:hover svg, .tabs ul li label:focus svg, .tabs ul li label:active svg {
fill: #bec5cf;
}
.tabs .slider {
position: relative;
width: 33.2%;
transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
position: relative;
width: 88px;
max-width: 100%;
margin: 0 auto;
height: 2px;
background: #004FFF;
border-radius: 1px;
}
.tabs .content {
margin-top: 30px;
width: 80%;
}
.tabs .content section {
display: none;
-webkit-animation-name: content;
animation-name: content;
-webkit-animation-direction: normal;
animation-direction: normal;
-webkit-animation-duration: 0.3s;
animation-duration: 0.3s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
line-height: 1.4;
}
.tabs .content section h2 {
color: #004FFF;
display: none;
}
.tabs .content section h2::after {
content: "";
position: relative;
display: block;
width: 30px;
height: 3px;
background: #004FFF;
margin-top: 5px;
left: 1px;
}
.tabs .content section p {
left: 62%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
position: relative;
background: white;
padding: 10px;
width: 100%;
height:150px;
overflow: scroll;
min-width: 140px;
font-family: "Merriweather";
font-weight: 300;
line-height: 25px;
font-size: 14px;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
cursor: default;
color: #000000;
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label svg {
fill: #000000;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ ul > li:nth-child(1) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .slider {
-webkit-transform: translateX(0%);
transform: translateX(0%);
}
.tabs input[name="tab-control"]:nth-of-type(1):checked ~ .content > section:nth-child(1) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
cursor: default;
color: #000000;
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label svg {
fill: #000000;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ ul > li:nth-child(2) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .slider {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.tabs input[name="tab-control"]:nth-of-type(2):checked ~ .content > section:nth-child(2) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
cursor: default;
color: #000000;
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label svg {
fill: #000000;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ ul > li:nth-child(3) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .slider {
-webkit-transform: translateX(200%);
transform: translateX(200%);
}
.tabs input[name="tab-control"]:nth-of-type(3):checked ~ .content > section:nth-child(3) {
display: block;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
cursor: default;
color: #428BFF;
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label svg {
fill: #428BFF;
}
@media (max-width: 600px) {
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ ul > li:nth-child(4) > label {
background: rgba(0, 0, 0, 0.08);
}
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .slider {
-webkit-transform: translateX(300%);
transform: translateX(300%);
}
.tabs input[name="tab-control"]:nth-of-type(4):checked ~ .content > section:nth-child(4) {
display: block;
}
@-webkit-keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@keyframes content {
from {
opacity: 0;
-webkit-transform: translateY(5%);
transform: translateY(5%);
}
to {
opacity: 1;
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
}
@media (max-width: 1000px) {
.tabs ul li label {
white-space: initial;
}
.tabs ul li label br {
display: initial;
}
.tabs ul li label svg {
height: 1.5em;
}
}
@media (max-width: 600px) {
.tabs ul li label {
padding: 5px;
border-radius: 5px;
}
.tabs ul li label span {
display: none;
}
.tabs .slider {
display: none;
}
.tabs .content {
margin-top: 20px;
}
.tabs .content section h2 {
display: block;
}
}
@media screen and (min-width: 600px) {
#content-desktop {display: block;}
#content-mobile {display: none;}
}
.accordion {
background-color: #fff;
color: #000;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-family: "DM Sans";
font-weight: 600;
font-size: 23px;
transition: 0.4s;
}
.accordion .slider {
position: relative;
width: 33.2%;
transition: all 0.33s cubic-bezier(0.38, 0.8, 0.32, 1.07);
}
.tabs .slider .indicator {
position: relative;
width: 88px;
max-width: 100%;
margin: 0 auto;
height: 2px;
background: #004FFF;
border-radius: 1px;
}
.accordion::after {
content: "";
position: relative;
display: block;
width: 88px;
max-width: 100%;
margin: 0 auto;
height: 3px;
background: #004FFF;
margin-top: 5px;
left: 1px;
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<div id="content-desktop">
<div class="tabs">
<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">
<input type="radio" id="tab4" name="tab-control">
<ul>
<li title="Situation"><label for="tab1" role="button"><span>Situation</span></label></li>
<li title="Solution"><label for="tab2" role="button"><span>Solution</span></label></li>
<li title="Success"><label for="tab3" role="button"><span>Success</span></label></li>
</ul>
<div class="slider">
<div class="indicator"></div>
</div>
<div class="content">
<section>
<h2>Situation</h2><p>Dimension Data and 27 global businesses came together in 2019 to form NTT, who sought a trusted partner to help raise awareness of their cyber security offering. We shared a long relationship with the former, whose expertise, matched with new partnerships born of this merger, placed NTT as the forefront of cyber security technology.
We delivered a paid media campaign designed to communicate this offering while kickstarting the buyer journey for two specific buyer personas. NTT wanted the lead scores of contacts boosted while focusing specifically on CISO contact acquisition, so we tailored our approach to achieve these targets.
</p></section>
<section>
<h2>Solution</h2>
<p>Starting with the creation of two buyer personas as a focal point, we developed a value proposition for both. From here, we devised key messaging narratives designed to sell NTTs solutions by answering our personas questions. Our campaign included several content assets, including landing pages, eBooks and web series, with each offering the right advice at the right time throughout the entire buyer journey.
Our data helped shape our country targeting and, as a global campaign, we targeted the five of the biggest cybersecurity markets, including the USA, Australia and India. We kept NTT's brand in front of bounced traffic through retargeting. Ensuring that people who had previously interacted with our content played an instrumental role in the campaign's success.
</p></section>
<section>
<h2>Success</h2>
<p>The results were extremely strong. Our creative asset that drove the best performance was posted on Twitter and achieved <span style="color: #004fff"><strong>over 545,000 impressions</strong></span> and <span style="color: #004fff"><strong>110,953 link clicks</strong></span>, with a spend of just $630. Large companies employing 10,000+ made up 48% of all clicks through our LinkedIn campaign while content syndication earned <span style="color: #004fff"><strong>167 unique leads</strong></span>. India was the biggest market.</p></section>
</div>
</div>
</div>
<div id="content-mobile">
<h2>Animated Accordion</h2>
<p>Click on the buttons to open the collapsible content.</p>
<div class="slider">
<button class="accordion">Situation</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Solution</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Success</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
</div></div>
</body>
</html>