How to show my images vertically to horizontally ?
This is how my code showing images. But i want this to show as horizontally.
Here is the code
<div class="circle">
<div class="logo"></div>
<div class="text">
<p> SUNGLASSES SUNGLASSES SUNGLASSES </p>
</div>
</div>
<div class="circle1">
<div class="logo1"></div>
<div class="text1">
<p> THUNDER THUNDER THUNDER THUNDER </p>
</div>
</div>
<div class="circle2">
<div class="logo2"></div>
<div class="text2">
<p> BELL BOTTOM BELL BOTTOM BELL BOTTOM </p>
</div>
</div>
<div class="circle3">
<div class="logo3"></div>
<div class="text3">
<p> RUSH RUSH RUSH RUSH RUSH RUSH RUSH </p>
</div>
</div>
</div>
</div>
<div class="circle4">
<div class="logo4"></div>
<div class="text4">
<p> ASTRA ASTRA ASTRA ASTRA ASTRA ASTRA </p>
</div>
</div>
<script>
const text = document.querySelector('.text p');
text.innerHTML = text.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.8}deg)">${char}</span>`
).join("")
</script>
<script>
const text1 = document.querySelector('.text1 p');
text1.innerHTML = text1.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 11.2}deg)">${char}</span>`
).join("")
</script>
<script>
const text2 = document.querySelector('.text2 p');
text2.innerHTML = text2.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>
<script>
const text3 = document.querySelector('.text3 p');
text3.innerHTML = text3.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>
<script>
const text4 = document.querySelector('.text4 p');
text4.innerHTML = text4.innerText.split("").map(
(char, i) =>
`<span style="transform:rotate(${i * 10.1}deg)">${char}</span>`
).join("")
</script>
<style>
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body1
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.circle
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);
}
.text
{
position: absolute;
width: 100%;
height: 234px;
animation: rotateText 20s linear infinite;
color: #dcf228;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}
.circle1
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo1
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);
}
.text1
{
position: absolute;
width: 100%;
height: 234px;
animation: rotateText 20s linear infinite;
color: #dcf228;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text1 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}
.circle2
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo2
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);
}
.text2
{
position: absolute;
width: 100%;
height: 234px;
animation: rotateText 20s linear infinite;
color: #dcf228;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text2 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}
.circle3
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo3
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);
}
.text3
{
position: absolute;
width: 100%;
height: 234px;
animation: rotateText 20s linear infinite;
color: #dcf228;
font-weight:900;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text3 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}
.circle4
{
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo4
{
position: absolute;
width: 150px;
height: 150px;
background: url("https://eyejack.in/cdn/shop/files/1391CL579-2.jpg?v=1724752316&width=1800");
background-size: cover;
border-radius: 50%;
filter: brightness(1.5) contrast(1.5);
}
.text4
{
position: absolute;
width: 100%;
height: 234px;
animation: rotateText 20s linear infinite;
color: #5e1f88;
font-weight:800;
}
@keyframes rotateText
{
0%
{
transform: rotate(360deg);
}
100%
{
transform: rotate(0deg);
}
}
.text4 span
{
position: absolute;
left: 50%;
font-size: 1.2em;
transform-origin: 0 100px;
}
</style>
Community Blog Articles
Holiday Cheers to Our Community | November '24
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping Viral Products to Sell in 2025
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Shining a spotlight on our top members of October 2024!
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024