what I'm trying to is by clicking a button it will scroll smoothly down to the next section, without changing the background image. Similar to this; http://www.dada-data.net/en/
I've been able to make a click event that scrolls to a new page, but can't seem to get the sections to scroll up on the same background.
Thanks in advance for any help!
HTML
<section id="section01" class="demo">
<div class="hero">
<img src="/Users/jbeez/desktop/portfolio/JMB_B.png" class="jmb">
</div>
<span></span>Click
</section>
<!-- end of section 1 -->
<section id="section02" class="demo">
<div>
<h1>Hello world</h1>
</div>
</section>
JAVASCRIPT
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
CSS
#section01 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
#section02 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
#section03 { background: url(/Users/jbeez/desktop/portfolio/background.png) center center / cover no-repeat;}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section02 a {
padding-top: 60px;
}
#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section02 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
Like the others are saying... The # is terribly missing.
<span></span>Click
Then, in the attribute selector you used, there is some quotes missing around this # you're trying to target.
$("a[href*='#']")
CodePen of the code fixed.
Try to change your href,
like this :
<span></span>Click
$(".your element").click(function() {
$('html, body').animate({
scrollTop: $(this).attr("href").offset().top
}, 2000);
});
Try this with a hash:
<span></span>Click
Related
I have done until now to create a button and inside a tag button I have created another div with class background to give same property for animation effects when click on button.
But I am not sure if in this way is regular syntax for HTML to put another div into tag button in my case?
I AM SHARING MY CODE:
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 500%;
height: 500%;
}
<button class='btn'>
<div class="background"></div>Contact
</button>
But when I Click on button we want background color display as circle and not as eclipse in the center on button. Exactly by the Figmaenter link description here
or code pene: enter link description here
The issue in your approach is that you are setting the background width and height to 1:1 proportions. This would make circle for a square button. For you to create circle you need to make it proportional to the width and height of your button. For example:
button {
height: 73px;
min-width: 198px;
border-radius: 5px;
background-color: $gold;
border-color: $gold;
position: relative;
overflow: hidden;
display: inline-block;
font-size: 1.313rem;
color: black;
z-index: 2;
line-height: 30.24px;
font-weight: bold;
text-transform: uppercase;
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(#000000, #000000);
transition: .5s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: $gold;
}
button:hover .background {
width: 150%;
height: 406%;
}
<button class='btn'>
<span class="background"></span>Contact
</button>
To get the proportional width you can use in your case (198/73)*height. So if you choose for your height to be 130% you should have width of 353%. The higher % the faster your animation will be, so keep that in mind.
button:hover .background {
width: 120%;
height: 300%;
}
Can anyone please help with this? How to achieve the attached button with CSS only(no image)?
This is my code so far:
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
<div class="triangle-up"></div>
Use pseudo element where you apply a radial-gradient:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background:green;
border-radius:50px;
position:relative;
}
.box:before {
content:"";
position:absolute;
bottom:100%;
left:50%;
width:60px;
height:25px;
transform:translateX(-50%);
background:
radial-gradient(farthest-side at top left , transparent 98%,green 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,green 100%) right;
background-size:50.2% 100%;
background-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box">more and more text here</div>
<div class="box">2 lines <br>of text</div>
Another idea in case you want any kind of coloration:
.box {
margin:60px 10px 0;
display:inline-block;
color:#fff;
text-align:center;
padding:10px 30px;
background-image:linear-gradient(60deg,yellow,purple,green,blue);
background-size:100% calc(100% + 25px);
background-position:bottom;
border-radius:50px;
position:relative;
z-index:0;
}
.box:before {
content:"";
position:absolute;
z-index:-1;
bottom:0;
left:0;
right:0;
height:calc(100% + 25px);
background-image:inherit;
-webkit-mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
mask:
radial-gradient(farthest-side at top left , transparent 98%,#fff 100%) left,
radial-gradient(farthest-side at top right, transparent 98%,#fff 100%) right;
-webkit-mask-size:30px 25px;
mask-size:30px 25px;
-webkit-mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
mask-position:calc(50% - 15px) 0,calc(50% + 15px) 0;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
}
body {
background:pink;
}
<div class="box">text here</div>
<div class="box" style="
background-image:linear-gradient(160deg,white,red,black,orange);">more and more text here</div>
<div class="box" style="
background-image:linear-gradient(180deg,blue 20%,violet 20%,black);">2 lines <br>of text</div>
you can use the shadow on both rounded pseudos
.bubble {
position: relative;
background: #00aabb;
border-radius: 0.4em;
width: 200px;
height: 100px;
}
.bubble:after,
.bubble:before {
content: "";
position: absolute;
height: 3em;
width: 3em;
border-radius: 50%;
top: 100%;
margin: -1px;
}
:after {
left: 50%;
box-shadow: -0.8em -1.4em 0 -0.5em #00aabb
}
:before {
right: 50%;
box-shadow: 0.8em -1.4em 0 -0.5em #00aabb;
}
<div class='bubble'></div>
to understand how it works, give a background to the pseudo and another color to the shadows. You'll be able to reproduce for the sides or the top. It's a matter of the circle size and shadow's size and direction.
One option is to create a normal rectangle and then position two circles over it, such that they create a curved point.
In the demo below, this rectangle is represented by the .point div, and the circles are represented by the pseudo-elements ::before and ::after.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
overflow: hidden;
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: white;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
Here is a more visual demonstration of what the code is actually doing. The ::before and ::after elements are represented by the red circles. I've reduced the transparency of their fill to 50% so you can see which portion of the .point div they're cutting off.
.caption {
position: relative;
width: 350px;
margin-top: 40px;
}
.caption>.content {
width: 100%;
height: 100%;
padding: 10px;
box-sizing: border-box;
border-radius: 30px;
background-color: green;
color: white;
text-align: center;
}
.caption>.point {
position: absolute;
left: 50%;
top: -30px;
width: 30%;
height: 30px;
transform: translateX(-50%) translateZ(1px);
background-color: green;
}
.caption>.point::before,
.caption>.point::after {
content: '';
display: block;
width: 100%;
height: 200%;
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
background-color: rgba(255,255,255,0.5);
border: 1px solid red;
}
.caption>.point::before {
transform: translateX(-49%) translateY(-50%);
}
.caption>.point::after {
transform: translateX(49%) translateY(-50%);
}
<div class="caption">
<div class="point"></div>
<div class="content">This is some text!</div>
</div>
I want to create a look that allows when a user press the "Scroll" button, the page will scroll with sliding effect. But it does not work on my page. I tried add with tag to my html file but it does not work too.
I found a script for that but it did not work.
Where is my mistake?
home.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
.
.
.
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
home.js
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
home.css
#import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400);
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.8) 80%,rgba(0,0,0,.8) 100%);
}
section h1 {
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 300 64px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
section h2 {
position: absolute;
top: 65%;
left: 50%;
z-index: 1;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
font : normal 200 24px/1 'Josefin Sans', sans-serif;
text-align: center;
white-space: nowrap;
}
#section01 { background: url(https://picsum.photos/1200/800?image=575) center center / cover no-repeat;}
#section02 { background: url(https://picsum.photos/1200/800?image=1016) center center / cover no-repeat;}
#section03 { background: url(https://picsum.photos/1200/800?image=869) center center / cover no-repeat;}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section01 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section01 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#section02 a {
padding-top: 60px;
}
#section02 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section02 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a {
padding-top: 60px;
}
#section03 a span {
position: absolute;
top: 0;
left: 50%;
width: 46px;
height: 46px;
margin-left: -23px;
border: 1px solid #fff;
border-radius: 100%;
box-sizing: border-box;
}
#section03 a span::after {
position: absolute;
top: 50%;
left: 50%;
content: '';
width: 16px;
height: 16px;
margin: -12px 0 0 -8px;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
#section03 a span::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
content: '';
width: 44px;
height: 44px;
box-shadow: 0 0 0 0 rgba(255,255,255,.1);
border-radius: 100%;
opacity: 0;
-webkit-animation: sdb03 3s infinite;
animation: sdb03 3s infinite;
box-sizing: border-box;
}
#-webkit-keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
#keyframes sdb03 {
0% {
opacity: 0;
}
30% {
opacity: 1;
}
60% {
box-shadow: 0 0 0 60px rgba(255,255,255,.1);
opacity: 0;
}
100% {
opacity: 0;
}
}
Your problem was here
$('a[href*=#]').on('click', function(e) { ...
To target the anchor elements that have a href attribute which begin with the # character you would use ^ (instead of *), which means starts with, and you would also add some parentheses around the search character like this
$('a[href^="#"]').on('click', function(e) { ...
Check below:
Note: I purposefully gave the body a height of 1000px so we can test and run here.
$(function() {
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
body {
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="{% static 'js/home.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/home.css' %}">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<section id="section01" class="demo">
<h1> Welcome to PHARSYS </h1>
<h2>Scroll for Login or Signup</h2>
<span></span>
</section>
<section id="section02" class="demo">
<h1>Login</h1><br>
<h2>Press the button to log in to the system.
<br><br>
</h2>
<span></span>Scroll
</section>
<section id="section03" class="demo">
<h1>Signup</h1>
<h2>Press the button to register to the system</h2>
</section>
You can also use the * as a wild card instead of ^, which will then match anchor elements that have a # character anywhere in their href attribute, and not just begin with #.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
So i have implemented you code with javascript but i still cant figure out how to do it. Ok Im noob in JS but yeah.
here my code:
First one is my index with CSS
second one is my "webapp" with CSS
And I just doesnt want to work for some reason.
If I try to resize my browser it stays on the indes file.
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 30%;
left: center;
width: 98%;
height: 50%;
}
html {
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
margin-top: 20px;
margin: 1%;
box-shadow: 0 1px 10px white, 0 0 40px black, 0 0 80px white;
color: black;
height: 96%;
width: 98%;
}
body {
background-color: white;
float: center;
}
h1 {
color: black;
text-align: center;
font-size: 25px;
margin-bottom: 5px;
text-shadow: 1px 1px 4px gray, 1px 1px 4px white;
}
p {
color: black;
text-align: center;
margin-top: 0px;
font-size: 15px;
}
header {
padding: 1px;
margin: auto;
box-shadow: 0 0 10px white, 0 0 20px white;
}
nav {
margin-left: auto;
margin-top: 50px;
margin-bottom: auto;
float: left;
background-color: white;
height: auto;
width: auto;
}
article {
float: center;
margin-top: 50px;
margin-bottom: auto;
width: auto;
height: 100%;
}
/*NAV Menu*/
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: white;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
color: black;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: black;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: rgb(0, 0, 0, 0.2);
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
span {
color: black;
width: auto;
height: auto;
margin-top: 1%;
float: right;
margin-right: 1%;
}
/*Responsive*/
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
footer {
float: center;
margin: auto;
margin-top: 60%;
}
p1 {
text-align: left;
}
.style {
font-size: 30px;
cursor: pointer;
font-family: monospace, arial;
}
span {
color: black;
width: auto;
height: auto;
margin-top: 1%;
float: right;
margin-right: 1%;
}
/*LOGO*/
img.ri {
position: absolute;
max-width: 80%;
top: 10%;
left: 10%;
border-radius: 3px;
width: 100px;
height: 100px;
}
img.ri:empty {
top: 55%;
left: 49%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#media only screen and (max-width: 500px) {
html {
background-image: url("C:/Users/Joalu/Desktop/WebApp/img/indexbackground.png");
font-family: 'Lato';
width: auto;
height: 1908px;
overflow-x: hidden;
background-repeat: no-repeat;
}
body {
margin: 0;
}
header {
text-align: center;
}
h1 {
font-size: 20px;
color: white;
margin-top: 3px;
font-family: 'Lato';
}
h2 {
display: block;
}
.btnheader {
background-color: rgb(0, 0, 0, 0.5);
border: 0;
width: 485px;
height: 87px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 30px white;
}
.overlay {
background-color: rgb(0, 0, 0, 0.5);
margin-top: 30px;
text-align: center;
}
.btn-group button {
background-color: rgb(0, 0, 0, 0.5);
/* Green background */
border: 0.5px solid rgb(0, 0, 0, 0.5);
color: white;
/* White text */
padding: 20px 33px;
/* Some padding */
cursor: pointer;
/* Pointer/hand icon */
float: left;
/* Float the buttons side by side */
font-family: 'Lato', arial;
width: 120.7px;
text-align: center;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none;
/* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(0, 0, 0, 0.3);
border: 0px;
box-shadow: 0 0 40px black, 0 0 15px white;
}
.dot {
height: 258px;
width: 258px;
background-color: rgb(0, 0, 0, 0);
border-radius: 100%;
display: inline-block;
margin-top: 670px;
cursor: pointer;
}
.dot:hover {
box-shadow: 0 0 50px white;
}
img.ri {
position: absolute;
max-width: 80%;
top: 20%;
left: 10%;
border-radius: 3px;
width: 500px;
height: 500px;
margin-top: 140px;
}
img.ri:empty {
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri:hover {
box-shadow: 0 0 10px gray, 0 0 40px black;
}
.footer {
padding: 5%;
height: 464px;
width: 500px;
background-color: rgb(0, 0, 0, 0.8);
margin-top: 320px;
color: white;
}
h3 {
text-align: center;
color: white;
margin-top: 380px;
}
.bordr {
border: 5px;
height: auto;
width: auto
}
p {
text-align: center;
color: white;
font-family: 'Lato', arial;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/MainCSS.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="image/favicon.png" sizes="32x32">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<title>
scxry
</title>
</head>
<body>
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="video/12345.mp4" type="video/mp4">
</video>
</div>
<header>
<span class="style" onclick="openNav()">☰</span>
</header>
<script type="text/javascript">
if (screen.width <= 500) {
document.location = "webapp.html";
}
</script>
<nav>
<div id="myNav" class="overlay">
×
<div class="overlay-content">
Home
Store
Social Media
Contact
FAQ
<p>scxry cmpny est. 2020
<p>
</div>
</div>
</nav>
<img src="image/scxrylogo800back.png" class="ri" />
<script>
function openNav() {
document.getElementById("myNav").style.width = "100%";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
}
</script>
</body>
</html>
#media only screen and (max-width: 500px) {
html{
background-image: url("C:/Users/Joalu/Desktop/scxryshop.de/image/webappbackground.png");
font-family: 'Lato';
width: auto;
height: 1908px;
overflow-x: hidden;
background-repeat: no-repeat;
}
body{
margin: 0;
}
header{
text-align: center;
}
h1 {
font-size: 20px;
color: white;
margin-top: 3px;
font-family: 'Lato';
}
h2 {
display: block;
}
.btnheader {
background-color: rgb(0, 0, 0,0.5);
border: 0;
width: 485px;
height: 87px;
text-align: center;
cursor: pointer;
box-shadow: 0 0 30px white;
}
.overlay {
background-color: rgb(0, 0, 0,0.5);
margin-top: 30px ;
text-align: center;
}
.btn-group button {
background-color: rgb(0, 0, 0,0.5); /* Green background */
border: 0.5px solid rgb(0, 0, 0,0.5);
color: white; /* White text */
padding: 20px 33px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
float: left;/* Float the buttons side by side */
font-family: 'Lato', arial;
width: 120.7px;
text-align: center;
}
/* Clear floats (clearfix hack) */
.btn-group:after {
content: "";
clear: both;
display: table;
}
.btn-group button:not(:last-child) {
border-right: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: rgb(0, 0, 0,0.3);
border: 0px;
box-shadow: 0 0 40px black, 0 0 15px white;
}
.dot {
height: 258px;
width: 258px;
background-color: rgb(0, 0, 0,0);
border-radius: 100%;
display: inline-block;
margin-top: 670px;
cursor: pointer;
}
.dot:hover {
box-shadow: 0 0 50px white;
}
img.ri{
position: absolute;
max-width: 80%;
top: 20%;
left: 10%;
border-radius: 3px;
width: 500px;
height: 500px;
margin-top: 140px;
}
img.ri:empty{
top: 35%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
img.ri:hover{
box-shadow: 0 0 10px gray, 0 0 40px black;
}
.footer {
padding: 5%;
height: 464px;
width: 500px;
background-color: rgb(0, 0, 0,0.8);
margin-top: 320px;
color: white;
}
h3 {
text-align: center;
color: white;
margin-top: 380px;
}
.bordr {
border: 5px;
height: auto;
width: auto
}
p {
text-align: center;
color: white;
font-family: 'Lato', arial;
}
}
#media only screen and (max-width: 1920px) {
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/webappcss.css" type="text/CSS" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
</head>
<body>
<header>
<a href="https://www.scxryshop.de/">
<button class="btnheader">
<h1>scxry</h1>
</button>
</a>
</header>
<body>
<div class="btn-group">
<a href="https://www.scxryshop.de/">
<button class="btn1">Media</button>
</a>
<a href="https://www.scxryshop.de/About.html">
<button class="btn2">FAQ</button>
</a>
<a href="https://www.scxryshop.de/Contact.html">
<button class="btn3">Contact</button>
</a>
<button class="btn4">About</button>
</div>
<img src="image/custom.png" class="ri" style="height: auto">
<div style="text-align:center">
<a href="https://www.scxryshop.de/">
<span class="dot"></span>
</a>
</div>
<h3>Blog</h3>
<div class="bordr">
<p>This new mobile update will provide you <br> with the
best experience.<br> Be sure to explore the whole website,<br>
some personal information about me:</p>
<p>I'm 15 years old and I'm a student at JKR Wendlingen <br>
I will finish my school soon and will then go <br>
to the MES in Kirchheim.</p>
<p>I was thinking of selling some 3D printed <br>
products because you can almost make everything <br>
therefor prototyping is no problem.</p>
<p>Also I'm looking forward to study abroad <br> and go to the
US. Thank you so much for visting <br>
this website if you need any help <br>
feel free to contact me.
</p>
<p><b>THANK YOU!</b></p>
</div>
<script type="text/javascript">
if (screen.width >= 500) {
document.location = "index.html";
}
</script>
</body>
</html>
There are various elements and techniques to responsive design (changing content and/or layout across different device widths). Try not to think about it as a different HTML page but elements on the same page that show and hide according to the device width.
For example: -
<div class="desktop-content">
<p>This is the content someone will see on a desktop</p>
</div>
<div class="mobile-content">
<p>This is the mobile content</p>
</div>
And then with CSS you can then do something like this: -
.mobile-content{
display:none;
}
#media only screen and (max-width: 500px) {
.desktop-content{
display:none
}
.mobile-content{
display:block;
}
}
The disadvantage here is that you are asking the browser to load both sets of content but only displaying one so if there are large images or a lot of content involved another approach may be better.
If you MUST have 2 separate HTML files then you can do a JavaScript redirect based on the width of the window to the correct one ... but I would not recommend this approach.
Instead on the main page you can use javascript to redirect the user
<script type="text/javascript">
if (screen.width <= 500) {
document.location = "other.html";
} else {
document.location = "index.html";
}
</script>
I've been following the design of the Material developed by Google and they have a new bottom navigation bar with a shape I would love to know if it's possible to archive on the Web.
Thanks in advance for sharing your knowledge.
Custom shape bottom navigation
You will need to use some tricks to make this happen, however you should really look to post your attempt to see how your attempt can be amended.
Here I have used a :before and :after pseudo element to create the curves on the bottom element, and a border colour of red to create the shape.
You can just use the :hover elements as standard, I just used it for effect :)
html {
height: 100%;
margin: 0;
padding: 0;
background: red;
position: relative;
}
.bottom {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 120px;
transition: all 0.4s;
background: white;
}
.circle {
position: absolute;
top: -50px;
transition: all 0.4s;
left: 50%;
transform: translate(-50%, -50%);
height: 50px;
width: 50px;
background: transparent;
border: 5px solid red;
border-radius: 50%;
}
body:hover .bottom:before,
body:hover .bottom:after {
bottom: 100%;
}
.bottom:before,
.bottom:after {
content: "";
transition: all 0.4s;
position: absolute;
bottom: calc(100% - 20px);
width: calc(50% - 30px);
height: 20px;
background: white;
}
.bottom:before {
border-radius: 0 20px 0 0;
left: 0;
}
.bottom:after {
border-radius: 20px 0 0 0;
right: 0;
}
body:hover .circle {
top: 0;
background: white;
}
body:hover .bottom {
height: 100px;
}
body:hover .circle:hover {
background: gold;
cursor: pointer;
}
<div class="bottom">
<div class="circle"></div>
</div>