Align "span text" with "h3 text" in a row HTML
I am creating a responsive text that has animation. The problem that I am having is my text which suppose to show as below:
is now appearing like below:
How shall I make the "Beautiful Colour" text to appear in the same line with the "With a" text, as the above image? Your help is much appreciated as I am still a beginner in HTML CSS and JAVASCRIPT. Thank you.
// 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
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.