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%;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> My Website </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<nav>
<div >
<div ><a href="#">My Web</a></div>
<ul >
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div >
<div >
<i data-color="#e4e6eb #e4e6eb #24292D #24292D #242526"></i>
</div>
<div >
<div >
<i ></i>
<i ></i>
</div>
<div >
<h3>Color Switcher</h3>
<div >
<button data-color="#fff #24292d #4070f4 #0b3cc1 #F0F8FF"></button>
<button data-color="#fff #242526 #F79F1F #DD8808 #fef5e6"></button>
<button data-color="#fff #242526 #8e44ad #783993 #eadaf1"></button>
<button data-color="#fff #242526 #3A9943 #2A6F31 #DAF1DC"></button>
</div>
</div>
</div>
</div>
</div>
</nav>
<section >
<div >
<h2 >Customize Your Website </h2>
<h3 >With a
<div >
<span >Beautiful Colours... </span>
</div>
</h3>
<p>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.</p>
<div >
<a href="#">Explore Me
<i ></i></a>
</div>
</section>
</body>
</html>CodePudding user response：
To make it inline you can give the div element a display of inline-flex and then work from there. I attempted to use inline-block on the span but it massively misaligned most of the elements. If you want the typing text closer, then you can maybe look at off-setting the margin.
.typing-text {
display: inline-flex;
}
