I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #4074A0;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
box-shadow: none;
}
* {
outline: none;
border: none;
box-shadow: none;
text-shadow: none;
}
main {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
p {
text-align: center;
font-size: 250%;
width: 100%;
color: white;
text-transform: uppercase;
text-shadow: 0px 3px #098FA8;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Testing</title>
<link rel="stylesheet" href="style.css">
<link href="css/animate.css" rel="stylesheet" />
<link href="css/waypoints.css" rel="stylesheet" />
</head>
<body>
<main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
<p>Hello!</p>
</main>
</body>
</html>
So, I am trying to get the 'Hello!' text to bounceIn from the top, I have previously done this and have even copied the code from that old document, however, it doesn't seem to want to work on this one.
I've done some looking online but there doesn't seem to be much about this topic.
Any help is appreciated!
Thank you.
Related
I was working on a dummy practice site and I tried using an anchor tag with an image so that I could have hyperlink from that image but whenever I try to change the position of the image using its position property(Relative). It just creates a invisible link of same size elsewhere on the screen. I tried multiple things but it keeps happening. Unless I move it using position: absolute . Help. Thanks in advance. ;)
[and I know it creates an invisible hyperlink of same size because of the pesticide extension which allows me to see all the elements on the screen.]
I guess the problem occurs when I try to move the image to a different location but I don't know why it is happening.[ And please ignore my inefficient code, started Web development couple of days ago ;)]
body{
margin: 0;
background-color: #222831;
}
nav{
background-color: #ebebeb;
position: relative;
padding: 5px;
}
nav .icon{
margin: 0;
display: inline-block;
margin: 5px 0 0px 10px;
color: #121212;
height: 25px;
width: 25px;
}
.search-bar{
position: relative;
bottom: 7px;
left: 10px;
background: url(../Images/search-icon.png) no-repeat scroll 2px 2px;
padding-left:30px;
width: 400px;
}
nav h1{
display: inline-block;
position: relative;
left: 10%;
}
.profile-pic{
margin: 0;
position: absolute;
color: #121212;
height: 30px;
width: 30px;
right: 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../CSS/home.css">
<link rel="icon" href="../Images/menu.png">
<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>Home</title>
</head>
<body>
<nav>
<img src="../Images/menu.png" alt="SQUARE LOGO" class = "icon">
<input type="text" class="search-bar" id="search-bar">
<h1>SQUARE</h1>
</nav>
<img class="profile-pic" src="../Images/user.png" alt="Profile Picture" href="index.html "> <!-- This is the code producing error--!>
</body>
</html>
you don't need to use relative as the absolute positioning will default relative to the body. You do need to add left or top to the absolute element
body{
margin: 0;
background-color: #222831;
}
nav{
background-color: #ebebeb;
padding: 5px;
}
nav .icon{
margin: 0;
display: inline-block;
margin: 5px 0 0px 10px;
color: #121212;
height: 25px;
width: 25px;
}
.search-bar{
bottom: 7px;
left: 10px;
background: url(../Images/search-icon.png) no-repeat scroll 2px 2px;
padding-left:30px;
width: 400px;
}
nav h1{
display: inline-block;
}
.profile-pic{
margin: 0;
position: absolute;
color: #121212;
height: 30px;
width: 30px;
right: 200px;
left:50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="../CSS/home.css">
<img src="https://via.placeholder.com/50">
<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>Home</title>
</head>
<body>
<nav>
<img src="https://via.placeholder.com/50" alt="SQUARE LOGO" class = "icon">
<input type="text" class="search-bar" id="search-bar">
<h1>SQUARE</h1>
</nav>
<img class="profile-pic" src="https://via.placeholder.com/25" alt="Profile Picture" >
</body>
</html>
This question already has answers here:
Center one and right/left align other flexbox element
(11 answers)
Closed 10 months ago.
I want the Life's Good logo on the left side in the nav bar. If I put it in the class "btn" it also gets the animation and I can't place it on the left side. Can anybody help me please? Here's my Code with an example where I want the logo (marked in Yellow):
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: relative;
margin-top: px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Yellow Area is where i want the Logo ("Life's Good")
You are missing a number next to px in margin-top of #main. You may also want a margin-left value.
If you want to exclude the animation from that specific element, put the animation in a :not() CSS selector to deselect #main.
.btn:before:not(#main)
Set position: absolute for the #main element. Since .nav-bar's position is set to relative, #main will be absolutely positioned in relation to its parent, which is .nav-bar.
Now just set the margin of #main to suit your requirement. I've set it to margin: 15px 0 15px 75px (margin: top right bottom left) for reference.
* {
padding:0;
margin: 0;
}
body {
font-family: "Roboto";
color: #fff;
letter-spacing:1px;
}
a {
text-decoration: none;
}
.nav-bar {
padding-top: 18px;
background: #ffffff;
padding-bottom: 50px;
position: relative;
text-align: center;
color: black;
}
#main {
position: absolute;
margin: 15px 0 15px 75px;
text-align: left;
}
.btn{
display: inline-block;
padding: 15px 40px;
cursor: pointer;
letter-spacing: 2px;
position:relative;
overflow:hidden;
margin: 0 1px;
outline: none;
}
.btn:before {
content: "";
position: absolute;
width: 0;
background : rgb(0, 0, 0);
left: 45%;
height: 2px;
bottom: 0;
transition: all .3s;
opacity: 0.7;
}
.btn:hover:before {
width: 100%;
left:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Life's Good</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/stylesheet.css">
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="icon" href="images/favicon.png">
</head>
<body>
<div class="nav-bar">
<div id="main"><img src="images/logos/8870080_sunny_sun_beach_cloud_icon (3).png" alt="">Life's Good</div>
<div class="btn">Home</div>
<div class="btn">News</div>
<div class="btn">Gaming</div>
<div class="btn">Books</div>
<div class="btn">Coding</div>
<div class="btn">Contact</div>
</div>
</body>
</html>
Hi im a begginer web developer and im making a practice.I want to change my span's label color when i hover to "container" ( btw i also want to change my border's properties as you can see in my code (container :hover))
I hope I explained myself well
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body{
background-color: #14213d;
margin: 0;
}
.container li{
list-style: none;
}
.container{
border: 2px solid #fca311;
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
.container:hover{
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
background-color: #43aa8b;
}
#mainm:hover{
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
Move the container styles to #mainm and add the color: white; to :hover.
Make note of the other styles I changed to clean it up a bit. I added text-align: center; to the id and removed the height. Instead of a fixed height just use padding.
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#300&display=swap');
/* font-family: 'Open Sans', sans-serif;*/
body {
background-color: #14213d;
margin: 0;
}
.container li {
list-style: none;
}
.container {
width: 100%;
height: 100%;
}
li#mainm {
border: 2px solid #fca311;
width: 400px;
padding: 30px 0px;
position: relative;
left: 720px;
top: 400px;
}
#mainm {
font-family: 'Open Sans', sans-serif;
color: #e63946;
font-size: 25px;
text-align: center;
}
#mainm:hover {
transition: 2s;
border-radius: 15px;
border-color: #43aa8b;
color: white;
background-color: #43aa8b;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li id="mainm">Site Hazırlanma Aşamasında</li>
</ul>
</div>
</body>
</html>
:root {
--colorsame: #1e90ff;
}
.container{
border: 2px solid var(--colorsame);
width: 400px;
height: 100px;
position: relative;
left: 720px;
top: 400px;
}
#mainm{
font-family: 'Open Sans', sans-serif;
color: var(--colorsame);
font-size: 25px;
padding-left: 5px;
padding-top: 15px;
}
When I try to increase font size of placeholder in input tag, my button next to input tag doesnt align properly. I tried to remove outline and border but that dont work. When I decrease font size button goes up, when increase font size it goes down.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Thank for all your help.
If I'm understanding correctly you just want them to appear as a consistent row and stop acting as inline-block elements do by default and wrapping? If so you can utilize as shown below.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Rubik', sans-serif;
}
.header{
background: linear-gradient(90deg, #443e98 30%, #6086f3);
height: 300px;
position: relative;
}
.header h1{
text-align: center;
color: #ffff;
font-size: 40px;
font-weight: 500;
margin-bottom: 50px;
}
.search-bar{
position: absolute;
left: 50%;
transform: translateX(-50%);
/* Added CSS Below */
display: flex;
flex-direction: row;
}
.search-bar input{
width: 300px;
height: 50px;
font-size: 20px;
}
.search-bar button{
width: 50px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<title>IP Tracker</title>
</head>
<body>
<div class="header">
<h1>IP Address Tracker</h1>
<div class="search-bar">
<input type="text" placeholder="Search for any IP address or domain">
<button>›</button>
</div>
</div>
<div class="ip-bar"></div>
<div class="map-section"></div>
</body>
</html>
Try using the following CSS:
.search-bar{
display: flex;
align-items: center;
justify-content: center;
}
i'm working on doing a website and i can't seem to make my css apply and everything appears as plaintext to the side. i've been searching for over an hour, i can't figure out what i've done wrong.
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0"
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100%
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
here's the full text
You've missed the closing } in .sidenav. Because of this, all of the styles that come after this do not get applied. Adding this in correctly applies the styles that follow it.
In addition to this, you've also missed the closing > in your <meta name>, meaning your Google Font is not getting applied either.
Finally, your colours all have five characters. You either need to use 3 letters (shorthand) or 6 characters for the full hex value.
You can avoid these mistakes by validating your code with the W3 Markup Validation Service.
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>SOLAR RECORDS</title>
<meta name="viewport" content="width=device-width.intial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Jura" rel='stylesheet'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<style type="text/css">
body {
background-color: #0c0c0c;
padding: 0;
margin: 0;
}
.sidenav {
height: 100% width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111 overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
font-family: 'Opens Sans Condensed', sans-serif;
color: #ffffff;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #cccccc;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
img.center {
display: block;
margin: 0;
}
h1 {
font-size: 25px;
font-family: 'Jura', sans-serif;
color: #ffffff;
text-align: center;
}
</style>
</head>
<body>
<h1>SOLAR RECORDS™</h1>
<div style="text align: center"><img src="the.png" alt="Records"></div>
<div id="mySidenav" class="sidenav">
×
HOME
RELEASES
ARTISTS
EVENTS
MIXES
NEWS
LABEL
CONTACT
</div>
<span onclick="openNav()">OPEN</span>
</body>
</html>