Tɛmplet:Intro to/styles.css
Yi palo
/* {{pp-template}} */
.introto__main {
display: flex;
position: relative;
box-sizing: border-box;
box-shadow: 2px 2px 2px #CCC;
flex-direction: row;
flex-wrap: wrap;
max-width: 1100px;
max-width: 100%;
overflow: hidden;
border: 1px solid black;
margin: auto;
}
.introto__main-title {
font-size: 250%;
background: #777;
color: #FFF;
text-align: center;
align-items: center;
justify-content: center;
}
.introto__lead {
background: #EEE;
padding: 30px 60px;
margin-bottom: 30px;
}
.introto__base {
max-width: 1060px;
min-height: 55px;
margin: auto;
padding: 5px 20px;
font-size: 1.1em;
background: #EEE;
border: 1px solid lightgrey;
}
.introto__tabs-main {
height: auto;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
.introto__tabs-title {
font-size: 1.5em;
font-weight: bold;
line-height: 1.2;
}
.introto__columns {
display: flex;
flex-direction: row;
flex-wrap: wrap-reverse;
justify-content: center;
}
.introto__columns-left {
display: inline-block;
flex: 0 1 0;
position: relative;
vertical-align: top;
min-width: 260px;
padding-bottom: 50px;
}
.introto__columns-left-button {
position: absolute;
bottom: 0;
padding-left: 2em;
}
.introto__columns-right {
display: inline-block;
flex: 1 1 0;
padding: 1em;
min-width: 250px;
vertical-align: top;
border-left: 1px solid #c9c9c9;
}
.introto__columns-right p {
margin-bottom: 2.0em; /* between paragraphs */
}
@media screen and (min-width: 1100px) {
.introto__main {
max-width: 1100px;
}
}
@media screen and (min-width: 800px) {
.introto__tabs-main {
padding: 0.75em 0.5em;
}
.introto__columns-right{
padding: 40px;
}
.introto__columns-left {
padding-bottom: 80px;
}
.introto__columns-left-button{
padding-bottom: 33px;
}
}