Sửa đổi Bản mẫu:Trang Chính/styles.css
Chú ý: Bạn chưa đăng nhập và địa chỉ IP của bạn sẽ hiển thị công khai khi lưu các sửa đổi.
Bạn có thể tham gia như người biên soạn chuyên nghiệp và lâu dài ở Bách khoa Toàn thư Việt Nam, bằng cách đăng ký và đăng nhập - IP của bạn sẽ không bị công khai và có thêm nhiều lợi ích khác.
Các sửa đổi có thể được lùi lại. Xin hãy kiểm tra phần so sánh bên dưới để xác nhận lại những gì bạn muốn làm, sau đó lưu thay đổi ở dưới để hoàn tất việc lùi lại sửa đổi.
Bản hiện tại | Nội dung bạn nhập | ||
Dòng 1: | Dòng 1: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.main-page-summary { | .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 { | .main-page-summary ul { | ||
− | + | display: flex; | |
− | + | flex: 0 0 50%; | |
− | + | flex-wrap: wrap; | |
− | + | list-style: none; | |
− | + | padding: 0; | |
} | } | ||
+ | |||
.main-page-summary ul li { | .main-page-summary ul li { | ||
− | + | flex: 0 0 33%; | |
− | + | font-size: 14px; | |
− | + | padding: 5px 0; | |
} | } | ||
.main-page-summary ul li img { | .main-page-summary ul li img { | ||
− | + | margin-right: 6px; | |
} | } | ||
.main-page .section-title { | .main-page .section-title { | ||
− | + | font-size: 24px; | |
− | + | font-weight: bold; | |
− | + | padding: 20px 0; | |
} | } | ||
.article-1 { | .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 { | .article-2 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/57/NASA-Apollo8-Dec24-Earthrise-b.jpg/640px-NASA-Apollo8-Dec24-Earthrise-b.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.article-3 { | .article-3 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/af/Fogo%2C_Cape_Verde_Islands.jpg/480px-Fogo%2C_Cape_Verde_Islands.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.article-4 { | .article-4 { | ||
− | + | background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/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/479px-thumbnail.jpg'); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
.article-6 { | .article-6 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Organic_home-grown_tomatoes_-_unripe_to_ripe.jpg/480px-Organic_home-grown_tomatoes_-_unripe_to_ripe.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.article-7 { | .article-7 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/SARS-CoV-2_without_background.png/480px-SARS-CoV-2_without_background.png); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.article-text { | .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) { | @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 */ | /* To make images responsive */ | ||
img { | img { | ||
− | + | max-width:100%; | |
− | + | height:auto; | |
− | + | vertical-align: 0%; | |
} | } | ||
+ | |||
.mobile { | .mobile { | ||
− | + | visibility: hidden; | |
− | + | display:none; | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | |||
/* mobile version */ | /* mobile version */ | ||
@media only screen and (max-width: 850px) { | @media only screen and (max-width: 850px) { | ||
− | + | .desktop { | |
− | + | visibility: hidden; | |
− | + | display:none; | |
− | + | } | |
− | + | ||
− | + | .mobile { | |
− | + | visibility: visible; | |
− | + | display:initial; | |
+ | } | ||
} | } | ||
+ | |||
.group-layout { | .group-layout { | ||
− | + | display: flex; | |
− | + | flex-wrap: wrap; | |
} | } | ||
+ | |||
.group-layout .group { | .group-layout .group { | ||
− | + | flex: 0 0 calc(50% - 10px); | |
− | + | margin-bottom: 20px; | |
} | } | ||
+ | |||
.group-layout .group:nth-child(2n+1) { | .group-layout .group:nth-child(2n+1) { | ||
− | + | margin-right: 20px; | |
} | } | ||
+ | |||
@media only screen and (max-width: 550px) { | @media only screen and (max-width: 550px) { | ||
− | + | ||
− | + | .group-layout .group { | |
− | + | flex: 0 0 100%; | |
+ | } | ||
+ | |||
} | } | ||
.q1 { | .q1 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Isotoxal_octagon_rhombic_dissection.jpg/480px-Isotoxal_octagon_rhombic_dissection.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q2 { | .q2 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/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/504px-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 { | .q3 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Aerogel_nasa.jpg/479px-Aerogel_nasa.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q4 { | .q4 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/5/54/Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstraße-Odenwald.jpg/480px-Gabelschwanz%2C_Raupe_in_Schreckstellung_im_Geo-Naturpark_Bergstraße-Odenwald.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q5 { | .q5 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg/480px-Aragonite_crystal_-_Los_Molinillos%2C_Ceunca%2C_Spain_-_4x3.6x3.5cm_100g.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q6 { | .q6 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Part_of_the_world_%288483222118%29.jpg/600px-Part_of_the_world_%288483222118%29.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q7 { | .q7 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Vietnam%27s_Mekong_Delta_ESA219993.jpg/493px-Vietnam%27s_Mekong_Delta_ESA219993.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q8 { | .q8 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg/480px-Amdahl_5860_Computer_Air_Cooled_Logic_processor_die.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q9 { | .q9 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Hydroponic_Farming.jpg/480px-Hydroponic_Farming.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q10 { | .q10 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg/480px-Gordon_River%2C_Franklin-Gordon_Wild_Rivers_National_Park_--_user_aliceae.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q11 { | .q11 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Hawksbill_turtle_at_Elphinstone_Reef%2C_Red_Sea%2C_Egypt_%2836522421716%29.jpg/480px-Hawksbill_turtle_at_Elphinstone_Reef%2C_Red_Sea%2C_Egypt_%2836522421716%29.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q12 { | .q12 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Ritalin-SR-20mg-1000x1000.jpg/480px-Ritalin-SR-20mg-1000x1000.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q13 { | .q13 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/6f/Arduino_Due_Circuit_Board.jpg/480px-Arduino_Due_Circuit_Board.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q14 { | .q14 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Chartist_Bridge_%28detail%29_-_geograph.org.uk_-_871813.jpg/480px-Chartist_Bridge_%28detail%29_-_geograph.org.uk_-_871813.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q15 { | .q15 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Cyprus_airways_a330-200_5b-dbs_arp.jpg/480px-Cyprus_airways_a330-200_5b-dbs_arp.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q16 { | .q16 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/11-09-fotofluege-cux-allg-25a.jpg/480px-11-09-fotofluege-cux-allg-25a.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q17 { | .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 { | .q18 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Fountain_pen_writing_%28literacy%29_%28cropped%29.jpg/480px-Fountain_pen_writing_%28literacy%29_%28cropped%29.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q19 { | .q19 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Caligraphy.jpg/489px-Caligraphy.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q20 { | .q20 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Mooncakes_in_Malaysia.jpg/481px-Mooncakes_in_Malaysia.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q21 { | .q21 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Dragon_Makara_%28Culture_Cham%2C_Musée_Guimet%29_%285174382704%29.jpg/480px-Dragon_Makara_%28Culture_Cham%2C_Musée_Guimet%29_%285174382704%29.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q22 { | .q22 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Moáis.jpg/480px-Moáis.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q23 { | .q23 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/2b/Krapina_3._Homo_neanderthalensis.jpg/480px-Krapina_3._Homo_neanderthalensis.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q24 { | .q24 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Inflations_-_Hungarian_paper_money_1946.jpg/480px-Inflations_-_Hungarian_paper_money_1946.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q25 { | .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 { | .q26 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/思想者塑像.JPG/480px-思想者塑像.JPG); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q27 { | .q27 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Travel-Burma-yangon-shwedagon-pagoda_cropped.jpg/480px-Travel-Burma-yangon-shwedagon-pagoda_cropped.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q28 { | .q28 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/2013.01.26.112649_Flags_Centennial_Olympic_Park_Atlanta_Georgia.jpg/640px-2013.01.26.112649_Flags_Centennial_Olympic_Park_Atlanta_Georgia.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q29 { | .q29 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Duyet_binh.jpg/640px-Duyet_binh.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q30 { | .q30 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Judiciary_logo.jpg/532px-Judiciary_logo.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q31 { | .q31 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Miniature_ivory_phrenological_head%2C_Europe_Wellcome_L0057706.jpg/477px-Miniature_ivory_phrenological_head%2C_Europe_Wellcome_L0057706.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q32 { | .q32 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Prunksaal_Hofbibliothek_Wien_2009_PD_20091008_047.JPG/640px-Prunksaal_Hofbibliothek_Wien_2009_PD_20091008_047.JPG); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q33 { | .q33 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/Mặt_nạ%2C_rạp_Hồng_Hà%2C_Hà_Nội_001.JPG/640px-Mặt_nạ%2C_rạp_Hồng_Hà%2C_Hà_Nội_001.JPG); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q34 { | .q34 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/To_Ngoc_Van_thieu_nu_ben_hoa_hue.jpg/439px-To_Ngoc_Van_thieu_nu_ben_hoa_hue.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q35 { | .q35 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Krustenbraten_mit_Dunkelbiersoße.jpg/640px-Krustenbraten_mit_Dunkelbiersoße.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.q36 { | .q36 { | ||
− | + | background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9e/5-digit_Wordlock_locked_with_combination_Basin_and_hardened_shackle.jpg/478px-5-digit_Wordlock_locked_with_combination_Basin_and_hardened_shackle.jpg); | |
− | + | background-size: cover; | |
− | + | width: 100%; | |
− | + | padding-top: 100%; | |
− | + | position: relative; | |
} | } | ||
.p1 {padding: 0px 10px 0px 10px;} | .p1 {padding: 0px 10px 0px 10px;} | ||
.p2 {padding-left: 10px;line-height:80%;} | .p2 {padding-left: 10px;line-height:80%;} | ||
.p3 {color:white;text-align: justify;padding-left: 10px;padding-right: 16px;} | .p3 {color:white;text-align: justify;padding-left: 10px;padding-right: 16px;} |