|
|
Line 837: |
Line 837: |
| | | |
| | | |
− |
| + | |
− | /*new card*/
| + | |
− |
| + | |
− |
| + | |
− | .container{
| + | |
− | width: 1200px;
| + | |
− | display: grid;
| + | |
− | grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
| + | |
− | grid-gap: 15px;
| + | |
− | margin: 0 auto;
| + | |
− | }
| + | |
− |
| + | |
− | .cardabc{
| + | |
− | position: relative;
| + | |
− | width: 350px;
| + | |
− | height: 400px;
| + | |
− | margin: 0 auto;
| + | |
− | background: #fff;
| + | |
− | box-shadow: 0 15px 60px rgba(0,0,0, .5);
| + | |
− | border-radius: 15px;
| + | |
− | }
| + | |
− |
| + | |
− | .card .faceabc{
| + | |
− | position: absolute;
| + | |
− | bottom: 0;
| + | |
− | left: 0;
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | display: flex;
| + | |
− | justify-content: center;
| + | |
− | align-items: center;
| + | |
− | }
| + | |
− |
| + | |
− | .card .face.face1abc{
| + | |
− | box-sizing: border-box;
| + | |
− | padding: 20px;
| + | |
− | }
| + | |
− |
| + | |
− | .card .face.face1abc h2{
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | }
| + | |
− |
| + | |
− | .card .face.face1abc .content{
| + | |
− | font-size:1.2em;
| + | |
− | margin:0;
| + | |
− | padding:0 0 1em 0;
| + | |
− | font-weight:500;
| + | |
− | }
| + | |
− |
| + | |
− | .card .face.face2abc{
| + | |
− | background: #111;
| + | |
− | transition: 0.5s;
| + | |
− | }
| + | |
− |
| + | |
− | .card:nth-child(1) .face.face2abc{
| + | |
− | background: linear-gradient(45deg, #3503ad, #f7308c);
| + | |
− | border-radius: 15px;
| + | |
− | }
| + | |
− |
| + | |
− | .card:nth-child(2) .face.face2abc{
| + | |
− | background: linear-gradient(45deg, #ccff00, #09afff);
| + | |
− | border-radius: 15px;
| + | |
− | }
| + | |
− |
| + | |
− | .card:nth-child(3) .face.face2abc{
| + | |
− | background: linear-gradient(45deg, #e91e63, #ffeb3b);
| + | |
− | border-radius: 15px;
| + | |
− | }
| + | |
− |
| + | |
− | .card:hover .face.face2abc{
| + | |
− | height: 60px;
| + | |
− | border-radius: 0 0 15px 15px;
| + | |
− | }
| + | |
− |
| + | |
− | .card .face.face2abc:before{
| + | |
− | content:'';
| + | |
− | position: absolute;
| + | |
− | top:0;
| + | |
− | left:0;
| + | |
− | width: 50%;
| + | |
− | height: 100%;
| + | |
− | background: rgba(255,255,255, 0.1);
| + | |
− | border-radius: 15px 0 0 15px;
| + | |
− | }
| + | |
− |
| + | |
− | .card .face.face2abc h2{
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | font-size: 10em;
| + | |
− | color: #fff;
| + | |
− | transition: 0.5s;
| + | |
− | text-shadow: 0 2px 5px rgba(0,0,0, .2);
| + | |
− | }
| + | |
− |
| + | |
− | .card:hover .face.face2abc h2{
| + | |
− | font-size: 2em;
| + | |
− | }
| + | |
| | | |
| </style> | | </style> |
Line 1,294: |
Line 1,197: |
| </section> | | </section> |
| | | |
− |
| + | |
− | <section>
| + | |
− | <div class="container">
| + | |
− | <div class="cardabc">
| + | |
− | <div class="face face1abc">
| + | |
− | <div class="content">
| + | |
− | <h2>Lorem Ipsum</h2>
| + | |
− | <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="face face2abc">
| + | |
− | <h2>01</h2>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="cardabc">
| + | |
− | <div class="face face1abc">
| + | |
− | <div class="content">
| + | |
− | <h2>Lorem Ipsum</h2>
| + | |
− | <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="face face2abc">
| + | |
− | <h2>02</h2>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="cardabc">
| + | |
− | <div class="face face1abc">
| + | |
− | <div class="content">
| + | |
− | <h2>Lorem Ipsum</h2>
| + | |
− | <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | <div class="face face2abc">
| + | |
− | <h2>03</h2>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </section>
| + | |
− | | + | |
| | | |
| <br></br> | | <br></br> |
Line 1,477: |
Line 1,342: |
| }); | | }); |
| </script> | | </script> |
− | <script>
| |
− | document.getElementById("EUmark1").addEventListener("mouseover", function() {
| |
− | document.getElementById("Europe1").style.visibility = "visible";
| |
− | document.getElementById("Africa1").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan1").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("America1").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("AFmark1").addEventListener("mouseover", function() {
| |
− | document.getElementById("Africa1").style.visibility = "visible";
| |
− | document.getElementById("Europe1").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan1").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("America1").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("TWmark1").addEventListener("mouseover", function() {
| |
− | document.getElementById("Taiwan1").style.visibility = "visible";
| |
− | document.getElementById("Europe1").style.visibility = "hidden";
| |
− | document.getElementById("Africa1").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("America1").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("EAmark1").addEventListener("mouseover", function() {
| |
− | document.getElementById("East_Asia1").style.visibility = "visible";
| |
− | document.getElementById("Europe1").style.visibility = "hidden";
| |
− | document.getElementById("Africa1").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan1").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("America1").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("SAmark1").addEventListener("mouseover", function() {
| |
− | document.getElementById("South_Asia1").style.visibility = "visible";
| |
− | document.getElementById("Europe1").style.visibility = "hidden";
| |
− | document.getElementById("Africa1").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan1").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("America1").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("AMmark1").addEventListener("mouseover", function() {
| |
− | document.getElementById("America1").style.visibility = "visible";
| |
− | document.getElementById("Europe1").style.visibility = "hidden";
| |
− | document.getElementById("Africa1").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan1").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia1").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia1").style.visibility = "hidden";
| |
− | });
| |
| | | |
− |
| |
− | </script>
| |
− |
| |
− | <script>
| |
− | document.getElementById("EUmark").addEventListener("mouseover", function() {
| |
− | document.getElementById("Europe").style.visibility = "visible";
| |
− | document.getElementById("Africa").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia").style.visibility = "hidden";
| |
− | document.getElementById("America").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("AFmark").addEventListener("mouseover", function() {
| |
− | document.getElementById("Africa").style.visibility = "visible";
| |
− | document.getElementById("Europe").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia").style.visibility = "hidden";
| |
− | document.getElementById("America").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("TWmark").addEventListener("mouseover", function() {
| |
− | document.getElementById("Taiwan").style.visibility = "visible";
| |
− | document.getElementById("Europe").style.visibility = "hidden";
| |
− | document.getElementById("Africa").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia").style.visibility = "hidden";
| |
− | document.getElementById("America").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("EAmark").addEventListener("mouseover", function() {
| |
− | document.getElementById("East_Asia").style.visibility = "visible";
| |
− | document.getElementById("Europe").style.visibility = "hidden";
| |
− | document.getElementById("Africa").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia").style.visibility = "hidden";
| |
− | document.getElementById("America").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("SAmark").addEventListener("mouseover", function() {
| |
− | document.getElementById("South_Asia").style.visibility = "visible";
| |
− | document.getElementById("Europe").style.visibility = "hidden";
| |
− | document.getElementById("Africa").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia").style.visibility = "hidden";
| |
− | document.getElementById("America").style.visibility = "hidden";
| |
− | });
| |
− | document.getElementById("AMmark").addEventListener("mouseover", function() {
| |
− | document.getElementById("America").style.visibility = "visible";
| |
− | document.getElementById("Europe").style.visibility = "hidden";
| |
− | document.getElementById("Africa").style.visibility = "hidden";
| |
− | document.getElementById("Taiwan").style.visibility = "hidden";
| |
− | document.getElementById("East_Asia").style.visibility = "hidden";
| |
− | document.getElementById("South_Asia").style.visibility = "hidden";
| |
− | });
| |
− |
| |
− |
| |
− | </script>
| |
| | | |
| | | |