how to create classes or ids for links

November 11, 2021

I have a sample version here of what I am trying to do. I am unsure what I’m missing but I definitely am missing something. Both flipcards lead to the same link and I can’t get them to be separate, when I change one the other changes too. I tried making a separate class but I think I did it wrong. Also wondering how to fix the lag that occurs for the second flipcard. Thank you in advance.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  box-sizing: border-box;
}

/* Create four equal columns that floats next to each other */
.column {
  float: left;
  width: 280px;
  padding: 0px;
  height: 220px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="row">
  <div class="column" style="background-color:#aaa;">
     <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext1
body {
  font-family: Arial;
  text-align: center;
}

.flip-card1 {
  background-color: transparent;
  width: 280px;
  height: 220px;
  perspective: 1000px;
}

.flip-card-inner1 {
  position: relative;
  width: 280px;
  height: 220px;
  text-align: center;
  transition: transform 0.9s;
  transform-style: preserve-3d;
  box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}

.flip-card1:hover .flip-card-inner1 {
  transform: rotateY(180deg);
}

.flip-card-front1, .flip-card-back1 {
  position: absolute;
  width: 280px;
  height: 220px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front1 {
  background-color: #bbb;
  color: black;
}

.flip-card-back1 {
  background-color: #354C2F;
  color: white;
   width: 280px;
  height: 220px;
  transform: rotateY(180deg);
  font-family: Arial;
  text-align: center;
  padding: 0px;
background-image: url('');
  
  
}
a.link1{
href="https://yorku.ca/research" target="https://yorku.ca/research"}
</style>
</head>
<body>


<div class="flip-card1">
  <div class="flip-card-inner1">
    <div class="flip-card-front1">
      <img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
    </div>
    <div class="flip-card-back1">
    
      <a class="link1" href="https://yorku.ca/research">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png" width="280" height="220"> 
     
    </div>
  </div>
</div>
  </div>
  <div class="column" style="background-color:#bbb;">
     <html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.fliptext2
body {
  font-family: Arial;
  text-align: center;
}

.flip-card2 {
  background-color: transparent;
  width: 280px;
  height: 220px;
  perspective: 1000px;
}

.flip-card-inner2 {
  position: relative;
   background-color: #354C2F;
  width: 280px;
  height: 220px;
  text-align: center;
  transition: transform 0.9s;
  transform-style: preserve-3d;
  box-shadow: 0 0px 0px 0 rgba(0,0,0,0);
}

.flip-card2:hover .flip-card-inner2 {
  transform: rotateY(180deg);
}

.flip-card-front2, .flip-card-back2 {
  position: absolute;
  width: 280px;
  height: 220px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front2 {
  background-color: #bbb;
  color: black;
}

.flip-card-back2 {
  background-color: #354C2F;
  color: white;
   width: 280px;
  height: 220px;
  transform: rotateY(180deg);
  font-family: Arial;
  text-align: center;
  padding: 0px;
background-image: url('');
  
  
}
a.link2{
href="https://yorku.ca/c4" target="https://yorku.ca/c4"}

</style>
</head>
<body>


<div class="flip-card2">
  <div class="flip-card-inner2">
    <div class="flip-card-front2">
      <img src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg" alt="Avatar" style="width:280px;height:220px;">
    </div>
    <div class="flip-card-back2">
     <a class="link2" href="https://yorku.ca/c4">
<img border="0" alt="YorkU C4" src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png" width="280" height="220"> 
     
     
    </div>
  </div>
</div>
 

</body>
</html>

>Solution :

The problem is that the structure of the document is wrong, you have 2 body
elements, etc. Here I fixed it for you. May need to put the cards side by side.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        box-sizing: border-box;
      }

      /* Create four equal columns that floats next to each other */
      .column {
        float: left;
        width: 280px;
        padding: 0px;
        height: 220px; /* Should be removed. Only for demonstration */
      }

      /* Clear floats after the columns */
      .row:after {
        content: "";
        display: table;
        clear: both;
      }

      /* Responsive layout - makes the four columns stack on top of each other instead of next to each other */
      @media screen and (max-width: 600px) {
        .column {
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="row">
      <div class="column" style="background-color: #aaa">
        <html>
          <head>
            <meta
              name="viewport"
              content="width=device-width, initial-scale=1"
            />
            <style>
              .fliptext1 body {
                font-family: Arial;
                text-align: center;
              }

              .flip-card1 {
                background-color: transparent;
                width: 280px;
                height: 220px;
                perspective: 1000px;
              }

              .flip-card-inner1 {
                position: relative;
                width: 280px;
                height: 220px;
                text-align: center;
                transition: transform 0.9s;
                transform-style: preserve-3d;
                box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
              }

              .flip-card1:hover .flip-card-inner1 {
                transform: rotateY(180deg);
              }

              .flip-card-front1,
              .flip-card-back1 {
                position: absolute;
                width: 280px;
                height: 220px;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
              }

              .flip-card-front1 {
                background-color: #bbb;
                color: black;
              }

              .flip-card-back1 {
                background-color: #354c2f;
                color: white;
                width: 280px;
                height: 220px;
                transform: rotateY(180deg);
                font-family: Arial;
                text-align: center;
                padding: 0px;
                background-image: url("");
              }

              .flip-card2 {
                background-color: transparent;
                width: 280px;
                height: 220px;
                perspective: 1000px;
              }

              .flip-card-inner2 {
                position: relative;
                background-color: #354c2f;
                width: 280px;
                height: 220px;
                text-align: center;
                transition: transform 0.9s;
                transform-style: preserve-3d;
                box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
              }

              .flip-card2:hover .flip-card-inner2 {
                transform: rotateY(180deg);
              }

              .flip-card-front2,
              .flip-card-back2 {
                position: absolute;
                width: 280px;
                height: 220px;
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
              }

              .flip-card-front2 {
                background-color: #bbb;
                color: black;
              }

              .flip-card-back2 {
                background-color: #354c2f;
                color: white;
                width: 280px;
                height: 220px;
                transform: rotateY(180deg);
                font-family: Arial;
                text-align: center;
                padding: 0px;
                background-image: url("");
              }
            </style>
          </head>
          <body>
            <div class="flip-card1">
              <div class="flip-card-inner1">
                <div class="flip-card-front1">
                  <img
                    src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg"
                    alt="Avatar"
                    style="width: 280px; height: 220px"
                  />
                </div>
                <div class="flip-card-back1">
                  <a
                    class="link1"
                    href="https://yorku.ca/research"
                    target="https://yorku.ca/research"
                  >
                    <img
                      border="0"
                      alt="YorkU C4"
                      src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/purpose-driven.png"
                      width="280"
                      height="220"
                    />
                  </a>
                </div>
              </div>
            </div>

            <div class="column" style="background-color: #bbb">
              <div class="flip-card2">
                <div class="flip-card-inner2">
                  <div class="flip-card-front2">
                    <img
                      src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/2Sustainability-e1636580791650.jpg"
                      alt="Avatar"
                      style="width: 280px; height: 220px"
                    />
                  </div>
                  <div class="flip-card-back2">
                    <a
                      class="link2"
                      href="https://yorku.ca/c4"
                      target="https://yorku.ca/c4"
                    >
                      <img
                        border="0"
                        alt="YorkU C4"
                        src="https://www.yorku.ca/c4/wp-content/uploads/sites/69/2021/11/the-looped-in-project.png"
                        width="280"
                        height="220"
                      />
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </body>
        </html>
      </div>
    </div>
  </body>
</html>