Выравнивание «текста диапазона» с «текстом h3» в строке HTML

Выравнивание «текста диапазона» с «текстом h3» в строке HTML ⇐ Html

1 сообщение • Страница 1 из 1

Anonymous

Выравнивание «текста диапазона» с «текстом h3» в строке HTML

Цитата

Сообщение Anonymous » 15 янв 2026, 07:03

Я создаю адаптивный текст с анимацией. Проблема заключается в том, что мой текст должен выглядеть следующим образом:

теперь выглядит, как показано ниже:

Как мне сделать так, чтобы текст «Красивый цвет» отображался в одной строке с текстом «С», как показано на изображении выше? Я очень ценю вашу помощь, поскольку я все еще новичок в HTML CSS и JAVASCRIPT. Спасибо.

Код: Выделить всё

// Js code to make color box enable or disable
let colorIcons = document.querySelector(".color-icon"),
icons = document.querySelector(".color-icon .icons");

icons.addEventListener("click" , ()=>{
colorIcons.classList.toggle("open");
})

// getting all .btn elements
let buttons = document.querySelectorAll(".btn");

for (var button of buttons) {
button.addEventListener("click", (e)=>{ //adding click event to each button
let target = e.target;

let open = document.querySelector(".open");
if(open) open.classList.remove("open");

document.querySelector(".active").classList.remove("active");
target.classList.add("active");

// js code to switch colors (also day night mode)
let root = document.querySelector(":root");
let dataColor = target.getAttribute("data-color"); //getting data-color values of clicked button
let color = dataColor.split(" "); //splitting each color from space and make them array

//passing particular value to a particular root variable
root.style.setProperty("--white", color[0]);
root.style.setProperty("--black", color[1]);
root.style.setProperty("--nav-main", color[2]);
root.style.setProperty("--switchers-main", color[3]);
root.style.setProperty("--light-bg", color[4]);

let iconName = target.className.split(" ")[2]; //getting the class name of icon

let coloText = document.querySelector(".home-content span");

if(target.classList.contains("fa-moon")){ //if icon name is moon
target.classList.replace(iconName, "fa-sun") //replace it with the sun
colorIcons.style.display = "none";
coloText.classList.add("darkMode");
}else if (target.classList.contains("fa-sun")) { //if icon name is sun
target.classList.replace("fa-sun", "fa-moon");  //replace it with the sun
colorIcons.style.display = "block";
coloText.classList.remove("darkMode");
document.querySelector(".btn.blue").click();
}
});
}

Код: Выделить всё

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
transition: all 0.3s ease;
}

:root{
--white: #fff;
--black: #24292d;
--nav-main: #4070f4;
--switchers-main: #0b3cc1;
--light-bg: #F0F8FF;
}

/* ------------------------this is for navbar section--------------------------------*/

