Text not getting center aligned in button - javascript

I am very new to css and i am trying to align the text center in the button, but i am not able to get it centered. Please look into my code and help me to fix it.
.new-btn{
clear:both;
white-space:nowrap;
display: inline-block;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn > i{
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>
text-align: center; is also not working. I have been trying to fix this for hours but still no luck. The result look like this


span is an inline element, so you need to set it to inline-block, then set its width and finaly text-align:center
p/s: research about flex. it will make your life easier


did some changes to your css instead of inline block i used flex and for the span it takes the width of 100% and reduced double the size of red circle width it also has display f;ex in it to justify the text to the center
.new-btn {
clear: both;
white-space: nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: flex-start;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-out;
}
.new-btn>span,
.new-icn>i {
float: left;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
line-height: 1em
}
.new-icn>i {
display: inline-block;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
}
.new-btn>span {
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
display: flex;
justify-content: center;
width: calc(100% - 120px);
}
.new-yt>i {
background: #ff0000;
}
.new-yt>span {
color: #ff0000;
}
<a class="new-btn new-icn new-yt" href="#"><i class="fab fa-youtube"></i><span>Youtube</span></a>


Altered the code a bit, making the outside container a flex and centring the text as a span.
using the ::before treatment for the red circle element it is absolutely positioned and will ignore the 'Youtube' text
.new-btn{
clear:both;
position:relative;
white-space:nowrap;
display: flex;
height: 60px;
min-width: 270px;
float: left;
align-items: center;
justify-content: center;
margin: 10px 5px;
overflow: hidden;
background: #fff;
border-radius: 50px;
cursor: pointer;
box-shadow: 0px 10px 10px rgba(0,0,0,0.1);
transition: all 0.3s ease-out;
}
.new-btn > span, .new-icn > i {
float:left;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s;
line-height:1em
}
.new-icn::before{
content:"";
display:inline-block;
position:absolute;
left:0;
top:0;
height: 60px;
width: 60px;
text-align: center;
border-radius: 50px;
box-sizing: border-box;
line-height: 60px;
transition: all 0.3s ease-out;
font-size: 25px;
line-height: 60px;
transition: all 0.3s ease-out;
color: #fff;
background-color: #ff0000;
}
.new-btn > span{
font-family: 'Poppins', sans-serif;
font-size: 20px;
font-weight: 550;
line-height: 60px;
margin-left: 10px;
transition: all 0.3s ease-out;
}
.new-yt > i {
background: #ff0000;
}
.new-yt > span {
color: #ff0000;
}
.text{
display:flex;
}
<a class="new-btn new-icn new-yt" href="#"><span class="text">Youtube</span></a>

Related

input text animation not working on focus out if there is no text

I have a problem with my search bar
When the user clicks on it, it expands with a simple animation in order to allow the user to write, and it should play the animation backwards if the user clicks on another part of the page.
The problem is that, if there is no text, the animation doesn't play backwards, it simply goes back to default size, as you can see in the gif below.
CSS
.searchbar {
margin-right: 10%;
width: 20%;
height: 50%;
outline: none;
border:0;
outline:0;
background-image: url('search.png');
background-position: right;
background-repeat: no-repeat;
background-size: contain;
-webkit-transition: width 0.2s ease-in-out;
transition: width 0.2s ease-in-out;
cursor: pointer;
}
.searchbar:focus {
width: 90%;
background-color: #E0FFFF;
border-radius: 20px;
text-indent: 10px;
cursor: auto;
}
and the HTML
<input type="text" class="searchbar"></div>

your codes work Properly . and you can see at below ( i add border to see that ).
but your problem is because the transition: width 0.2s ease-in-out is set forwidth property only , set transition: all 0.2s ease-in-out for better view.
.searchbar {
border : 1px solid;
margin-right: 10%;
width: 10%;
height: 50%;
outline: none;
outline:0;
background-image: url('search.png');
background-position: right;
background-repeat: no-repeat;
background-size: contain;
transition: all 0.2s ease-in-out;
cursor: pointer;
border-radius: 20px;
}
.searchbar:focus {
width: 90%;
background-color: red;
border-radius: 20px;
text-indent: 10px;
cursor: auto;
}
<input type="text" class="searchbar"></div>

You can see in here
I apply .searchbar background-color: transparent;
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
margin:0;
background-color: bisque;
}
.container{
width:50vw;
height: 12.5vh;
display: flex;
flex-direction: row;
justify-content: end;
align-items: center;
background-color: whitesmoke;
border-radius: 4rem;
}
.searchbar {
margin-right: 1rem;
display: block;
border-top-right-radius: 4rem;
border-bottom-right-radius: 4rem;
width: 10%;
height: 4rem;
outline: none;
border:0;
outline:0;
background-image: url('https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fassets.stickpng.com%2Fthumbs%2F585e4ad1cb11b227491c3391.png&f=1&nofb=1');
background-position: right;
background-repeat: no-repeat;
background-size: contain;
-webkit-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor: pointer;
background-color: transparent;
font-size:2rem;
}
.searchbar:focus {
width: 50%;
background-color: #E0FFFF;
border-radius: 4rem;
text-indent: 10px;
cursor: auto;
}
<div class="container">
<input type="text" class="searchbar" id="searchbar" />
</div>

Slide button text

Could someone tell me why isn't my text "Add Product" appearing inside of the button when the user hovers on the button?
Adding
display: flex
for the body seems to fix the issue but I don't wanna set the display of my body to flex. Is there some other way I could make it work?
.button {
background: #f6bc00 no-repeat -12px center;
border: 1px solid #f6bc00;
border-radius: 4px;
color: #fff;
display: inline;
font-size: 9px;
font-weight: 700;
overflow: hidden;
padding: 5px 8px 3px 8px;
text-decoration: none;
line-height: 8px;
text-transform: uppercase;
transition: padding .2s ease, background-position .2s ease, transform .5s ease;;
}
.button:span {
margin: 0;
padding: 0;
}
.button:hover {
transform: scale(1, 1);
padding-left: 88px;
padding-right: 5px;
background-position: 5px center;
}
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
.button:hover span:nth-child(1) {
bottom: 3px;
left: 20px;
}
/* PRESENTATION */
body {
background-color: black;
}
.button:nth-child(1) {
margin-right: 1em;
}
<a class="button" href="#" download="">
<span>Add Product</span>
<span>Add</span></a>

one way to do it is to hide the add product text.
i changed this..
.button span:nth-child(1) {
position: absolute;
left: -70px;
transition: left .2s ease;
}
to this..
.button span:nth-child(1) {
display:none;
transition: left .2s ease;
}
then on hover display inline
.button:hover span:nth-child(1) {
display:inline;
bottom: 3px;
}
checkout the codepen.
https://codepen.io/cartoonzzy/pen/PoGYowZ

Filter by card title brings only the text not the entire card with all elements

I want to filter cards along with their contents (the entire box to show) including title texts and copy button.
For example, when I search for box1 the text "box1" alone is filtered. I want to get the entire card when searched with the title name say "box1".
I coded to filter text inside ".phc-home-hashtags" where all cards live. But it gets only that text not entire card. I'm a beginner in jquery. I copied code and tested from jquery website but I'm not getting the desired results.
Here is the code.
//finding and copying tags
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
var copy = $(this).parents('.phc-hashtags-box').find('.phc-hashtags-box-tags').html();
console.log(copy);
var $temp = $('<input>');
$('body').append($temp);
$temp.val(copy).select();
console.log($temp);
document.execCommand('copy');
$temp.remove();
});
});
$(document).ready(function(){
$("#phc-home-search-bar").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".phc-home-hashtags *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
//toast message
function launch_toast() {
var x = document.getElementById("phc-toast")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}
//scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 150) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(400); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(400); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
/***1. css reset***/
body{
font-family: "Arial", Helvetica, sans-serif;
margin:0;
line-height:1.6;
}
h1, h2, h3, h4, h5, h6, p{
padding:0;
margin:0;
font-weight: 400;
}
/***2. container***/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/***3. header***/
header{
background-color: #fff;
height: 80px;
box-shadow: 1px 1px 8px 1px #d8d8d8;
}
.phc-brand{
float: left;
}
.phc-brand-logo{
width: 40px;
margin: 20px 0px;
}
.phc-navigation{
float: right;
line-height: 40px;
}
.phc-navigation-item{
float: left;
list-style-type: none;
color: #888;
margin-right: 40px;
}
.phc-navigation-item:last-of-type{
margin-right: 0;
}
.phc-navigation-item a{
color: #888;
text-decoration: none;
}
/***4. home-intro***/
.phc-home-fold-content{
background-color: #f2f2f2;
padding: 50px 0px 20px;
}
.phc-home-intro{
text-align: center;
}
.phc-home-intro-title{
color: #666;
margin-bottom: 10px;
}
.phc-brand-home-intro{
width: 24px;
margin-right: 15px;
}
.phc-home-search-container{
width: 580px;
display: block;
margin: 0 auto;
}
#phc-home-search-bar{
width: 100%;
outline: none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
height: 50px;
border: none;
border-radius: 5px;
padding: 5px 38px;
font-size: 16px;
color: #888;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
}
#phc-home-search-bar:focus{
color: #666;
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-home-search-icon{
padding: 12px;
position: relative;
float: right;
width: 25px;
height: 25px;
top: -48px;
right: 0px;
opacity: 0.4;
}
#media only screen and (max-width: 767px){
.phc-home-intro-title{
line-height: 1.2;
}
.phc-home-search-container{
width: 100%;
}
}
.phc-home-search-hashtag{
position: relative;
float: left;
top: -43px;
left: 15px;
font-size: 24px;
color: #666;
}
.phc-home-intro-tip{
color: #999;
font-size: 14px;
margin-top: 10px;
}
/***hashtags-box-tags***/
.phc-home-hashtags{
background-color: #f2f2f2;
padding: 40px 0px;
}
.phc-home-hashtags-section{
display: inline-block;
}
.phc-home-hashtags-section-title{
color: #fff;
background-color: #3f51b5;
border-radius: 5px;
padding: 5px 12px;
display: table-cell;
}
.phc-home-hashtags-section-content{
width: 100%;
display: inline-block;
margin-bottom:15px;
}
.phc-hashtags-box{
display:inline-block;
width: 30.5%;
background-color: #fff;
padding: 10px;
margin-right: 1.3%;
border-radius: 5px;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
vertical-align: top;
}
.phc-hashtags-box:last-of-type{
margin-right: 0;
}
#media only screen and (max-width: 1199px){
.phc-hashtags-box{
width: 30%;
margin-right: 1%;
}
}
#media only screen and (max-width: 991px){
.phc-hashtags-box{
width: 29.6%;
margin-right: 1%;
}
}
#media only screen and (max-width: 767px){
.phc-hashtags-box{
width: 27.5%;
margin-right: 1%;
}
}
#media only screen and (max-width: 479px){
.phc-hashtags-box{
width: 94%;
margin-right: 0;
margin-bottom: 15px;
}
.phc-home-hashtags-section-content{
margin-bottom: 0px;
}
}
#media only screen and (max-width: 359px){
.phc-hashtags-box{
width: 92%;
}
}
.phc-hashtags-box:hover{
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-hashtags-box-title{
color: #666;
padding: 0px 5px 5px;
}
.phc-hashtags-box-tags{
color: #666;
font-size: 14px;
background-color: #f2f2f2;
padding: 3px 10px;
}
.phc-hashtags-box-tags-copied{
background-color: #d4d4d4;
}
.phc-hashtags-box-button{
position:relative;
cursor: pointer;
background-color: #3f51b5;
color: #fff;
padding:5px 10px;
border: none;
border-radius: 0px 0px 0px 8px;
float: right;
top: 0px;
left: 0px;
transition: all 0.3s;
}
.phc-hashtags-box-button:hover{
background-color: #009688;
}
.phc-hashtags-box-button-clicked{
background-color: #009688;
}
/***toast***/
#phc-toast {
visibility: hidden;
max-width: 50px;
height: 50px;
/*margin-left: -125px;*/
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#phc-toast #img{
width: 50px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
border-radius: 5px;
background-color: #009688;
color: #fff;
}
#phc-toast #phc-toast-message{
color: #fff;
font-size: 14px;
padding: 14px;
overflow: hidden;
white-space: nowrap;
}
#phc-toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#-webkit-keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#-webkit-keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
/***scroll to top***/
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #e91e63;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top img{
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
width: 20px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top:hover {
box-shadow: 0px 3px 10px 0px #aaa;
}
#return-to-top:hover img {
top: 6px;
}
/***scrollbar***/
/* width */
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #009688;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #057d72;
}
/***text selection color***/
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #e91e63;
}
::selection {
color: #fff;
background: #e91e63;
}
footer{
background-color: #fff;
height: 150px;
}
.phc-copyright{
color: #666;
font-size: 14px;
line-height: 150px;
text-align: center;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="phc-home-fold-content">
<div class="container">
<div class="phc-home-intro">
<h1 class="phc-home-intro-title"><img class="phc-brand-home-intro" src="assets/img/phc_logo.png">Search</h1>
<form class="phc-home-search-container">
<input type="text" id="phc-home-search-bar" placeholder="Search here...">
<img class="phc-home-search-icon" src="assets/img/phc_search_icon.png">
<p class="phc-home-search-hashtag"></p>
</form>
</div>
</div>
</div>
<!--hashtags-->
<div class="phc-home-hashtags">
<div class="container">
<div class="phc-home-hashtags-section">
<div class="phc-home-hashtags-section-content">
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box1</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a scrambled it to make</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box2</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box3</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text</p>
</div>
</div>
</div>
</div>
<!--toast message-->
<div id="phc-toast">
<div id="img"><img src="assets/img/phc_tick.png"></div>
<div id="phc-toast-message">Copied!</div>
</div><!--/toast message-->
<!---scroll to top-->
<img src="assets/img/phc_scroll_to_top.png"></i>
</div><!--/container-->
</div><!--/hashtags-->
<script src="assets/js/script.js"></script>
</body>
</html>

Your problem here is that you are filtering all elements inside $('.phc-home-hashtags') when using $(".phc-home-hashtags *").filter. So $(this).toggle will keep only the exact element that matches the filter text.
You need to filter only upon the .phc-hashtags-box boxes and their contents, change your filter like this:
$(document).ready(function(){
$("#phc-home-search-bar").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".phc-home-hashtags .phc-hashtags-box").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
Demo:
//finding and copying tags
$(document).ready(function(){
$(document).on('click', '.phc-hashtags-box-button', function () {
var copy = $(this).parents('.phc-hashtags-box').find('.phc-hashtags-box-tags').html();
console.log(copy);
var $temp = $('<input>');
$('body').append($temp);
$temp.val(copy).select();
console.log($temp);
document.execCommand('copy');
$temp.remove();
});
});
$(document).ready(function(){
$("#phc-home-search-bar").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".phc-home-hashtags .phc-hashtags-box").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
//toast message
function launch_toast() {
var x = document.getElementById("phc-toast")
x.className = "show";
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 5000);
}
//scroll to top
$(window).scroll(function() {
if ($(this).scrollTop() >= 150) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(400); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(400); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop : 0 // Scroll to top of body
}, 500);
});
/***1. css reset***/
body{
font-family: "Arial", Helvetica, sans-serif;
margin:0;
line-height:1.6;
}
h1, h2, h3, h4, h5, h6, p{
padding:0;
margin:0;
font-weight: 400;
}
/***2. container***/
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
/***3. header***/
header{
background-color: #fff;
height: 80px;
box-shadow: 1px 1px 8px 1px #d8d8d8;
}
.phc-brand{
float: left;
}
.phc-brand-logo{
width: 40px;
margin: 20px 0px;
}
.phc-navigation{
float: right;
line-height: 40px;
}
.phc-navigation-item{
float: left;
list-style-type: none;
color: #888;
margin-right: 40px;
}
.phc-navigation-item:last-of-type{
margin-right: 0;
}
.phc-navigation-item a{
color: #888;
text-decoration: none;
}
/***4. home-intro***/
.phc-home-fold-content{
background-color: #f2f2f2;
padding: 50px 0px 20px;
}
.phc-home-intro{
text-align: center;
}
.phc-home-intro-title{
color: #666;
margin-bottom: 10px;
}
.phc-brand-home-intro{
width: 24px;
margin-right: 15px;
}
.phc-home-search-container{
width: 580px;
display: block;
margin: 0 auto;
}
#phc-home-search-bar{
width: 100%;
outline: none;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
height: 50px;
border: none;
border-radius: 5px;
padding: 5px 38px;
font-size: 16px;
color: #888;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
}
#phc-home-search-bar:focus{
color: #666;
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-home-search-icon{
padding: 12px;
position: relative;
float: right;
width: 25px;
height: 25px;
top: -48px;
right: 0px;
opacity: 0.4;
}
#media only screen and (max-width: 767px){
.phc-home-intro-title{
line-height: 1.2;
}
.phc-home-search-container{
width: 100%;
}
}
.phc-home-search-hashtag{
position: relative;
float: left;
top: -43px;
left: 15px;
font-size: 24px;
color: #666;
}
.phc-home-intro-tip{
color: #999;
font-size: 14px;
margin-top: 10px;
}
/***hashtags-box-tags***/
.phc-home-hashtags{
background-color: #f2f2f2;
padding: 40px 0px;
}
.phc-home-hashtags-section{
display: inline-block;
}
.phc-home-hashtags-section-title{
color: #fff;
background-color: #3f51b5;
border-radius: 5px;
padding: 5px 12px;
display: table-cell;
}
.phc-home-hashtags-section-content{
width: 100%;
display: inline-block;
margin-bottom:15px;
}
.phc-hashtags-box{
display:inline-block;
width: 30.5%;
background-color: #fff;
padding: 10px;
margin-right: 1.3%;
border-radius: 5px;
box-shadow: 1px 1px 2px #ddd;
transition: all 0.3s;
vertical-align: top;
}
.phc-hashtags-box:last-of-type{
margin-right: 0;
}
#media only screen and (max-width: 1199px){
.phc-hashtags-box{
width: 30%;
margin-right: 1%;
}
}
#media only screen and (max-width: 991px){
.phc-hashtags-box{
width: 29.6%;
margin-right: 1%;
}
}
#media only screen and (max-width: 767px){
.phc-hashtags-box{
width: 27.5%;
margin-right: 1%;
}
}
#media only screen and (max-width: 479px){
.phc-hashtags-box{
width: 94%;
margin-right: 0;
margin-bottom: 15px;
}
.phc-home-hashtags-section-content{
margin-bottom: 0px;
}
}
#media only screen and (max-width: 359px){
.phc-hashtags-box{
width: 92%;
}
}
.phc-hashtags-box:hover{
box-shadow: 0px 3px 10px 0px #aaa;
}
.phc-hashtags-box-title{
color: #666;
padding: 0px 5px 5px;
}
.phc-hashtags-box-tags{
color: #666;
font-size: 14px;
background-color: #f2f2f2;
padding: 3px 10px;
}
.phc-hashtags-box-tags-copied{
background-color: #d4d4d4;
}
.phc-hashtags-box-button{
position:relative;
cursor: pointer;
background-color: #3f51b5;
color: #fff;
padding:5px 10px;
border: none;
border-radius: 0px 0px 0px 8px;
float: right;
top: 0px;
left: 0px;
transition: all 0.3s;
}
.phc-hashtags-box-button:hover{
background-color: #009688;
}
.phc-hashtags-box-button-clicked{
background-color: #009688;
}
/***toast***/
#phc-toast {
visibility: hidden;
max-width: 50px;
height: 50px;
/*margin-left: -125px;*/
margin: auto;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 5px;
position: fixed;
z-index: 1;
left: 0;right:0;
bottom: 30px;
font-size: 17px;
white-space: nowrap;
}
#phc-toast #img{
width: 50px;
height: 50px;
float: left;
padding-top: 16px;
padding-bottom: 16px;
box-sizing: border-box;
border-radius: 5px;
background-color: #009688;
color: #fff;
}
#phc-toast #phc-toast-message{
color: #fff;
font-size: 14px;
padding: 14px;
overflow: hidden;
white-space: nowrap;
}
#phc-toast.show {
visibility: visible;
-webkit-animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 2s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, expand 0.5s 0.5s,stay 3s 1s, shrink 0.5s 4s, fadeout 0.5s 4.5s;
}
#-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}
#-webkit-keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#keyframes expand {
from {min-width: 50px}
to {min-width: 200px}
}
#-webkit-keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#keyframes stay {
from {min-width: 200px}
to {min-width: 200px}
}
#-webkit-keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#keyframes shrink {
from {min-width: 200px;}
to {min-width: 50px;}
}
#-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 60px; opacity: 0;}
}
/***scroll to top***/
#return-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background: #e91e63;
width: 50px;
height: 50px;
display: block;
text-decoration: none;
-webkit-border-radius: 35px;
-moz-border-radius: 35px;
border-radius: 35px;
display: none;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top img{
color: #fff;
margin: 0;
position: relative;
left: 16px;
top: 13px;
width: 20px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
#return-to-top:hover {
box-shadow: 0px 3px 10px 0px #aaa;
}
#return-to-top:hover img {
top: 6px;
}
/***scrollbar***/
/* width */
::-webkit-scrollbar {
width: 8px;
height: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #111;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #009688;
border-radius: 10px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #057d72;
}
/***text selection color***/
::-moz-selection { /* Code for Firefox */
color: #fff;
background: #e91e63;
}
::selection {
color: #fff;
background: #e91e63;
}
footer{
background-color: #fff;
height: 150px;
}
.phc-copyright{
color: #666;
font-size: 14px;
line-height: 150px;
text-align: center;
}
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="phc-home-fold-content">
<div class="container">
<div class="phc-home-intro">
<h1 class="phc-home-intro-title"><img class="phc-brand-home-intro" src="assets/img/phc_logo.png">Search</h1>
<form class="phc-home-search-container">
<input type="text" id="phc-home-search-bar" placeholder="Search here...">
<img class="phc-home-search-icon" src="assets/img/phc_search_icon.png">
<p class="phc-home-search-hashtag"></p>
</form>
</div>
</div>
</div>
<!--hashtags-->
<div class="phc-home-hashtags">
<div class="container">
<div class="phc-home-hashtags-section">
<div class="phc-home-hashtags-section-content">
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box1</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a scrambled it to make</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box2</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="phc-hashtags-box">
<h3 class="phc-hashtags-box-title">Box3</h3>
<button onclick="launch_toast()" class="phc-hashtags-box-button">Copy</button>
<p class="phc-hashtags-box-tags">opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text</p>
</div>
</div>
</div>
</div>
<!--toast message-->
<div id="phc-toast">
<div id="img"><img src="assets/img/phc_tick.png"></div>
<div id="phc-toast-message">Copied!</div>
</div><!--/toast message-->
<!---scroll to top-->
<img src="assets/img/phc_scroll_to_top.png"></i>
</div><!--/container-->
</div><!--/hashtags-->
<script src="assets/js/script.js"></script>
</body>
</html>

