Şablon:Anasayfa/sınıflar.css
Fen Ansiklopedisi sitesinden
html {
height: 100vh;
}
body {
padding: 0;
margin: 0;
font-family: 'Fjalla One', sans-serif;
background: linear-gradient( #fff, #fefefe, #eaeaea);
}
.accordion {
max-width: 990px;
background: rgba(0, 0, 0, 0.10);
height: 300px;
margin: 20px auto;
display: flex;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
flex-direction: row;
cursor: pointer;
margin-bottom: 100px;
}
.box {
position: relative;
height: 100%;
flex: 1;
background-position: left;
background-size: cover;
transition: .7s;
box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.47);
}
.box:hover{
flex: 7;
height: 400px;
}
.a1 {
}
.a2 {
}
.a3 {
color: #fff;
}
.a4 {
color: #fff;
}
.a5 {
}
p {
font-weight: normal;
font-family: 'Exo 2', sans-serif;
}
.text {
position: absolute;
bottom: 0;
opacity: 0;
padding: 10px;
}
.box:hover .text{
opacity:1;
}
h1 {
width: 250px;
text-align: center;
margin: 100px auto 20px auto;
}
@media screen and (max-width: 800px){
body{
margin: 0;
}
.accordion {
flex-direction: column;
height: 700px;
box-shadow: none;
}
.box {
box-shadow: none;
}
.box:hover {
flex: 7;
}
}