nav{
position: fixed;
height: 70px;
width: 100%;
background: var(--nav-main);
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

nav .navbar{
display: flex;
align-items: center;
height: 100%;
max-width: 1300px;
margin: auto;
padding: 0 30px;
justify-content: space-between;
}

nav .navbar a{
font-size: 30px;
font-weight: 500;
color: var(--white);
text-decoration: none;
}

.navbar .nav-links{
display: flex;
}

.navbar .nav-links li{
margin: 0 8px;
list-style: none;
display: flex;
}

.navbar .nav-links a{
font-size: 18px;
font-weight: 400;
opacity: 1;
}

.navbar .nav-links a:hover{
opacity: 1;
}

.navbar .appearance{
display: flex;
align-items: center;
}

/* ----------------this is web page appearance in color, icons and so on----------------------*/

.appearance .light-dark,
.appearance .icons{
height: 50px;
width: 50px;
border-radius: 6px;
line-height: 50px;
text-align: center;
color: var(--white);
font-size: 20px;
background: var(--switchers-main);
cursor: pointer;
}

.appearance .light-dark i,
.appearance .icons i{
opacity: 1;
}

.appearance .light-dark:hover i,
.appearance .icons:hover i{
opacity: 1;
}

.appearance .light-dark:hover{
box-shadow: 0 5px 10px rgba(0,0,0,0.1)
}

.appearance .light-dark i{
height: 100%;
width: 100%;
}

.appearance .color-icon{
position: relative;
}

.appearance .icons{
width: 70px;
height: 50px;
margin-left: 14px;
}

.appearance .color-box{
position: absolute;
bottom: -133px;
right: 0;
min-height: 100px;
background: var(--white);
padding: 16px 20px 20px 20px;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
opacity: 0;
pointer-events: none;
}

.color-box::before{
content: '';
position: absolute;
top: -10px;
right: 20px;
height: 30px;
width: 30px;
border-radius: 50%;
background: var(--white);
transform: rotate(45deg);
}

.color-icon.open .color-box{
opacity: 1;
pointer-events: auto;
}

.color-icon.open .arrow{
transform: rotate(-180deg);
}

.appearance .color-box h3{
font-size: 16px;
font-weight: 600;
display: block;
color: var(--nav-main);
text-align: left;
white-space: nowrap;
margin-bottom: 10px;
}
.appearance .color-box .color-switchers{
display: flex;
}
.color-box .color-switchers .btn{
display: inline-block;
height: 40px;
width: 40px;
border: none;
outline: none;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
background: #4070F4;

}
.color-switchers .btn.blue.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #4070F4;
}
.color-switchers .btn.orange{
background: #F79F1F;
}
.color-switchers .btn.orange.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #F79F1F;
}
.color-switchers .btn.purple{
background: #8e44ad;
}
.color-switchers .btn.purple.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #8e44Ad;
}
.color-switchers .btn.green{
background: #3A9943;
}
.color-switchers .btn.green.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #3A9943;
}

/*---------------------this is under home section-----------------------*/

.home-content{
height: 100vh;
width: 100%;
background: var(--light-bg);
display:  flex;
flex-direction: column;
justify-content: center;
padding: 0 60px;
}

.home-content h2{
color: var(--black);
font-size: 50px;
}

.home-content h3{
color: var(--black);
font-size: 42px;
margin-top: -8px;
}

.home-content span{
color: var(--black);
font-size: 42px;
}

.home-content .text2{

display: flex;
}

.home-content h3 span{
color: var(--nav-main);
}

.home-content h3 span.darkMode{
color: var(--black);
}

.home-content p{
color: var(--black);
font-size: 16px;
width: 45%;
text-align: justify;
margin: 4px 0 30px 0;
}

.home-content a{
color: #fff;
font-size: 20px;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
background: var(--nav-main);
}

.home-content a i{
transform: rotate(45deg);
font-size: 16px;
}

.home-content a:hover{
background: var(--switchers-main);
}

@media (max-width: 1050px) {
.home-content p{
width: 70%;
}
}

.home-content .typing-text{
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
border-right: 4px solid #1de2d1;
animation: typing 5s steps(15) infinite;
}
@keyframes typing{
0%{
width: 0ch;
}
50%{
width: 15ch;
}
100%{
width: 0ch;
}
}
.home-content .job .one{
color: #1de2d1;
}
.home-content .job .two{
color: #1de2d1;
}

.home-content .container{
width: 246px;
overflow: hidden;
}
.home-content .container .text{
position: relative;
color: #4070F4;
font-size: 30px;
font-weight: 600;
}
.home-content .container .text.first-text{
color: var(--black);
font-size: 42px;
margin-top: -8px;
}
.home-content .text.sec-text:before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-left: 2px solid #4070F4;
animation: animate 4s steps(12) infinite;
}
@keyframes animate{
40%, 60%{
left: calc(100% + 4px);
}
100%{
left: 0%;
}
}

Код: Выделить всё




  My Website 
[*]








