%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /home/ugotscom/public_html/maputilities/
Upload File :
Create Path :
Current File : /home/ugotscom/public_html/maputilities/radio.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>Maputilities</title>
  <meta content="" name="descriptison">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/icofont/icofont.min.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/venobox/venobox.css" rel="stylesheet">
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/owl.carousel/assets/owl.carousel.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <!-- =======================================================
  * Template Name: Medilab - v2.0.0
  * Template URL: https://bootstrapmade.com/medilab-free-medical-bootstrap-theme/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
@import url("https://fonts.googleapis.com/css?family=Dax:400,900");

 .middle {
	 width: 100%;
	 text-align: center;
	/* Made by */
}
 .middle h1 {
	 font-family: "Dax", sans-serif;
	 color: #fff;
}
 .middle input[type="radio"] {
	 display: none;
}
 .middle input[type="radio"]:checked + .box {
	 background-color: #007e90;
}
 .middle input[type="radio"]:checked + .box span {
	 color: white;
	 transform: translateY(70px);
}
 .middle input[type="radio"]:checked + .box span:before {
	 transform: translateY(0px);
	 opacity: 1;
}
 .middle .box {
	 width: 200px;
	 height: 200px;
	 background-color: #fff;
	 transition: all 250ms ease;
	 will-change: transition;
	 display: inline-block;
	 text-align: center;
	 cursor: pointer;
	 position: relative;
	 font-family: "Dax", sans-serif;
	 font-weight: 900;
}
 .middle .box:active {
	 transform: translateY(10px);
}
 .middle .box span {
	 position: absolute;
	 transform: translate(0, 60px);
	 left: 0;
	 right: 0;
	 transition: all 300ms ease;
	 font-size: 1.5em;
	 user-select: none;
	 color: #007e90;
}
 .middle .box span:before {
	 font-size: 1.2em;
	 font-family: FontAwesome;
	 display: block;
	 transform: translateY(-80px);
	 opacity: 0;
	 transition: all 300ms ease-in-out;
	 font-weight: normal;
	 color: white;
}
 .middle .front-end span:before {
	 content: "\f121";
}
 .middle .back-end span:before {
	 content: "\f0f4";
}
 .middle p {
	 color: #fff;
	 font-family: "Dax", sans-serif;
	 font-weight: 400;
}
 .middle p a {
	 text-decoration: underline;
	 font-weight: bold;
	 color: #fff;
}
 .middle p span:after {
	 content: "\f0e7";
	 font-family: FontAwesome;
	 color: yellow;
}
 
  </style>
</head>

<body>
<div class="middle">
  <h1>CSS Radio Button</h1>
  <label>
  <input type="radio" name="radio" checked/>
  <div class="front-end box">
    <span>Front-end</span>
  </div>
</label>

  <label>
  <input type="radio" name="radio"/>
  <div class="back-end box">
    <span>Back-end</span>
  </div>
</label>
  <p>Made <span></span> by <a href="https://github.com/gabrielferreiraa" target="_blank">@gabrielferreiraa</a></p>
</div>
</body>

</html>

Zerion Mini Shell 1.0