Khác biệt giữa các bản “Bản mẫu:Trang Chính/styles.css”
Thẻ: mobile web edit mobile edit |
|||
Dòng 330: | Dòng 330: | ||
} | } | ||
.q26 { | .q26 { | ||
− | background-image: url(https://upload.wikimedia.org/wikipedia/commons/ | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/思想者塑像.JPG); |
background-size: cover; | background-size: cover; | ||
width: 100%; | width: 100%; |
Phiên bản lúc 21:11, ngày 29 tháng 10 năm 2020
.main-page-summary {
min-height: 125px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
border: 1px solid #E0E0E0;
border-radius: 3px;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0 20px;
background-color: white;
}
.main-page-summary ul {
display: flex;
flex: 0 0 50%;
flex-wrap: wrap;
list-style: none;
padding: 0;
}
.main-page-summary ul li {
flex: 0 0 33%;
font-size: 14px;
padding: 5px 0;
}
.main-page-summary ul li img {
margin-right: 6px;
}
.main-page .section-title {
font-size: 24px;
font-weight: bold;
padding: 20px 0;
}
.article-1 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Bromine_vial_in_acrylic_cube.jpg/1000px-Bromine_vial_in_acrylic_cube.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.article-2 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a8/NASA-Apollo8-Dec24-Earthrise.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.article-3 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Fogo%2C_Cape_Verde_Islands.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.article-4 {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/96/Descripción_histórica_y_cronológica_de_las_dos_piedras_que_con_ocasión_del_nuevo_empedrado_que_se_está_formando_en_la_plaza_principal_de_México%2C_se_hallaron_en_ella_el_año_de_1790-1b.jpg');
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.article-6 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/c3/Organic_home-grown_tomatoes_-_unripe_to_ripe.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.article-7 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/82/SARS-CoV-2_without_background.png);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.article-text {
padding-bottom: 6px;
padding-left: 6px;
position: absolute;
bottom: 0;
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
width: calc(100% - 5px);
}
@media only screen and (max-width: 1100px) {
.welcome-container {
text-align: center;
flex: 0 0 100%;
}
.main-page-summary ul {
flex: 0 0 100%;
}
.main-page-summary ul li {
text-align: center;
}
}
/* To make images responsive */
img {
max-width:100%;
height:auto;
vertical-align: 0%;
}
.mobile {
visibility: hidden;
display:none;
}
/* mobile version */
@media only screen and (max-width: 850px) {
.desktop {
visibility: hidden;
display:none;
}
.mobile {
visibility: visible;
display:initial;
}
}
.group-layout {
display: flex;
flex-wrap: wrap;
}
.group-layout .group {
flex: 0 0 calc(50% - 10px);
margin-bottom: 20px;
}
.group-layout .group:nth-child(2n+1) {
margin-right: 20px;
}
@media only screen and (max-width: 550px) {
.group-layout .group {
flex: 0 0 100%;
}
}
.q1 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/9/92/Isotoxal_octagon_rhombic_dissection.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q2 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ea/CSIRO_ScienceImage_2212_CSIRO_Parkes_Telescope_This_photo_taken_in_1969_shows_the_telescope_as_it_was_around_the_time_of_the_first_manned_Moon_landing.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q3 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/85/Aerogel_nasa.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q4 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/54/Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstra%C3%9Fe-Odenwald.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q5 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ef/Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q6 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ee/Part_of_the_world_%288483222118%29.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q7 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e6/Vietnam%27s_Mekong_Delta_ESA219993.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q8 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d5/Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q9 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/29/Hydroponic_Farming.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q10 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e1/Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q11 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a2/Hawksbill_turtle_at_Elphinstone_Reef%2C_Red_Sea%2C_Egypt_%2836522421716%29.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q12 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/a9/Ritalin-SR-20mg-1000x1000.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q13 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/6f/Arduino_Due_Circuit_Board.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q14 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ee/Chartist_Bridge_%28detail%29_-_geograph.org.uk_-_871813.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q15 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/7/74/Cyprus_airways_a330-200_5b-dbs_arp.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q16 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/11-09-fotofluege-cux-allg-25a.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q17 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/14/Antron_Fleece.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q18 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/1c/Fountain_pen_writing_%28literacy%29_%28cropped%29.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q19 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/ce/Caligraphy.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q20 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/a/ac/Mooncakes_in_Malaysia.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q21 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3c/Dragon_Makara_%28Culture_Cham%2C_Mus%C3%A9e_Guimet%29_%285174382704%29.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q22 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d2/Mo%C3%A1is.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q23 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/2/2b/Krapina_3._Homo_neanderthalensis.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q24 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/31/Inflations_-_Hungarian_paper_money_1946.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q25 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/3/3c/L%E1%BB%A3n_ti%E1%BA%BFt_ki%E1%BB%87m.jpg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q26 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/8/80/思想者塑像.JPG);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q27 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q28 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q29 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q30 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q31 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q32 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q33 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q34 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q35 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.q36 {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.qN {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/d/d7/Silver_square.svg);
background-size: cover;
width: 100%;
padding-top: 100%;
position: relative;
}
.p1 {padding: 0px 10px 0px 10px;}
.p2 {padding-left: 10px;line-height:80%;}
.p3 {color:white;text-align: justify;padding-left: 10px;padding-right: 16px;}