[url=#]My Web[/url]

[list]
[url=#]Home[/url]
[*][url=#]About[/url]
[*][url=#]Skills[/url]
[*][url=#]Services[/url]
[*][url=#]Contact[/url]
[/list]


[/i]


[i][/i]
[i][/i]

Color Switcher














Customize Your Website 
With a

Beautiful Colours... 


Lorem ipsum dolor sited and ametvel, nobised, minimali! Quibusdam temporibus, placeate reessed veritatis optio aliquam illum debitis at, perspiciatis consequatur iure vel, quae ratione. Praesentium, at.

[url=#]Explore Me
[i][/i][/url]

Подробнее здесь: https://stackoverflow.com/questions/733 ... a-row-html

1768449820

Anonymous

Я создаю адаптивный текст с анимацией. Проблема заключается в том, что мой текст должен выглядеть следующим образом:
[i]
теперь выглядит, как показано ниже:
[img]https://i.sstatic.net/v7P2U.png[/img]

Как мне сделать так, чтобы текст «Красивый цвет» отображался в одной строке с текстом «С», как показано на изображении выше? Я очень ценю вашу помощь, поскольку я все еще новичок в HTML CSS и JAVASCRIPT.  Спасибо.


[code]// Js code to make color box enable or disable
let colorIcons = document.querySelector(".color-icon"),
icons = document.querySelector(".color-icon .icons");

icons.addEventListener("click" , ()=>{
colorIcons.classList.toggle("open");
})

// getting all .btn elements
let buttons = document.querySelectorAll(".btn");

for (var button of buttons) {
button.addEventListener("click", (e)=>{ //adding click event to each button
let target = e.target;

let open = document.querySelector(".open");
if(open) open.classList.remove("open");

document.querySelector(".active").classList.remove("active");
target.classList.add("active");

// js code to switch colors (also day night mode)
let root = document.querySelector(":root");
let dataColor = target.getAttribute("data-color"); //getting data-color values of clicked button
let color = dataColor.split(" "); //splitting each color from space and make them array

//passing particular value to a particular root variable
root.style.setProperty("--white", color[0]);
root.style.setProperty("--black", color[1]);
root.style.setProperty("--nav-main", color[2]);
root.style.setProperty("--switchers-main", color[3]);
root.style.setProperty("--light-bg", color[4]);

let iconName = target.className.split(" ")[2]; //getting the class name of icon

let coloText = document.querySelector(".home-content span");

if(target.classList.contains("fa-moon")){ //if icon name is moon
target.classList.replace(iconName, "fa-sun") //replace it with the sun
colorIcons.style.display = "none";
coloText.classList.add("darkMode");
}else if (target.classList.contains("fa-sun")) { //if icon name is sun
target.classList.replace("fa-sun", "fa-moon");  //replace it with the sun
colorIcons.style.display = "block";
coloText.classList.remove("darkMode");
document.querySelector(".btn.blue").click();
}
});
}[/code]
[code]@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
transition: all 0.3s ease;
}

:root{
--white: #fff;
--black: #24292d;
--nav-main: #4070f4;
--switchers-main: #0b3cc1;
--light-bg: #F0F8FF;
}

/* ------------------------this is for navbar section--------------------------------*/

nav{
position: fixed;
height: 70px;
width: 100%;
background: var(--nav-main);
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}

nav .navbar{
display: flex;
align-items: center;
height: 100%;
max-width: 1300px;
margin: auto;
padding: 0 30px;
justify-content: space-between;
}

nav .navbar a{
font-size: 30px;
font-weight: 500;
color: var(--white);
text-decoration: none;
}

.navbar .nav-links{
display: flex;
}

.navbar .nav-links li{
margin: 0 8px;
list-style: none;
display: flex;
}

.navbar .nav-links a{
font-size: 18px;
font-weight: 400;
opacity: 1;
}

.navbar .nav-links a:hover{
opacity: 1;
}

.navbar .appearance{
display: flex;
align-items: center;
}

/* ----------------this is web page appearance in color, icons and so on----------------------*/

.appearance .light-dark,
.appearance .icons{
height: 50px;
width: 50px;
border-radius: 6px;
line-height: 50px;
text-align: center;
color: var(--white);
font-size: 20px;
background: var(--switchers-main);
cursor: pointer;
}

.appearance .light-dark i,
.appearance .icons i{
opacity: 1;
}

.appearance .light-dark:hover i,
.appearance .icons:hover i{
opacity: 1;
}

.appearance .light-dark:hover{
box-shadow: 0 5px 10px rgba(0,0,0,0.1)
}

.appearance .light-dark i{
height: 100%;
width: 100%;
}

.appearance .color-icon{
position: relative;
}

.appearance .icons{
width: 70px;
height: 50px;
margin-left: 14px;
}

.appearance .color-box{
position: absolute;
bottom: -133px;
right: 0;
min-height: 100px;
background: var(--white);
padding: 16px 20px 20px 20px;
border-radius: 6px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
opacity: 0;
pointer-events: none;
}

.color-box::before{
content: '';
position: absolute;
top: -10px;
right: 20px;
height: 30px;
width: 30px;
border-radius: 50%;
background: var(--white);
transform: rotate(45deg);
}

.color-icon.open .color-box{
opacity: 1;
pointer-events: auto;
}

.color-icon.open .arrow{
transform: rotate(-180deg);
}

.appearance .color-box h3{
font-size: 16px;
font-weight: 600;
display: block;
color: var(--nav-main);
text-align: left;
white-space: nowrap;
margin-bottom: 10px;
}
.appearance .color-box .color-switchers{
display: flex;
}
.color-box .color-switchers .btn{
display: inline-block;
height: 40px;
width: 40px;
border: none;
outline: none;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
background: #4070F4;

}
.color-switchers .btn.blue.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #4070F4;
}
.color-switchers .btn.orange{
background: #F79F1F;
}
.color-switchers .btn.orange.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #F79F1F;
}
.color-switchers .btn.purple{
background: #8e44ad;
}
.color-switchers .btn.purple.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #8e44Ad;
}
.color-switchers .btn.green{
background: #3A9943;
}
.color-switchers .btn.green.active{
box-shadow: 0 0 0 2px #fff,
0 0 0 4px #3A9943;
}

/*---------------------this is under home section-----------------------*/

.home-content{
height: 100vh;
width: 100%;
background: var(--light-bg);
display:  flex;
flex-direction: column;
justify-content: center;
padding: 0 60px;
}

.home-content h2{
color: var(--black);
font-size: 50px;
}

.home-content h3{
color: var(--black);
font-size: 42px;
margin-top: -8px;
}

.home-content span{
color: var(--black);
font-size: 42px;
}

.home-content .text2{

display: flex;
}

.home-content h3 span{
color: var(--nav-main);
}

.home-content h3 span.darkMode{
color: var(--black);
}

.home-content p{
color: var(--black);
font-size: 16px;
width: 45%;
text-align: justify;
margin: 4px 0 30px 0;
}

.home-content a{
color: #fff;
font-size: 20px;
padding: 12px 24px;
border-radius: 6px;
text-decoration: none;
background: var(--nav-main);
}

.home-content a i{
transform: rotate(45deg);
font-size: 16px;
}

.home-content a:hover{
background: var(--switchers-main);
}

@media (max-width: 1050px) {
.home-content p{
width: 70%;
}
}

.home-content .typing-text{
margin-left: 10px;
overflow: hidden;
white-space: nowrap;
border-right: 4px solid #1de2d1;
animation: typing 5s steps(15) infinite;
}
@keyframes typing{
0%{
width: 0ch;
}
50%{
width: 15ch;
}
100%{
width: 0ch;
}
}
.home-content .job .one{
color: #1de2d1;
}
.home-content .job .two{
color: #1de2d1;
}

.home-content .container{
width: 246px;
overflow: hidden;
}
.home-content .container .text{
position: relative;
color: #4070F4;
font-size: 30px;
font-weight: 600;
}
.home-content .container .text.first-text{
color: var(--black);
font-size: 42px;
margin-top: -8px;
}
.home-content .text.sec-text:before{
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
border-left: 2px solid #4070F4;
animation: animate 4s steps(12) infinite;
}
@keyframes animate{
40%, 60%{
left: calc(100% + 4px);
}
100%{
left: 0%;
}
}[/code]
[code]



  My Website 
[*]








[url=#]My Web[/url]

[list]
[url=#]Home[/url]
[*][url=#]About[/url]
[*][url=#]Skills[/url]
[*][url=#]Services[/url]
[*][url=#]Contact[/url]
[/list]


[/i]


[i][/i]
[i][/i]

Color Switcher














Customize Your Website 
With a

Beautiful Colours... 


Lorem ipsum dolor sited and ametvel, nobised, minimali! Quibusdam temporibus, placeate reessed veritatis optio aliquam illum debitis at, perspiciatis consequatur iure vel, quae ratione. Praesentium, at.

[url=#]Explore Me
[i][/i][/url]



[/code]


 

Подробнее здесь: [url]https://stackoverflow.com/questions/73386143/align-span-text-with-h3-text-in-a-row-html[/url]