View source for Template:HK CPU-WFN-WYY/CSS




<html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
#HQ_page{
  width : 100%;
  height : auto;
}

#content{
  background-color: none !important;
  background: none;
}
#top_title{
  display:none;
}

h1,h2,h3,h4,h5,h6{
   font-weight: bold;
}

.mw-body{
  width : 100% !important;
  height : auto ;
  margin : 0 !important;
  padding : 0 !important;
}

html{
  /*font-family: Calibri,DFKai-sb,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;*/
  font-family: 'Poppins', sans-serif !important;
  color: #fff;
  font-size: 20pt;
  width : 100% !important;
  height : auto !important;
  padding : 0 !important;
  margin : 0 !important;
}
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: lightgray; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
body{
  background-color: #555;
  margin: 0;
  background-image: url("../../wiki/images/0/05/T--HK_CPU-WFN-WYY--bg.jpeg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  font: none !important;
}
table {
  border: 1px solid white;
  border-collapse: collapse;

}
table th, td{
  width: 1px;
  white-space: nowrap;
  padding: 3px 5px;
  text-align: center;
}
/*nav tr {
  width: 100%;
}

table{
 background: unset !important;
}
nav td, img {
  height: 40px;
}
nav td.nav_links {
  width: 8%;
}
.nav_dropdown {
  display: none;
}
.nav_dropdown_cell {
  display: none;
}*/
/*Navbar CSS part */
.navbar {
  width: 100%;
  padding: 0px, 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.295);
  position: fixed;
  z-index: 1;
  height: 68px;
  top: 16px;
}

.navbar a{
  text-decoration: none;
}

.navbar a:not([data-attr="img"]):hover{
  backdrop-filter: blur(20px);
}

.navbar .link {
  float: left;
  font-size: 16px;
  color: #4d949c;
  text-align: center;
  padding: 22px 30px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: #4d949c;
  padding: 22px 28px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar .link:hover,
.dropdown:hover .dropbtn,
.dropdown .link:hover {
  border-radius: 200px;
  cursor: pointer;
  font-weight: 400;
  backdrop-filter: blur(20px);
  transition: 1s;
}

.dropdown-content {
  font-size: 16px;
  display: none;
  position: absolute;
  background-color: #94BBC1dd;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 10px;
}

.dropdown-content a {
  float: none;
  color: rgb(10, 87, 117);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  border-radius: 10px;
  font-weight: 500;
}

.dropdown-content a:hover {
  backdrop-filter: blur(20px);
  background-color: #a3bec2;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/*.logoteam{
  border-radius: 50%;
  margin: -5px;
  display: block;
  height: 30px;
  width: 30px;
}*/
/*navbar CSS*/


.slide {
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
  z-index: 1;
  scroll-snap-align: start;
}

.slide .text{
  justify-self: left;
  text-align: left;
  font-size: 20px;
}
.slide .card{
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(255,255,255,0.5);
  border-left: 1px solid rgba(255,255,255,0.5);
  background-color: rgba(255,255,255, 0.1);
  backdrop-filter: blur(1px);
  display: inline-block;
  border-radius: 50px;
  padding: 5px,5px,5px,5px;
  margin: 30px;
  width: 25%;
  height: 500px;
  position: relative;
  max-width: 500px;
  min-width: 400px;
}

/*.slide .card:hover{
  width: 26%;
  background-color: rgba(255,255,255, 0.2);
  height: 520px;
}*/

.slide .card .cardcontent{
  padding: 10%;
  overflow: hidden;
  transition: 0.5s;
  color:#004966;
  align-items: center;
  overflow: hidden;
}
.slide .card .cardcontent h1{
  position: relative;
  z-index: -1;
  text-align: center;
  font-size: 1.5em;
  box-shadow: 0px 2px 0px rgba(0, 29, 29, 0.4);
  font-family: 'Permanent Marker' !important;
}
.slide .card .cardcontent .textcontent{
  font-size: 0.75em;
  color:#14485c;
  height: 50%;
  padding-top: 30px;
}

.slide .card .cardcontent a{
  top: 90%;
  padding: 8px 20px;
  text-decoration: none;
  color: #000;
  backdrop-filter: blur(10px);
  border-radius: 50px;
  position: absolute;
  margin-top: 50px;
  font-weight: 400;
  display: inline-block;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  font-family: 'Dancing Script';
  border: 1px solid rgba(255,255,255,0.5);
  color: #14485c;
  top: 70%;
  left: 30%;
  right: 30%;
}
.slide .card .cardcontent a:hover{
  transition: 0.5s;
  border: 1px solid rgba(255,255,255,1);
}

.footer-slide{
  bottom:0;
  margin-top:0;
  width:100%;
  display:flex;
  backdrop-filter: blur(10px);
  justify-content: center;
}

.logo{
  position: absolute;
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
}

.content1{
  width: 100%; 
}

.main-container{
  height: 100%;
}

.footer-slide .footer-col{
  float: left;
  width: 30%;
  padding: 5%;
  flex-wrap: wrap;
  padding-top: 2%;
}

.footer-slide .footer-col:after{
  content: "";
  display: table;
  clear: both;
}

</style>
</html>