Basically, I have created an image gallery that looks like the code below. However, I am having trouble creating a hover effect that goes with the images. I would like the hover effect to look something like this if possible: https://codepen.io/jguerra/pen/rNBdYeJ. Could anyone help me with creating this? Any help is appreciated. Thanks.
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*block level elements*/
.page {
margin: 0px;
padding: 0px;
}
.themains {
margin: 0px;
padding: 0px;
max-width: none;
}
.inner {
max-width: 1000px;
margin: auto;
padding-left: 15px;
padding-right: 15px;
}
.scroll-container {
position: relative;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
width: 100%;
height: 400px;
scroll-snap-type: mandatory;
scroll-behavior: smooth;
background: #2C3E50;
border: solid 7px yellow;
font-size: 0px;
margin-bottom: 50px;
}
.scroll-container .scroll-section {
display: inline-block;
vertical-align: middle;
background: transparent;
border: solid 5px #BFC9CA;
white-space: nowrap;
}
/*Slider X (different sized images)*/
.scroll-container.diff-size {
scroll-snap-destination: 50% 0%;
padding: 20px 0px;
}
.scroll-container.diff-size .scroll-section {
width: auto;
height: 100%;
margin-right: 15px;
scroll-snap-coordinate: 50% 0%;
}
.scroll-container.diff-size .scroll-section:first-child {
scroll-snap-coordinate: 0% 0%, 50% 0%;
margin-left: 15px;
}
.scroll-container.diff-size .scroll-section:last-child {
scroll-snap-coordinate: 50% 0%, 100% 0%;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Gallery</title>
<meta charset="UTF-8">
<title>Horizontal Scroll Gallery</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<article class="page">
<article class="themains">
<div class="scroll-intro" id="intro"></div>
<div class="inner">
<div class="scroll-container diff-size"><img class="scroll-section" src="https://cdn.pixabay.com/photo/2017/06/23/17/41/morocco-2435391__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2016/03/09/09/42/buildings-1245953__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2013/03/02/02/41/city-89197__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/03/27/08/57/waterfall-4972945_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/11/28/10/37/rocket-launch-67649_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2015/08/07/15/47/fireworks-879461_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2012/03/03/23/06/backdrop-21534_1280.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/02/27/14/33/building-4884852__340.jpg"> <img class="scroll-section" src="https://cdn.pixabay.com/photo/2020/05/13/11/38/cherry-blossoms-5167156_1280.jpg"></div>
</div>
<p><br>
<br></p>
</article>
</article><!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
</body>
</html>
I would probably position the images inside a container and use the following kind of code in css. Hopefully it helps somehow.
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
Try using after and before pseudo-elements to make that white border-lines and give blue(or what color you want) background to image. You can make all them invisible and 0 opacity. And when on hover you can make them visible again. Check this css below.
figcaption {
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
justify-content: center;
padding: 4rem;
text-align: center;
}
figcaption::before,
figcaption::after {
content: '';
position: absolute;
top: 1.5rem;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
transition: 0.5s;
}
figcaption::before {
border-top: 1px solid white;
border-bottom: 1px solid white;
transform: scale(0,1);
}
figcaption::after {
border-right: 1px solid white;
border-left: 1px solid white;
transform: scale(1,0);
}
figcaption:hover::before,figcaption:hover::after{
transform: scale(1);
}
and you can make the same thing with text opacity.
Related
I have a project for college to create an online fleet management system. I just created to login form and hard-coded the correct credentials (as told to do so). Now I want the login page to open my next page when the correct credentials are validated but I can't figure out how to do so... Code attached.
html login page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fleet Management</title>
<link rel="stylesheet" href="style.css">
<script>
function authenticate()
{
var authorised;
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if(username == "Myuser" && password == "SA1#123")
{
authorised = true;
window.location("main.html")
}
else
{
authorised = false;
alert("Incorrect credentials, Please try again");
}
return authorised;
}
</script>
</head>
<body>
<div class="box">
<div class="container">
<h2>Log In</h2>
<form name="logInForm" onsubmit="return authenticate()">
<div class="inputBox">
<input id="username" type="text" name="uName" required="required">
<span>Username</span>
<i></i>
</div>
<div class="inputBox">
<input id="password" type="password" name="pWord" required="required">
<span>Password</span>
<i></i>
</div>
<input type="submit" value="Log In">
</form>
</div>
</div>
</body>
</html>
html page I want to open after successful login:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fleet Management</title>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<p>test</p>
</body>
</html>
css:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700;800;900&display=swap');
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #23242a;
}
.box
{
position: relative;
width: 380px;
height: 420px;
background: #1c1c1c;
border-radius: 8px;
overflow: hidden;
}
.box::before
{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);
transform-origin: bottom right;
animation: animate 6s linear infinite;
}
.box::after
{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 380px;
height: 420px;
background: linear-gradient(0deg,transparent,#45f3ff,#45f3ff);
transform-origin: bottom right;
animation: animate 6s linear infinite;
animation-delay: -3s;
}
#keyframes animate
{
0%
{
transform: rotate(0deg);
}
100%
{
transform: rotate(360deg);
}
}
.container
{
position: absolute;
inset: 2px;
border-radius: 8px;
background: #28292d;
z-index: 10;
padding: 50px 40px;
display: flex;
flex-direction: column;
}
.container h2
{
color: #45f3ff;
font-weight: 500;
text-align: center;
letter-spacing: 0.1em;
}
.inputBox
{
position: relative;
width: 300px;
margin-top: 35px;
}
.inputBox input
{
position: relative;
width: 100%;
padding: 20px 10px 10px;
background: transparent;
border: none;
outline: none;
color: #23242a;
font-size: 1em;
letter-spacing: 0.05em;
z-index: 10;
}
.inputBox span
{
position: absolute;
left: 0;
padding: 20px 0px 10px;
font-size: 1em;
color: #8f8f8f;
pointer-events: none;
letter-spacing: 0.05em;
transition: 0.5s;
}
.inputBox input:valid ~ span,
.inputBox input:focus ~ span
{
color: #45f3ff;
transform: translateX(0px) translateY(-34px);
font-size: 0.75em;
}
.inputBox i
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: #45f3ff;
border-radius: 4px;
transition: 0.5s;
pointer-events: none;
z-index: 9;
}
.inputBox input:valid ~ i,
.inputBox input:focus ~ i
{
height: 44px;
}
input[type="submit"]
{
border: none;
outline: none;
background: #45f3ff;
padding: 11px 25px;
width: 100px;
margin-top: 10px;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
}
input[type="submit"]:active
{
opacity: 0.8;
}
I've tried many things I've seen on the web (too many to type). I just could'nt find one that works with my specific code. I'm still a beginner so bear with me please!
As you can see on the example, when I try to hover the buttons, it does nothing.
Also, i tried to right-click the buttons and go to "inspect element" to see what was the problem, but the chrome inspector selects the parent element.
I tried to change the z-index of all the elements, and give them all the position absolute or relative (because i know z-index has problems with position static).
note: The elements with position absolute have to have position absolute
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0;
background: rgb(63, 66, 175);
background: linear-gradient(305deg, rgba(63, 66, 175, 1) 0%, rgba(99, 145, 204, 1) 47%, rgba(139, 216, 236, 1) 100%);
}
:root {
--d_blue: rgb(91, 84, 190);
--l_blue: rgb(169, 165, 232);
--minw: 350px;
--maxw: 450px;
--medw: 30%;
--i: 0;
}
#media (pointer:none),
(pointer:coarse) {
:root {
--medw: 100%;
}
}
.layout {
z-index: 1;
position: relative;
display: block;
width: var(--medw);
min-width: var(--minw);
max-width: var(--maxw);
height: 100%;
margin: auto;
box-shadow: 0px 0px 5px #000, 0px 0px 15px #858585;
}
.presentation-img {
z-index: 2;
display: block;
width: calc(var(--medw));
min-width: var(--minw);
max-width: var(--maxw);
height: 100%;
background: white;
border-radius: 20px;
position: absolute;
transform: translate(0px, calc(var(--i)*-100%));
pointer-events: none;
transition: transform 0.3s cubic-bezier(0, 0, .41, 1);
}
.presentation-img #image img {
z-index: 3;
position: relative;
height: 80%;
width: 95%;
margin: 15% 0% 0% 0%;
margin-left: auto;
margin-right: auto;
display: block;
padding: 0% 0% 0% 0%;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
#image {
width: 100%;
height: 100%;
}
.btn {
z-index: 4;
position: absolute;
width: 100%;
top: 87%;
display: inline-flex;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.btn div {
z-index: 5;
position: relative;
width: 50px;
height: 50px;
padding: 15px 15px 15px 15px;
}
.btn div:first-child {
margin: 0% 0% 0% 7%;
}
.btn div:first-child:hover {
background: rgb(210, 210, 210);
}
.btn div:last-child {
margin: 0% 7% 0% 0%;
}
.profile,
.buy-votes {
z-index: 999999;
position: relative;
display: block;
background: white;
border-radius: 50%;
box-shadow: 0px 0px 11px #858585;
align-items: center;
text-align: center;
}
.profile:hover,
.buy-votes:hover {
background-color: rgb(214, 214, 214);
}
.profile i,
.buy-votes i {
margin: auto;
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>site</title>
</head>
<body>
<div class="layout" id="container">
<div class="presentation-img" id="pres">
<div id="image">
<img draggable="false" touch-action="none" src="https://images.wallpapersden.com/image/download/forests-beautiful-landscape_a2duaWyUmZqaraWkpJRpbWWta2ll.jpg">
</div>
<div class="btn">
<div onclick="console.log('test');" class="profile">
<i class="fa-solid fa-user"></i>
</div>
<div onclick="console.log('test');" class="buy-votes">
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
note: the stackoverflow snipet is a bit flat
if you do not understant the stack overflow, I have it too in
jsfiddle
any doubt, just ask, and please help me
I discovered,
I added pointer-events: none to the parent
I am attempting to create a page where the content on the screen appears 3 seconds after the page loads. By the other posts I have seen on this website, I attempted the scripting below, though with no success (Everything appears at the same time).
First is the section I am attempting to delay, then is the whole pages script. Any guidance is very much appreciated. (I am hoping I am wording everything correctly this time so I don't get another -1)
Section to delay:
<div class="content">
<div id="fade">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</div>
</section>
<style>#fade p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
}
</style>
<script>
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
</script>
And here is the entire page
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#000000" marginwidth="0" marginheight="0">
<section class="showcase">
<div class="video-container">
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<div id="fade">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</div>
</section>
<style>#fade p {
opacity: 0;
margin-top: 25px;
font-size: 21px;
text-align: center;
}
</style>
<script>
<$("#fade p").delay(3000).animate({"opacity": "1"}, 700);
</script>
<style>
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #3a4052;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
color: var(--primary-color);
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
}
.showcase {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center
center/cover;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
}
.content {
z-index: 2;
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: #fff;
border-radius: 5px;
border: solid #fff 1px;
margin-top: 25px;
opacity: 0.7;
}
.btn:hover {
transform: scale(0.98);
}
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
</style>
</body>
</html>
Here is what I ended up changing it all to, to make it work. Hopefully this will help others that are looking to do this.
.content {
-webkit-animation: 3s ease 0s normal forwards 1 fadein;
animation: 3s ease 0s normal forwards 1 fadein;
}
#keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes fadein {
0% {
opacity: 0;
}
66% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;400&display=swap');
:root {
--primary-color: #3a4052;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Open Sans', sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
color: var(--primary-color);
}
h1 {
font-weight: 300;
font-size: 60px;
line-height: 1.2;
margin-bottom: 15px;
}
.showcase {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
padding: 0 20px;
}
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--primary-color) url('./https://traversymedia.com/downloads/cover.jpg') no-repeat center center/cover;
}
.video-container video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
object-fit: cover;
}
.video-container:after {
content: '';
z-index: 1;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
position: absolute;
}
.content {
z-index: 2;
}
.btn {
display: inline-block;
padding: 10px 30px;
background: var(--primary-color);
color: #fff;
border-radius: 5px;
border: solid #fff 1px;
margin-top: 25px;
opacity: 0.7;
}
.btn:hover {
transform: scale(0.98);
}
#about {
padding: 40px;
text-align: center;
}
#about p {
font-size: 1.2rem;
max-width: 600px;
margin: auto;
}
#about h2 {
margin: 30px 0;
color: var(--primary-color);
}
.social a {
margin: 0 5px;
}
<section class="showcase">
<div class="video-container">
<video src="https://traversymedia.com/downloads/video.mov" autoplay muted loop></video>
</div>
<div class="content">
<h1>Main Text</h1>
<h3>Secondary Text</h3>
Read More
</div>
</section>
I am trying to load my HTML page into a container. However, when I try to load the HTML page, the container doesn't re-adjust its size to accommodate the Page. The contents of my page are still visible but they look like they are overflowing without the background of the container. I am new to WebDev and have no idea about this.
I have three containers. Container Big holds other two containers. ContainerMain holds navigation bar in it and I load page into containerPage whenever someone clicks the nav bar. I want containerMain and ContainerPage to look like a scrollable continous box at the center of container Big with some top and bottom margins but, whenever I load the page into containerPage, it fails to resize itself for the page (in this case, homepage).
<div id="ContainerBig">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
Here is css for my containers:
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#ContainerMain {
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 10%;
max-height: 77px;
border-radius: 5px;
position: absolute;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
top: min(20%,160px);
left: 10%;
right: 10%;
width: 80%;
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
position: absolute;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
And I'm trying to load the following webpage:
// Just in case you need it, the code I'm using to load the page is:
function changePage(page, context) {
$(".navItem").removeClass("active");
$(context).addClass("active");
var contain = $("#containerPage");
contain.slideUp("10ms", "linear", function change() {
contain.load(page);
contain.slideDown("10ms");
});
if ($(window).width() < 1126) {
var element = document.getElementById("nav");
element.style.display = "none";
}
}
body {
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #777;
font-size: 13px;
}
#vertical_line {
position: absolute;
left: 69%;
bottom: 12%;
top: 12%;
border-left: 1px solid #c1c1c1;
}
.pic_owner {
top: 15%;
left: 3%;
width: 25%;
height: auto;
position: absolute;
border: white 10px solid;
border-radius: 10px;
}
.description_owner {
display: block;
position: absolute;
top: 8%;
left: 34%;
width: 33%;
line-height: 21px;
}
#more {
display: block;
font-weight: 400;
}
#heading {
color: #333;
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 40px;
}
.social {
position: absolute;
top: 8%;
left: 72%;
right: 6%;
line-height: 21px;
}
.socialButton {
-webkit-appearance: button;
top: 10px;
width: 90%;
padding: 6%;
position: relative;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
}
.fa:hover {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
opacity: 0.9;
}
.fa-instagram {
background: #E1306C;
}
.fa-linkedin {
background: #007bb5;
}
.fa-facebook {
background: #3B5998;
}
.fa-github {
background: #141414;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styleSheets/styleHomePage.css"/>
<script type="text/javascript" src="jss/homepage.js"></script>
</head>
<body>
<div id="content">
<img class="pic_owner" src="Resources/picture_aayush.jpg">
</img>
<div class="description_owner">
<h1 id="heading">DEVELOPER</h1>
<p><strong id="desc_detail">Loading.....</strong></p>
<p id="more">Loading....</p>
</div>
<span id="vertical_line"></span>
<div class="social">
<p id="addition"></p>
 
<a href="" class="socialButton fa fa-linkedin"
type="button">  Aayush Singla</a>
 
</div>
</div>
</body>
</html>
Please bare with me if this is a simple question. I am stuck on this from kinda week now.
update:
It looks to me like if you want both the header and the page content to scroll together, you need a container element with overflow: auto on it.
<!-- HTML -->
<div id="ContainerBig">
<div id="Container">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
</div>
//CSS
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#Container {
position: absolute;
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 80%;
overflow: auto;
}
#ContainerMain {
height: 10%;
max-height: 77px;
border-radius: 5px;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
Here's a working pen: https://codepen.io/jacob_124/pen/ZEQoBxE?editors=1100
Note: It's a bad idea to rely on position absolute for layouts. Especially for when you don't have to. This layout could be easily accomplished with relative positioning.
Here's a pen with position relative: https://codepen.io/jacob_124/pen/BajxQbv
I'm having a problem with my code and can't figure it out. I'm writing my own website and can't get my buttons to go to the center of the page. I tried almost everything I think but it always goes to about 30% or 70% for some reason... The website is not fully responsive for now I will work on that later. What's wrong with my code? What can I do to fix it next time? Thanks for any ideas!
function showHide() {
var navList = document.getElementById("nav-lists");
if (navList.className == '_Menus') {
navList.classList.add("_Menus-show");
} else {
navList.classList.remove("_Menus-show");
}
const body = document.querySelector('body')
const twitter = document.querySelector('.twitter')
twitter.addEventListener("mouseover", function () {
body.classList.add('linked')
},false)
twitter.addEventListener("mouseout", function () {
body.classList.remove('linked')
}, false)
}
#font-face {
font-family: 'familiar_probold';
src: url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff2') format('woff2'),
url('fonts/FamiliarPro/familiar_pro-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'uni_sansheavy_caps';
src: url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff2') format('woff2'),
url('fonts/UniSansHeavy/uni_sans_heavy-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'source_sans_problack';
src: url('fonts/SourceSans/sourcesanspro-black-webfont.woff2') format('woff2'),
url('fonts/SourceSans/sourcesanspro-black-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin: 0;
padding: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #f7f7f7;
font-family: sans-serif;
}
img {
width: 100%;
height: auto;
}
.navbar {
width: 100%;
background-color: #000;
}
.container {
max-width: 1140px;
margin: 0 auto;
height: 60px;
display: flex;
flex-wrap: wrap;
}
._Logo {
overflow: hidden;
text-align: center;
flex-basis: 230px;
}
._Logo img {
height: 100% !important;
width: 150px !important;
}
._Menus ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
._Menus ul li a {
display: block;
padding: 0 10px;
height: 60px;
line-height: 60px;
text-decoration: none;
color: #FFF;
outline: none;
font-family: 'uni_sansheavy_caps';
}
._Menus ul li a:hover {
background-color: #FFF;
color: #000;
}
._Iconbar {
display: none;
background-color: #000;
}
.menu-bar {
width: 45px;
align-self: center;
cursor: pointer;
}
.icon-bar {
height: 3px;
width: 100%;
background: #FFF;
margin: 7px 0;
display: block;
border-radius: 2px;
}
.toppadding{
padding-top: 0;
}
.topbackround{
width: 100%;
height: auto;
position: relative;
text-align: center;
color: white;
}
.sloganlefttextfirst{
position: absolute;
top: 20%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: grey;
}
.sloganlefttextsecond{
position: absolute;
top: 25%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
}
.sloganlefttextthird{
position: absolute;
top: 35%;
left: 5%;
font-family: 'uni_sansheavy_caps';
font-size: 500%;
color: #DCC98E;
border-bottom: 6px solid #DCC98E;
padding-bottom: 3px;
}
.howitworkslefttextfirst a{
position: absolute;
top: 51%;
left: 5%;
font-family: 'familiar_probold';
font-size: 200%;
color: #B9CDBE;
border-bottom: 3px solid #B9CDBE;
padding-bottom: 3px;
text-decoration: none;
}
.howitworkslefttextsecond{
position: absolute;
top: 57%;
left: 5%;
font-family: 'Arial';
font-size: 200%;
color: white;
}
hr{
color: black;
background-color: black;
height: 8px;
border: none;
}
.midbackground{
background-color: #1B1C1E;
padding-bottom: 100px;
}
.tutorial{
padding-top: 3%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.tutorial p{
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
left: 50%;
font-family: 'Arial';
color: white;
font-size: 50%;
width: 100%;
}
.circles{
margin: 0 auto;
}
.circles > div {
overflow: hidden;
float: left;
width: auto;
height: auto;
position: relative;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
background: #1B1C1E;
}
.circles > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'uni_sansheavy_caps';
font-size: 400%;
color: grey;
}
.circles > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circles > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circles > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circles > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circles{width:800px}
.circles > div {padding: 12.5%;}
}
.circlescontent{
margin: 0 auto;
}
.circlescontent > div {
overflow:hidden;
float:left;
width:auto;
height:auto;
position: relative;
background: #1B1C1E;
}
.circlescontent > div > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font-family: 'familiar_probold';
font-size: 250%;
color: grey;
}
.circlescontent > div > div > div {
display: table;
width: 100%;
height: 100%;
}
.circlescontent > div > div > div > div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
#media (max-width: 320px)
{
.circlescontent > div {padding: 50%;}
}
#media (min-width: 321px) and (max-width: 800px)
{
.circlescontent > div {padding: 25%;}
}
#media (min-width: 801px)
{
.circlescontent{width:800px}
.circlescontent > div {padding: 12.5%;}
}
.statement{
padding-top: 25%;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
}
.statement p{
padding-top: 20px;
padding-bottom: 0;
text-align: center;
left: 50%;
font-family: 'familiar_probold';
color: white;
font-size: 50%;
width: 100%;
}
.statementfinal{
padding-top: 0;
padding-bottom: 3%;
text-align: center;
left: 50%;
font-family: 'uni_sansheavy_caps';
color: #DCC98E;
font-size: 350%;
width: 100%;
} /*HERE*/
.buttonbkg{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
left: 50%;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: inline-block;
align-content: center;
}
.gradient {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
bottom: auto;
margin: auto;
z-index: -1;
background: radial-gradient(90px circle at top center, rgba(238,88,63,.8) 30%, rgba(255,255,255,0));
transition: all 0s ease-out 0s;
transform: translatex(-140px);
animation: 18s linear 0s infinite move;
display: inline-block;
align-content: center;
}
#keyframes move {
0% {
transform: translatex(-140px);
}
25% {
transform: translatex(140px);
opacity: 0.3;
}
50% {
transform: translatex(140px);
opacity: 1;
background: radial-gradient(90px circle at bottom center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
75% {
transform: translatex(-140px);
opacity: 0.3;
}
100% {
opacity: 1;
transform: translatex(-140px);
background: radial-gradient(90px circle at top center, rgba(238,88,63,.5) 30%, rgba(255,255,255,0));
}
}
#media (max-width: 900px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
#media (max-width: 600px) {
._Logo {
height: 60px;
}
._Menus {
flex: 100%;
background: #333;
height: 0;
overflow: hidden;
}
._Menus ul{
flex-direction: column;
}
._Menus ul li a {
height: 40px;
font-size: 14px;
text-transform: uppercase;
line-height: 40px;
}
._Menus ul li a:hover {
background-color: #81d742;
color: #FFF;
}
.container {
justify-content: space-between;
}
._Iconbar {
display: flex;
margin-right: 10px;
}
._Menus-show {
height: auto;
}
.brandimage{
display: none;
}
}}
/*
#0C0028
#1D5EC3
#181A1B
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Reff Skins</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS responsive navigation menu</title>
</head>
<body>
<nav class="navbar">
<div class="container">
<section class="_Logo"><img src="images/brand.png" alt="REFF SKINS"></section>
<section class="_Iconbar">
<span class="menu-bar" onclick="showHide()">
<i class="icon-bar"></i>
<i class="icon-bar"></i>
<i class="icon-bar"></i>
</span>
</section>
<section class="_Menus" id="nav-lists">
<ul>
<li>ABOUT</li>
<li>HOW IT WORKS</li>
<li>FAQ</li>
<li>AVAILABLE SKINS</li>
<li>SIGN IN THROUGH STEAM</li>
</ul>
</section>
</div>
</nav>
<div class="toppadding"></div>
<div class="topbackround">
<img class="topbackround" src="images/awpasiimov.jpeg">
<div class="sloganlefttextfirst">WEBSITE WITH TRULY FREE SKINS</div>
<div class="sloganlefttextsecond">LOW ON SKINS?</div>
<div class="sloganlefttextthird">TIME TO GET NEW FREE!</div>
<div class="howitworkslefttextfirst">HOW IS THIS WORKING?</div>
<div class="howitworkslefttextsecond">check how it works page or visit our YouTube</div>
<!--<button class="btn1">HOW IT WORKS</button></div>
<button class="btn2">SKINS</button></div>
<button class="btn3">SIGN IN WITH STEAM</button></div>-->
</div>
<hr></hr>
<div class="midbackground">
<div class="tutorial">HOW CAN I DO IT?<p>If you want your new skins complete the four easy steps.</p></div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
1.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
2.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
3.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circles">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
4.
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SIGN IN WITH STEAM
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
DO THE REFERR PROCESS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
SELECT WANTED SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="circlescontent">
<div>
<div>
<div>
<div>
<!-- BEG Content -->
GET YOUR SKINS
<!-- END Content -->
</div>
</div>
</div>
</div>
<!-- ditto the above 3 more times -->
</div>
<div class="statement">IT'S THAT EASY<p>NO DEPOSITS, NO PAYMENT METHODS, NO RISKY GAMBLING, NO SKINS HOLDING</p></div>
<div class="statementfinal">WE SAID NO TO CATCHES!</div>
<div class="buttunbkg">
<span class="gradient"></span>SIGN IN WITH STEAM
<span class="gradient"></span>AVAILABLE SKINS
<span class="gradient"></span>HOW IT WORKS
</div>
</div>
</body>
</html>
Seems like you've got it half using flex, here's an answer sticking to it.
Firstly, you spelt buttonbkg wrong. Add flex-direction: column to it. Then like others said you will want to get rid of the left: 50%. On your .steam add your flex, and center align/justify.
.buttonbkg{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
}
.button {
width: 320px;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translatez(0);
text-decoration: none;
box-sizing: border-box;
font-size: 130%;
font-weight: normal;
font-family: 'familiar_probold';
color: #B9CDBE;
box-shadow: 0 9px 18px rgba(0,0,0,0.2);
display: inline-block;
margin: 3%;
align-content: center;
}
.steam{
text-align: center;
border-radius: 50px;
padding: 26px;
color: white;
background: #BD3381;
transition: all 0.2s ease-out 0s;
display: flex;
justify-content: center;
align-items: center;
}
You need to add this to your button selector:
.button {
transform: translateX(-50%);
}
On your .button class you have left: 50%;, remove it. Also add margin: 3% auto
On you .steam class change display: inline-block; to display: block;
margin: 3% auto
3% -> top/bottom margin
auto -> left/right margin, auto will make left an right margin the same
Other solution would be to change your transform: translatez(0); to transform: translateX(-50%);, but I think transform is like shooting with a shotgun at a fly.