I am working on a portion of my website, a splash screen that has image in it. I am trying to create this effect on the loading image. I did use the inbuilt compiler to convert the pug to html, but my perspective is not working as expected, I am not sure where I went wrong.
Expected output:
What I managed to scrape out:
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/index.css" type="text/css">
<link rel="icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
<link rel="shortcut icon" type="image/png" sizes="32x32" href="/media/faviconMedia/favicon-32x32.png">
<link rel="shortcut icon" type="image/png" sizes="16x16" href="/media/faviconMedia/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/media/faviconMedia/apple-touch-icon.png">
<link rel="manifest" href="/media/faviconMedia/site.webmanifest">
<title>Document</title>
</head>
<body>
<div class="splash">
<div class="fade-in">
<div class="persp assembly" style="--dx: 0">
<div class="panel" style="--i: 0; --k: 0.25; --p: 0; --dx: 0; --dz: -0.2"></div>
<div class="panel" style="--i: 1; --k: 0.5; --p: 0.25; --dx: -0.1; --dz: 0"></div>
<div class="panel" style="--i: 2; --k: 0.25; --p: 0.75; --dx: 0; --dz: 0"></div>
</div>
</div>
</div>
<div class="container" data-0="transform:translateX(0%);" data-1000="transform:translateX(-200%);">
<div class="navbar">
<nav>
<img src="media/2020-02-29.jpg" class="Logo">
<ul>
<li><a onclick="window.scrollBy({top:0,left:0,behavior:'smooth'});">About Me</a></li>
<li><a onclick="window.scrollBy({top:500,left:0,behavior:'smooth'});">Yeah</a></li>
<li><a onclick="window.scrollBy({top:1000,left:0,behavior:'smooth'});">LGTM</a></li>
</ul>
</nav>
</div>
<section>
<div class="content">
<h1>1</h1>
<p>
Page 1
</p>
</div>
</section>
<section>
<div class="content">
<h1>2</h1>
<p>
Page 2
</p>
</div>
</section>
<section id="3">
<div class="content">
<h1>3</h1>
<p>
Page 3
</p>
</div>
</section>
</div>
<script type="text/javascript" src="js/ScrollX.js"></script>
<script type="text/javascript">
var s = skrollr.init();
</script>
<script type="text/javascript" src="js/SplashScreen.js"></script>
</body>
</html>
Scss file:
$url: 'https://c4.wallpaperflare.com/wallpaper/321/642/544/space-galaxy-stars-andromeda-wallpaper-preview.jpg';
$w: 85vmin;
$h: 65vmin;
$f: .25;
body{
height: 100vh;
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Candara;
.splash{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #000;
z-index: 200;
color: aliceblue;
text-align: center;
line-height: 100vh;
}
.splash.display-none{
position: fixed;
opacity: 0;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: #000;
z-index: -10;
color: aliceblue;
text-align: center;
line-height: 100vh;
transition: all 2.5s;
}
.persp{
position: absolute;
transform-style: preserve-3d;
}
.assembly {
top: 50%; left: calc(50% - .5*var(--dx)*#{$w});
transform: rotatey(35deg)
}
.panel {
--mid: calc((var(--p) + var(--k)*#{$f})*#{$w});
transform: translate3d(calc(var(--dx)*#{$w}), 0, calc(var(--dz)*#{$w}));
&:before, &:after {
position: absolute;
margin: -.5*$h (-.5*$w);
width: $w; height: $h;
background: url($url) 50%/ cover;
content: ''
}
&:before {
transform-origin: var(--mid);
transform: rotatey(-90deg);
clip-path: inset(0 calc(100% - var(--mid)) 0 calc(var(--p)*100%));
filter: brightness(.4)
}
&:after {
clip-path: inset(0 calc(100% - (var(--p) + var(--k))*#{$w}) 0 var(--mid))
}
}
.fade-in{
opacity: 0;
animation: fadeIn 1s ease-in forwards;
}
.navbar{
margin: 0;
overflow: hidden;
width: 100%;
top: 0;
position: fixed;
}
nav{
background: black;
display: flex;
width: 100%;
align-items: center;
flex-wrap: wrap;
.Logo{
width: 55px;
cursor: pointer;
}
ul{
flex: 1;
text-align: right;
padding-right: 20px;
li{
display: inline-block;
list-style: none;
margin: 10px;
a{
color: aliceblue;
text-decoration: none;
position: relative;
&:hover::after{
width: 50%;
}
&::after{
content: '';
width: 0;
height: 3px;
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
background: aliceblue;
transition: width 0.3s;
}
}
}
}
}
.container{
width: 100%;
height: 100%;
display: flex;
position: fixed;
top: 0;
left: 0;
section{
display: flex;
justify-content: center;
align-items: center;
min-width: 100%;
height: 100vh;
scroll-margin: 100px;
&:nth-of-type(1){
background-color: rgb(255, 152, 152);
color: aliceblue;
}
&:nth-of-type(2){
background-color: rgb(27, 54, 54);
color: aliceblue;
}
&:nth-of-type(3){
background-color: rgb(12, 39, 39);
color: aliceblue;
}
.content{
max-width: 800px;
padding: 40px;
text-align: center;
h1{
font-size: 4em;
}
p{
font-size: 1.3em;
line-height: 1.4em;
}
}
}
}
#media (max-width: 991px) {
.container{
position: absolute;
display: flex;
flex-direction: column;
height: auto;
transform: none !important;
}
}
#keyframes fadeIn {
to{
opacity: 1;
}
}
}
Splashscreen.js:
const splash = document.querySelector('.splash');
document.addEventListener('DOMContentLoaded', (e)=>{
setTimeout(()=>{
splash.classList.add('display-none');
}, 2250);
})
Related
I'm following a YouTube video about making websites and his website looks like this:
and mine looks like this:
As you can see, the icon is in the navigation bar and itself has a little of space between the Google web browser bar, and my website doesn't have all of this.
I looked the lowercase letters and to my it's fine everything, look any grammar error and frankly don't see any error
This is my code:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>
<title>pomodone.app</title>
</head>
<body>
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search"><i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar"></div>
<div class="main"></div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar{
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2{
color: #df7f27;
}
.search{
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user{
position: relative;
width: 50px;
height: 50px;
}
.user img{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
Thank you in advance
#Iomipac, you need to set position to the label.
Please add this style. Hope it is helpful~.
.search >label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
}
.topbar {
position: fixed;
background: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.08);
width: 100%;
height: 60px;
padding: 0 20px;
display: grid;
grid-template-columns: 2fr 10fr 0.4fr 1fr;
align-items: center;
z-index: 1;
}
.logo h2 {
color: #df7f27;
}
.search {
position: relative;
width: 60%;
justify-self: center;
}
.search input {
width: 100%;
height: 40px;
padding: 0 40px;
font-size: 16px;
outline: none;
border: none;
border-radius: 10px;
background: #f5f5f5;
}
.search >label {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
.search i {
position: absolute;
right: 15px;
top: 15px;
cursor: pointer;
}
.user {
position: relative;
width: 50px;
height: 50px;
}
.user img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="container">
<div class="topbar">
<div class="logo">
<h2>Pomodone</h2>
</div>
<div class="search">
<input type="text" id="search" placeholder="search here">
<label for="search">icon<i class="fas fa-search"></i></label>
</div>
<i class="fas fa-bell"></i>
<div class="user">
<img src="img/user.jpg" alt="">
</div>
</div>
<div class="sidebar"></div>
<div class="main"></div>
</div>
Hello I have the following code in html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&family=Nunito+Sans:wght#300;600&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<div class="navigation">
<div class="container">
<div class="nav-links">
<h1 class="logo">Polaris</h1>
<div class="navigation-links">
<div class="main"> Главная</div>
<div class="main">Наши услуги</div>
<div class="main">О Компании</div>
<div class="main">Контакты</div>
</div>
<div class="free-consultation">
Бесплатная консультация
</div>
</div>
</div>
</div>
</header>
<div class="main">
content
</div>
</body>
</html>
And in css
*{
box-sizing: border-box;
}
a:link, a:hover,a:visited{
text-decoration: none;
color:#FFFFFF;
}
.header{
background-image: url('../img/bg-img.jpg');
background-size: cover;
background-repeat: no-repeat;
position: absolute;
right:0;
left:0;
top:0;
width: 100%;
height:100vh;
}
.navigation{
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.navigation::before{
position: absolute;
right:310px;
top:0;
content: '';
display: block;
width: 0.5px;
height: 132px;
background: rgba(255, 255, 255, 0.5);
z-index: 1;
}
.container{
margin-left: 53px;
margin-right: 83px;
margin-top: 34px;
}
.logo{
font-family: 'Inter';
font-style: normal;
font-weight: 900;
font-size: 25px;
line-height: 125%;
/* or 31px */
letter-spacing: 0.11em;
color:rgba(255, 255, 255, 0.5);
width: 128px;
height: 31px;
}
.nav-links{
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 35px;
z-index: 1;
}
.navigation-links{
display: flex;
flex-wrap: wrap;
column-gap: 60px;
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
font-size: 15px;
line-height: 20px;
text-align: center;
color: #FFFFFF;
}
.free-consultation{
position: relative;
font-family: 'Nunito Sans',sans-serif;
font-style: normal;
font-weight: 00;
font-size: 15px;
line-height: 20px;
text-align: center;
color: #FFFFFF;
}
.free-consultation::before{
z-index: 11212;
position: absolute;
left:-68px;
top:-10px;
content: '';
background-image: url('../img/Ellipse\ 2.svg');
width: 38px;
height: 38px;
}
.free-consultation::before::before{
content: '';
display: block;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.5);
}
.main{
}
here is the link to codesandbox:https://codesandbox.io/s/agitated-davinci-1dqujt?file=/style.css
For some reason, the next block element is not displayed on the next line, it's displayed inside another block(which is on the background image). Why is that so? Can someone help me please?
Your main issue is that your <header class="header"> is taken out of the flow byt this rule:
.header{
position: absolute;
}
Absolute Positioning
Giving an item position: absolute or position: fixed removes it from flow, and any space that it would have taken up is removed.
Source: MDN
What you want is probably to have the background on your body element.
Making sure that the body will take at least 100% of the height
html,
body {
min-height: 100%;
}
Giving the body the background-image
body {
background-image: url("./bg-img.jpg");
background-size: cover;
background-attachment: fixed;
}
Removing the absolute position related code on header
.header {
/*
background-image: url("./bg-img.jpg");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
right: 0;
left: 0;
top: 0;
height: 100vh;
*/
width: 100%;
}
Id like to make the wave border stick to the bottom of the picture regardless of the size/resolution of the browser window , however adjusting the size of the parent div wont work and neither will setting the border to top: 100%;.
Goal (regardless of screen size)
Like this, but regardless of how the screen is adjusted
*{
}
body{
background-color:rgb(74,76,81);
}
#welcometoc3 {
position: absolute;
max-width: 700px;
left: 75px;
animation: fadeInAnimation ease 2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
font-family: 'gamepixies', 'Josefin Sans', sans-serif;
color: white;
font-size: 125px;
}
#keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#font-face {
font-family: 'gamepixies';
src: url('/Users/jager/Desktop/dev/dev/Main Projects/Chatting 3 webstie/Chatting 3 webstie/fonts/Gamepixies-8MO6n.ttf') format('truetype');
}
.center-con {
position: relative;
max-width: 200px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
top: 170px;
left: 25%;
}
.round {
position: relative;
border: 3px solid #fff;
width: 100px;
height: 100px;
border-radius: 100%;
}
span {
z-index: 10;
height: 3px;
margin:1px;
width: 30px;
background: rgb(78, 161, 0);
transition: 0.4s ease;
}
span:first-child {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 35%;
}
span:nth-child(2) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 35%;
}
span:nth-child(3) {
display: block;
position: absolute;
transform: rotate(45deg);
left: 25%;
bottom: 54%;
}
span:nth-child(4) {
display: block;
position: absolute;
transform: rotate(-45deg);
left: 45%;
bottom: 54%;
}
.round:hover span:nth-child(1) {
transform: rotate(-135deg);
}
.round:hover span:nth-child(2) {
transform: rotate(135deg);
}
.round:hover span:nth-child(3) {
transform: rotate(225deg);
}
.round:hover span:nth-child(4) {
transform: rotate(-225deg);
}
#banner-image {
position: relative;
width: 100%;
clip: (0px,0px,100px,0px);
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
top: 400px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatting 3 Hub</title>
<!--CSS-->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mainstyle.css">
</head>
<body style="margin:0;">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
</div>
<div id="welcometoc3" class="fade">Welcome to Chatting 3</div>
<div>
<div class="center-con">
<div class="round">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
</body>
</html>
*{
padding:0;
margin:0;
}
body{
background-color:red;
}
#banner-image {
position:relative;
width: 100%;
clip: (0px,0px,100px,0px);
bottom: 0;
left: 0;
position: absolute;
}
#banner-border {
background-color: rgba(255, 255, 255, 0);
position: absolute;
z-index: 100;
width: 100%;
bottom: 0;
left: 0;
}
.banner{
position: relative;
height: 100%;
height: 45vh;
}
img{
width: 100%;
height: 300px;
}
<div class="banner">
<img loop=infinite id="banner-image" src="https://i.ibb.co/8PYMxhg/landscape1.gif" alt="balls">
<div id="banner-border" style="height: 150px; overflow: hidden;" ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d="M-13.54,39.95 C123.02,106.08 269.74,52.78 500.00,49.98 L501.12,152.45 L0.00,150.00 Z" style="stroke: none; fill: rgb(74,76,81);"></path></svg></div>
</div>
You just need to adjust the size of it. As far as I know, you cannot make something relative to the img because this doesn't contain a closing tag so you can't put something inside the image. You need to put them in the same container and adjust their positions.
Creating my website and cant make my container with list of elements centerd if I want my grid responsive and have the display: block or display: inline-block and have a % width
heres a the situation im in. I want the grid with blocks to be responsive and have display: block/ display: inline-block (I have this bcs when u click on the button web scraping a button it will hide one of the blocks and I want it to float: left so one of the blocks doent center when one disperse)
$(document).ready(function(){
$("#web-scraping").click(function(){
if($("#web-s").hasClass("hide")){
$('#web-s').removeClass('hide');
}
else{
$("#web-s").addClass('hide')
}
});
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
font-family: sofia_pro;
}
a{
text-decoration: none;
}
.container{
min-height: 65vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero{
background-color: #32312F;
position: relative;
z-index: 1;
}
#hero .hero{
max-width: 1500px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1{
display: block;
width: fit-content;
font-size: 5rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: text_reveal_box 1s ease;
animation-delay: 0.5s;
}
#hero p{
display: block;
width: 40%;
font-size: 2rem;
margin-top: 60px;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .button-box{
margin-top: 40px;
height: 35px;
width: 140px;
}
#hero .cta{
display: inline-block;
padding: 8px 20px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
font-size: 1.5rem;
visibility: hidden;
text-transform: uppercase;
position: relative;
transition: .3s ease background-color;
opacity: 1;
animation: box_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .cta span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: box_reveal_box 1s ease;
animation-delay: .5s;
}
#hero .cta:hover{
box-shadow:0px 0px 0px 1px #fff inset;
}
/*animation*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes box_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: #fff;
}
}
#keyframes box_reveal{
100%{
visibility: visible;
}
}
.down-pointer{
align-items: center;
justify-content: center;
display: flex;
position: relative;
z-index: 3;
top: -160px;
}
.down-pointer .left{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -2px 2px;
color: #f6f6f6;
}
.down-pointer .left{
transform: rotate(-45deg);
}
.work-container{
background-color: #f6f6f6;
height: 1000px;
max-width: 1300px;
border-radius: 20px 20px 0px 00px;
margin: 0px 60px;
top: -100px;
padding: 100px;
position: relative;
z-index: 2;
}
.work-category{
align-items: center;
justify-content: center;
display: flex;
}
.work-category button{
text-transform: capitalize;
border: 1px solid #32312F;
padding: 15px 30px;
font-size: 1.5rem;
font-weight: 600;
border-radius: 3px;
color: #32312F;
outline: none;
cursor: pointer;
}
.work-category button:hover{
}
#web-scraping{
margin: auto 100px auto auto;
}
#web-design{
margin: auto 0px auto 0px;
}
#web-animation{
margin: auto auto auto 100px;
}
.work-block-container .hide{
display: none;
}
.work-block-container-flex{
}
.work-block-container{
margin: 0 auto;
display: inline-block;
overflow: hidden;
width: 100%;
}
.work-block{
background-color: black;
float: left;
width: 30%;
height: 180px;
border-radius: 3px;
padding: 20px;
margin: 5px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animation.css">
<link rel="stylesheet" href="css/media-screen.css">
<title>The HTML5 Herald</title>
</head>
<body>
<!-- Starting-menu-->
<section id=hero>
<div class="hero">
<div class="hero container">
<div>
<h1>What I can do,<span></span></h1>
<h1>for your Business<span></span></h1>
<p><span>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal distribution
</span></p>
<div class="button-box">Contact Me<span></span></div>
</div>
</div>
</div>
</section>
<!-- End-->
<!-- my work -->
<section class="work-container">
<a class="down-pointer" href="#"><span class="left"></span></a>
<div class="work-category">
<button id="web-scraping">Web Scraping</button>
<button id="web-design">Web Design</button>
<button id="web-animation">web animation</button>
</div>
<div class="work-block-container">
<div class="work-block" id="web-s"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-s"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-d"></div>
<div class="work-block" id="web-a"></div>
</div>
</section>
<!-- my work end -->
<!-- about me -->
<div class="container about" id="">
<h1>About</h1>
<div class="about-me-info">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!-- about me end-->
<!-- contact me -->
<!-- contact me end -->
</body>
</html>
I think you use another <div> in your container so your flex or grid display just effect on that div!
try display flex or grid on that div or make your container as your element's parents.
First, the ID for each element must be unique. I think you achieved this))
$(document).ready(function(){
$("#web-scraping").click(function(){
$(".web-d").addClass("hide")
$(".web-a").addClass("hide")
$(".web-s").removeClass("hide")
});
$("#web-design").click(function(){
$(".web-d").removeClass("hide")
$(".web-a").addClass("hide")
$(".web-s").addClass("hide")
});
$("#web-animation").click(function(){
$(".web-d").addClass("hide")
$(".web-a").removeClass("hide")
$(".web-s").addClass("hide")
});
});
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
html{
font-size: 10px;
}
a{
text-decoration: none;
}
.container{
min-height: 65vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#hero{
background-color: #32312F;
position: relative;
z-index: 1;
}
#hero .hero{
max-width: 1500px;
margin: 0 auto;
padding: 0 50px;
justify-content: flex-start;
}
#hero h1{
display: block;
width: fit-content;
font-size: 5rem;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero h1 span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: text_reveal_box 1s ease;
animation-delay: 0.5s;
}
#hero p{
display: block;
width: 40%;
font-size: 2rem;
margin-top: 60px;
position: relative;
color: transparent;
animation: text_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .button-box{
margin-top: 40px;
height: 35px;
width: 140px;
}
#hero .cta{
display: inline-block;
padding: 8px 20px;
color: #fff;
background-color: transparent;
border: 1px solid #fff;
font-size: 1.5rem;
visibility: hidden;
text-transform: uppercase;
position: relative;
transition: .3s ease background-color;
opacity: 1;
animation: box_reveal .5s ease forwards;
animation-delay: 1s;
}
#hero .cta span{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 0;
background-color: #fff;
animation: box_reveal_box 1s ease;
animation-delay: .5s;
}
#hero .cta:hover{
box-shadow:0 0 0 1px #fff inset;
}
/*animation*/
#keyframes text_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes box_reveal_box{
50%{
width: 100%;
left: 0;
}
100%{
width: 0;
left: 100%;
}
}
#keyframes text_reveal{
100%{
color: #fff;
}
}
#keyframes box_reveal{
100%{
visibility: visible;
}
}
.down-pointer{
align-items: center;
justify-content: center;
display: flex;
position: relative;
z-index: 3;
top: -160px;
}
.down-pointer .left{
width: 20px;
height: 20px;
transition: .5s;
float: left;
box-shadow: -2px 2px;
color: #f6f6f6;
}
.down-pointer .left{
transform: rotate(-45deg);
}
.work-container{
background-color: #f6f6f6;
height: 1000px;
max-width: 1300px;
border-radius: 20px 20px 0px 00px;
margin: 0 60px;
top: -100px;
padding: 100px;
position: relative;
z-index: 2;
}
.work-category{
align-items: center;
justify-content: center;
display: flex;
}
.work-category button{
text-transform: capitalize;
border: 1px solid #32312F;
padding: 15px 30px;
font-size: 1.5rem;
font-weight: 600;
border-radius: 3px;
color: #32312F;
outline: none;
cursor: pointer;
}
.work-category button:hover{
}
#web-scraping{
margin: auto 100px auto auto;
}
#web-design{
margin: auto 0 auto 0;
}
#web-animation{
margin: auto auto auto 100px;
}
.work-block-container-flex{
}
.work-block-container{
margin: 0 auto;
display: inline-block;
overflow: hidden;
width: 100%;
}
.work-block{
float: left;
width: 30%;
height: 180px;
border-radius: 3px;
padding: 20px;
margin: 5px;
transition: 0.7s all;
}
.work-block.web-s{
background-color: green;
}
.work-block.web-d{
background-color: blue;
}
.work-block.web-a{
background-color: red;
}
.work-block.web-s.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
.work-block.web-d.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
.work-block.web-a.hide{
width: 0;
height: 0;
visibility: hidden;
padding: 0;
margin: 0;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>The HTML5 Herald</title>
</head>
<body>
<!-- Starting-menu-->
<section id=hero>
<div class="hero">
<div class="hero container">
<div>
<h1>What I can do,<span></span></h1>
<h1>for your Business<span></span></h1>
<p><span>
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout. The point
of using Lorem Ipsum is that it has a more-or-less normal distribution
</span></p>
<div class="button-box">Contact Me<span></span></div>
</div>
</div>
</div>
</section>
<!-- End-->
<!-- my work -->
<section class="work-container">
<a class="down-pointer" href="#"><span class="left"></span></a>
<div class="work-category">
<button id="web-scraping">Web Scraping</button>
<button id="web-design">Web Design</button>
<button id="web-animation">web animation</button>
</div>
<div class="work-block-container">
<div class="work-block web-s"></div>
<div class="work-block web-d"></div>
<div class="work-block web-s"></div>
<div class="work-block web-d"></div>
<div class="work-block web-d"></div>
<div class="work-block web-a"></div>
</div>
</section>
<!-- my work end -->
<!-- about me -->
<div class="container about" id="">
<h1>About</h1>
<div class="about-me-info">
<p></p>
<p></p>
<p></p>
</div>
</div>
<!-- about me end-->
<!-- contact me -->
<!-- contact me end -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="./js.js"></script>
</body>
</html>
/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage">
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<br>Call:
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</div>
</html>
This is my code for my website. I have been trying to blur only the background, however it blurs everything. It appears that the z-index is not working. Any help on how to make everything else fine, and just the background blur is appreciated,
Thank you.
Filters affect everything within the parent element, as expected, so you need to move the filter outside anything that shouldn't be affected.
In your case, you can just close <div id="backgroundimage"></div> in the "top" of the document.
/* Sass Document */
* {
box-sizing: border-box;
}
#TopBanner {
background: rgba(255, 255, 255, 0.35);
border-radius: 3px;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
top: 10px;
left: 0;
position: absolute;
margin-left: 20px;
margin-right: 20px;
right: 0;
z-index: 5;
padding: 0 10px;
}
#Container {
background-color: #CFBDBD;
align-content: center;
align-items: center;
align-self: center;
height: auto;
width: 80%;
display: block;
margin-left: auto;
padding: 10px;
margin-right: auto;
border: thin;
z-index: 3;
}
#backgroundimage {
background-color: #D52D32;
background-size: cover;
filter: blur(5px);
-webkit-filter: blur(5px);
height: 800px;
left: 0;
position: relative;
right: 0;
z-index: 1;
}
#Logo {
border-radius: 15px;
position: absolute;
left: 0.5%;
z-index: 2;
}
Nav ul {
z-index: 2;
list-style-type: none;
list-style-position: inside;
}
Nav li {
z-index: 2;
display: inline;
height: 90px;
width: 180px;
}
/*# sourceMappingURL=css.css.map */
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/css.css">
<title></title>
</head>
<div id="backgroundimage"></div>
<div id="TopBanner">
<nav>
<ul>
<li>
<img id="Logo" src="images/AWDLogo.png">
</li>
<p>Contact Us At:
<br>Call:
</p>
</ul>
</nav>
</div>
<body>
<div id="Container">
</div>
</body>
</html>
You also have some funky HTML (body isn't in <body>), but this seems to solve your problem.
Scott's answer works just fine,
Another solution would be this already answered question