Untitled

<!doctype html>
<html lang="en">
<head>
   <!--
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Coding Challenge 3
   
   Author: John Robert Cabatbat
   Date: 01/31/2025
   Filename: code4-3.html
   -->
   <meta charset="utf-8">
   <title>Coding Challenge 4-3</title>
   <link href="code4-3.css" rel="stylesheet" />
   <link href="code4-3_cube.css" rel="stylesheet" />
</head>
<body>
   <h1>Classical Sketches</h1>
   <div id="cube">
      <img id="img1" src="image01.png" alt="" />
      <img id="img2" src="image02.png" alt="" />
      <img id="img3" src="image03.png" alt="" />
      <img id="img4" src="image04.png" alt="" />
      <img id="img5" src="image05.png" alt="" />
   </div>
</body>
</html>





@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Coding Challenge 3

   Author: John Robert Cabatbat
   Date: 01/31/2025
   
   Filename: code4-3.css

*/

body {
   width: 900px;
   margin: 20px auto;
}


h1 {
   color: black;
   font-size: 3.3em;
   text-align: center;
   line-height: 1.4em;
   margin-bottom: 0px;
}

div#cube {
   position: relative;
   margin: 100px auto;
   width: 300px;
   height: 300px;
}

img {
   width: 300px;
   height: 300px;
   position: absolute;
   top: 0px;
   left: 0px;
   display: block;
}






@charset "utf-8";

/*
   New Perspectives on HTML5 and CSS3, 8th Edition
   Tutorial 4
   Coding Challenge 3

   Author: John Robert Cabatbat
   Date: 01/31//2025
   
   Filename: code4-3_cube.css

*/
h1 {
   color: white;
   text-shadow: 0px 0px 20px rgb(120, 85, 0);
}

#cube {
   perspective: 500px;
   transform-style: preserve-3d;
}

img {
   filter: sepia(1);
   box-shadow: 0px 0px 20px black;
}

#img1 {
   transform: translateZ(-150px);
}

#img2 {
   transform: rotateX(90deg) translateZ(-150px);
}

#img3 {
   transform: rotateY(-90deg) translateZ(150px);
}

#img4 {
   transform: rotateY(90deg) translateZ(150px);
}

#img5 {
   transform: rotateX(-90deg) translateZ(-150px);
}
Editor is loading...