I am new html css,I am pretty confused with notification bar this should be responsive to adopt full screen when it is in mobile.But I tried it is not expanding .
But for me it is not working
HTML Markup
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/InterestPage.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header>
<div class="innerwrapper">
<h1>Feel Hunt</h1>
<div class="otherOptions">
<div class="notificationdiv">
<div class="notifyCoun">
<p>3</p>
</div>
<svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#303030;}
</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M12.44998,29.25c0.4714-1.86041,0.98683-3.71044,1.39399-5.58655 c0.20076-0.92508,0.37522-1.85624,0.50479-2.79409c0.12749-0.92277,0.12761-1.86938,0.32255-2.78069 c0.17715-0.82819,0.41986-1.62416,0.79385-2.38678c0.72808-1.48468,1.84795-2.76857,3.21698-3.69551 c1.54611-1.04685,3.39019-1.61638,5.25786-1.61638c2.6,0,4.96,1.06,6.66999,2.76999 c1.1685,1.1685,1.95078,2.64423,2.40368,4.22483c0.48483,1.69205,0.49984,3.44094,0.81387,5.16177 c0.41544,2.27656,1.13475,4.46739,1.71247,6.7034"/><path class="st1" d="M36.75998,35.78003H11.24002c-0.35004,0-0.60004-0.33002-0.5-0.67004L12.44998,29.25h23.09003 l1.71997,5.85999C37.36002,35.45001,37.11002,35.78003,36.75998,35.78003z"/><path class="st1" d="M22.39999,35.86509V36.32c0,0.71,0.58,1.29,1.29,1.29h0.93c0.71,0,1.29-0.58,1.29-1.29v-0.43993"/><path class="st1" d="M21.00458,13.27578c-1.74433,0.9948-3.03389,2.64047-3.76966,4.84763"/><line class="st1" x1="16.98094" x2="16.84722" y1="20.13664" y2="21.16766"/></g></g></svg>
//this is notifcation panel DIV
<div class="notificationPanel">
this should be full screen
</div>
</div>
<div class="profilePicDrop">
<img src="./img/sky-night-space-trees%20(4).jpeg" alt="">
<div class="getDisplayNone dropDown">
vdvdv
</div>
</div>
</div>
</div>
</header>
</body>
</html>
Homepage.scss
#import "utils/_reset";
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
#import "utils/_variables";
body{
background: #EEEEEE;
}
header{
width: 100%;
position: fixed;
height:50px;
top:0;
left:0;
right: 0;
background: #ffffff;
box-shadow: 0px 11px 32px -1px rgba(0,0,0,.04);
.innerwrapper{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 75%;
margin: 0 auto;
}
h1{
color: #393e46;
font-family: $FontStyle;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 400;
a{
padding: 5px;
border: 1px solid #393e46;
text-decoration: none;
color: #393e46;
font-size: 13px;
transition: all 100ms ease-in-out;
&:hover{
background:#393e46 ;
color: #ffffff;
}
}
}
.otherOptions{
margin-left: auto;
display: flex;
align-items: center;
.profilePicDrop{
width: 25px;
height:25px;
position: relative;
margin-left: 12px;
img{
width: 25px;
height:25px;
border-radius: 50px;
}
.dropDown{
width: 150px;
height:150px;
background: #ffffff;
position: absolute;
right: 5px;
top:35px;
border-radius: 5px;
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.1);
}
}
}
}
.getDisplayNone{
display: none;
}
.getDropMenuIn{
animation: PopIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.getOutDropMenu{
animation: PopOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.notificationdiv{
margin-top: 5px;
position: relative;
svg{
width: 30px;
height:30px;
}
.notifyCoun{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #E74C3C;
width: 17.5px;
height:17.5px;
border-radius: 50px;
box-shadow: 0px 4px 14px 0px rgba(231,77,60,0.3);
p{
font-size: 12px;
font-family: $FontStyle;
color: #ffffff;
font-weight: 300;
}
}
&:hover{
cursor: pointer;
}
}
//this is notification panel css
.notificationPanel{
position: absolute;
top: 50px;
left: 0;
right: 0;
background: #ffffff;
width: 100%;
}
#keyframes PopIn {
from{
transform: scale(0.8);
opacity: 0.5;
transform-origin: 150px -5px;
}to{
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
#keyframes PopOut {
from{
opacity: 1;
}to{
opacity: 0.1;
visibility: hidden;
transform: scale(0.5);
transform-origin: 150px -5px;
}
}
Try removing position: relative from your .notificationdiv. Because your absolute element will take 100% of his first relative parent.
https://codepen.io/OliviaPaquay/pen/mwbQEj Demo here, remove line 10.
Related
After the slideIn animation the buttons don't set the cursor to pointer and don't do anything that was coded in the :hover/:active.
My goal is to have the button effects after the animation.
here is an example where the button effects don't work after the animation:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Here is an example without animation where the button effects do work:
body{
background-image: url("../img/bg.png");
background-repeat: no-repeat;
background-size: 100%;
}
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/XHtml.xhtml to edit this template
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Okay so a few problems here. You are trying to animate transform properties on hover and with the animation property.
The way I would solve this is by adding a container to the button where you would add the intro animation. Then add the hover animation to the button.
here's the HTML
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br /> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<div class="button-container">
<button class="btn">
<span>
1300000
</span>
</button>
</div>
</a>
</li>
</ul>
</div>
</section>
and then CSS
.content {
position: absolute;
background: linear-gradient(-45deg, #2e3192, #1bffff);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1 {
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2 {
font-size: 200%;
}
ul {
padding: 0px;
list-style: none;
}
.button-container {
animation: slideIn 1.5s 1 ease-out forwards;
}
.btn {
position: relative;
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
transition: transform 0.1s;
color: white;
cursor: pointer;
}
.btn:hover {
transform: translateY(-2px);
transition-duration: 0.3s;
}
.btn:active {
transform: scale(0.95);
}
span {
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
Apply display: block; to the a tag around the button to make the whole button surface be a link:
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#questions a {
display: block;
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
Updated answer (works with 2s delay):
Remove the transform: translateX(0) from the 100% keyframe on the animation. It's unnecessary, and it's overriding the :hover animation.
Old answer:.
(I changed the animation-fill-mode to none, and moved the opacity: 0 to the #keyframes). The problem was that the transform on the :hover was being overridden by the #keyframes, so changing the fill-mode fixed that.
div{
display: block;
}
.content{
position: absolute;
background: linear-gradient(-45deg, #2E3192 , #1BFFFF);
opacity: 95%;
top: 50%;
left: 50%;
padding: 80px 100px;
transform: translate(-50%, -50%);
border-radius: 3em;
text-align: center;
}
h1{
font-size: 500%;
font-family: monospace;
margin-top: 10px;
margin-bottom: 10px;
}
h2{
font-size: 200%;
}
ul{
padding: 0px;
list-style: none;
}
.btn{
display: inline-block;
width: 500px;
margin: 6px;
padding: 15px;
border: 0px;
border-radius: 3em;
background-color: black;
color: white;
transition: 0.1s;
box-shadow: rgb(0, 0, 0, 0.35) 0px 5px 15px;
}
#btn1{
opacity: 0;
animation: slideIn 1.5s 2s 1 ease-out forwards;
}
.btn:hover{
transform: translateY(-2px);
transition: 0.3s;
}
.btn:active{
transform: scale(0.95);
}
span{
font-size: 32px;
display: inline-block;
}
#keyframes slideIn {
0% {
opacity: 1;
transform: translateX(-900px);
}
100% {
opacity: 1;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Question 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="../css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<section>
<div class="content">
<h1>Question 1</h1>
<h2>How many times does the earth fit in<br/> the sun?</h2>
<ul id="questions">
<li>
<a href="Question 2.xhtml">
<button id="btn1" class="btn">
<span>
1300000
</span>
</button>
</a>
</li>
</ul>
</div>
</section>
</body>
</html>
I wrote up an animation in which the banner elements will show up on the screen smoothly from the bottom up. The elements should also rotate slightly as they go up the screen. To accomplish that I added a transition property with value of translateY() rotateY(). Unfortunately, while translateY() works just fine, rotateY() does not. I've no idea why. Plz help me fix this issue. Regards.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Starter</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Baloo+Da+2:wght#400;500;600;700;800&family=Josefin+Slab:ital,wght#0,300;0,400;1,200;1,300;1,400&family=Mulish:ital,wght#0,300;0,400;0,500;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link
rel="stylesheet"
href="stylesheet.css"
/>
</head>
<body>
<div class="container">
<div class="hamburger-menu">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
<header class="header">
<div class="img-wrapper">
<img src="bg.jpg">
</div>
<div class="banner">
<h1>Architecture & Interior Design</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<button>Discover now</button>
</div>
</header>
</div>
<script src="test3.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
list-style: none;
text-decoration: none;
}
html{
font-size: 62.5%;
}
.hamburger-menu{
width: 3rem;
height: 3rem;
position: fixed;
top: 5rem;
right: 5rem;
height: 5rem;
z-index: 200;
display: flex;
flex-direction: column;
justify-content: space-evenly;
cursor: pointer;
}
.line{
width: 100%;
height: 0.2rem;
background-color: #fff;
box-shadow: 0 0.1rem .2rem rgba(0, 0, 0, 0.2);
}
.header{
width: 100%;
height: 100vh;
position: relative;
perspective: 100rem;
overflow: hidden;
}
.img-wrapper{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0 , .8);
overflow: hidden;
}
.img-wrapper img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.5;
animation: scale 25s;
}
#keyframes scale{
0%{
transform: scale(1.3);
}
100%{
transform: scale(1);
}
}
.banner{
position: absolute;
top: 30%;
left: 15%;
}
.banner h1{
font-family: "Baloo Da 2", serif;
font-size: 8rem;
font-weight: 300;
color: #fff;
width: 50%;
line-height: 9rem;
letter-spacing: .2rem;
text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.5s forwards;
}
.banner p{
font-family: "Josefin Slab", serif;
font-size: 4rem;
color: #fff;
width: 70%;
letter-spacing: 0.1rem;
margin-bottom: 3rem;
text-shadow: 0.3rem .5rem rgba(0, 0, 0, 0.4);
opacity: 0;
animation: moveBanner 1s 0.7s forwards;
}
.banner button{
width: 25rem;
height: 7rem;
background-color: #c29525;
border: none;
font-family: "Muli", serif;
font-size: 2rem;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0.2rem .4rem rgba(0, 0, 0, 0.2);
text-shadow: 0 0.3rem .5rem rgba(0, 0, 0, 0.4);
cursor: pointer;
opacity: 0;
animation: moveBanner 1s 0.9s forwards;
}
#keyframes moveBanner{
0%{
transform: translateY(40rem) rotateY(-20deg);
}
100%{
transform: translateY(0) rotateY(0);
opacity: 1;
}
}
rotateY rotates about the Y axis. So unless you introduce 3d aspects to the CSS nothing will seem to happen.
I think you require rotation about the Z axis, that is, the axis that is coming straight out of the screen.
div {
width: 300px;
height: 100px;
background: green;
transform: rotateZ(-45deg);
}
<div></div>
I found the solution. Just add a perspective of 100rem to the parent div.
.banner{
position: absolute;
top: 30%;
left: 15%;
perspective: 100rem;
}
i am working on chat application i want to make the button to be responsive for all the screen width below i added the code for the reference
Try shrinking the page width-wise and you'll see my issue. How can I keep the button size and position as close to the same as desktop as possible when resizing the screen? I'm stumped.
Pen: https://codepen.io/trjwaugh/pen/QWvypQJ
//FONTS
$heading-font: 'Roboto', sans-serif;
$main-font: 'Open Sans', sans-serif;
//COLORS
$btn-blue: #35A7FF;
* {
padding: 0;
margin: 0;
}
#header__chat {
position: absolute;
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
width: 50vw;
max-width: 1000px;
display: flex;
padding: 20px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
animation: 5s;
}
#header__btn {
position: absolute;
top: 30%;
left: 72%;
transform: translate(-50%, -50%);
width: 6vw;
display: flex;
padding: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
background-color: $btn-blue;
color: white;
align-items: center;
h2{
font-size: 2vw;
padding: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
text-transform: uppercase;
}
}
h1 {
font-size: 5vw;
font-family: $heading-font;
}
h2 {
font-size: 2vw;
font-family: $heading-font;
}
.typing {
width: 12ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<html lang="en">
<!--- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Hello, I'm Tim. A Frontend Web Developer, always curious, learning and growing my skills in web design, data, analytics and software in general.">
<!--- CSS -->
<link rel="stylesheet" href="css/style.css">
<head>
<style>#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght#400;500;700&display=swap');</style>
</head>
<body>
<div id="header__chat">
<h1 class="typing">Text Goes Here.</h1>
</div>
<div id="header__btn">
<h2>Send</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>
By using media queries adjust the padding , width, height of button according to screen size
#media only screen and (max-width: 600px) {
#header__btn {
position: absolute;
top: 30%;
left: 75%;
transform: translate(-50%, -50%);
background-color: #35A7FF;
color: white;
align-items: center;
width: 50px;
height: 30px;
padding: 25px;
border-radius: 50px;
}
}
please refer this w3 schools media queires to clearly understand what is media queries
here i attached the reference image on changing css
I am working on this web page designing. I used visual studio code for this. And used HTML and CSS. Also I'm a beginner to web designing.
Design gets messy when resize the browser window size. Texts,images and other contents moves here and there.
Design changes when browser change (IE,chrome,Firefox). ex:-Border margins change.
What should I do?
*{
margin: 0%;
padding: 0%;
box-sizing: content-box;
}
html{
font-size: 10px;
font-family: 'Amatic SC', cursive;
}
section{
width: 100%;
height: 100%;
color: #fff;
background: linear-gradient(45deg,#770a0a,#a01919,#d3163f,#d3511e,#ee2f16);
background-size: 400% 400%;
position: relative;
animation: change 30s ease-in-out infinite;
}
h1{
font-size: 380%;
letter-spacing: 0.5vh;
text-transform: uppercase;
border: 0.3vh solid white;
border-radius: 7vh;
float: left;
position: absolute;
padding: 1% 5%;
padding-left: 1%;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
}
.imp:hover{
color:rgb(245, 231, 167);
}
#keyframes change{
0%{
background-position:0 50% ;
}
50%{
background-position:100% 50% ;
}
100%{
background-position:0 50% ;
}
}
.icon{
width: 11%;
position: absolute;
top: 32.5%;
left: 53%;
transform: translate(-50%,-50%);
}
.menu{
font-size: 280%;
border: 0.3vh solid white;
border-radius: 7vh;
float: right;
position: relative;
margin-right: 2%;
margin-top: 2%;
}
.menu ul li{
display: inline-block;
line-height: 150%;
margin: 0 3vh;
padding: 0.009%;
cursor: pointer;
position:relative;
font-weight: bold;
}
.menu ul li:hover{
font-size: 130%;
}
a:link, a:visited {
color: white;
cursor: auto;
}
a:link:active, a:visited:active {
color: white;
}
.Home{
color: rgb(245, 231, 167);
}
.about{
font-size: 300%;
position: absolute;
padding: 2%;
top: 53%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
.hola{
font-size: 250%;
}
.next{
width: 3%;
position: absolute;
top: 80%;
left: 56%;
transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>ImpressMe | Home</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<img class="icon" src="cute.png" alt="Boy" title="Hola....">
<div class="go">
<a href="sendme/sendme.html" class="imp">
<h1>Impress Me</h1>
<img class="next" src="go.png" alt="go"></a>
</div>
<div class="about">
<p class="hola">Hola.....!</p><p>you look familiar<br>I'm pretty sure you got something to impress me<br>Tell me<br>I would love to hear from you</p>
</div>
<div class="menu">
<ul>
<a href="index.html">
<li class="Home">Home</li></a>
<a href="About/about.html">
<li class="#">About</li></a>
<li class="#">Contact</li>
</ul>
</div>
</section>
</body>
</html>
I recommend you to learn about Bootstrap for example here. For your problem you actually only need Container and Grid System Basics, to make your site responsive.
Also for your problem with different browsers use Normalize.css to make it look more consistent. (It's already included in Bootstrap)
I'm having trouble with setting a transition, At the moment it goes from top to bottom (It's a border that shows when you hover). I'd like the transition to start from the middle and to spread to the side or at least to start from any side and to spread to the other...
My navigation menu anchors are using the navigation-link class !
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
transition: left 2s, all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
border-bottom: 3px solid DarkGreen;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
So if you know a way to make it work it would be very much appreciated
You may consider a pseudo-element to create the border. First you set 50% in left/right property and on hover you switch to 0 both and this will create the effect you want:
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
border-bottom: 0px solid DarkGreen;
position: relative;
}
.navigation-link:before {
content: "";
position: absolute;
height: 3px;
bottom: 0;
left: 50%;
right:50%;
background:DarkGreen;
transition: all ease-in-out 300ms;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover::before,.navigation-link.active:before {
left: 0;
right:0;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
<a href="#" class="navigation-link active" >Accueil</a>
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can use a pseudoelement instead of border.
To make it start from the middle, set left or right at 50% and give the pseudoelement a width of 0. On transition just increase the width to 50% and it will grow in that direction.
Adjust the left or right setting from 50% to 0, and increase the width to make it span the entire link.
* {
margin: 0px;
font-family: Futura;
font-weight: 100;
-webkit-font-smoothing: antialiased;
color: white;
}
body {
background-image: url("../Media/body-bg.png");
}
/* NOTE: Class */
.navigation-box {
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
.navigation-menu {
margin: 6px 15px;
float: left;
color: white;
}
.navigation-link {
padding: 6px 10px;
font-weight: 100 !important;
font-size: 23px;
padding-bottom: 12px;
text-decoration: none;
transition: left 2s, all ease-in-out 300ms;
position: relative;
}
.navigation-link:after {
content: '';
position: absolute;
left: 50%;
width: 0;
bottom: 0;
height: 2px;
background: darkgreen;
transition: width 300ms ease-in-out;
}
.navigation-link:hover {
color: Wheat;
}
.navigation-link:hover:after {
width: 50%;
}
.vline {
border-left: 2px solid white;
padding-bottom: 6px;
margin: 0px 0px 0px 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>Cabinet Psychologie | 15ème</title>
<link href="./Data/CSS/styling.css" rel="stylesheet" type="text/css">
</head>
<body noresize="noresize">
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil
<a class="vline"></a>
Cours
<a class="vline"></a>
Plans
<a class="vline"></a>
Plus
</h1>
</div>
</body>
</html>
You can achieve this by using :after or :before pseudo elements and by adding transform and transition property to it.
.navigation-box{
height: 60px;
width: 100%;
background-color: MediumSeaGreen;
position: fixed;
z-index: 1;
min-width: 800px;
}
a.navigation-link{
position: relative;
color: #000;
text-decoration: none;
}
a.navigation-link:hover {
color: #000;
}
a.navigation-link:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #000;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a.navigation-link:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
<div class="navigation-box">
<h1 class="navigation-menu">
Accueil<a class="vline"></a>
Cours<a class="vline"></a>
Plans<a class="vline"></a>
Plus
</h1>
</div>