I have created a box where I have text, vertical dotted lines and icon below.
I am trying to create like the following image
This is what I have created, in my code, the dotted lines very close to each other because I have used border, but not sure what other way to create dots, and animation I am looking is, dots appear one by one.
.lets-experience {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 25px;
max-width: 150px;
text-align: center;
color: #fff;
font-family: 'Gotham-Book';
font-size: 14px;
background:#404040;
}
.lets-experience > p {
margin: 5px 0;
}
.lets-experience > .dots {
width: 1px;
height: 50px;
margin: 0 auto 0 auto;
border-right: 1px dotted #fff;
}
.experience-arrow {
width: 2em;
height: 2em;
transform: rotate(90deg);
margin: -10px -2px 0 0;
}
.experience-arrow > path {
fill: #fff;
}
<div class="lets-experience">
<p>Lets Experience</p>
<div class="dots"> </div>
<svg class="experience-arrow" viewBox="0 0 20 20">
<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
</svg>
</div>
You can use svg to create the line and use height animation
.lets-experience {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 25px;
max-width: 150px;
text-align: center;
color: #fff;
font-family: 'Gotham-Book';
font-size: 14px;
background:#404040;
}
.lets-experience > p {
margin: 5px 0;
}
.lets-experience > .dots {
width: 10px;
height: 50px;
margin: 0 auto 0 auto;
/*border-right: 1px dotted #fff;*/
}
.dots svg{
animation: heightAnim 1s linear infinite;
}
#keyframes heightAnim {
from {
height: 0px;
}
to {
height: 45px;
}
}
.experience-arrow {
width: 2em;
height: 2em;
transform: rotate(90deg);
margin: -10px -2px 0 0;
}
.experience-arrow > path {
fill: #fff;
}
<div class="lets-experience">
<p>Lets Experience</p>
<div class="dots">
<svg width="10px" height="45px">
<line x1="5" x2="5" y1="5" y2="45" stroke="#FFF" stroke-width="5" stroke-linecap="round" stroke-dasharray="1, 10"/>
</svg>
</div>
<svg class="experience-arrow" viewBox="0 0 20 20">
<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
</svg>
</div>
Simple animation with pure CSS
.container {
position: relative;
}
.arrow {
font-size: 5em;
position: absolute;
}
.anim {
height: 5px;
background-color: white;
position: absolute;
width: 100%;
animation: blink 1s linear alternate infinite;
}
#keyframes blink {
from {
height: 0px;
}
to {
height: 55px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
<div class="arrow">⇣</div>
<div class="anim"></div>
</div>
You can use background-image instead of border, change the image-size to control the size of each picture and use repeat-y to make it look dotted
background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
background-position: top;
background-size: 1px 10px;
background-repeat: repeat-y;
background-color: #ffffff;
to animate it simply use css
#keyframes animatedBackground {
from { background-position: 0% 0%; }
to { background-position: 0% 100%; }
}
to call the animation use animation: animatedBackground 20s linear infinite;
.lets-experience {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
bottom: 25px;
max-width: 150px;
text-align: center;
color: #fff;
font-family: 'Gotham-Book';
font-size: 14px;
background:#404040;
}
.lets-experience > p {
margin: 5px 0;
}
.lets-experience > .dots {
width: 1px;
height: 50px;
margin: 0 auto 0 auto;
//border-right: 1px dotted #fff;
background-image: linear-gradient(to bottom, #333 90%, rgba(255, 255, 255, 0) 20%);
background-position: top;
background-size: 1px 10px;
background-repeat: repeat-y;
background-color: #ffffff;
animation: animatedBackground 20s linear infinite;
}
.experience-arrow {
width: 2em;
height: 2em;
transform: rotate(90deg);
margin: -10px -2px 0 0;
}
.experience-arrow > path {
fill: #fff;
}
#keyframes animatedBackground {
from { background-position: 0% 0%; }
to { background-position: 0% 100%; }
}
<div class="lets-experience">
<p>Lets Experience</p>
<div class="dots"> </div>
<svg class="experience-arrow" viewBox="0 0 20 20">
<path fill="none" d="M14.989,9.491L6.071,0.537C5.78,0.246,5.308,0.244,5.017,0.535c-0.294,0.29-0.294,0.763-0.003,1.054l8.394,8.428L5.014,18.41c-0.291,0.291-0.291,0.763,0,1.054c0.146,0.146,0.335,0.218,0.527,0.218c0.19,0,0.382-0.073,0.527-0.218l8.918-8.919C15.277,10.254,15.277,9.784,14.989,9.491z"></path>
</svg>
</div>
Maybe you will try with this:
.dots:before {
content: '';
width: 10px;
margin-left: -5px;
position: absolute;
background: #404040;
height: 0%;
}
And animate height from 0% to 100% with CSS transition or JS;
I hope this help.
I hope this is what you are looking for. I've just changed size of dots in border-right. But you have to change the margin of text from border. Because due to changing of size the text becomes nearer to dots.
.lets-experience > .dots {
width: 1px;
height: 50px;
margin: 0 auto 0 auto;
border-right: 3px dotted #fff;
}
Related
I was trying to use particles.js, for the first time.
So I tried it on my index.html
I did exactly like the tutorial told me to, The problem is the particles showing up individually, below the div.
I don’t really know why.
I tried to run this code:
HTML:
<body id="parts">
<div class="header">
<a href="https://fluxapp.ml" class="logo">
<img src="https://fluxapp.ml/flux/flux.png" width="24" height="24"/>
<a href="https://discord.gg/qJEBZ7Gmw3">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="discordicon" viewBox="0 0 16 16">
<path d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"/> </svg>
</a>
</a>
<div class="header-right">
About
API
</div>
</div>
<div id="particles-js">
<div class="bodies" >
<div class="mockup">
<img src="https://fluxapp.ml/flux/fluxmockup.png" />
</div>
<div class="description">Welcome to Flux!
A Social media and communities app 2.0</div>
<div>
<button id="download" class="fluxbtn" onclick="downloadOnClick()">Download</button>
</div>
<div>
<button id="snackbar">
<span>Sorry, the app is currently unavailable.</span>
<a href="/about">
<span style="color: #ff3333"><u>See the reason</u></span>
</a>
</button>
</div>
</div></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
CSS:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
html, body {
height: 100%;
width: 100%;
background-color: #010a13;
text-align: center;
font-family: 'Poppins', Arial;
font-weight: 900;
color: #f5fcff;
overflow-x: hidden;
align-items: center;
vertical-align: middle;
}
.header {
max-width: 1200px;
/*margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;*/
}
.header a {
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #052544;
color: white;
}
.header-right {
float: right;
}
.fluxbtn {
border: 2px solid #63D3FF;
background-color: rgba(56, 215, 255, .1);
color: #63D3FF;
padding: 14px 28px;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
width: 300px;
font-family: "Poppins";
font-weight: 900;
}
.fluxbtn:hover {
background-color: rgba(56, 215, 255, .2);
}
.mockup {
margin-top: 20px;
position: relative;
width: 100%;
height: auto;
}
.description {
word-wrap: break-word;
white-space: pre-wrap;
margin-top: 20px;
margin-bottom: 20px;
font-size: 30px;
}
#snackbar {
font-weight: 300;
width: auto;
visibility: hidden;
margin-top: 10px;
background-color: rgba(255, 204, 0, .1);
text-align: center;
padding: 16px;
bottom: 30px;
font-size: 17px;
border: 2px solid #FFCC00;
border-radius: 8px;
color: #FFCC00;
}
#snackbar:hover {
background-color: rgba(255, 204, 0, .2);
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
animation: fadein 0.5s, fadeout 0.5s 3.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 fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
#media screen and (max-width: 500px) {
.fluxbtn {
width: 200px;
}
.description {
font-size: 20px;
}
}
#media screen and (max-width: 246px) {
.fluxbtn {
width: auto;
}
}
.bodies {
max-width: 1200px;
margin: auto;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
margin-top: 20px;
position:relative;
}
#particles-js {
position: absolute;
width: 100%;
height: 100%;
}
And I excepted to get a nice particles in the background of my div.
But that never happened.
Any solution?
i have a problem with my animation. I have to change a variable of my animation depending on the class I am using...
<span class="botton-next">
<i class="far fa-arrow-right bg-red"></i>
</span>
.botton-next{
color: #7e8087;
font-weight: bold;
font-family: 'Nunito', sans-serif;
height: 30px;
width: 30px;
display: block;
font-size: 15px;
border-radius: 100%;
position: absolute;
right: 10px;
bottom: 10px;
z-index: 0;
}
.botton-next::after{
content: "";
position: absolute;
width: 30px;
height: 30px;
right: 0px;
border-radius: 50%;
top: -.5px;
-webkit-animation: pulse 1.3s infinite;
}
.botton-next i{
border-radius: 100%;
padding: 7px 8px 7px 8px;
color: white;
}
#-webkit-keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(100, 197, 177, 0.7);
}
100% {
box-shadow: 0 0 0 10px transparent;
}
}
this makes a pulse animation. But I need to control the color of the box-shadow directly from the html using some class. So that the color of the box-shadow inside the webkit is red, or yellow, or green... all depending on a class
I am trying to achieve the below image with few divs, round background with similar to V-shape ( as shown in image below).
So Far I have tried this but could not achieve as in the image. I have added both before and after psuedo code for it. Any Help will be much Appreciated.
// Want to Achieve this:
//So far I have done this:
<template>
<div>
<div class="markar-container">
<button>
<h1>Pin 4</h1>
<div class="outer-circle">
<div class="inner-circle">
<div class="text">AA</div>
</div>
</div>
</button>
</div>
</div>
</template>
CSS:
<style scoped>
.outer-circle {
position: relative;
width: 80px;
height: 80px;
border-radius: 40px;
background-color: #fff;
box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.3);
}
.inner-circle {
width: 70px;
height: 70px;
border-radius: 35px;
background: #3ac371;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.text {
position: absolute;
left: 18px;
top: 21px;
font-size: 24px;
color: white;
}
.outer-circle::before {
content: "";
top: 75px;
left: 24px;
border-width: 16px;
border-style: solid;
border-color: transparent #fff transparent transparent;
/* box-shadow: 2px rgba(0, 0, 0, 0.3); */
box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.91);
position: absolute;
transform: rotate(-90deg);
}
.dl-outer-circle::after {
/* position: absolute;
content: "";
top: 73px;
left: 30px;
border-width: 10px;
border-style: solid;
border-color: transparent #3ac371 transparent transparent;
transform: rotate(-90deg); */
}
</style>
// and my pin looks like this:
I created a svg for you took a lot of time. Hope it will help
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: grid;
place-items: center;
}
.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: red;
}
.circle::after {
position: absolute;
left: 50%;
bottom: -24px;
transform: translateX(-50%);
content: url("data:image/svg+xml,%3Csvg width='72' height='48' viewBox='0 0 72 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H72V16.7561C70.0823 16.2625 68.0718 16 66 16C52.7451 16 42 26.7452 42 40V48H30V40C30 26.7452 19.2549 16 6 16C3.92822 16 1.91772 16.2625 0 16.7561V0Z' fill='%23FF0000'/%3E%3C/svg%3E");
}
<div class="circle"></div>
I am working on a small website front end where everything is going according to plan but my a hrefs on header is not clickable. I think there is some CSS problem. Here I will add html and css of the project.
Header links for home team books etx are given href in html but its not clickable.
And also am getting vertical height getting repeated with scroll, I don't want that. How do I get rid of it?
* {
margin: 0;
box-sizing: border-box;
font-family: Century Gothic;
}
/** header **/
.main{
align-items: center;
}
ul {
margin-top: 15px;
list-style-type: none;
float: right;
}
ul li {
display: inline-block;
}
ul li a {
text-decoration: none;
text-shadow: #000;
border: 1px solid transparent;
color: #b61e83;
padding: 5px 20px;
transition: 0.6s ease;}
ul li a:hover{
background-color: #ff4562;
color: #000;
border: 1px solid #000;
}
ul li.active a{
background-color: #b61e83;
color: #fff;
}
#top {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
}
#bottom {
position: absolute;
bottom: 0px;
right: 0px;
z-index: -1;
}
/** body **/
body {
padding: 50px 100px;
align-content: center;
background-image: linear-gradient(111.37738709038058deg, rgba(43, 45, 78, 1) 1.557291666666667%, rgba(225, 20, 139, 1) 101.34895833333333%);
/*linear-gradient(114.50890543382422deg, rgba(28, 0, 66, 1) 1.6731770833333333%, rgba(0, 235, 215, 1) 97.94270833333331%);*/
display: inherit;
align-items: center;
min-height: 100vh;
}
/** home text **/
.hometext {
position: absolute;
right: 25%;
top: 40%;
color: #fff;
width: 500px;
}
.quote {
position: relative;
justify-content: center;
}
/** clock css **/
.clock {
position: absolute;
top: 25%;
left: 18vw;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
background: url(../images/_clock.png);
background-size: cover;
border-radius: 50%;
box-shadow: 0 -25px +25px rgba(255, 255, 255, 0.05),
inset 0 -25px +25px rgba(255, 255, 255, 0.05),
0 25px 25px rgba(0, 0, 0, 0.05),
inset 0 25px 25px rgba(0, 0, 0, 0.05);
}
.clock:before {
content: '';
position: absolute;
width: 25px;
height: 25px;
background: #fff;
border-radius: 50%;
z-index: 1000;
}
.clock .hour,
.clock .min,
.clock .sec {
position: absolute;
}
.clock .hour,
.hr {
width: 260px;
height: 200px;
}
.clock .min,
.mn {
width: 250px;
height: 300px;
}
.clock .sec,
.sc {
width: 330px;
height: 330px;
}
.hr,
.mn,
.sc {
display: flex;
justify-content: center;
/*align-items: center;*/
position: absolute;
border-radius: 50%;
}
.hr:before {
content: '';
position: absolute;
width: 12px;
height: 90px;
background: #ff105e;
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before {
content: '';
position: absolute;
width: 4px;
height: 150px;
background: #fff;
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before {
content: '';
position: absolute;
width: 2px;
height: 200px;
background: #fff;
z-index: 12;
border-radius: 6px 6px 0 0;
}
/** animated background **/
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript Clack UI Dark</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- Head elements -->
<div class="main">
<ul>
<li class="active"><b>Home</b></li>
<li><b>Team</b></li>
<li><b>Exams</b></li>
<li><b>Books</b></li>
<li><b>Demo</b></li>
<li><b>Alumnus</b></li>
<li><b>Contact</b></li>
</ul>
</div>
<header>
<img src="images/web-yellow.png">
<!-- SVG cuts -->
<svg id="top" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1144 107.17">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="M221.5-.5s2.26,0,6.49.19C261.54.77,419,7.31,557.5,37.5c156,34,299,65,474,69s334-66,334-66V-.5Z" transform="translate(-221.5 0.5)" />
</svg>
<svg id="bottom" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 334">
<defs>
<style>
.cls-1 {
fill: #fff;
}
</style>
</defs>
<path class="cls-1" d="M237,768s394.36-9.88,698.58-72.73S1366,434,1366,434V768Z" transform="translate(-237 -434)" />
</svg>
</header>
<!-- HTML for clock -->
<div class="clock">
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
<!-- Header paragraphy -->
<div class="hometext">
<h3>neram | classes</h3><br>
<p>Meeting right person at right time will change everything in life. It happended for us.</p><br>
<p class="quote">“We are one of that kind” </p><br>
<p>Hence we name our initiative as neram ( Time ). neram is not a typical NATA coaching center, we are architects & Designers from various parts of the world working for the betterment of next generation of architects. We belive our NATA coaching is the starting point for that.</p>
</div>
<!-- Animates shapes -->
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!-- java scrtipt for clock -->
<script type="text/javascript">
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
</script>
</body>
</html>
Links are alright. It's just layer of class="circles" that is in front of the nav.
Please try to add position relative and z-index to your CSS (code below) =>
.main {
align-items: center;
position: relative;
z-index: 9998!important;
}
For background repeat issue add these two properties to the body in CSS =>
body {
height: 100vh;
overflow: hidden;
}
In href you need to put the path where you want it to direct like you did in alumnus.
href="http://www.example.com"
You used min-height, that tells it to be at least 100vh but it is no limit so it can exceed 100vh. Try also adding a max-height.
Max-height:100vh;
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 #.