eclass.unmer.ac.id

<!doctype html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Dirceu Silva de Oliveira">
    <meta name="generator" content="QUIZ Brasken">
    <title>QUIZPLASTITROQUE</title>

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<link rel="apple-touch-icon" href="/docs/5.0/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/docs/5.0/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/docs/5.0/assets/img/favicons/safari-pinned-tab.svg" color="#7952b3">
<link rel="icon" href="/docs/5.0/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#7952b3">

<style>

@font-face {
      font-family: "Intelo-Bold";
      src: url("fonts/Intelo-Bold.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-BoldItalic";
      src: url("fonts/Intelo-BoldItalic.ttf") format("truetype");
      }@font-face {
      font-family: "Intelo-ExtraBold";
      src: url("fonts/Intelo-ExtraBold.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-Italic";
      src: url("fonts/Intelo-Italic.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-Light";
      src: url("fonts/Intelo-Light.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-LightItalic";
      src: url("fonts/Intelo-LightItalic.ttf") format("truetype");
      }@font-face {
      font-family: "Intelo-Medium";
      src: url("fonts/Intelo-Medium.ttf") format("truetype");
      }
      @font-face {
      font-family: "Intelo-Regular";
      src: url("fonts/Intelo-Regular.ttf") format("truetype");
      }

body{background-image: url('img/Fundo.png');
          background-size: cover;
          background-repeat: no-repeat;}

.mains{padding-left: 250px; margin-bottom: 50px;}
      .quiz{font-family: Intelo-ExtraBold; color: #1756A5; font-size: 7em }
      .resposta{font-family: Intelo-ExtraBold; color: #1756A5; font-size: 1.5em; margin-top: 30px; margin-left: 20px }
      .resposta span{
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: #1756A5;
        font-size: 1em; color: #fffdd9;
        }
      .perguntas{font-family: Intelo-Medium; color: #1756A5; margin-top: 30px; margin-left: 20px}

.obs{font-family: Intelo-Bold; color: #1756A5; margin-top: 30px; margin-left: 20px}

.elemento{position: absolute; top: 426px; z-index: -1 }

.footer{background-color: #1756A5; height: 40px; position: relative; z-index: -2 }

#desktop{display: block;}
      #celular{display: none;}

@media (min-width: 320px) and (max-width: 767px) {
          
          body{height: 780px}
          .elemento{display: none;}
          .mains{padding-left: 0px; margin-bottom: 50px}
          #desktop{display: none;}
          #celular{display: block;}
          .footer {
              display: none;
          }
          
      }

.gradient-button {
          margin: 10px;
          font-family: Intelo-Medium;
          font-size: 20px;
          padding: 5px 20px;
          text-align: center;
          text-transform: uppercase;
          transition: 0.5s;
          background-size: 200% auto;
          color: #FFF;
          box-shadow: 0 0 20px #eee;
          border-radius: 10px;
          width: 200px;
          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
          cursor: pointer;
          display: inline-block;
          border-radius: 25px;
          text-decoration: none;
      }
      
      .gradient-button-4 {background-image: linear-gradient(to right, #00d2ff 0%, #3a7bd5 51%, #00d2ff 100%)}
      .gradient-button-4:hover { background-position: right center; color: #FFF }

.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

@media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

</head>
<body>
    
<nav class="navbar navbar-expand-md mb-4" style="background-color: #1656A4;">
  <div class="container">
    <a class="navbar-brand" href="#">
      <img src="img/logo1.png" alt="">
    </a>
  </div>
</nav>

<main class="container mains">
  <div class="col-lg-12">
    <img class="logo2" src="img/logo2.png" />
  </div>
  
  <div class="col-lg-12">
    <p class="perguntas">
      <span id="desktop"> O Plastitroque é um projeto da Braskem<br /> e tem como objetivo destacar a importância<br /> da coleta seletiva, conscientização e<br /> destinação correta de resíduos.<br /><br />
      Já trocamos muitas informações<br /> interessantes nos últimos dias e agora é<br /> hora de testar seus conhecimentos sobre<br /> o que fazer com os resíduos recicláveis. <br /><br /><b>Vamos lá?</b></span>

<span id="celular"> O Plastitroque é um projeto da Braskem e tem como objetivo destacar a importância<br /> da coleta seletiva, conscientização e destinação correta de resíduos.<br /><br />
      Já trocamos muitas informações interessantes nos últimos dias e agora é hora de testar seus conhecimentos sobre o que fazer com os resíduos recicláveis. <br /><br /><b>Vamos lá?</b></span>

</p>
  </div>
  
  <div class="col-lg-12">
    <a href="cadastro.php" class="gradient-button gradient-button-4">CADASTRO</a>
  </div>

</main>

</body>
</html>