#keyframes not working in expected way CSS - html

I'm recoding this website for practice purposes. I've changed the background image to black in my codepen because images don't work in codepen. Here's a link to my code. I've also placed the code here in case you can't view the codepen:
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" type="text/css" href="reset.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<title>Coming Soon</title>
</head>
<body>
<div class="background">
<h2 class="logo">Logo</h2>
<div class="dropdownwrapper">
<h1 class="bigtext">Coming Soon</h1>
</div>
<hr class="divider">
<h4 class="smalltext">35 days left</h4>
</div>
</body>
</html>
STYLES.CSS
body {
background-color: white;
font-size: 10px;
}
.background {
animation-name: fadeout;
animation-duration: .8s;
background-image: url(Images/forestbridge.jpg);
background-size: cover;
background-position: top;
animation-fill-mode: backwards;
height: 100vh;
font-family: "Raleway", sans-serif;
}
.logo {
color: white;
font-weight: 100;
font-size: 1.5rem;
padding: 1rem 0 0 1rem;
}
.bigtext {
color: white;
text-transform: uppercase;
font-size: 4rem;
text-align: center;
padding-bottom: 1rem;
}
.dropdownwrapper {
animation-name: dropdown;
animation-duration: .8s;
animation-fill-mode: forwards;
}
.divider {
border: none;
width: 20%;
height: 1px;
background-color: lightgrey;
margin-bottom: 1.5rem;
}
.smalltext {
color: white;
font-size: 1.25rem;
text-align: center;
}
#keyframes fadeout {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes dropdown {
0% {
margin-top: 10vh;
}
100% {
margin-top: 40vh;
}
}
I also have a reset.css, but it's just a standard Eric Meyer 2.0 reset (I've placed it in the codepen, though). My problem is that when you reload the W3Schools version I'm attempting to recode, the text "COMING SOON" comes down, and the line and "35 days left" text stay in place. However, in my code, the entire block of text comes down. Why is the "COMING SOON" text on my site not coming down by itself when I've only selected it's parent div that the other elements are in? How can I make it so that only the "COMING SOON" text comes down?
Thanks,
Lyfe

This is happening because you are animating the margin-top of the COMING SOON text. Since the element is in the normal document flow, animating the margin gives the impression that the elements after the COMING SOON are also being animated, even though they are not. To resolve this, you should be animating using transform, which manipulates an element's position in place. Check out the forked codepen.
Additionally, if you wish to centre the entire block of text in the centre of the page, you should wrap all of it an div and position it absolutely. I've forked another codepen to demonstrate this.
The slide down effect appears more profound in the second codepen.

Related

Background covering the whole page (CSS)

