I'm trying to create a webpage for my future portfolio
Here is my link for latecode-hub and here is my code:
#font-face{
font-family: 'Antic-Slab';
src: url('AnticSlab-Regular.ttf');
}
.navigation{
position: fixed;
top: 0;
right: 0;
z-index: 1;
}
.navigation #chbox{
position: absolute;
top: 0;
right: 0;
height: 50px;
width: 50px;
z-index: 2;
cursor: pointer;
opacity: 0;
}
.wrapper .hamburger{
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
}
.wrapper .hamburger >div{
z-index: 1;
position: relative;
display: block;
width: 100%;
height: 2px;
background: #fff;
transition: all 0.4s ease;
}
.wrapper .hamburger .div1{
top: 0px;
}
.wrapper .hamburger .div2{
top: 10px;
}
.wrapper .hamburger .div3{
top: 20px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div1{
transform: rotate(-28deg);
width: 90%;
height: 3px;
border-radius: 1px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div2{
transform: rotate(90deg) translateY(-25px) ;
width: 90%;
height: 3px;
border-radius: 1px;
}
.navigation #chbox:checked + .wrapper .hamburger >.div3{
transform: rotate(28deg);
width: 90%;
height: 3px;
border-radius: 1px;
}
.wrapper #menu{
display: flex;
overflow: hidden;
width: 0;
text-decoration: none;
text-align: center;
justify-items: center;
margin-right: 100px;
background-color: blueviolet;
transition: 0.5 ease;
height: 0;
}
.wrapper #menu a{
text-decoration: none;
list-style: none;
margin-left: 1em;
font-size: 25px;
font-family: Antic-Slab;
}
.navigation #chbox:checked .wrapper #menu:hover{
width: 100%;
height: 100%;
}
#import 'firefly.css';
#font-face{
font-family: 'Antic-Slab';
src: url('AnticSlab-Regular.ttf');
}
body{
background-color: rgba(124, 110, 204, 0.376);
margin: 0;
}
.box1{
order: 1;
height: 100vh;
display: grid;
grid-template-rows: 10% 60% 15% 15%;
border: 1px black solid;
grid-gap: 10px;
background: linear-gradient(to bottom right, rgb(26,28,32) 0%, rgb(49,54,66) 100%);
background-size: 210vh 200vh;
}
.main-word{
font-size: 50px;
padding-left: 25%;
padding-top: 10%;
color :rgb(230,219,200);
font-family: Antic-Slab;
cursor:default;
}
.main-word >#main1{
text-align: left;
animation-name: main;
animation-duration: 2s;
}
.main-word >#main2{
animation-name: main;
animation-duration: 4s;
}
#main2>span{
color:rgb(144, 132, 189) ;
}
.main-word >#main3{
animation-name: main;
animation-duration: 6s;
}
#keyframes main{
0% {
opacity: 0;
}
20%{
opacity: 0.2;
filter: blur(8px);
}
40%{
opacity: 0.4;
filter: blur(6px);
}
60% {
opacity: 0.6;
filter: blur(4px);
}
80%{
opacity: 0.8;
filter: blur(2px);
}
100%{
opacity: 1;
}
}
.down_writing{
font-size: 30px;
text-align: center;
padding: 5%;
color: white;
}
.arrow_down{
width: 30px;
height: 30px;
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.arrow1{
text-align: center;
padding-bottom: 20px;
}
.box2{
z-index: 1;
}
.box3{
height: 200vh;
background-color: inherit;
}
.box4{
background-size: 210vh 200vh;
}
header{
background-color: rgba(70, 127, 165, 0.123);
border-radius: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="personal portfolio webpage">
<link href="personal webpage.css" type="text/css" rel="stylesheet">
<link href="hamburger menu.css" type="text/css" rel="stylesheet">
<title>Latecoder</title>
</head>
<body>
<nav class="navigation">
<input type="checkbox" id="chbox" />
<div class="wrapper">
<div class="hamburger">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="box1">
<div class="main-word">
<div id="main1">Hello</div>
<div id="main2">I'm <span>Cagatay</span> </div>
<div id="main3">This is my webpage</div>
</div>
<div class=down_writing>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
<div class="firefly"></div>
</div>
<div class="arrow1"><i class="arrow_down"></i></div>
</div>
<div class="box2">
</div>
<div class="box3">
<div>
Yeah that one is me
</div>
<div><img src="" alt=""></div>
<div> Yeah thats me</div>
<div><img src="" alt=""></div>
</div>
<div class="box4"></div>
<footer>
</footer>
</body>
</html>
I want to add a hover coming from the right side when I click on the hamburger menu, background box going come from right to left and menu will appear with it, something like a mixing of this and this I can add javascript if it's necessary.
https://jsfiddle.net/kmdyuwt8/2/
You need to add an open class
.wrapper #menu.show {
width: 300px;
height: 100%;
transition: width 1s linear;
}
And toggle it on hover.
let elm = document.querySelector('.hamburger');
function toggleMenu() {
document.querySelector('#menu').classList.toggle('show');
}
elm.onmouseenter = toggleMenu;
elm.onmouseleave = toggleMenu;
Your current css has some behavioral bugs in it, so cleaning it up will fix the minor inconveniences.
Related
Below is the code I've been using to create a website. I'm in the process of getting it online but I am having trouble accessing it on a mobile device using the mobile network. No problems viewing the website using wi-fi, but on a mobile device the site will crash and none of the links will work.
On some web pages, I have a large number of photographs. Could this issue be solved via lazy loading of the photos on the page? Is there any script in the CSS or Javascript that's making the website difficult to use on a mobile device? Any knowledge about trying to solve this issue would be much appreciated.
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
<body>
<style>html{visibility: hidden; opacity: 0;}</style>
<title>MORIKOBOSHI・</title>
<div class="page-wrap">
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
<header class="cp_offcm03">
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
<li style="border-bottom: .05px solid lightgray;">Home</li>
<li style="border-bottom: .05px solid lightgray;">Blog</li>
<li style="border-bottom: .05px solid lightgray;">About This Website</li>
<li style="border-bottom: .05px solid lightgray;">Bibliography</li>
<div class="searchbar">
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Custom Google Search" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="Search" style="padding-left: 5px; top: 153px; height: 25px; width: 50px; display: inline-flex; justify-content: center;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">
</form>
</div>
<script type="text/javascript">
document.getElementById('frmSearch').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
return false;
}
</script>
<script>
document.getElementById('cp_toggle03').onchange = function() {
if (document.getElementById('cp_toggle03').checked) {
document.body.style.overflow = "hidden";
} else {
document.body.style.overflow = "";
}
}
</script>
</ul>
</nav>
</header>
<div class="setsumei">
<br><br><h1 style="text-align: center; font-size: 40px;">◯◯◯◯</h1>
<br><p style="text-align: justify; font-size: 16px;"></p>
<p style="text-align: center; font-size: 13px;">Author: ◯◯◯◯</p>
<p style="text-align: center; font-size: 13px;">Photos/Videos Taken：◯◯◯◯/◯◯/◯◯</p>
<br><br><p style="text-align: justify; font-size: 16px;">
#
</p>
</div>
<br><br><div class="image">
<img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
<br><br><img src="#" alt="#" width="90%">
</div>
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | 日本語</footer>
</div>
</div>
<style>
html {visibility: visible;
opacity: 1;}
.body{background-color: white;
font-family: sans-serif;}
.searchbar{float: right;}
.image{text-align: center;}
.setsumei{margin-left: 20px;
margin-right: 20px;}
.footer{width: 100%;
height: 40px;
text-align: center;
border-top: 1px solid black;
position: absolute;
bottom: 0;
padding: 10px;}
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -40px;
}
.page-wrap:after {
content: "";
display: block;
}
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 20px;
}
.site-footer {
text-align: center;
border-top: 1px solid black;
padding: 10px;
}
*, *:before, *:after {
padding-left: 0;
margin: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.cp_cont {
height: auto;
}
/* menu */
.cp_offcm03 {
position: relative;
z-index: 5000;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
width: 100%;
height: auto;
padding-top: 0;
-webkit-transition: transform 0.3s ease-in;
transition: transform 0.3s ease-in;
text-align: center;
color: black;
background-color: white;
}
.cp_offcm03 nav,
.cp_offcm03 ul {
height: 100%;
}
.cp_offcm03 li {
display: inline-block;
margin-right: -6px;
}
.cp_offcm03 a {
display: block;
padding: 15px 45px;
margin-bottom: -5px;
-webkit-transition: background-color .3s ease-in;
transition: background-color .3s ease-in;
}
.cp_offcm03 a:hover {
background-color: lightgray;
}
/* menu toggle */
#cp_toggle03 {
display: none;
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(0);
transform: translateX(0);
}
.cp_mobilebar {
display: none;
}
/* content */
.cp_container {
position: relative;
top: 0;
padding: 35px auto;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_content {
margin: 0 auto;
padding: 20px;
height: 65vh;
text-align: center;
}
#media (max-width: 1130px)and (min-width: 280px) {
/* menu */
.cp_offcm03 {
position: fixed;
left: -250px;
overflow-y: hidden;
width: 250px;
height: 100%;
padding-top: 40px;
color: black;
background-color: white;
z-index: 1000;
}
.cp_offcm03 nav {
background: white;
border-right: 0.5px solid lightgray;
margin-left: -210px;
}
.cp_offcm03 li {
display: block;
margin-right: 0;}
.cp_offcm03 a {
padding: 20px;
}
/* menu toggle */
.cp_mobilebar {
display: block;
z-index: 2000;
position: relative;
top: 0;
left: 0;
padding: 0 25px;
width: 100%;
height: 40px;
background-color: white;
border-bottom: .05px solid lightgray;
}
.cp_menuicon {
display: block;
position: relative;
width: 25px;
height: 100%;
cursor: pointer;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span {
display: block;
position: absolute;
top: 55%;
margin-top: -0.3em;
width: 100%;
height: 0.2em;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease;
transition: transform .3s ease;
}
.cp_menuicon > span:before,
.cp_menuicon > span:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 1px;
background-color: black;
-webkit-transition: transform .3s ease-in;
transition: transform .3s ease-in;
}
.cp_menuicon > span:before {
-webkit-transform: translateY(-0.6em);
transform: translateY(-0.6em);
}
.cp_menuicon > span:after {
-webkit-transform: translateY(0.6em);
transform: translateY(0.6em);
}
#cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#cp_toggle03:checked + .cp_mobilebar span:before,
#cp_toggle03:checked + .cp_mobilebar span:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#cp_toggle03:checked ~ .cp_offcm03 {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#cp_toggle03:checked ~ .cp_container {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
input:checked ~ #h-menu_black {
display: block;/*カバーを表示*/
opacity: .6;
}
#h-menu_black {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .7s ease-in-out;
}
/* content */
.cp_container {
top: 60px;
height: 92vh;
text-align: center;
}
.noscroll{
overflow: hidden;
position: fixed;
}
</style>
</body>
</html>
so basically I want to make my navbar slide in from the side of the screen when I click the toggle to open it, currently when I open the navbar it comes from the top and has no transition
If you want to understand more of what I mean exactly, check out https://iamtomwalker.com to see what I mean by having the navbar open from the side and transition in
my html:
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="/JS files/style.css">
<header id="home">
<div id='nav'>
<nav class="navbar">
<div class="logo_header">
<h1 class="logo">Menu</h1>
<button class="nav-btn" onclick="this.classList.toggle('change');">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</button>
</div>
<ul class="main_nav">
<li>home</li>
<li>about</li>
<li>services</li>
</ul>
</nav>
</div>
<div class="banner">
<div class="container">
<h1>scroll project</h1>
<p>wsjnciunclsnjiemc ljfnjdc cinufifl,vlfldlvlekfopec ciun ck cipn i inrc cijan9pnc cipqe</p>
<button class="scroll-link-btn">Explore Tours</button>
</div>
</div>
</header>
<section id="about" class="section">
<div class="title">
<h2>About Us</h2>
</div>
</section>
<section id="services" class="section">
<div class="title">
<h2>Services</h2>
</div>
</section>
<section id="tours" class="section">
<div class="title">
<h2>Tours</h2>
</div>
</section>
<footer class="section">
<p>
company that make this oen f
</p>
<a class="arrow-up" href="#home"></a>
</footer>
<script src='/JS files/js.js'> </script>
</body>
</html>
my css:
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
body{
margin: 0;
padding: 0;
}
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
#nav{
background-image: url("images/page.jpg");
height: 800px;
position: absolute;
background-repeat:no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
background-position:center;
}
a{
text-decoration: none;
}
#home{
padding-bottom: 1000px;
}
.navbar{
display: flex;
justify-content: space-between;
width: 100vw;
background-color: white;
font-size: 20px;
transition: transform 1s ease-out;
}
.logo{
margin-left: 5%;
font-size: 25px;
font-weight: bold;
}
.logo_header{
display: flex;
margin-left: 7px;
}
.main_nav{
display: flex;
width: 333px;
float: right;
margin-right: 20px;
justify-content: space-between;
list-style: none;
}
.main_nav li{
display: inline;
color: black;
overflow: hidden;
transition: all 1s ease-out;
}
.main_nav li a{
color: black;
}
.nav-btn{
display: none;
background-color: white;
}
.container{
text-align: center;
color: white;
position: absolute;
font-size: 23px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scroll-link-btn{
background: none;
border-color: white;
}
.scroll-link-btn a{
color: white;
font-size: 20px;
padding: 10px;
}
.title{
text-align: center;
font-size: 1.5rem;
}
#about{
padding-bottom: 500px;
}
#services{
padding-bottom: 500px;
background-color:aliceblue;
}
#tours{
padding-bottom: 500px;
}
footer{
background-color:rgb(26, 62, 62);
padding: 0.1px;
color: white;
text-align: center;
font-size: 1.1rem;
}
.arrow-up {
border: solid white;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 10px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
position: absolute;
right: 10px;
margin-top: -33px;
}
#media only screen and (max-width : 600px){
.navbar{
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100vw;
font-size: 20px;
}
.main_nav{
display: none;
}
.show_nav{
display: flex;
width: 100vw;
height: 150px;
flex-direction: column;
justify-content: flex-start;
}
.main_nav li{
width: 100%;
height: 50px;
font-size: 25px;
justify-content: center;
padding: 0%;
}
.nav-btn {
margin-right: 5%;
font-size: 30px;
color: #ffffff;
background: transparent;
border-color: transparent;
transition: all 0.3s linear;
cursor: pointer;
display: block;
}
.logo_header{
width: 100%;
justify-content: space-between;
margin-right: 2%;
}
}
my js code:
const navToggle = document.querySelector('.nav-btn');
const linksContainer = document.querySelector('.navbar');
const links = document.querySelector('.main_nav');
navToggle.addEventListener('click',function(){
links.classList.toggle("show_nav");
})
top:-50px; for this navbar in class no active and if click on button class active go to navbar and margin-top:0px you can use a transition to very good style to navbar
I made a hamburger menu with a class of .hamburger (inside .hamburger, there is a three .line classes)
shown hamburger menu
When I click a hamburger menu, class .nav-links pops up and class name changes to .nav-links .open when I inspect.
My problem is that opened .nav-links color is same as a color I gave to the hamburger menu.
but it disappears as they both have a same color
So I tried to change a hamburger menu(with a class .line) color when class .nav-links change to .nav-links .open but fail to figure out the solution.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!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>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>
Ok, try this out.
What I did was get all the line elements, toggled open on them, for which I added a .line.open bit in the CSS which paints them white.
const hamburger = document.querySelector(".hamburger");
const navlinks = document.querySelector(".nav-links");
const links = document.querySelectorAll(".nav-links li");
const hamLines = document.querySelectorAll(".line");
hamburger.addEventListener('click', () => {
navlinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade');
});
hamLines.forEach(link => {
link.classList.toggle('open');
});
});
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body,
button {
font-family: "Poppins", sans-serif;
}
header {
display: flex;
width: 90%;
height: 10vh;
align-items: center;
margin: auto;
}
.logo-container,
.nav-links,
.cart {
display: flex;
}
.logo-container {
flex: 1;
}
.logo-container img {
width: 23px;
}
.logo {
font-size: 13px;
font-weight: 400;
margin: 5px;
opacity: 0.8;
}
nav {
flex: 2;
}
.nav-links {
justify-content: space-around;
list-style: none;
}
.nav-link {
color: #5f5f79;
font-size: 13px;
text-decoration: none;
}
.cart {
flex: 1;
justify-content: flex-end;
}
.cart img {
width: 23px;
}
.presentation {
display: flex;
width: 90%;
margin: auto;
margin-bottom: -80px;
min-height: 80vh;
align-items: center;
}
.introduction {
flex: 1;
}
.intro-text h1 {
font-size: 30px;
font-weight: 500;
background: linear-gradient(to right, #494964, #6f6f89);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.intro-text p {
margin-top: 5px;
font-size: 13px;
color: #585772;
}
.cta {
padding: 50px 0px 0px 0px;
}
.cta-select {
border: 1px solid #585772;
background: transparent;
color: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
}
.cta-add {
background: #585772;
width: 110px;
height: 40px;
cursor: pointer;
font-size: 12px;
border: none;
color: white;
margin: 20px 0px 0px 20px;
}
.cover {
flex: 1;
display: flex;
justify-content: center;
height: 60vh;
align-items: center;
z-index: -1;
}
.cover img {
height: 70%;
filter: drop-shadow(0px 5px 3px black);
animation: drop 1.5s ease;
}
.big-circle {
position: absolute;
top: 0px;
right: 0px;
z-index: -1;
opacity: 0.5;
height: 60%;
}
.medium-circle {
position: absolute;
top: 30%;
right: 30%;
z-index: -1;
height: 40%;
opacity: 0.4;
}
.small-circle {
position: absolute;
height: 40%;
bottom: 0%;
right: 20%;
z-index: -1;
opacity: 0.4;
}
.laptop-select {
width: 15%;
height: 8px;
display: flex;
justify-content: space-around;
position: absolute;
right: 20%;
}
#keyframes drop {
0% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
#media screen and (max-width: 1024px) {
.line {
width: 15px;
height: 1px;
border-radius: 15%;
background-color: #585772;
margin: 4px;
}
.line.open {
background-color: white;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
cursor: pointer;
right: -38%;
top: 50%;
transform: translate(-38%, -50%);
z-index: 1;
}
.nav-links {
position: fixed;
background-color: #585772;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
z-index: 0;
flex-direction: column;
align-items: center;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
}
.nav-links.open {
clip-path: circle(1500px at 100% -20%);
-webkit-clip-path: circle(1500px at 100% -20%);
pointer-events: all;
}
.nav-link {
color: white;
}
.nav-links li {
opacity: 0;
}
.nav-links li a {
font-size: 25px;
}
.nav-links li:nth-child(1) {
transition: all 0.5s ease 0.2s;
}
.nav-links li:nth-child(2) {
transition: all 0.5s ease 0.3s;
}
.nav-links li:nth-child(3) {
transition: all 0.5s ease 0.4s;
}
li.fade {
opacity: 1;
}
.presentation {
flex-direction: column;
}
.introduction {
margin-top: 5vh;
text-align: center;
}
.intro-text h1 {
font-size: 30px;
}
.intro-text p {
font-size: 18px;
}
.cta {
padding: 10px 0px 0px 0px;
}
.laptop-select {
bottom: 5%;
right: 50%;
width: 50%;
transform: translate(50%, 5%);
}
.cover img {
height: 80%;
}
.small-circle,
.medium-circle,
.big-circle {
opacity: 0.2;
}
}
<!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>Landing Page</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#400;500&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="logo-container">
<img src="./img/logo.svg" alt="logo" />
<h4 class="logo">Three Dots</h4>
</div>
<nav>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links">
<li><a class="nav-link" href="#">Specs</a></li>
<li><a class="nav-link" href="#">Products</a></li>
<li><a class="nav-link" href="#">Contact</a></li>
</ul>
</nav>
<div class="cart">
<img src="./img/cart.svg" alt="cart" />
</div>
</header>
<main>
<section class="presentation">
<div class="introduction">
<div class="intro-text">
<h1>Laptop fot the future</h1>
<p>the new 14 inch bezeless display oferring a 4k display with touch screen.</p>
</div>
<div class="cta">
<button class="cta-select">14 Inch</button>
<button class="cta-add">Add To Cart</button>
</div>
</div>
<div class="cover">
<img src="./img/matebook.png" alt="matebook" />
</div>
</section>
<div class="laptop-select">
<img src="./img/arrow-left.svg" alt="">
<img src="./img/dot.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/dot-full.svg" alt="">
<img src="./img/arrow-right.svg" alt="">
</div>
<img class="big-circle" src="./img/big-eclipse.svg" alt="" />
<img class="medium-circle" src="./img/mid-eclipse.svg" alt="" />
<img class="small-circle" src="./img/small-eclipse.svg" alt="" />
</main>
<script src="script.js"></script>
</body>
</html>
Building a portfolio page with images and trying to use jquery to make the caption show and slide up on hover but then, when i tried, it didn't work with my code. The code is shown below plus a snippet that can also be run.
Here's a Snippet
$('.port-img').hover(function() {
if ($(".caption").is('hidden')) {
$(this).show('slideUp', 'slow');
$(this).hide('slideDown', 'slow');
};
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
visibility: hidden;
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>
You can do it with alternative way, using CSS only :
.caption-style-2{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.caption-style-2 li{
float: left;
padding: 0px;
position: relative;
overflow: hidden;
}
.caption-style-2 li:hover .caption{
opacity: 1;
transform: translateY(-100px);
-webkit-transform:translateY(-100px);
-moz-transform:translateY(-100px);
-ms-transform:translateY(-100px);
-o-transform:translateY(-100px);
}
.caption-style-2 img{
margin: 0px;
padding: 0px;
float: left;
z-index: 4;
}
.caption-style-2 .caption{
cursor: pointer;
position: absolute;
opacity: 0;
top:300px;
-webkit-transition:all 0.15s ease-in-out;
-moz-transition:all 0.15s ease-in-out;
-o-transition:all 0.15s ease-in-out;
-ms-transition:all 0.15s ease-in-out;
transition:all 0.15s ease-in-out;
}
.caption-style-2 .blur{
background-color: rgba(0,0,0,0.7);
height: 300px;
width: 400px;
z-index: 5;
position: absolute;
}
.caption-style-2 .caption-text h1{
text-transform: uppercase;
font-size: 18px;
}
.caption-style-2 .caption-text{
z-index: 10;
color: #fff;
position: absolute;
width: 300px;
height: 300px;
text-align: center;
top:20px;
}
<ul class="caption-style-2">
<li>
<img src="http://via.placeholder.com/300x300" alt="">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1>Amazing Caption</h1>
<p>Whatever It Is - Always Awesome</p>
</div>
</div>
</li>
</ul>
$('.port-img').hover(function(){
$(".caption").show('slideUp');
$(".caption").hide('slideDown');
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
display: none;
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>
$(this) means $('.port-img') not ('.caption')
Please have a look at snippet.
$('.port-img').hover(function(){
var $caption = $(".caption");
if ($caption.is(':hidden')){
$caption.slideDown('slow');
} else {
$caption.slideUp('slow');
}
});
.caption {
width: 400px;
height: auto;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background: #000;
color: #fff;
z-index: 2;
transition: all .5s;
display: none; /* default hide */
}
.image {
width: 400px;
height: 400px;
z-index: 1;
transition: all .5s;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-6 col-xs-12 section-1-port filter logo">
<div class="port-img image">
<img class="img-responsive" src="http://via.placeholder.com/300x300" alt="Bams Nigeria Enterprise" />
</div>
<div class="caption img-caption">
<h3>Logo Design, Photoshop</h3>
</div>
</div>
Right now I have an accordion and interactive cycle I made using pure CSS. When a user clicks on a certain box on the cycle it opens up that specific accordion tab. Is it possible using vanilla JavaScript (no JQuery) to have it also scroll down to the specific tab when a user clicks a box on the cycle? Anything helps, cheers.
.container1 {
width: 250px;
height: 250px;
position: absolute;
left: 0px;
right: 0px;
margin: auto;
transform: scale(0.85);
}
.ele,
.arrow,
.circle {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
#one {
transform: rotate(0deg) translateY(-130px) rotate(0deg);
}
#two {
transform: rotate(60deg) translateY(-130px) rotate(-60deg);
}
#three {
transform: rotate(120deg) translateY(-130px) rotate(-120deg);
}
#four {
transform: rotate(180deg) translateY(-130px) rotate(-180deg);
}
#five {
transform: rotate(240deg) translateY(-130px) rotate(-240deg);
}
#six {
transform: rotate(300deg) translateY(-130px) rotate(-300deg);
}
.ele {
display: inline-block;
background-color: #1f497d;
width: 105px;
height: 50px;
border-width: 2px;
border-style: solid;
border-color: #ededed;
border-radius: 7px;
box-shadow: 0px 1px 5px #888888;
z-index: 3;
}
.ele:hover {
cursor: pointer;
transform: scale(1.019);
border-color: f4f4f4;
background-color: #214d84;
box-shadow: 0px 2px 9px #888888;
zoom: 1.02;
}
.circle {
background-color: #006850;
width: 85px;
height: 85px;
border-width: 3px;
border-style: solid;
border-color: #fefefe;
border-radius: 50%;
box-shadow: 0px 1px 5px #888888;
}
.arrow {
color: #cccfd7;
width: 250px;
height: 250px;
border: 17px solid;
border-radius: 50%;
position: absolute;
z-index: 1;
left: -17px;
}
#two:hover ~ .arrow {
border-top-color: #006850;
transform: rotate(24deg);
}
#three:hover ~ .arrow {
border-top-color: #006850;
transform: rotate(66deg);
}
#four:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
transform: rotate(25deg);
}
#five:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
border-bottom-color: #006850;
transform: rotate(26deg);
}
#six:hover ~ .arrow {
border-top-color: #006850;
border-right-color: #006850;
border-bottom-color: #006850;
transform: rotate(66deg);
}
#one:hover ~ .arrow {
border-color: #006850;
}
#one:hover ~ .circle:after {
border-top-color: #006850;
}
.circle:before {
content: "";
display: block;
width: 30px;
height: 30px;
position: absolute;
bottom: 0;
top: -96px;
left: -36px;
background: #fff;
background-color: white;
transform: rotate(-120deg);
z-index: 1;
}
.circle:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #d0d3d8;
position: absolute;
top: -83px;
left: -44px;
transform: rotate(-120deg);
z-index: 2;
}
.text1line {
font-size: 13px;
margin-top: 14%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.text1line:hover {
text-decoration: none;
}
.text2line {
font-size: 13px;
margin-top: 6%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.text2line:hover {
text-decoration: none;
}
.textcircle {
font-size: 15px;
margin-top: 37.5%;
display: block;
color: white;
text-decoration: none;
text-align: center;
}
.textcircle:hover {
text-decoration: none;
}
.wrapper {
max-width: 960px;
margin: 0 auto;
}
/* Acordeon styles */
.tab {
position: relative;
margin-bottom: 1px;
width: 100%;
overflow: hidden;
}
.bold {
font-weight: bold;
color: #005bab;
}
.top {
margin-top: -20px;
text-align: center;
font-size: 13px;
}
.input {
position: absolute;
opacity: 0;
z-index: -1;
}
.label {
position: relative;
text-align: center;
display: block;
padding: 0 0 0 1em;
color: #005bab;
background: #e2ecf6;
font-size: 14px;
font-family: Verdana;
font-weight: bold;
line-height: 6;
cursor: pointer;
}
.label:hover {
background-color: #d2e2ef;
}
.tab-content {
max-height: 0;
overflow: hidden;
padding: 0px;
-webkit-transition: max-height .5s;
-o-transition: max-height .5s;
transition: max-height .5s;
padding-left: 35px;
background: #dce7f2;
}
.tab-content .container {
padding: 1em;
margin: 0;
opacity: 0;
transform: scale(0.75);
-webkit-transition: transform 0.75s, opacity .75s;
-o-transition: transform 0.75s, opacity .75s;
transition: transform 0.75s, opacity .75s;
background: #f4f8fc;
}
/* :checked */
.input:checked~.tab-content {
max-height: 35em;
}
.input:checked~.tab-content .container {
transform: scale(1);
opacity: 1;
}
/* Icon */
.label::after {
position: absolute;
left: 0;
top: 0;
display: block;
width: 3em;
height: 3em;
line-height: 3;
text-align: center;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.input[type=checkbox]+.label::after {
content: "+";
}
.input[type=radio]+.label::after {
content: "";
}
.input[type=checkbox]:checked+.label::after {
transform: rotate(315deg);
}
.input[type=radio]:checked+.label::after {
transform: rotateX(180deg);
}
.bottombar {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #00688B;
}
<div class="container1">
<div class="ele" id="one"><label style="color:#fff;" class="text2line" for="tab-one">Select A Top Team</label></div>
<div class="ele" id="two"><label style="color:#fff;" class="text2line" for="tab-two">Get Off To A Great Start</label></div>
<div class="ele" id="three"><label style="color:#fff;" class="text2line" for="tab-train">Train For Success</label></div>
<div class="ele" id="four"><label style="color:#fff;" class="text2line" for="tab-manage">Manage Work For Results</label></div>
<div class="ele" id="five"><label style="color:#fff;" class="text1line" for="tab-grow">Grow Careers</label></div>
<div class="ele" id="six"><label style="color:#fff;" class="text2line" for="tab-build">Build A Deep Bench</label></div>
<div class="arrow"></div>
<div class="circle"><a style="color:#fff;" class="textcircle">Manager</a></div>
</div>
<br style="line-height:400px;"/>
<div class="top">
<p>
<span style="font-family: verdana;"><strong>Click the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>+</strong></span><strong>" to expand and the "</strong><span class="ms-rteThemeForeColor-5-0"><strong>x</strong></span><strong>" to collapse</strong></span>
</p>
</div>
<div class="wrapper">
<div class="tab">
<input name="tabs" class="input" id="tab-one" type="checkbox"/>
<label class="label" for="tab-one">Select A Top Team</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-two" type="checkbox" />
<label class="label" for="tab-two">Get Off To A Great Start</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-train" type="checkbox"/>
<label class="label" for="tab-train">Train For Success</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-manage" type="checkbox"/>
<label class="label" for="tab-manage">Manage Work For Results</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-grow" type="checkbox"/>
<label class="label" for="tab-grow">Grow Careers</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="tab">
<input name="tabs" class="input" id="tab-build" type="checkbox"/>
<label class="label" for="tab-build">Build A Deep bench</label>
<div class="tab-content">
<div class="container">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="bottombar"></div>
</div>
Use document.getElementById("button_id").addEventListener("click", function); for trigger.
Use window.location.hash = '#div_id';to get focus.
Example:
document.getElementById("bt1").addEventListener("click", getfocus1);
document.getElementById("bt2").addEventListener("click", getfocus2);
document.getElementById("bt3").addEventListener("click", getfocus3);
document.getElementById("bt4").addEventListener("click", getfocus4);
document.getElementById("bt5").addEventListener("click", getfocus5);
function getfocus1(){
window.location.hash = '#tab1';
}
function getfocus2(){
window.location.hash = '#tab2';
}
function getfocus3(){
window.location.hash = '#tab3';
}
function getfocus4(){
window.location.hash = '#tab4';
}
function getfocus5(){
window.location.hash = '#tab5';
}
div{
width:100%;
height:300px;
text-align: center;
}
<button type="button" id = "bt1">Click Me for get focus in div 1!</button>
<button type="button" id = "bt2">Click Me for get focus in div 2!</button>
<button type="button" id = "bt3">Click Me for get focus in div 3!</button>
<button type="button" id = "bt4">Click Me for get focus in div 4!</button>
<button type="button" id = "bt5">Click Me for get focus in div 5!</button>
<div id ="tab1">
Data 1
</div>
<div id ="tab2">
Data 2
</div>
<div id ="tab3">
Data 3
</div>
<div id ="tab4">
data 4
</div>
<div id ="tab5">
data 5
</div>
I hope this is what you want.