*{ margin: 0; padding: 0; font-family: 'Poppins', sans-serif; } .navigation{ min-height: 4vh; width: 100%; position: top; width: 100px; } navigation im{ width: 180px; } navigation img2{ } .header{ min-height: 100vh; width: 100%; background-image: linear-gradient(rgba(4, 9,30, 0.7),rgba(4, 9, 30, 0.767)),url(images/youthbgd.jpg); background-position: center; background-size: cover; position: relative; } .header2{ min-height: 100vh; width: 100%; background-image: linear-gradient(rgb(0, 204, 255),rgb(59, 113, 194)),url(); background-position: center; background-size: cover; position: relative; } .header3{ min-height: 100vh; width: 100%; background-image: linear-gradient(rgb(2, 66, 68),rgb(2, 27, 43)),url(); background-position: center; background-size: cover; position: relative; } .header4{ min-height: 100vh; width: 100%; background-image: linear-gradient(rgba(150, 18, 1, 0.884),rgb(99, 24, 1)),url(); background-position: center; background-size: cover; position: relative; } .header5{ min-height: 100vh; width: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0.938),rgb(0, 0, 0)),url(); background-position: center; background-size: cover; position: relative; } .topnav{ background-image: linear-gradient(rgba(4, 9,30, 0.7),rgba(4, 9, 30, 0.7)),url(); background-position: center; background-size: cover; position: relative; } nav{ display: flex; padding: 1% 2%; justify-content: space-between; align-items: center; } nav img{ width: 180px; } nav img2{ width: 300px; } nav img4{ } .nav-links{ flex: 1; text-align: right; } .nav-links ul li{ list-style: none; display: inline-block; padding: 8px 10px; position: relative; } .nav-links ul li a{ color: #ffc400; text-decoration: none; font-size: 13px; } .nav-links ul li::after{ content: ''; width: 0%; height: 2px; background: #f44336; display: block; margin: auto; transition: 0.5s; } .nav-links ul li:hover::after{ width: 100%; } .text-box{ width: 90%; color:#0099ff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align:center; .text-box h1{ font-size: 62px; } } .text-box p{ margin: 10px 0 40px; font-size: 14px; color:turquoise; } .text-box h2{ color:#00ffea; } .hero-btn{ display: inline-block; text-decoration: none; color:aliceblue; border: 1px solid #dfeef794; padding: 12px 34; font-size: 15px; font-family: sans-serif; background: transparent; position: relative; cursor: pointer; } .hero-btn3{ text-decoration: none; color:aliceblue; border: 1px solid #dfeef705; padding: 12px 34; font-size: 15px; font-family: sans-serif; background: transparent; position: relative; cursor: pointer;} .hero-bt:hover{ border: 1px solid #2879e4f6; background: #2d5de265; transition: 1s; } .hero-btn:hover{ border: 1px solid #2879e4f6; background: #2d5de265; transition: 1s; } .hero-btn2{ display: inline-block; text-decoration: none; color:#00ffea; border: 1px solid #ffafaf0c; padding: 12px 34; font-size: 15px; font-family: sans-serif; background: transparent; position: relative; cursor: pointer; } .hero-btn2:hover{ border: 1px solid #2879e4f6; background: #2d5de265; transition: 1s; } nav .fa{ display: none; } @media(max-width: 700px){ .text-box h1{ font-size: 20px; } .nav-links ul li{ display: block; } .nav-links{ position: absolute; background: #f44336; height: 100vh; width: 200px; top: 0; right: -200px; text-align: left; z-index: 2; transition: 1s; } nav .fa{ display: block; color: #fff; margin: 10px; font-size: 22px; cursor: pointer; } .nav-links ul{ padding: 30px; } } /*----- events -----*/ .events{ width: 80%; margin:auto; text-align: center; padding-top: 100px; } h1{ font-size: 36px; font-weight: 600; } p{ color: #777; font-size: 14px; font-weight: 300; line-height: 22px; padding: 10px; } .row{ margin-top: 5%; display: flex; justify-content: space-between; } .events-col{ flex-basis: 31%; background: #fff3f3; border-radius: 10px; margin-bottom: 5%; padding: 20px 12px; box-sizing: border-box; transition: 0.5s; } h3{ text-align: center; font-weight: 600; margin: 10px 0; } .events-col:hover{ box-shadow: 0 0 20px 0px rgba(0,0,0,0.2); } @media(max-width: 700px){ .row{ flex-direction: column; } } /*------ activities -------*/ .activities{ width: 80%; margin: auto; text-align: center; padding-top: 50px; } .activities h1{ color: #f5f5f5; } .activities p{ color:aliceblue; } .activities-col{ -ms-flex-align: 32%; border-radius: 10px; margin-bottom: 30px; padding: relative; overflow: hidden; } .activites-col img{ width: 100%; height: 100%; } /*------ administration -------*/ .administration{ width: 80%; margin: auto; text-align: center; padding-top: 50px; } .administration h2{ color:aliceblue; font-size: large; font-family: sans-serif; font-style:inherit; } .administration p{ text-align: left; color:aliceblue; } .administration h1{ text-align: center; color:aliceblue; } .administration-col{ flex-basis: 32%; border-radius: 5px; margin-bottom: 30px; padding: relative; overflow: hidden; } .administration-col img{ width: 100%; height: 100%; } .admin h3{ color:aliceblue; } layer2{ background: rgba(226, 6, 6, 0.527); height: 100%; width: 100%; position: absolute; top: 0; left: 0; } /*------- programs -----*/ .programs{ width: 80%; margin:auto; text-align: center; padding-top: 100px; } .programs h2{ color:aliceblue; } .programs p{ color:aliceblue; } .heading{ font-size: 20px; font-weight: 600; color: whitesmoke; } .paragraph{ color: #ffffffc5; font-family:Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 300; line-height: 25px; text-align: left; margin-left: 2cm; margin-right: 2cm; } .logo{ font-size: 18px; font-weight: 300; color: rgb(226, 73, 2); font-size: small; font-style: oblique; font-family:sans-serif; position: relative; text-align: left; margin-top: 0.5cm; } .logo2{ font-size: 12px; font-weight: 500; color: rgba(243, 99, 16, 0.795); font-size: large; font-style: oblique; font-family:sans-serif; position: relative; text-align: left; margin-top: 0.5cm; } .container{ width: 100%; height: 100vh; display: block; align-items: center; justify-content: center; background-position: center; background-size: cover; position: relative; margin-bottom: 20cm; } .container2{ width: 100%; height: 100vh; display: block; align-items: center; justify-content: center; background-position: center; background-size: cover; position: relative; margin-bottom: 20cm; } .form2{ background: #003750de; display: flex; flex-direction: column; padding: 3vw 4vw; width: 50%; max-width: 300px; border-radius: 10px; margin-left: 13cm; line-height: 10%; height: 50%; max-height:max-content; } .form2 h3{ color: black whitesmoke; font-weight: 800; margin-bottom: 20px; font-size: large; } .form2 button{ padding: 20px; background:#f80c0cb4; color:#00ffea; font-size: 16px; border: 0; outline: none; cursor: pointer; width:100px; height: 20px; margin: 30px auto 0; position: absolute; top: 80.5%; left: 48%; border-radius: 30pxs; } .form{ background: #003750de; display: flex; flex-direction: column; padding: 3vw 4vw; width: 100%; max-width: 400px; border-radius: 10px; margin-left: 11cm; line-height: 10%; } form h3{ color: black whitesmoke; font-weight: 800; margin-bottom: 20px; } form input, form textarea{ border: 0; margin: 10px 0; padding: 20px; outline: none; background: #f5f5f5; font-size: 16px; } form button{ padding: 20px; background:#f80c0cb4; color:#00ffea; font-size: 16px; border: 0; outline: none; cursor: pointer; width:100px; height: 20px; margin: 30px auto 0; position: absolute; top: 70%; left: 45%; border-radius: 30pxs; } form button:hover{ border: 1px solid #60f178cb; background: #44e7e7a1; transition: 1s; } .resources{ transition: 1s; display: inline-block; text-decoration: none; color:#00ffea; border: 1px solid #ffffff05; padding: 6px 28; font-size: 15px; background: transparent; position: relative; cursor: pointer; } .resources:hover{ border: 1px solid #60f1d257; background: #60ecf154; transition: 0.5s;} .details{ color:rgba(255, 123, 0, 0.733); font-size: small; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; text-align: left; margin-left: 4cm; } .name{ color:rgba(255, 123, 0, 0.473); font-size: small; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; text-align: left; margin-left: 4cm; } .videos-col h3{ font-weight: 600; color:aliceblue; } .videos{ display:flex; justify-content: space-between; padding: 1% 3%; align-items:normal; } .videos-col source{ flex-basis: 50%; size: 40%; } .vid{ text-align: center; margin: 10px 0; font-weight: 600; color:#00ffea; } .download{ position: absolute; display: inline-flex; background:#127dc4; cursor: pointer; transition: 1s; margin-left: 4cm; } a{ color:#00ffea; } .news{ display:inline-flex; padding: 1% 2%; justify-content: space-between; align-items: center; } .news p{ color:aliceblue; } .news img{ background-color: ; color: linear-gradient(rgb(2, 66, 68),rgb(2, 27, 43)),url(); } .contact-links{ margin-left: 2cm; background: transparent; cursor: pointer; position: absolute; display: inline-flex; background:#127dc400; transition: 1s; } .cont:hover{ padding-block: 6px; background: #44e7e700; transition: 1s; } .home-links{ margin-left: 2cm; background: transparent; color: aliceblue; cursor: pointer; position: absolute; display:grid; background:#127dc411; transition: 1s; } .home-links:hover{ padding-block: 7px; background: #44e7e700; transition: 1s; }
Welcome to the official website of the west zambia conference
West Zambia Conference Adventist Youth Ministries
Adventist Youth Ministries
