أرابيكا:Serine Ben Brahim/style.css

تجربة فقط .grid {

 display: grid;
 grid-template-columns: repeat(6, 1fr);
 grid-gap: 20px;

}

.span-c6 {

 grid-column: span 6 / auto;

}

.span-c5 {

 grid-column: span 5 / auto;

}

.span-c4 {

 grid-column: span 4 / auto;

}

.span-c3 {

 grid-column: span 3 / auto;

} .span-c2 {

 grid-column: span 2 / auto;

}

.span-r3 {

 grid-row: span 2 / auto;

}

@media screen and (max-width: 675px) {

 .grid {
   display: grid;
   grid-template-columns: repeat(1, 1fr);
   grid-gap: 10px;
 }

 .span-c6 {
   grid-column: auto;
 }

 .span-c5 {
   grid-column: auto;
 }

 .span-c4 {
   grid-column: auto;
 }

 .span-c3 {
   grid-column: auto;
 }
 .span-c2 {
   grid-column: auto;
 }

 .span-r3 {
   grid-row: auto;
 }

 .nav-links {
   flex-direction: column;
 }

}

.title-card {

 vertical-align: top;
 background: #fff;
 color: #000;
 border-radius: 2px;
 box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11);
 border-bottom: 15px solid #c8a261;
 border-top: 10px solid #c8a261;

}

.title-text {

 font-size: 20px;
 font-weight: normal;
 text-align: center;
 color: #c8a261;
 line-height: 1.5em;
 padding: 5px;

} .title-text2 {

 font-size: 40px;
 font-weight: bold;
 text-align: center;
 color: #c8a261;
 line-height: 1.5em;

}

.card {

 display: block;
 padding: 10px;
 background: #fff;
 color: #000;
 border-radius: 2px;
 box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11);
 border-top: 10px solid #c8a261;

}

.card:hover {

 border-top: 15px solid #dddddd;
 box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21);

}

.sec-title {

 display: block;
 font-size: 20px;
 color: #000;
 font-weight: bold;
 margin: 5px;
 padding: 5px;

}

.nav-links {

 display: flex;
 list-style: none;
 width: 100%;
 margin: auto;
 padding: 10px;
 justify-content: center;
 align-items: center;
 cursor: pointer;

}

.nav-links ul a {

 text-decoration: none;

}

.nav ul li {

 border: 1px solid #e0e0e0;
 border-radius: 2px;
 padding: 5px;
 min-width: 150px;
 text-align: center;
 font-size: 105%;
 font-weight: bold;
 margin: 5px;

}

.nav ul li:hover {

 background: #dddddd;

}

li.content-title:hover {

 width: 200px;
 background: #007bff;
 color: white;
 transition-duration: 0.5s;

}

li.content-title a {

 color: #000;

}

li.content-title.green-b {

 background: #dddddd;

}

.content-title.green-b a {

 color: white;

}

li.content-title.red-b {

 background: #da4453;
 color: white;

}

.content-title.red-b a {

 color: white;

}

li.content-title.red-b:hover {

 width: 210px;
 background: silver;
 color: white;
 transition-duration: 0.5s;

}

.nav p {

 font-family: "Droid Arabic Kufi", sans-serif;
 font-size: 35px;
 font-weight: bold;
 text-align: center;
 line-height: 5px;

}

.footer {

 background: #c8a261;
 padding: 10px;
 border-radius: 2px;

}

.num-card {

 display: block;
 background: #c8a261;
 border-radius: 2px;
 box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.11);
 color: #000;

}

.num-card:hover {

 box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21);

}

.num-title {

 display: block;
 font-size: 14px;
 color: #000;
 margin: 5px;
 padding: 5px;
 text-align: center;
 background: #dddddd;

}

.num-big {

 margin: 5px;
 padding: 15px;
 font-family: "Droid Arabic Kufi", sans-serif;
 text-align: center;
 font-size: 40px;
 font-weight: bold;

}

.cat {

 width: 100%;
 margin: auto;
 padding: 10px;

}

.cat ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; }

.cat ul li a {

 display: inline-block;
 background: #fff;
 border: 1px solid #e0e0e0;
 border-radius: 2px;
 padding: 5px;
 min-width: 200px;
 text-align: center;
 font-size: 95%;
 margin: 2px 5px;
 cursor: pointer;

}

.cat .mw-selflink {

 background: #dddddd;
 color: #ffffff;
 box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21);

}

.cat ul li a:hover {

 background: #dddddd;
 color: #ffffff;
 box-shadow: 0.5px 0.866px 5px 0 rgba(0, 0, 0, 0.21);
 transition-duration: 0.5s;

} -