<html> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <scriptsrc="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></scriptsrc> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"> <style> .responsive-image { height: auto; width: 40%; margin-bottom: 50px; margin-top: 170px; } .responsive-image1 { height: auto; width: 50%; } .center{ margin: 0 auto; width:1000px; border: 0px solid black; } :root { –red: hsl(0, 78%, 62%); –cyan: hsl(180, 62%, 55%); –orange: hsl(34, 97%, 64%); –blue: hsl(212, 86%, 64%); –varyDarkBlue: hsl(234, 12%, 34%); –grayishBlue: hsl(229, 6%, 66%); –veryLightGray: hsl(0, 0%, 98%); –weight1: 200; –weight2: 400; –weight3: 600; } body { font-size: 15px; font-family: 'Poppins', sans-serif; } .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); } h1:first-of-type { font-weight: var(–weight1); color: var(–varyDarkBlue); } h1:last-of-type { color: var(–varyDarkBlue); } @media (max-width: 400px) { h1 { font-size: 1.5rem; } } .header { text-align: center; line-height: 0.8; margin-bottom: 50px; margin-top: 100px; } .header p { margin: 0 auto; line-height: 1.6; color: var(–grayishBlue); } .box p { color: var(–grayishBlue); } .box { border-radius: 5px; box-shadow: 0px 30px 40px -20px var(–grayishBlue); padding: 30px; margin: 20px; background-color: #ffffff; transition: all 0.3s ease-out; } .box1 { border-radius: 5px; box-shadow: 0px 30px 40px -20px var(–grayishBlue); padding: 30px; margin: 20px; } .box1 { width: 60%; } .box:hover { transform: translateY(-5px); cursor: pointer; } .img { height: 50px; weight: 50px; } @media (max-width: 450px) { .box { height: 200px; } } @media (max-width: 950px) and (min-width: 450px) { .box { text-align: center; height: 180px; } } .cyan { border-top: 3px solid var(–blue); } .red { border-top: 3px solid var(–blue); } .blue { border-top: 3px solid var(–blue); } .orange { border-radius: 5px; box-shadow: 0px 10px 10px 10px var(–grayishBlue); } h3 { color: var(–varyDarkBlue); font-weight: var(–weight3); } @media (min-width: 950px) { .row1-container { display: flex; justify-content: center; align-items: center; } .row2-container { display: flex; justify-content: center; align-items: center; } .box-down { position: relative; top: 150px; } .box { width: 30%; } .header p { width: 50%; } } .row { display: flex; justify-content: center; align-items: center; } .card { border-radius: 5px; box-shadow: 7px 7px 13px 0px rgba(50, 50, 50, 0.22); padding: 30px; margin: 20px; width: 400px; transition: all 0.3s ease-out; } .card:hover { transform: translateY(-5px); cursor: pointer; } .card p { color: #a3a5ae; font-size: 16px; } .image { max-width: 64px; max-height: 64px; } .cardow { box-shadow: 0 1rem 1rem hsl(0 0% 0% / 20%); line-height: 1.5; font-size: 1.2rem; font-weight: 300; width: 70%; height: 30%; display: flex; place-items: center; text-align: center; padding: 3ch; border: 1px solid hsl(0 0% 83%); } p { color: #a3a5ae; font-size: 16px; } .modal-dialog { margin-top: 0rem; max-width: 100%; .modal-content { border-radius: 0rem; } .buttons { .btn { margin: 0.2rem; } } } </style> <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link active" href="#item-1">O QUE É A PSI?</a> </li> <li class="nav-item"> <a class="nav-link" href="#item-2">O QUE É A SEGURANÇÃ DA INFORMAÇÃO?</a> </li> <li class="nav-item"> <a class="nav-link" href="#item-3">A CPSI</a> </li> <li class="nav-item"> <a class="nav-link" href="#item-4//">PSI NA ÍNTEGRA</a> </li> </ul> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32×32.png"> <title>Frontend Mentor | Four card feature section</title> <link rel="stylesheet" href="styles.css"> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,400;0,600;1,200;1,400;1,600&display=swap" '' rel=__GESHI_QUOT__stylesheet__GESHI_QUOT__> '' </head> <body> '' <div class=__GESHI_QUOT__header__GESHI_QUOT__> <h1 id=__GESHI_QUOT__item-1__GESHI_QUOT__>Política de Segurança da Informação</h1> '' '' <p>A PSI é uma declaração formal acerca do compromisso da SETIC com a proteção das informações de sua propriedade e/ou sob sua guarda, devendo ser cumprida por todos os envolvidos, internamente e externamente à Superintendência, |