Giao diện trang đội ngũ giáo viên...64... Trường mầm non luôn lưu tâm để có những thiết kế thận trọng, đẹp mắt và dành cho trẻ môi trường học thực sự hỗ trợ trong mỗi hành trình học tậ
Mã nguồn
HTML
dpschool@gmail.com
Đặt lịch tham quan
p { border-radius: 12px; padding: 8px;
moduleWrapper content-left > p > a:hover { color: #1976d2; cursor: pointer;
moduleWrapper content-right { width: 70%; background-color: #f5f5f5; border-radius: 20px; padding: 15px 20px; line-height: 50px; font-size: 20px; color: #636363; z-index: 10;
moduleWrapper content-right > ul > li { padding-left: 20px; list-style: none;
footer 2 { background-color: #e73446; position: relative; top: -330px;
} body { font-family: Verdana, sans-serif; margin: 0;
slideshow-container { width: 100%; height: 600px; position: relative; margin: auto; overflow: hidden;
next { cursor: pointer; position: absolute; top: 50%; width: auto; margin-top: -22px; padding: 16px; color: white; font-weight: bold; font-size: 18px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;
next { right: 0; border-radius: 3px 0 0 3px;
next:hover { background-color: rgba(0, 0, 0, 0.8);
-webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 3s;
@-webkit-keyframes fade { from { opacity: 0.1;
@media only screen and (max-width: 300px) {
* { padding: 0; margin: 0; box-sizing: border-box;
header { background-color: #e73446; color: #fff; padding: 12px 0;
nav { display: flex; height: 110px; line-height: 110px;
nav right img { margin-left: 100px;
nav left tab { text-align: center; position: relative; top: -15px;
nav right img { cursor: pointer;
nav left tab:hover { color: #e73446;
sub main:hover > sub menu,
sub menu > ul > li:hover { color: #e73446 !important; animation: upLine 2s infinite;
nav bars-btn { display: none; margin-left: -30px; font-size: 28px;
nav bars-btn { display: block; display: flex;
btn-bars { margin-right: 240px;
module container-text > h3::before { position: relative; top: 468px;
feedback box-main { margin-left: 20px;
module container-text > module h3::before { position: relative; top: 2087.5px;
module container-text > feedback h3::before { position: relative; top: 3125.5px;
trust panel { margin-top: 0px;
category item-left { margin-left: 10px;
footer icon { padding: 7px 0 20px 55px !important;
footer text-input > input, button, textarea { margin: 15px 0 20px 44px !important;
footer text-input > textarea { width: 275px !important; height: 90px !important;
module { padding: 50px 0; background-color: #f5f5f5;
sub menu { z-index: 1000; position: relative; display: none; top: -15px;
@keyframes upLine { from { position: relative; top: -4px;
} to { top: 4px; position: relative;
@keyframes downLine { from { position: relative; top: 8px;
} to { top: -8px; position: relative;
sub menu > ul > li { list-style: none; background-color: white; z-index: 1000; height: 80px;
sub main:hover > sub menu { display: block;
feedback box-main { background-color: white; border-radius: 20px; height: 100%; box-shadow: 0 5px 10px 0 rgb(0 0 0 / 20%); padding: 25px; margin: 0 10px;
feedback box-main:hover { cursor: pointer; border: 2px solid #e73446;
moduleWrapper icon { font-size: 50px; margin-bottom: 5px;
feedback info { line-height: 40px; margin-bottom: 20px; font-size: 30px; font-family: serif;
text { line-height: 30px !important; color: #636363; font-weight: 300; height: 150px; padding-bottom: 30px;
frame-reseach > a { text-decoration: none; color: #55acee;
trust { padding-bottom: 50px; color: #e73446; font-size: 30px; text-align: center;
trust text > h3 { display: inline-block; margin: 0 auto; padding-bottom: 10px; border-bottom: 2px solid orange;
feedback person > span:hover { color: #e73446;
feedback person > span:hover { cursor: pointer;
module container-text > module h3::before,
module container-text > video h3::before,
module container-text > feedback h3::before,
trust h3::before { content: ""; position: absolute; background: #1976d2; width: 75px; height: 2px; bottom: -145.8px; left: 50%; transform: translateX(-50%);
module container-text > module h3::before { bottom: -753.8px;
module container-text > video h3::before { bottom: -1294.5px;
module container-text > feedback h3::before { bottom: -2124.8px;
trust h3::before { bottom: -2792px; left: 35%;
module info { background-color: white;
trust panel { display: flex; margin-top: 50px;
panel item { border: 1px solid silver; width: 90px; height: 90px; padding-top: 7px; border-radius: 50px;
panel info { padding: 0 25px; text-align: left;
nav left nav left tab > a { color: #000;
red hover:hover > a { color: #e73446; z-index: 100;
footer { width: 100%; height: 100%; padding: 60px 0;
feedback person { width: 100%; margin-top: 20px; display: flex; justify-content: center; align-items: center;
feedback person { margin-bottom: 20px; margin-top: 0;
feedback person > span { margin: 0 20px; margin-bottom: 20px; font-size: 20px;
feedback std { color: #55acee; font-size: 20px; margin-bottom: 20px;
feedback box-main { height: 120%; background-color: #f5f5f5;
trust panel { font-size: 20px; margin-top: 20px;
panel text { text-align: left; margin-left: 20px; margin-top: 20px; color: #636363;
trust img > img { width: 400px; height: 400px;
footer img > p { margin-left: 18%; margin-bottom: 40px;
footer icon { color: white; font-size: 24px; font-weight: bold; font-family: Cambria, Cochin, Georgia, Times, "Times New
footer icon { color: white; font-size: 16px; text-align: left; padding: 20px 0 20px 80px;
footer text-input > input, button, textarea { display: block; margin: 20px 0 20px 80px; border-color: #e73446; outline: none; font-size: 20px; border-radius: 10px; padding: 10px;
text input-contact { height: 34px !important;
footer text-input > button { padding: 10px 118.8px; background-color: white; color: #e73446;
footer text-input > button:hover { background-color: #55acee; cursor: pointer;
footer text-input > textarea { height: 120px; width: 275px; font-size: 18px;
content footer-fix { width: 100%; background-color: rgba(31, 12, 12, 0.844); position: fixed; z-index: 9999; bottom: 0px;
content footer-fix > ul { display: flex; justify-content: center; align-items: center;
content footer-ig { border-radius: 30px; color: white;
content footer-fb { background-color: #4867aa; padding: 2px 2px 2px 9px;
icon-fix { width: 2%; list-style: none; margin: 5px 15px 5px 10px; font-size: 20px;
icon-fix:hover { background-color: #e73446; cursor: pointer;
content footer-twitter { background-color: #55acef; padding: 2px 2px 2px 7px;
content footer-gg { background-color: #34a853; padding: 2px 2px 2px 6px;
content footer-ig { background-color: #cb2694; padding: 2px 2px 2px 6.5px;
@import url("https://fonts.googleapis.com/css2? family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,4 00;1,500;1,600&display=swap");
footer 3 { background-color: #e73446; position: relative; top: -650px;
teacher outStanding { height: 600px; position: relative; top: -750px;
teacher card { display: flex; align-items: center; justify-content: center; font-family: "Poppins"; color: white;
teacher card > card { background: rgba(19, 40, 52, 0.888); width: 300px; height: 400px; border-radius: 10px; text-align: center; overflow: hidden;
teacher card > card > card img > img { object-fit: cover; width: 100%; height: 100%; object-position: center;
teacher outStanding-title > p { margin: 50px auto; text-align: center; font-size: 48px; font-family: "Poppins"; color: #e73446; padding-top: 50px;
teacher card > card > card img { width: 120px; height: 120px; border: 4px solid #f2726a; border-radius: 50%; overflow: hidden; margin: 0px auto; transform: translateY(25px); transition: 0.5s;
teacher card > card h2 { margin-top: 35px;
teacher card > card > card social a { color: white; margin: 0px 20px; font-size: 20px;
teacher card > card > card social { margin: 25px 0;
teacher card > card button { width: 150px; height: 40px; background: transparent; color: white; border-radius: 5px; transition: 0.5s; font-family: "Poppins"; line-height: 20px; border: 1px solid #f2726a;
teacher card > card button:hover { background: #f2726a; cursor: pointer;
teacher card > card > card img:hover { width: 100%; height: 100%; border-radius: unset; transform: unset; border: none; cursor: pointer;
teacher card > card > card social a:hover { color: #e73446;
teacher card > card { margin-right: 25px;
JS
Slice.js var slideIndex = 0; showSlides(); function plusSlides(n) { showSlides2(slideIndex += n);
} function showSlides2(n) { var i; var slides = document.getElementsByClassName("mySlides"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides[i].style.display = "none";
} slides[slideIndex-1].style.display = "block";
} function showSlides() { var i; var slides = document.getElementsByClassName("mySlides"); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none";
} slideIndex++; if (slideIndex > slides.length) {slideIndex = 1} slides[slideIndex-1].style.display = "block"; setTimeout(showSlides, 5000);