text on rotating square - Post ID 294587

User 2816895 Photo


Guest
9 posts

Hi, can someone help me understand why the same text is on both sides of the square on http://ossianenterprisepark.com/Busines … tions.html


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>BUSINESSPARKOPTIONS</title>
<link href="OEP.css" rel="stylesheet" type="text/css">
<style>

.flip-card {
background-color:transparent;
width:300px;
height:200px;
border:1px solid #f1f1f1;
perspective:1000px; /* Remove this if you don't want the 3D effect */
display:inline-block;
padding-right:3%;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
color: #ffffff;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
background-color:#375BE3;
color: #fffff;
}

/* Style the back side */
.flip-card-back {
background-color:#375BE3;
color:#ffffff;
transform: rotateY(180deg);
}


</style>
</head>

<body>
<div class="blue">
<br />
</div>
<div class="grey">
<br />
</div>
<div id="oep">
Ossian Enterprise Park
</div>
<div class="grey">
<br />
</div>
<div class="blue">
<br />
</div>

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Entire Suite of Offices <br /> </p>
<p>hover for details</p>

</div> <!-- end of flip card inner-->
</div><!-- end of flp card front -->
<div class="flip-card-back">
<p>details and photos about this option</p>
</div><!-- end of flip card back -->
</div> <!-- end of flip card -->

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Single Office Space<br /> </p>
<p>hover for details</p>
</div> <!-- end of flip card inner-->
</div><!-- end of flp card front -->
<div class="flip-card-back">
<p>details and photos about this option</p>
</div><!-- end of flip card back -->
</div> <!-- end of flip card -->

<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<p>Build to Suit<br /> </p>
<p>hover for details</p>
</div> <!-- end of flip card inner-->
</div><!-- end of flp card front -->
<div class="flip-card-back">
<div class="outter">
<p>details and photos about this option</p>
</div>
</div><!-- end of flip card back -->
</div> <!-- end of flip card -->

<!--second option-->

<div class="grey">
<br />
</div>
<div class="blue">
<br />
</div>
<div class="grey">
<br />
</div>
</body>
</html>
User 122279 Photo


Senior Advisor
13,484 posts

When viewing your site I see different text on the two sides of the card. And the text will be what you write there.
I looked at the code you posted here in the forum, and I have changed the actual text bits to bold. Strange though, you have that same html bit three times in a row.

Another thing: What Coffeecup software are you using? I don't see evidence of any Coffeecup app on your site. This forum is provided by Coffeecup Software for its users.
Ha en riktig god dag!
Inger, Norway
This site was made before we were able to create components through the app:
Component sharing for RFF, RBB, RSD and SD: https://eikweb.com/sharing/
My work in progress right now:
Components for the same as above + HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.