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
Automate store operations with Shopify Academy & Coding with Jan
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025
Highlighting our Members of April '25
Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025
Enhance a brand’s visibility with Shopify Academy's new SEO resources
Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025