Untitled
unknown
plain_text
2 years ago
44 kB
1
Indexable
Never
=== aplic.html === <DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Germânio</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="card"> <div class="tools"> <div class="circle"> <span class="red box"></span> </div> <div class="circle"> <span class="yellow box"></span> </div> <div class="circle"> <span class="green box"></span> </div> </div> <div class="card__content"> <h1>Os principais usos são: Fibra óptica. Eletrônica: Radares, amplificadores de guitarras elétricas, ligas metálicas de SiGe em circuitos integrados de alta velocidade. Óptica de infravermelhos: espectroscópios, sistemas de visão noturna e outros equipamentos. Lentes, com alto índice de refração, de ângulo amplo e para microscópios. Em joias é usado uma liga metálica de Au com 12% de germânio. Como elemento endurecedor do alumínio, magnésio e estanho. Em quimioterapia. O tetracloreto de germânio é usado como catalisador na síntese de polímeros ( PET ). Foi usado enquanto germanato de bismuto no tipo de camera gama utilizada nos anos 80, em medicina nuclear.</h1> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </body> </html> ===factos.html=== <DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Germânio</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="card"> <div class="tools"> <div class="circle"> <span class="red box"></span> </div> <div class="circle"> <span class="yellow box"></span> </div> <div class="circle"> <span class="green box"></span> </div> </div> <div class="card__content"> <h1>Cientistas estudam o germânio para uso em quimioterapia no tratamento, por exemplo, câncer. <br> Dmitri Mendeleev primeiro nomeou o elemento “ekasilicon”, mas mais tarde Winkler o renomeou. <br> Alguns compostos com germânio matam bactérias, sem prejudicar os animais. <br> É utilizado como catalisador para a produção de alguns tipos de plásticos. <br> A maior produção de germânio vem da China. Todavia, recicla-se também uma boa quantidade desse metal.</h1> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </body> </html> ===germanio.html=== <DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Germânio</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="content-wrapper"> <div class="news-card"> <a href="#" class="news-card__card-link"></a> <img src="images/germ1.jpg" alt="" class="news-card__image"> <div class="news-card__text-wrapper"> <h2 class="news-card__title">Quem Descobriu</h2> <div class="news-card__details-wrapper"> <p class="news-card__excerpt">Foi Descoberto pelo químico alemão Clemens Winkler quando analisava um minério de Freiberg, da Saxônia, o germânio teve, no entanto sua existência prevista 15.....…</p> <a href="quem.html" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a> </div> </div> </div> <div class="news-card"> <a href="#" class="news-card__card-link"></a> <img src="images/germ2.jpg" alt="" class="news-card__image"> <div class="news-card__text-wrapper"> <h2 class="news-card__title">Quando foi Descoberto</h2> <div class="news-card__details-wrapper"> <p class="news-card__excerpt">O Germânio foi descoberto em 1886 pelo químico alemão Clemens Winkler.…</p> <a href="quando.html" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a> </div> </div> </div> <div class="news-card"> <a href="#" class="news-card__card-link"></a> <img src="images/germ3.jpg" alt="" class="news-card__image"> <div class="news-card__text-wrapper"> <h2 class="news-card__title">Onde Existe na Natureza</h2> <div class="news-card__details-wrapper"> <p class="news-card__excerpt"> O germânio é um elemento bastante raro encontrado na crosta terrestre. Na natureza podemos encontrar alguns minerais com uma boa quantidade de germânio, como germanita e argirodita...…</p> <a href="natureza.html" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a> </div> </div> </div> <div class="news-card"> <a href="#" class="news-card__card-link"></a> <img src="images/germ4.jpg" alt="" class="news-card__image"> <div class="news-card__text-wrapper"> <h2 class="news-card__title">Aplicações</h2> <div class="news-card__details-wrapper"> <p class="news-card__excerpt">Os principais usos são: Fibra óptica. Eletrônica: Radares, amplificadores de guitarras elétricas, ligas metálicas de SiGe em circuitos integrados de alta velocidade.....</p> <a href="aplic.html" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a> </div> </div> </div> <div class="news-card"> <a href="#" class="news-card__card-link"></a> <img src="images/germ5.jpg" alt="" class="news-card__image"> <div class="news-card__text-wrapper"> <h2 class="news-card__title">Factos</h2> <div class="news-card__details-wrapper"> <p class="news-card__excerpt">Cientistas estudam o germânio para uso em quimioterapia no tratamento, por exemplo, câncer. Dmitri Mendeleev primeiro nomeou o elemento “ekasilicon”, mas mais tarde Winkler o renomeou.…</p> <a href="factos.html" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a> </div> </div> </div> <div class="news-card"> <a href="#" class="news-card__card-link"></a> <img src="images/germ6.jpg" alt="" class="news-card__image"> <div class="news-card__text-wrapper"> <h2 class="news-card__title">Source Code</h2> <div class="news-card__details-wrapper"> <p class="news-card__excerpt">Source Code, html e Css de todo o website. </p> <a href="#" class="news-card__read-more">Read more <i class="fas fa-long-arrow-alt-right"></i></a> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </body> </html> ===index.html=== <DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Germânio</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="card"> <div class="imgBx"> <img src="images/germanium.png"> </div> <div class="contentBx"> <h2>Germânio</h2> <div class="size"> <h3>Clemens Winkler</h3> </div> <div class="color"> <h3>1886 </h3> </div> <a href="germanio.html">Veja Mais</a> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </body> </html> ===natureza.html=== <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Germânio</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="card"> <div class="tools"> <div class="circle"> <span class="red box"></span> </div> <div class="circle"> <span class="yellow box"></span> </div> <div class="circle"> <span class="green box"></span> </div> </div> <div class="card__content"> <h1>O germânio é um elemento bastante raro encontrado na crosta terrestre. Na natureza podemos encontrar alguns minerais com uma boa quantidade de germânio, como germanita e argirodita. Todavia, esses minerais são raros demais para serem economicamente viável a sua mineração. Dessa forma, a maior parte do germânio utilizado pela indústria provém da mineração de zinco esfalerita. Nesse minério, podemos encontrar o germânio em pequenas quantidades</h1> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </body> </html> ===quando.html=== <DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Germânio</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="card"> <div class="tools"> <div class="circle"> <span class="red box"></span> </div> <div class="circle"> <span class="yellow box"></span> </div> <div class="circle"> <span class="green box"></span> </div> </div> <div class="card__content"> <h1>O Germânio foi descoberto em 1886 pelo químico alemão Clemens Winkler.</h1> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </body> </html> ===quem=== <!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1" name="viewport" /> <title>Germânio</title> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="card"> <div class="tools"> <div class="circle"> <span class="red box"></span> </div> <div class="circle"> <span class="yellow box"></span> </div> <div class="circle"> <span class="green box"></span> </div> </div> <div class="card__content"> <h1>Foi Descoberto pelo químico alemão Clemens Winkler quando analisava um minério de Freiberg, da Saxônia, o germânio teve, no entanto sua existência prevista 15, anos antes por Mendeleiev, que o chamou aca-silício. As aplicações do germânio estão limitadas ao seu alto custo e em muitos casos estuda-se a sua substituição por materiais mais econômicos.</h1> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous" ></script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> </body> </html> ===style.css=== @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); body{ background-color: rgb(31, 31, 31) !important; } *{ font-family: 'Poppins', sans-serif; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #131313; } .container{ display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .container .card{ position: relative; width: 320px; height: 450px; background: #232323; border-radius: 20px; overflow: hidden; } .container .card:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #71cbff; clip-path: circle(150px at 80% 20%); transition: 0.5s ease-in-out; } .container .card:hover:before{ clip-path: circle(300px at 80% -20%); } .container .card:after{ content: ''; position: absolute; top: 30%; left: -20%; font-size: 12em; font-weight: 800; font-style: italic; color: rgba(255,255,25,0.05) } .container .card .imgBx{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 10000; width: 100%; height: 220px; transition: 0.5s; } .container .card:hover .imgBx{ top: 0%; transform: translateY(0%); } .container .card .imgBx img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate( -0deg); width: 270px; } .container .card .contentBx{ position: absolute; bottom: 0; width: 100%; height: 100px; text-align: center; transition: 1s; z-index: 10; } .container .card:hover .contentBx{ height: 210px; } .container .card .contentBx h2{ position: relative; font-weight: 600; letter-spacing: 1px; color: #fff; margin: 0; } .container .card .contentBx .size, .container .card .contentBx .color { display: flex; justify-content: center; align-items: center; padding: 8px 20px; transition: 0.5s;opacity: 0; visibility: hidden; padding-top: 0; padding-bottom: 0; } .container .card:hover .contentBx .size{ opacity: 1; visibility: visible; transition-delay: 0.5s; } .container .card:hover .contentBx .color{ opacity: 1; visibility: visible; transition-delay: 0.6s; } .container .card .contentBx .size h3, .container .card .contentBx .color h3{ color: #fff; font-weight: 300; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; margin-right: 10px; margin-top: 5px; } .container .card .contentBx .size span{ width: 26px; height: 26px; text-align: center; line-height: 26px; font-size: 14px; display: inline-block; color: #111; background: #fff; margin: 0 5px; transition: 0.5s; color: #111; border-radius: 4px; cursor: pointer; } .container .card .contentBx .size span:hover{ background: #9bdc28; } .container .card .contentBx .color span{ width: 20px; height: 20px; background: #ff0; border-radius: 50%; margin: 0 5px; cursor: pointer; } .container .card .contentBx .color span:nth-child(2){ background: #9bdc28; } .container .card .contentBx .color span:nth-child(3){ background: #03a9f4; } .container .card .contentBx .color span:nth-child(4){ background: #e91e63; } .container .card .contentBx a{ display: inline-block; padding: 10px 25px; background: #fff; margin-top: 10px; text-decoration: none; border-radius: 20px; font-weight: 600; color: #111; opacity: 0; transform: translateY(60px); transition: 0.5s; margin-top: 0; font-family: 'Poppins'; } .container .card:hover .contentBx a{ background: #fff; opacity: 1; transform: translateY(0px); transition-delay: 0.75s; } .container .card .contentBx a:hover{ background: #33beff; } ===style2.css=== @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif !important; } body { background-color: rgb(31, 31, 31) !important; font-family: 'Poppins', sans-serif !important; } .content-wrapper { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; padding: 0.5rem; } .news-card { border: 0px solid aqua; margin: 0.5rem; position: relative; height: 12rem; overflow: hidden; border-radius: 0.5rem; flex: 1; min-width: 290px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @media (min-width: 900px) { .news-card { height: 20rem } } .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);; z-index: 0; } .news-card__card-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* background: rgba(255,0,0,.5); */ } .news-card__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1; } .news-card__text-wrapper { position: absolute; bottom: 0rem; padding: 1rem; color: white; /* background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease; } .news-card__title { transition: color 1s ease; margin-bottom: .5rem; } .news-card__post-date { font-size: .7rem; margin-bottom: .5rem; color: #CCC; } .news-card__details-wrapper { max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease; } @media (min-width: 900px) { .news-card:hover .news-card__details-wrapper { max-height: 20rem; opacity: 1; } .news-card:hover .news-card__text-wrapper { background-color: rgba(0, 0, 0, 0.6); } .news-card:hover .news-card__title { color: rgb(255, 255, 255); } .news-card:hover .news-card__image { transform: scale(1.2); z-index: -1; } } .news-card__excerpt { font-weight: 300; } .news-card__read-more { background: black; color: #bbb; display: block; padding: 0.4rem 0.6rem; border-radius: 0.3rem; margin-top: 1rem; border: 1px solid #444; font-size: 0.8rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-decoration: none; width: 7rem; margin-left: auto; position: relative; z-index: 5; } .news-card__read-more i { position: relative; left: 0.2rem; color: #888; transition: left 0.5s ease, color 0.6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news-card__read-more:hover i { left: 0.5rem; color: rgb(0, 204, 255); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Open Sans"; } body { background-color: #555; } .content-wrapper { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; padding: 0.5rem; } .news-card { border: 0px solid aqua; margin: 0.5rem; position: relative; height: 12rem; overflow: hidden; border-radius: 0.5rem; flex: 1; min-width: 290px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @media (min-width: 900px) { .news-card { height: 20rem } } .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);; z-index: 0; } .news-card__card-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* background: rgba(255,0,0,.5); */ } .news-card__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1; } .news-card__text-wrapper { position: absolute; bottom: 0rem; padding: 1rem; color: white; /* background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease; } .news-card__title { transition: color 1s ease; margin-bottom: .5rem; } .news-card__post-date { font-size: .7rem; margin-bottom: .5rem; color: #CCC; } .news-card__details-wrapper { max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease; } @media (min-width: 900px) { .news-card:hover .news-card__details-wrapper { max-height: 20rem; opacity: 1; } .news-card:hover .news-card__text-wrapper { background-color: rgba(0, 0, 0, 0.6); } .news-card:hover .news-card__title { color: rgb(255, 255, 255); } .news-card:hover .news-card__image { transform: scale(1.2); z-index: -1; } } .news-card__excerpt { font-weight: 300; } .news-card__read-more { background: black; color: #bbb; display: block; padding: 0.4rem 0.6rem; border-radius: 0.3rem; margin-top: 1rem; border: 1px solid #444; font-size: 0.8rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-decoration: none; width: 7rem; margin-left: auto; position: relative; z-index: 5; } .news-card__read-more i { position: relative; left: 0.2rem; color: #888; transition: left 0.5s ease, color 0.6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news-card__read-more:hover i { left: 0.5rem; color: rgb(255, 255, 255); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Open Sans"; } body { background-color: #555; } .content-wrapper { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; padding: 0.5rem; } .news-card { border: 0px solid aqua; margin: 0.5rem; position: relative; height: 12rem; overflow: hidden; border-radius: 0.5rem; flex: 1; min-width: 290px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @media (min-width: 900px) { .news-card { height: 20rem } } .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);; z-index: 0; } .news-card__card-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* background: rgba(255,0,0,.5); */ } .news-card__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1; } .news-card__text-wrapper { position: absolute; bottom: 0rem; padding: 1rem; color: white; /* background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease; } .news-card__title { transition: color 1s ease; margin-bottom: .5rem; } .news-card__post-date { font-size: .7rem; margin-bottom: .5rem; color: #CCC; } .news-card__details-wrapper { max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease; } @media (min-width: 900px) { .news-card:hover .news-card__details-wrapper { max-height: 20rem; opacity: 1; } .news-card:hover .news-card__text-wrapper { background-color: rgba(0, 0, 0, 0.6); } .news-card:hover .news-card__title { color: rgb(255, 255, 255); } .news-card:hover .news-card__image { transform: scale(1.2); z-index: -1; } } .news-card__excerpt { font-weight: 300; } .news-card__read-more { background: black; color: #bbb; display: block; padding: 0.4rem 0.6rem; border-radius: 0.3rem; margin-top: 1rem; border: 1px solid #444; font-size: 0.8rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-decoration: none; width: 7rem; margin-left: auto; position: relative; z-index: 5; } .news-card__read-more i { position: relative; left: 0.2rem; color: #888; transition: left 0.5s ease, color 0.6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news-card__read-more:hover i { left: 0.5rem; color: rgb(0, 204, 255); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Open Sans"; } body { background-color: #555; } .content-wrapper { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; padding: 0.5rem; } .news-card { border: 0px solid aqua; margin: 0.5rem; position: relative; height: 12rem; overflow: hidden; border-radius: 0.5rem; flex: 1; min-width: 290px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @media (min-width: 900px) { .news-card { height: 20rem } } .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);; z-index: 0; } .news-card__card-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* background: rgba(255,0,0,.5); */ } .news-card__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1; } .news-card__text-wrapper { position: absolute; bottom: 0rem; padding: 1rem; color: white; /* background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease; } .news-card__title { transition: color 1s ease; margin-bottom: .5rem; } .news-card__post-date { font-size: .7rem; margin-bottom: .5rem; color: #CCC; } .news-card__details-wrapper { max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease; } @media (min-width: 900px) { .news-card:hover .news-card__details-wrapper { max-height: 20rem; opacity: 1; } .news-card:hover .news-card__text-wrapper { background-color: rgba(0, 0, 0, 0.6); } .news-card:hover .news-card__title { color: rgb(0, 204, 255); } .news-card:hover .news-card__image { transform: scale(1.2); z-index: -1; } } .news-card__excerpt { font-weight: 300; } .news-card__read-more { background: black; color: #bbb; display: block; padding: 0.4rem 0.6rem; border-radius: 0.3rem; margin-top: 1rem; border: 1px solid #444; font-size: 0.8rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-decoration: none; width: 7rem; margin-left: auto; position: relative; z-index: 5; } .news-card__read-more i { position: relative; left: 0.2rem; color: #888; transition: left 0.5s ease, color 0.6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news-card__read-more:hover i { left: 0.5rem; color: rgb(255, 255, 255); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Open Sans"; } body { background-color: #555; } .content-wrapper { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; padding: 0.5rem; } .news-card { border: 0px solid aqua; margin: 0.5rem; position: relative; height: 12rem; overflow: hidden; border-radius: 0.5rem; flex: 1; min-width: 290px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @media (min-width: 900px) { .news-card { height: 20rem } } .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);; z-index: 0; } .news-card__card-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* background: rgba(255,0,0,.5); */ } .news-card__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1; } .news-card__text-wrapper { position: absolute; bottom: 0rem; padding: 1rem; color: white; /* background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease; } .news-card__title { transition: color 1s ease; margin-bottom: .5rem; } .news-card__post-date { font-size: .7rem; margin-bottom: .5rem; color: #CCC; } .news-card__details-wrapper { max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease; } @media (min-width: 900px) { .news-card:hover .news-card__details-wrapper { max-height: 20rem; opacity: 1; } .news-card:hover .news-card__text-wrapper { background-color: rgba(0, 0, 0, 0.6); } .news-card:hover .news-card__title { color: rgb(255, 255, 255); } .news-card:hover .news-card__image { transform: scale(1.2); z-index: -1; } } .news-card__excerpt { font-weight: 300; } .news-card__read-more { background: black; color: #bbb; display: block; padding: 0.4rem 0.6rem; border-radius: 0.3rem; margin-top: 1rem; border: 1px solid #444; font-size: 0.8rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-decoration: none; width: 7rem; margin-left: auto; position: relative; z-index: 5; } .news-card__read-more i { position: relative; left: 0.2rem; color: #888; transition: left 0.5s ease, color 0.6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news-card__read-more:hover i { left: 0.5rem; color: rgb(255, 255, 255); } * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Open Sans"; } body { background-color: #555; } .content-wrapper { margin: 0 auto; max-width: 1200px; display: flex; flex-flow: row wrap; justify-content: center; padding: 0.5rem; } .news-card { border: 0px solid aqua; margin: 0.5rem; position: relative; height: 12rem; overflow: hidden; border-radius: 0.5rem; flex: 1; min-width: 290px; box-shadow: 0 0 1rem rgba(0, 0, 0, 0.5); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); } @media (min-width: 900px) { .news-card { height: 20rem } } .news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 80%);; z-index: 0; } .news-card__card-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; /* background: rgba(255,0,0,.5); */ } .news-card__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 3s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: relative; z-index: -1; } .news-card__text-wrapper { position: absolute; bottom: 0rem; padding: 1rem; color: white; /* background-color: rgba(0, 0, 0, 0.4); */ transition: background-color 1.5s ease; } .news-card__title { transition: color 1s ease; margin-bottom: .5rem; } .news-card__post-date { font-size: .7rem; margin-bottom: .5rem; color: #CCC; } .news-card__details-wrapper { max-height: 0; opacity: 0; transition: max-height 1.5s ease, opacity 1s ease; } @media (min-width: 900px) { .news-card:hover .news-card__details-wrapper { max-height: 20rem; opacity: 1; } .news-card:hover .news-card__text-wrapper { background-color: rgba(0, 0, 0, 0.6); } .news-card:hover .news-card__title { color: rgb(255, 255, 255); } .news-card:hover .news-card__image { transform: scale(1.2); z-index: -1; } } .news-card__excerpt { font-weight: 300; } .news-card__read-more { background: black; color: #bbb; display: block; padding: 0.4rem 0.6rem; border-radius: 0.3rem; margin-top: 1rem; border: 1px solid #444; font-size: 0.8rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; text-decoration: none; width: 7rem; margin-left: auto; position: relative; z-index: 5; } .news-card__read-more i { position: relative; left: 0.2rem; color: #888; transition: left 0.5s ease, color 0.6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .news-card__read-more:hover i { left: 0.5rem; color: rgb(255, 255, 255); } .card { width: 92%; height: 80%; margin: 0 auto; background-color: #F8FBFE; border-radius: 8px; z-index: 1; text-align: center; margin-top: 15%; } .tools { display: flex; align-items: center; padding: 9px; } .circle { padding: 0 4px; } .box { display: inline-block; align-items: center; width: 10px; height: 10px; padding: 1px; border-radius: 50%; } .red { background-color: #ff605c; } .yellow { background-color: #ffbd44; } .green { background-color: #00ca4e; }