I have YoutuTube button with counter on my website: www.lukas-tv.pl
I mean button under: "Prawie 200 000 sybrybcji!"
I'd like to make this button 200% bigger and center it. Could you help me?
This is a nice solution. I recommend to you study a little bit of CSS.
.apsc-theme-3 .apsc-each-profile {
display: inline-block;
margin: 5px;
transform: scale(2);
}
Related
a client wants his old menu in his website re-design I should make for him. It looks like this:
Curved Menu
I tried some code with svg etc but I didn't get it to work.
Is it even possible to make a navigation/menu like this responsive?
Maybe you can help me out with a little hint or something. Would be glad about it!
Thanks in advance.
Yes, you could use the SVG. Then, you could set its z-index higher, this way you will bring it to front in page. The menu will have a z-index lower than the SVG. Each item of menu will have a transform: translateY() moving it up. So you will position each of them differently. Lastly, you will modify the height of each item in order to compensate the transform displacement.
Like this:
.item1 {
transform: translate(-20px);
height: 100px;
}
.item2 {
transform: translate(-40px);
height: 120px;
}
.item3 {
transform: translate(-60px);
height: 140px;
}
Hope it helps.
I want to move the About button up to the point where it's right below the title but it won't work.
I tried:
In ButtonToScroll.css, margin-bottom: 40%; but it didn't work
In Main.css, I did margin-bottom: inherit; to accompany 1, but didn't work.
What am I doing wrong and how can I fix it?
If you need any other information please let me know.
Here's a sandbox of my project https://codesandbox.io/s/github/name/Encrypt-Your-Code
Easiest way in my opinion would be to give the button position: relative and set top: -80px or whatever you think looks best:
https://codesandbox.io/s/y0pm9l87x9
Set in ButtonToScroll.css
.about { margin-bottom: 10% }
and remove in Main.css
.boxSkull { margin-top: 10% }
Furthermore you should have only one <body> tag in html document.
Add a value in ButtonToScroll.css under text-decoration: none; called:
margin-top: -10%;
It will move everything up from the About button downwards.
I'm using this plugin and it works perfectly:
https://codyhouse.co/demo/client-testimonials-carousel/index.html
however I'm not too sure how to get the arrows to stay put and never move. Right now they center themselves based on the height of the div and I just want them to stay where they are instead. If someone could show me what they changed so I can also learn that would be awesome!
You have to change this css:
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
background-color: white;
content: "";
height: 13px;
left: 50%;
position: absolute;
top: 50%;
width: 2px;
}
Change the top: 50%; to whatever you want. Like top: 200px for example.
The top: 50% will get the height of the parent element and move the own element 50% down. This can be disabled by adding a fixed declaration.
If you cant edit the css from your plugin, include your own css-file and paste this into it:
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
top: 200px;
}
Consider sticking with the moving arrows. Reason for suggesting this is that your choice of fixed top position is unlikely to be as pleasing as the centred version. Say you choose
top: 100px;
It will look great for a testimonial that generates a 220px high block because the 100px point is roughly central. But it will look ugly when the testimonial block is 130px high and the arrow is close to the bottom of the block.
Your sample testimonials have either 3 or 4 lines only. Try it with single-line testimonial and a 7 line version and see how you feel about fixing the position.
Its a nice looking site so far - good work.
I'm currently developing a site in which 2 users go head to head in a "coin flip", a Materialize CSS modal pops up on each users screen (the winner has already been defined), I then want there to be a coin flip animation.
I'm going to use this coin flip animation: https://www.html5andbeyond.com/coin-flip-application-html-css-and-jquery/
My question is how can I set the coin flip to land on a specific winner before the animation, also, how can I change it so there's a custom image on each side?
Thanks,
James
Here are the changes to make in the css of that Codepen to place an image on either side of the coin. Click 'Edit on Codepen' on https://codepen.io/html5andblog/pen/pJZpee
#coin .front {
transform: translateZ(1px);
border-radius: 50%;
background-image: url('http://placehold.it/200x200/E8117F/000000');
background-size: cover;
display: block;
}
#coin .back {
transform: translateZ(-1px) rotateY(180deg);
border-radius: 50%;
background-image: url('http://placehold.it/200x200/000000/E8117F');
background-size: cover;
display: block;
}
To make the coin fall on a specific side do the following on that same codepen you gave us.
Heads:
Change the 'var spinArray' line to
var spinArray = ['animation1080'];
Tails:
Change the 'var spinArray' line to
var spinArray = ['animation900'];
I can't take it any further without having access to your code. That should be enough to figure it out though.
Hope this helps.
Best,
Tim
Using bxslider, the contents go to far to the right or left and then snap back in place. This happens more when clicking the 'prev' button.
I've seen this answer, but 'box-sizing' didn't fix it.
Here is a fiddle - In it I don't use the bxslider css file, I've added before and it makes no difference. I've stripped this down to bare bones and it still goes to far and then snaps back in place.
Each li has multiple div's in it. The CSS is:
div.swatches {
width: 22px;
height: 30px;
margin: 0px 3px;
border: 1px solid #CCC;
display: inline-block;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
cursor: pointer;
}
bxSlider calculates slide positions dynamically with the best dimensions it can get from the parent element. Sometimes you get this weirdness. Try to specify slide width and number of slides, this would make bxSlider calculate positions with more precision. This should fix your issue:
$('.bxslider').bxSlider({
pager: false,
speed:1300,
maxSlides:2,
slideWidth:600
});
Your updated fiddle: https://jsfiddle.net/8ayxpeL9/3/