Kullanıcı:Jopalist/renkli.css
Görünüm
Bu sayfaya eklediğiniz kodlar hesabınızı tehlike altına sokacak kötü amaçlı içerik barındırabilir. Başka bir sayfada yer alan betikleri "mw.loader.load", "importScript" veya "iusc" gibi yöntemlerle kullanmadan önce, bu yöntemle içeriği başkaları tarafından kontrol edilebilecek uzaktaki bir betiği dinamik olarak yüklemiş olacağınızı bilmeniz gerekir. Sayfaya eklediğiniz kodun güvenli olup olmadığından emin değilseniz, Köy Çeşmesi'nde deneyimli kullanıcılara danışabilirsiniz. Kod, sayfa önizlemesinde de çalıştırılacaktır. |
*{
margin:0;
padding:0;
box-sizing: border-box;
}
ul, li {
list-style: none;
font-size: 14px;
}
.clear{
clear: both;
}
a{
text-decoration: none;
color: #3366cc;
}
a:hover{
color:#7da0e5;
}
.container{
width: 1000px;
margin: auto;
padding: 20px;
}
/*Header*/
.vector-page-toolbar{
display: flex;
box-shadow: 0 1px #c8ccd1;
margin-bottom: 1px;
padding-bottom: 10px;
}
.vector-page-toolbar .left-navigation{
display: flex;
flex-grow: 1;
}
.vector-page-toolbar .left-navigation ul li.active a{
border-bottom: 1px solid black;
padding: 10px;
font-weight: 600;
}
.vector-page-toolbar .left-navigation ul li a:hover{
border-bottom: 1px solid black;
padding: 10px;
}
.vector-page-toolbar .left-navigation ul li a{
padding: 10px;
}
.vector-page-toolbar ul{
display: flex;
}
.vector-page-toolbar ul li{
padding:0px 20px 0px 0px;
width: auto;
}
.main-header{
display:flex;
flex-wrap: wrap;
border:1px solid #e0e0e0;
margin-top: 15px;
padding:15px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg);
background-position: right;
background-repeat: no-repeat;
background-color: #f8f9fa;
border: 1px solid #c8ccd1;
border-radius: 2px;
}
.main-header-left{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 50%;
}
.main-header-left_title{
text-transform: inherit;
font-size: 28px;
margin: 0px!important;
font-family: inherit;
}
.main-header_slogan{
padding:10px 0px;
}
.main-header-right{
flex-basis: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-header_rightInfo a{
color:#3366cc;
}
.main-header-rightMenu ul{
display: flex;
align-items: center;
}
.main-header-rightMenu ul li{
padding:10px;
font-weight: 600;
}
.main-header-bottom{
display:flex;
flex-wrap: wrap;
border:1px solid #e0e0e0;
border-top:0px;
color:#000;
font-weight: 600;
}
.main-header-bottom a{
color:#3366cc;
padding:0px 5px;
}
.main-header-bottom-left{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 50%;
padding:10px;
}
.main-header-bottom-left ul,.main-header-bottom-right ul{
display: flex;
}
.main-header-bottom-right{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-basis: 50%;
}
.main-header-bottom li{
font-weight: 500;
padding-left: 5px;
}
/*Header*/
/*Main-Body*/
.main-body {
display: flex;
margin-top: 20px;
}
.main-body-left {
flex-basis: 50%;
margin-right: 10px;
}
.main-body-right {
flex-basis: 50%;
margin-left: 10px;
}
.main-body .myCard{
border:1px solid #e0e0e0;
margin-bottom:10px;
}
.main-body .myCard .colorHead{
padding:10px;
}
.main-body .myCard .colorHead .myCardContent p{
text-align: start;
}
.main-body .myCard .colorHead .iconGolden {
background: linear-gradient(45deg, #fcf4db, transparent);
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconGolden i{
width: 36px;
height: 36px;
background: #F2C94C;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconGreen {
background: linear-gradient(45deg, #d4efdf, transparent);
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconGreen i{
width: 36px;
height: 36px;
background: #27ae60;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconPurple {
background: linear-gradient(45deg, #f1e1f7, transparent);
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconPurple i{
width: 36px;
height: 36px;
background: #bb6bd9;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconBlue {
background: linear-gradient(45deg, #d5ebf8, transparent);
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconBlue i{
width: 36px;
height: 36px;
background: #2d9cdb;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconOrange {
background: linear-gradient(45deg, #fcebdb, transparent);
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconOrange i{
width: 36px;
height: 36px;
background: #f2994a;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead .iconGray {
background: linear-gradient(45deg, #e6e8ec, transparent);
display: flex;
align-items: center;
}
.main-body .myCard .colorHead .iconGray i{
width: 36px;
height: 36px;
background: #828ea1;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body .myCard .colorHead span{
padding-left: 10px;
font-weight: 600;
}
.myCardBottom{
border:0px;
border-top:1px solid #e0e0e0;
font-weight: 600;
}
.myCardBottom ul{
display: flex;
}
.myCardBottom ul li{
padding:10px;
}
.fieldBox{
display: flex;
justify-content: start;
align-items: center;
}
.fieldBox i{
color:#3366cc;
font-size: 34px;
}
.rightField{
display: flex;
flex-direction: column;
}
.rightFieldHead{
font-weight: 600;
padding: 0px 10px;
text-align: start;
}
.rightFieldHead a{
color:#3366cc;
}
.rightFieldList{padding:6.5px;}
.rightFieldList ul{
display: flex;
flex-wrap: wrap;
padding-bottom: 10px;
border-bottom: 1px dotted #e0e0e0;
}
.rightFieldList ul li{
margin: 2px;
font-size: 14px;
}
.rightFieldList ul li a{
color:#3366cc;
}
/*Main-Body*/
.main-body-bottom{
margin-top: 20px;
}
.main-body-bottom .myCard{
border:1px solid #e0e0e0;
margin-bottom:10px;
}
.main-body-bottom .myCard .colorHead{
padding:5px;
}
.main-body-bottom .myCard .colorHead .iconPink {
background: linear-gradient(45deg, #f9e0f0, transparent);
display: flex;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconVono {
background: #fff4dd;
display: flex;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconPink i{
width: 36px;
height: 36px;
background: #e066b4;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconVono i{
width: 36px;
height: 36px;
background: #e066b4;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconSoft {
background: #ededed;
display: flex;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconSoft i{
width: 36px;
height: 36px;
background: #bdbdbd;
color:#fff;
display: flex;
justify-content: center;
align-items: center;
}
.main-body-bottom .myCard .colorHead .iconPink a,.main-body-bottom .myCard .colorHead .iconSoft a{
font-weight: 600;
}
.main-body-bottom .myCard .colorHead .iconVono a,.main-body-bottom .myCard .colorHead .iconSoft a{
font-weight: 600;
}
.body-bottom-img1{
display: flex;
justify-content: center;
align-items: center;
}
.body-img-text{
display: flex;
justify-content: center;
align-items: center;
padding:10px;
width: 100%;
}
.body-img-text p{
width: 50%;
}
.content-improvement{
display: flex;
margin-top: 20px;
}
.content-improvement-left {
flex-basis: 60%;
margin-right: 10px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.content-improvement-item {
width: 49%;
margin-top: 10px;
}
.content-improvement-item a{
display: flex;
width: 100%;
font-size: 26px;
font-weight: 600;
padding-bottom: 5px;
}
.content-improvement-item p{
padding-bottom: 10px;
}
.content-improvement-right{
flex-basis: 40%;
margin-left: 10px;
}
.content-improvement-item:hover a{
color:#fff;
}
.red-improvement{
border-bottom: 5px solid #dd3333;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px
}
.red-improvement .icon i img,.blue-improvement .icon i img,.green-improvement .icon i img{
padding-right: 20px;
opacity: .1;
}
.blue-improvement{
border-bottom: 5px solid #3366cc;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px
}
.green-improvement{
border-bottom: 5px solid #00af89;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px
}
.red-improvement:hover{
border-bottom: 5px solid #dd3333;
background: #dd3333;
color:#fff;
cursor: pointer;
transition: .2s;
}
.blue-improvement:hover{
border-bottom: 5px solid #3366cc;
background: #3366cc;
color:#fff;
transition: .2s;
cursor: pointer;
}
.green-improvement:hover{
transition: .2s;
border-bottom: 5px solid #00af89;
background: #00af89;
color:#fff;
cursor: pointer;
}
.improvement-right-head{
font-weight: 600;
padding: 20px 0px;
}
.btnHref{
margin-top: 20px;
display: flex;
justify-content: center;
}
.btnColors{
background: #3366cc;
color:#fff;
border-radius: 2px;
padding: 5px 20px;
}
ul.specialList li{
list-style: disc !important;
padding:10px;
}
ul.specialList li a{
text-align: start;
}
/*Responsive*/
/* Ekran boyutları 1200 piksel ve üzeri için */
@media only screen and (min-width: 1200px) {
.container {
width: 1140px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 992-1199 piksel arası için */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.container {
width: 960px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 768-991 piksel arası için */
@media only screen and (min-width: 768px) and (max-width: 991px) {
.container {
width: 720px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 576-767 piksel arası için */
@media only screen and (min-width: 576px) and (max-width: 767px) {
.container {
width: 540px;
margin: auto;
padding: 20px;
}
}
/* Ekran boyutları 575 piksel ve altı için */
@media only screen and (max-width: 575px) {
.container {
width: 100%;
margin: auto;
padding: 20px;
}
.main-wikimedia-list {
display: none;
}
.main-wikimedia-bottomImg {
display: flex;
justify-content: center;
height: auto;
padding: 10px;
}
.rightFieldList {
padding:0;
}
.rightFieldList ul {
padding: 0px 10px;
}
.fieldBox {
align-items: start!important;
}
.rightFieldHead p {
margin: 0!important;
}
}
@media only screen and (min-width: 575px) {
.main-wikimedia-bottomImg{
display:none;
}
.rightFieldHead p {
margin: 0!important;
}
}
@media screen and (min-width: 300px) and (max-width: 1050px) {
.myCardBottom{
display: none;
}
.vector-page-toolbar .left-navigation ul li a{
font-size: 13px;
}
.main-header_rightInfo{
font-size: 12px;
}
.main-header-rightMenu{
font-size: 12px;
}
.main-body{
text-align: start;
flex-direction: column;
}
.main-header-bottom{
display: none;
}
.vector-page-toolbar .right-navigation{
display: none;
}
.main-header{
flex-direction: column;
padding: 5px;
}
.main-header-left h1{
font-size: 18px;
}
.main-header-left span{
font-size: 13px;
}
.main-body-left{
margin: 0px;
}.main-body-right{
margin: 0px;
}
.content-improvement{
flex-direction: column;
}
.content-improvement-left{
flex-direction: column;
}
.content-improvement-item{
flex-direction: column;
width: 100%;
text-align: center;
}
.content-improvement-item a{
justify-content: center;
}
.red-improvement .icon i,.blue-improvement .icon i,.green-improvement .icon i{
font-size: 52px;
padding-right: 0px;
color:#e4e4e4;
}
.main-wikimedia-list li{
display: flex;
flex-basis: 50% !important;
}
.body-bottom-img1 img{
width: 100%;
}
.body-img-text{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
width: 100%;
border:1px solid #e0e0e0;
}
.body-img-text p{
width: 100%;
}
.fastlik {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.item-button {
background: #ffffff;
padding: 5px 10px;
border-radius: 5px;
border: solid 1px #cfcfcf;
}
span.item-button-text {
color: #000000;
}
.item-button-text:hover{
color: gray;
}
.noresize {
height: auto!important;
}
}