I just switched from VSC to Adobe Dreamweaver and i don't know if I should keep it or not; but that's besides the point.
When I try to add a background to some text, it fills the whole screen with the background with the background, and if I try to change the width it only adds on to the background which is filling the whole screen.
I don't know if it's user error, something changed in HTML/CSS overnight or if it's because of the Dreamweaver display box thing on the top of my screen
#charset "utf-8";
* {
margin: 0;
padding: 0;
}
.Container {
padding: 25%;
padding-left: 50%;
padding-right: 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
margin: 0;
}
body {
background-image: url(http://www.incomeactivator.com/images/freebg5.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="file:///C|/Users/REDACTED/Documents/style.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/comfortaa:n3:default.js" type="text/javascript"></script>
</head>
<body>
<div class="Container">
<h1>Hello</h1>
</div>
</body>
</html>
p.s: let me know if you need a ss of the results I get.
Instead of using the class, you can change the texts background color by adding
background-color: rgb(255, 236, 139)
in the h1 tag
Demo:
YOURTEXT
It should work as expected if you apply the css to the H1 tag:
.Container h1{}
You have used padding property incorrectly. Reference
Correct syntax: padding: top right bottom left
padding:0 50% 0 50%;
So the css should be:
.Container{ margin: 0; }
.Container h1{
padding:0 50% 0 50%;
font-family: comfortaa;
font-style: normal;
font-weight: 600;
color: white;
background: #00C3FF;
}

How to make responsive navbar hamburger icon work properly without extending with more than 100vw?

Hi there i was working on my project and really wanted to make a responsive navbar with hamburger icon on the right side. To make this happen i was following a tutorial on youtube for making it.
Everything really went fine until I tested that code on my mobile device once it got deployed online.
I really got an issue. Please check the demo of this project here and link of actual site : http://navbar-collfm.s3-website-us-east-1.amazonaws.com/ (try viewing it in mobile view)
If i double tap the screen, it just gets zoomed out and everything looks weird and height extends more than 100vh and same goes for width as well.
What changes should I make in following code to make it work correctly?
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">
<h3>College Facemash</h3>
</div>
<ul class="nav-links">
<li>Home</li>
<li>About</li>
<li>Login / Signup</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script>
const navslide = () =>{
const burger = document.querySelector('.burger')
const nav = document.querySelector('.nav-links')
const navLinks = document.querySelectorAll('.nav-links li')
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active')
navLinks.forEach((link, index) => {
if(link.style.animation){
link.style.animation = '';
}else{
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
burger.classList.toggle('toggle')
})
}
navslide();
</script>
</body>
</html>
and Style.css
#import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav{
display:flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color:#512da8;
}
.logo{
color:white;
font-size: 1.5rem;
}
.nav-links{
display:flex;
justify-content:space-around;
width: 35%;
}
.nav-links li{
list-style: none;
}
.nav-links a{
text-decoration: none;
color: white;
font-weight:bold;
font-size: 1rem;
}
.burger{
display:none
}
.burger div{
width:25px;
height: 2px;
margin:5px;
background-color: white;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px){
.nav-links{
width: 40%;
}
}
#media screen and (max-width: 640px){
body{
overflow-x: hidden;
}
.nav-links{
position:absolute;
right: 0px;
height: 92vh;
top:8vh;
background-color: #512da8;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-out;
}
.nav-links li{
opacity: 0;
}
.burger{
display: block;
cursor: pointer;
}
.nav-active{
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1{
transform: rotate(-45deg) translate(-5px,5px);
}
.toggle .line2{
opacity: 0
}
.toggle .line3{
transform: rotate(45deg) translate(-5px,-5px);
}
}
Use the <meta /> tag for viewport to control this. To disallow any zoom on the page, set the minimum and maximum scales to 1.00 each along with user-scalable=no and target-densityDpi=device-dpi (to avoid browser misbehavior on high density screens like retina displays). Replace your meta tag with the below:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
Note: Although this feature is widely supported across mobile platforms, limiting minimum/maximum boundaries cannot be simply guaranteed to work on every platform.
You can also check the viewport CSS descriptor which support min-zoom and max-zoom according to a working draft on css device adaptation. Again, reliability on this should be lower compared to the former approach.

hero image not showing

I am having trouble getting the hero image and the background to show up. The files are in the same folder, with images, css, and javascript folders for those files. HTML is in main folder, others are sub-folders. I am using code I found at w3schools that looks like it should work, but I cannot get the images to show. The backup background color does show up.
I read several threads that suggested removing the ", adding a / or .../ to path name, I checked the file name and extension and nothing has worked.
What did I do wrong?
Here is my code:
html {
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
background-image: url("/images/funky-lines.png");
background-color: #cccccc;
}
.hero-image {
background-image: url("/images/the-road.jpg");
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
article,
aside,
footer,
header,
nav,
section {
display: block
}
nav {
font-family: 'Source Sans Pro', sans-serif;
font-size: 36px;
}
h1 {
font-size: 2em;
margin: .67em 0
}
a {
background-color: transparent;
-webkit-text-decoration-skip: objects
}
b,
strong {
font-weight: inherit
}
b,
strong {
font-weight: bolder
}
small {
font-size: 80%
}
img {
border-style: none
}
button,
input,
optgroup,
select,
textarea {
margin: 0
}
menu {
display: block
}
[hidden] {
display: none
}
<!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">
<title>Dorcraft Industries | Fallout 4</title>
<meta name="description" content="Discussion of Fallout 4">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?
family=Indie+Flower|Rokkitt|Source+Sans+Pro:700" rel="stylesheet">
</head>
<body>
<div class="hero-image">
<div class="hero-text">
<h1 style="font-size:50px">Dorcraft Industries</h1>
<h3>in Fallout 4</h3>
</div>
</div>
<!-- <header><img src="images/banner.jpg" alt="Dorcraft Industries banner
image">
</header> -->
<nav>Home | The Game | Characters | About Us</nav>
<div>
<p>Is anything working?</p>
</div>
</body>
</html>
Ok, I changed the links to add two dots (..) in front of the URL and that seems to work. The examples I saw on W3Schools and in answers here showed three dots (...) and that did NOT work.
Thanks, that seems to have solved it.
Reading your post, your current folder structure is as below.
folder/
index.html
css/
style.css
images/
image1.jpg
image2.jpg
etc
js/
main.js
So when you try to use any image in your css you should add ../ in front of any url directing to an image. This ensures that the file will start looking from one folder up, instead of the current folder.
i.e.
background-image: url("../images/image1.jpg")

Positioning of CSS image div

EDIT: Fixed it, I am daft. It was because h1 is below the div.
So I was making some web page for a school project and I keep running into this annoying problem, I am trying to make an image gallery on the page with multiple thumbnails all in ordered categories on a page. e.g. since it is video game themed it should be like heroes and maps. Problem is when I place an image, the image pushes the text I had at the top of the screen under it, probably a really simple solution to this just need a bit of help. thanks. here is the link
CSS:
#font-face {
font-family: bigNoodle;
src: url(Font/big_noodle_titling_oblique.ttf);
}
#splash {
z-index: 100;
position: absolute;
background: white url('Pictures/logo.png') center no-repeat;
top: 0;
right: 0;
left: 0;
bottom: 0;
font-family: bigNoodle;
color: #939393;
padding: 10px;
font-size: 40px;
}
body {
background: url('Pictures/bg.jpg') center fixed no-repeat;
}
h1 {
z-index: 1;
font-family: bigNoodle;
text-align: center;
text-transform: uppercase;
font-size: 60px;
color: #F99E1A;
padding-top: 10px;
margin: 0;
padding: 0;
}
div.picture img {
height: 200px;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type='text/javascript' src='anim.js'></script>
<title>Wiki</title>
<link rel="icon" type="image/x-icon" href="Pictures/logo.png" />
</head>
<body>
<div id="splash">Click to continue...</div>
<div class="picture">
<img src="Pictures/Heroes.jpg">
</div>
<h1>Welcome</h1>
</body>
</html>
You can achieve it in multiple ways
Way 1:
You can apply z-index for text
for instance text 'welcome' is there inside h1
h1
{
z-index:999;
}
way 2:
take your image as background of div
https://jsfiddle.net/ogyk1914/

linear-gradient doesn't work when applied to body

When I apply a linear gradient to the body in CSS like below
body
{
background: linear-gradient(#10416b, black);
}
It doesn't apply it to the entire web page, instead what happens is it is applied to the first half of the page, and then starts over from blue to black for the second half, (#10416b is a blue color). Adding in height:100%; to the body doesn't change anything.
I fixed the problem by doing the below in CSS
.background {
background: linear-gradient(#10416b, black);
height: 100%;
}
and this in HTML
<!DOCTYPE html>
<html class="background">
// lots of unrelated code in between the tags
</html>
But I still don't understand why setting the background with the linear gradient in the body didn't work. If somebody could explain this to me that would be great.
Use 100vh instead of 100%
body {
height: 100vh;
background: linear-gradient(#10416b, black);
}
https://jsfiddle.net/r77r0cco/1/
body in and of itself doesn't have a height, so it looks to its parent element <html> which, because it has no content, also has no height.
vh uses the viewport dimensions instead of a parent element's
The body has no height of it's own as such without the HTML having a height or the body containing content.Then the gradient will repeat because repeat is the default in the background shorthand property.
html {
height: 100%;
}
body {
background: linear-gradient(#10416b, black);
}
Firstly, I'd like to thank #Paulie_D who inspired me to come up with this answer.
Below you can see 2 methods to get your body have a gradient background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
html {
min-height: 100%; /* Unlike 'height', which is used by
#Paulie_D, this will make your webpage
automatically resize when it exceeds
the 100% height, thus it won't start the
gradient over
*/
}
body {
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">Hover and scroll!</div>
</body>
</html>
This method will automatically resize the gradient to fit the whole content.
If you want the gradient to be the size of the window height, you can use a `::before` pseudoelement on `body`, to draw a fix-positioned gradient with a `z-index` of `-1`. Like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My awesome webpage</title>
<style>
body::before {
content: "";
background: linear-gradient( 180deg,
#C0C0AA 0%,
#1CEFFF 100%
);
top: 0;
bottom: 0;
left: 0;
right: 0;
position: fixed;
z-index: -1;
}
/***** Content design *****/
#hello {
font-family: sans-serif;
font-size: 5em;
text-align: center;
color: #424242;
text-shadow: 0 0 1rem darkgray;
transition: 0.25s;
}
#hello:hover {
font-size: 100vh;
color: darkgray;
}
</style>
</head>
<body>
<div id="hello">
Hover and scroll!
</div>
</body>
</html>
Sorry, I don't usually answer Stack Overflow questions, but this was a top result of a Google query, so I couldn't resist. If you can improve this answer, please request an edit.