* { margin: 0; padding: 0; } /* Theme Name: Brightline Theme URI: Author: Deepak Duhan Author URI: Description: General colour and Simple Requires at least: 5.3 Tested up to: 6.0 Requires PHP: 5.6 Version: 1.2 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: brightline Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-image */ .sticky{ background-color: white; } .bypostauthor{ background-color: white; } .alignleft{ background-color: white; } .alignright{ background-color: white; } .aligncenter{ background-color: white; } .wp-caption{ background-color: white; } .wp-caption-text{ background-color: white; } .gallery-caption{ background-color: white; } a{ color: black; text-decoration: none; } a:hover{ text-decoration: underline; } /*--header start--*/ .site-header { width: 1024px; padding-left: 100px; padding-right: 100px; padding-top: 10px; } .grid1 { width: 100%; display: grid; grid-template-areas: 'header1 header1 header2' 'header3 header3 header2'; } .sub1 { grid-area: header1; height: 200px; } .sub1 h1 { font-size: 150px; margin-top: 40px; margin-left: 80px; } /*--search start--*/ .search1 { margin-top: -200px; margin-left: 00px; } .search1 input[type=text] { width: 40px; box-sizing: border-box; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('http://black-and-white.local/wp-content/uploads/2023/03/search-icon.png'); background-position: 0px 0px; background-size: 40px; background-repeat: no-repeat; padding: 12px 2px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } .search1 input:hover { transform: scale(1.05); cursor: pointer; } .search1 input[type=text]:focus { width: 85%; } .search1 button{ width: 100px; height: 43px; margin-left: 90%; margin-top: -64px; color: white; } .search2 { margin-top: 50px; margin-bottom: 50px; margin-left: 0%; } .search2 input[type=text] { width: 500px; box-sizing: border-box; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('http://black-and-white.local/wp-content/uploads/2023/03/search-icon.png'); background-position: 0px 0px; background-size: 40px; background-repeat: no-repeat; padding: 12px 2px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out; } .search1 input:hover { transform: scale(1.05); cursor: pointer; } /* .search1 input[type=text]:focus { width: 85%; } */ .search2 button{ width: 100px; margin-left: 90%; margin-top: -68px; } /*--search end--*/ .sub2 { grid-area: header2; background-color: black; height: 350px; border-bottom-left-radius: 40px; border-top-right-radius: 40px; } .sub2 img { width: 150px; height: 150px; float: right; margin: 20px 80px; } .site-title{ margin-left: 350px; color: #fff; margin-top: 0px; font-family: 'raleway', sans-serif; } .sub2 h1 { font-size: 150px; color: white; padding-top: 0px; margin-left: 5px; } .sub2 h2 { font-size: 150px; color: white; padding-bottom: 0px; margin-bottom: -20px; margin-top: -173px; } .sub3 { grid-area: header3; background-color: black; height: 50px; margin-top: -50px; border-bottom-left-radius: 10px; /* border-top-left-radius: 10px; */ } /*--navbar start--*/ .sub3 nav ul li a:link{ color: white; text-decoration: none; } .sub3 nav ul li a:visited{ color: white; } .sub3 nav ul li { display: inline; position: relative; list-style: none; text-align: center; color: white; font-size: 23px; margin: 20px; font-family: 'raleway', sans-serif; } .sub3 nav ul { margin-top: 12px; margin-left: 50px; } .sub3 nav ul li:after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: -5px; left: 0; background-color: white; transform-origin: bottom right; transition: transform 0.25s ease-out; } .sub3 nav ul li:hover { cursor: pointer; } .sub3 nav ul li:hover:after { transform: scaleX(1); transform-origin: bottom left; cursor: none; } /*--navbar end--*/ /*--header end--*/ /*--index start--*/ /*--hello start--*/ .hello { font-size: 25px; margin-left: 100px; margin-top: 60px; border: 2px solid black; border-radius: 9px; width: fit-content; } .hello h1 { margin: 20px; margin-left: 70px; margin-right: 70px; } /*--hello end--*/ /*--news start--*/ .news{ height: 150px; width: 300px; border: 2px solid black; border-radius: 5px; float: right; margin-top: -160px; margin-right: 100px; } .news h1{ margin-top: 10px; font-family: 'raleway', sans-serif; font-size: 20px; text-align: center; } .news ul{ margin-top: 20px; text-align: center; margin: 20px 20px 20px 20px; } .news ul li{ list-style: none; margin-top: 10px; font-family: 'raleway', sans-serif; font-size: 15px; } .news ul li:hover{ font-size: 16px; font-weight: bold; color: black; } /*--news end--*/ /*--photos--*/ .photos { width: 100%; height: 90vh; background-color: white; position: relative; margin-top: 100px; border-bottom: 2px solid black; } .photos h1 { width: 100%; text-align: center; margin: 10px 0 60px 0; font-size: 40px; border-bottom: 2px solid black; line-height: 0.1em; } .photos span { background: white; padding: 0 10px; } .logo { width: 1150px; height: 70vh; position: relative; display: flex; transition: all 0.5s; overflow: hidden; list-style: none; margin-left: 100px; } .logo .photo { width: 20%; height: 100%; position: relative; text-align: center; transition: 1.0s; } .logo .photo:nth-child(1) { /*background: url(http://black-and-white.local/wp-content/uploads/2023/03/blakand-white-cloud.jpg);*/ background-size: cover; background-repeat: no-repeat; background-position: left; background-position: center; } .logo .photo:nth-child(2) { /*background: url(http://black-and-white.local/wp-content/uploads/2023/03/black-and-white-bird.webp);*/ background-size: cover; background-repeat: no-repeat; background-position: left; background-position: center; } .logo .photo:nth-child(3) { /*background: url(http://black-and-white.local/wp-content/uploads/2023/03/black-and-white-candle.jpg);*/ background-size: cover; background-repeat: no-repeat; background-position: left; background-position: center; } .logo .photo:nth-child(4) { /*background: url(http://black-and-white.local/wp-content/uploads/2023/03/black-and-white-cycle.jpg);*/ background-size: cover; background-repeat: no-repeat; background-position: left; background-position: center; } .logo .photo:nth-child(5) { /*background: url(http://black-and-white.local/wp-content/uploads/2023/03/black-and-white-face.jpg);*/ background-size: cover; background-repeat: no-repeat; background-position: left; background-position: center; } .logo .photo:hover { width: 50%; cursor: pointer; } /*--photos end--*/ /*--comments start--*/ .comments { background-color: white; height: 580px; width: 100%; margin-left: 0px; margin-bottom: 100px; margin-top: 100px; border-bottom: 2px solid black; } /* .comments1 { background-color: white; height: 1000px; width: 100%; margin-left: 0px; margin-bottom: 100px; margin-top: 100px; } */ .comments h1 { width: 100%; text-align: center; margin: 10px 0 60px 0; font-size: 40px; border-bottom: 2px solid black; line-height: 0.1em; } .comments span { background: white; padding: 0 10px; } .comments1 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(1, 1fr); height: 440px; width: 1140px; margin-left: 100px; margin-right: 00px; border: 10px solid; color: transparent black; margin-bottom: 20px; background-image: url(http://black-and-white.local/wp-content/uploads/2023/03/bw-background.jpg); } /* .comments10 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); height: 940px; width: 1140px; margin-left: 100px; margin-right: 00px; border: 10px solid; color: transparent black; margin-bottom: 20px; background-image: url(http://black-and-white.local/wp-content/uploads/2023/03/bw-background.jpg); } */ /*--comment1 start--*/ .comment1 { display: grid; height: 400px; grid-template-columns: 300px; grid-template-rows: 200fr, 200fr; margin-right: 10px; margin-left: 40px; margin-top: 20px; } .comment1:hover { transform: scale(1.08); transition-duration: .5s; } .commentgrid11 { background-color: white; border: 1px solid black; border-top-right-radius: 7px; border-top-left-radius: 7px; } .commentgrid11 img { height: 100px; width: 100px; border-radius: 50%; overflow: hidden; margin: 20px 0 0 33%; } .commentgrid11 p { text-align: center; margin-top: 10px; font-family: 'raleway', sans-serif; font-weight: bold; } .commentgrid12 { background-color: black; } .commentgrid12 p { color: white; font-family: 'raleway', sans-serif; margin: 50px 25px 0 25px; line-height: 30px; } /*--comment1 end--*/ /*--comment2 start--*/ .comment2 { display: grid; height: 400px; grid-template-columns: 300px; grid-template-rows: 1fr, 1fr; margin-right: 100px; margin-top: 20px; } .comment2:hover { transform: scale(1.08); transition-duration: .5s; } .commentgrid21 { background-color: white; border: 1px solid black; border-top-right-radius: 7px; border-top-left-radius: 7px; } .commentgrid21 img { overflow: hidden; height: 100px; width: 100px; border-radius: 50%; overflow: hidden; margin: 20px 0 0 33%; } .commentgrid21 p { text-align: center; margin-top: 10px; font-family: 'raleway', sans-serif; font-weight: bold; } .commentgrid22 { background-color: black; } .commentgrid22 p { color: white; font-family: 'raleway', sans-serif; margin: 50px 25px 0 25px; line-height: 30px; } /*--comment2 end--*/ /*--comment3 start--*/ .comment3 { display: grid; height: 400px; grid-template-columns: 300px; grid-template-rows: 1fr, 1fr; margin-top: 20px; } .comment3:hover { transform: scale(1.08); transition-duration: .5s; } .commentgrid31 { background-color: white; border: 1px solid black; border-top-right-radius: 7px; border-top-left-radius: 7px; } .commentgrid31 img { overflow: hidden; height: 100px; width: 100px; border-radius: 50%; overflow: hidden; margin: 20px 0 0 33%; } .commentgrid31 p { text-align: center; margin-top: 10px; font-family: 'raleway', sans-serif; font-weight: bold; } .commentgrid32 { background-color: black; } .commentgrid32 p { color: white; font-family: 'raleway', sans-serif; margin: 50px 25px 0 25px; line-height: 30px; } .date1 { text-align: center; margin-top: 30px; margin-bottom: 0px; background-color: white; font-family: 'raleway', sans-serif; font-weight: 500; font-size: 15px; border-top: 1px solid black; padding-top: 20px; } .date2 { text-align: center; margin-top: 30px; margin-bottom: 0px; background-color: white; font-family: 'raleway', sans-serif; font-weight: 500; font-size: 15px; border-top: 1px solid black; padding-top: 20px; } .date3 { text-align: center; margin-top: 30px; margin-bottom: 0px; background-color: white; font-family: 'raleway', sans-serif; font-weight: 500; font-size: 15px; border-top: 1px solid black; padding-top: 20px; } /*--comment3 end--*/ /*--comments end--*/ /*--about start--*/ .ab1 { width: 100%; height: 300px; background-image: url(http://black-and-white.local/wp-content/uploads/2023/03/bw-clip2.gif); background-repeat: no-repeat; background-position: center; background-size: cover; margin-top: 20px; margin-bottom: 50px; } .ab1 h6 { color: white; text-align: center; font-size: 50px; padding-top: 30px; } .ab1 p { margin-left: 100px; margin-right: 100px; color: white; text-align: center; margin-top: -10px; font-family: 'raleway', sans-serif; line-height: 25px; padding-bottom: 30px; } /*--about end--*/ /*--archive start--*/ .archivehome{ height: 300px; width: 300px; border: 2px solid black; border-radius: 5px; margin-left: 100px; margin-bottom: -340px; margin-top: 150px; } .archivehome h1{ margin-top: 20px; text-align: center; font-size: 20px; font-family: 'raleway', sans-serif; } .archivehome p{ text-align: center; margin: 20px 20px 20px 20px; line-height: 25px; font-family: 'raleway', sans-serif; font-size: 15px; } .archivehome h1 a:link{ color: black; text-decoration: none; } .archivehome h1 a:visited{ color: black; text-decoration: none; } /*--archive end--*/ /*--form start--*/ .form1 { margin-left: 40%; margin-top: -50px; margin-bottom: -30px; font-family: 'raleway', sans-serif; } .form1 h1{ margin-bottom: 20px; margin-left: 300px; } form { display: flex; flex-direction: column; max-width: 500px; margin: auto; } label{ display: block; margin-bottom: 5px; } input, textarea { display: block; margin-bottom: 20px; } input, textarea { padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; } button[type="submit"] { padding: 10px; font-size: 18px; border: none; border-radius: 5px; background-color: black; color: #fff; cursor: pointer; } button:hover { transform: scaleX(1.03); transition-duration: 0.2s; color: black; background-color: white; border: 1px solid black; } /*--form end--*/ /*--index end--*/ /*--footer start--*/ .site-footer { width: 1024px; padding-left: 100px; padding-right: 100px; padding-top: 10px; margin-bottom: 10px; } .grid01 { width: 100%; display: grid; grid-template-areas: 'header01 header02 header02' 'header01 header03 header03'; } .sub01 { background-color: black; grid-area: header01; height: 350px; width: 500px; border-bottom-left-radius: 40px; border-top-right-radius: 40px; } .tag { font-size: 50px; color: white; margin-top: 10px; font-weight: bold; margin-left: 40px; letter-spacing: 0px; } .sub011 { display: grid; grid-template-columns: repeat(2, 1fr); height: 150px; margin-top: 50px; background-color: white; } .sub0111 { background-color: black; border-right: 1px solid white; color: white; } .sub0111 h1 { font-size: 20px; margin-left: 20px; text-align: left; margin-top: -20px; font-family: 'raleway', sans-serif; margin-bottom: 7px; } .sub0111 p { font-size: 15px; margin-left: 20px; font-family: 'raleway', sans-serif; text-align: left; line-height: 20px; } .sub0111 h3 { font-family: 'raleway', sans-serif; font-size: 15px; font-weight: bold; margin-left: 20px; } .sub0112 { background-color: black; color: white; text-align: right; } .sub0112 h1 { font-size: 20px; margin-right: 20px; margin-top: -15px; text-align: right; font-family: 'raleway', sans-serif; margin-bottom: 17px; } .sub0112 p { font-size: 15px; margin-right: 20px; font-family: 'raleway', sans-serif; text-align: right; line-height: 25px; } .sub0112 span { font-family: 'raleway', sans-serif; font-size: 17px; font-weight: bold; } .sub02 { background-color: black; grid-area: header02; height: 50px; width: 650px; margin-top: 70px; /* border-bottom-right-radius: 10px; */ border-top-right-radius: 10px; } /*--social icon start--*/ .social-icon { margin-left: 50px; height: 50px; width: 600px; } .sub02 img{ width: 35px; margin-left: 50px; margin-top: 8px; } .social-icon a img{ transition: all 0.3s linear; } .social-icon a h1 img:hover { transform: scale(1.3); } /*--social icon end--*/ .sub03 { background-color: white; grid-area: header03; height: 200px; } .sub03 h5 { font-weight: 300; font-size: 15px; text-align: right; margin-top: 20px; margin-right: 10px; margin-left: 78%; border: 1px solid rgba(0, 0, 0, 0.509); border-radius: 4px; font-family: 'raleway', sans-serif; padding: 5px; } .sub031 { display: grid; grid-template-columns: repeat(3, 1fr); height: 170px; margin-top: 0px; } .sub0311 { border-right: 1px solid black; } .sub0311 h1 { font-size: 20px; font-family: 'raleway', sans-serif; font-weight: bolder; margin-top: -2px; margin-left: 20px; } .sub0311 ul { margin-top: 15px; } .sub0311 ul li { list-style: none; color: black; margin-left: 10px; font-family: 'raleway', sans-serif; line-height: 25px; padding: 0 10px; } .sub0311 ul li:hover{ color: black; font-weight: bold; } .sub0312 { border-right: 1px solid black; text-align: center; } .sub0312 h1 { font-size: 20px; font-family: 'raleway', sans-serif; font-weight: bolder; margin-top: -2px; } .sub0312 ul { margin-top: 15px; } .sub0312 ul li { list-style: none; color: black; font-family: 'raleway', sans-serif; line-height: 25px; } .sub0312 ul li:hover{ color: black; font-weight: bold; } .sub0313 { color: black; text-align: right; margin-right: 20px; } .sub0313 h1 { font-size: 20px; font-family: 'raleway', sans-serif; font-weight: bolder; margin-top: -2px; margin-right: 0px; } .sub0313 ul { margin-top: 15px; } .sub0313 ul li { list-style: none; color: black; font-family: 'raleway', sans-serif; line-height: 25px; } /*--footer end--*/ /*--404 start--*/ .page404 { height: 450px; width: 100%; margin-top: 100px; margin-bottom: 50px; /* border: 2px solid black; */ } .page404 h1{ text-align: center; margin-top: 200px; font-size: 40px; font-family: 'raleway',sans-serif; } .page4041 p{ text-align: center; margin-top: 30px; font-family: 'raleway',sans-serif; font-size: 20px; } /*--404 end--*/ /*--start gallery single page--*/ .gallery{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 5vhm); grid-gap: 0px; height: 800px; width: 93%; margin-left: 40px; margin-right: 100px; margin-top: 100px; margin-bottom: 100px; text-align: center; } .gallery-item img{ height: 300px; width: 300px; } /*--end gallery single page--*/ /*--single page start --*/ .archivesingle{ height: 400px; width: 100%; border: 2px solid black; margin-top: 100px; margin-bottom: 100px; text-align: center; } .archivesingle h1{ margin-top: 30px; } .archivesingle p{ margin-top: 20px; text-align: center; margin-left: 100px; margin-right: 100px; margin-bottom: 20px; } .archivesingle img{ margin-top: 10px; margin-bottom: 30px; border-radius: 50%; border: 1px solid black; height: 100px; width: 100px; } /*-- end archive single page--*/ /*--start news single page--*/ .news1{ height: 250px; width: 85%; margin: 100px 100px; text-align: center; border: 2px solid black; } .news1 ul li{ list-style: none; margin:0 15px 0 15px; line-height: 25px; } .news1 h1{ margin-top: 30px; margin-bottom: 10px; } /*-- end news single page--*/ /*-- start about single page--*/ .aboutref{ height: 300px; width: 100%; border: 2px solid black; margin: 100px 0 100px 0; text-align: center; font-family: 'raleway', sans-serif; } .aboutref h6{ font-size: 30px; margin-top: 30px; } .aboutref p{ font-size: 20px; margin: 20px 50px 20px 50px; } /*--end about single page--*/ /*-- start search single page--*/ .searchsinglepage{ height: auto; width: 100%; text-align: center; margin-top: 100px; margin-bottom: 100px; border: 2px solid black; } .searchsinglepage a{ color: black; text-decoration: none; } /*-- end search single page--*/ .gallerypage{ width: 1150px; margin-top: 100px; margin-bottom: 100px; margin-left: 100px; margin-right: 100px; border-bottom: 2px solid black; padding-bottom: 50px; } .gallerypage h1 { width: 100%; text-align: center; margin: 10px 0 60px 0; font-size: 40px; border-bottom: 2px solid black; line-height: 0.1em; } .gallerypage span { background: white; padding: 0 10px; } .contactpage{ margin-right: 400px; margin-top: 200px; margin-bottom: 100px; /* border-bottom: 2px solid black; border-top: 2px solid black; */ }