How to center images in a slider blogger

My posts in my blog have a slider which shows all the pictures within the post. All of the pictures are aligned to the left and I don't know how to fix this problem. I want them to align to the center and am not sure how to do that effectively.
here is my website:
http://reezyblog.blogspot.co.uk/
heres all the coding related to the slider:
/* ===[ Slider ]=== */
.homepage-slider {
opacity: 0;
margin-bottom: 60px;
}
.homepage-slider .slick-slide .featured-title {
text-align: center;
position: absolute;
margin: 0 auto;
top: 20%;
left: 30%;
width: 40%;
padding: 40px 30px 50px;
background: #fff;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
.homepage-slider .slick-slide:hover .featured-title { background: rgba(255,255,255,.9) }
.homepage-slider .slick-slide .featured-title h2 {
font-family: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
font-size: 24px;
line-height: 1.2;
margin-bottom: 10px;
color: #111;
}
.homepage-slider .slick-slide .featured-title .featured-date {
color: #999;
font-size: 13px;
}
.homepage-slider .slick-slide .featured-title .featured-category {
display: inline-block;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #e1534f;
margin-bottom: 10px;
border-radius: 3px;
}

Add this text-align: center to .slick-initialized .slick-slide class just like below
.slick-initialized .slick-slide {
display: block;
text-align: center;
}
and make your .slick-slide {display: inline-block;} just like below
.slick-slide img {
display: inline-block;
}

JavaScript: css toggle switch to dark mode

I have created a toggle switch using css.
I want #box1 to turn from a white background with black type to a black with white text and the toggle to turn to on.
I'm stuck trying to figure out the JavaScript. The button doesn't switch and the box doesn't turn back to white.
$('#myonoffswitch').change(function(){
console.log('here');
if ($(this).click())
{
$('#box1').addClass('dark-mode');
}
else
{
$('#box1').removeClass('dark-mode');
}
});
How can toggle the dark-mode class.
Fiddle

You can just use the toggleClass method. Demo
$('#myonoffswitch').change(function(){
$('#box1').toggleClass('dark-mode');
});
$(this).click() returns an instance of jQuery, which is a truthy value in JavaScript, this is why addClass was called in the first place
$('#myonoffswitch').change(function() {
$('#box1').toggleClass('dark-mode');
});
.onoffswitch {
position: relative;
width: 90px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #999999;
border-radius: 20px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 10px;
background-color: #FFFFFF;
color: #000000;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 10px;
background-color: #FFFFFF;
color: #000000;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 18px;
margin: 6px;
background: #000000;
border: 2px solid #999999;
border-radius: 20px;
position: absolute;
top: 0;
bottom: 0;
right: 56px;
-moz-transition: all 0.3s ease-in 0s;
-webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #FFFFFF;
}
#box1 {
color: black;
background-color: white;
border: 1px solid;
width: 100px;
height: 100px;
}
#box1.dark-mode {
color: #fff;
background-color: #000;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="onoffswitch">
<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<br>
<div id="box1">This is text.</div>

Categories

Resources