im try to make my portfolio page for a few days. i'm new in html and css. but im stuck at animations. first i created my site in figma. (i added to reference image) the all i want is when you hover to portfolio text the gradient change with effect. i wrote some codes in html css but it isn't working. code is here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>utkubahceci</title>
<link rel="stylesheet" type="text/css" href="main.css">
<style>
body {
font-family: 'Poppins', sans-serif;
font-size: 36px;
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<div>
<p>portfolio</p>
</div>
<div>
<p>about me</p>
</div>
</div>
<script>
const portfolio = document.querySelector('.container > div:first-child');
const body = document.body;
portfolio.addEventListener('mouseenter', () => {
body.style.background = 'conic-gradient(from 180deg, #000, #fff)';
body.style.transition = 'background 400ms ease-out';
});
portfolio.addEventListener('mouseleave', () => {
body.style.background = 'conic-gradient(from 180deg, #fff, #000)';
body.style.transition = 'background 400ms ease-out';
setTimeout(() => {
body.style.transition = 'background 400ms ease-in-out';
}, 50);
});
</script>
</body>
</html>
body {
height: 100vh;
width: 100vw;
margin: 0;
background: conic-gradient(from 180deg, #fff, #000);
background-repeat: no-repeat;
background-size: auto;
overflow: hidden;
}
.container {
height:100vh;
width:100vw;
display:flex;
}
.container > div {
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}
.container > div:last-child p {
color: rgb(255, 255, 255);
}
.container > div:first-child:hover p {
color: #fff;
}
this is how it should look like
Related
I wanted to start creating a simple website and I am working on the navigation bar and the body now.
Here is the code and later on I will explain the issues.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
#p1 {
float: right;
}
#p2 {
float: right;
}
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<body>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
ISSUE 1:
The links are swapped, no matter what I did. Navigation link 1 and 2 are floated right, but navigation link 1 always ends up on the right, no matter how much I twist and turn the code.
ISSUE 2:
The navigation is clearly outside of the body but it still floats at the right side of the body and not of the entire html tag or the website.
ISSUE 3:
The body appears over the navigation bar, although it should definetely be under it.
This is driving me absolutely insane and i am looking for solutions.
Thanks in advance
You have some elements outside of <body></body>
do you really need float: right for the inside the .navbar?
since you are using percentage dimensions for the body, you'll need specify size of it's parent html element as well.
html {
font-family: poppins, "Open Sans", "Inter", Arial, Helvetica, sans-serif;
background-image: url("river-bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
}
.navlink {
font-size: 1em;
padding: 1em;
text-decoration: none;
color: #fff;
background: rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in;
}
#navbar {
float: right;
padding: 3em;
}
.navlink:hover {
background: rgba(0, 0, 0, 0)
}
/*
#p1 {
float: right;
}
#p2 {
float: right;
}
*/
body {
width: 80%;
height: 100%;
margin-top: 5em;
margin-bottom: 5em;
}
#main-content-wrapper {
width: 100%;
height: 100%;
background: #00f100;
}
/* added */
#navbar {
display: flex; /* removes gap between children */
}
html
{
width: 100vw;
height: 100vh;
background-color: pink;
}
body
{
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="navbar">
page1
page2
</div>
</header>
<div id="logospace"></div>
<div id="main-content-wrapper">
b
</div>
</body>
</html>
This question already has answers here:
How to remove the stripes that appears when using linear gradient property [duplicate]
(2 answers)
Closed 2 years ago.
I have a problem with my CSS gradient background... When I only had the <body>, the gradient background looked perfect on it, but now that I have added new HTML elements with CSS code, it looks like repeated:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Topiks Quizz</title>
</head>
<body>
<header>
<h1>Topiks Quizz</h1>
<nav>
<ul>
<li>Inicio</li>
</ul>
<ul>
<li>Categorías</li>
</ul>
</nav>
</header>
<section id="container">
<article>
<div class="card">
<img src="./assets/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><b>John Doe</b></h4>
<p>Architect & Engineer</p>
</div>
</div>
</article>
</section>
</body>
</html>
#font-face {
font-family: NotoSans;
src: url(./assets/fonts/NotoSans-Regular.ttf);
}
* {
font-family: NotoSans;
margin: 0;
padding: 0;
}
body {
background: rgb(174,238,187);
background: linear-gradient(22deg, rgba(174,238,187,1) 0%, rgba(162,222,236,1) 47%, rgba(148,233,212,1) 100%);
}
header {
background-color: rgba(255, 255, 255, 30%);
width: 100%;
height: 50px;
}
header h1 {
float: left;
}
header nav ul {
list-style: none;
float: right;
padding: 10px;
}
.card {
margin: 30px 30px;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 200px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
Background for body is set just for its content height (shorter than viewport). Add min-height: 100vh to body.
body {min-height: 100vh}
Just add min-height: 100vh; in body CSS
Your Body CSS will look like Below
body {
background: rgb(174,238,187);
background: linear-gradient(22deg, rgba(174,238,187,1) 0%, rgba(162,222,236,1) 47%, rgba(148,233,212,1) 100%);
min-height: 100vh;
}
you need to add :
body {
min-height: 100vh;
}
I mean I wrote some code. It appears perfectly on 1920x1080 screen, but my friend said he doesn't see the top of the website (he has smaller resolution screen) unless he decrease the scale of the page from 100% (normal) to 50%.
Of course it's smaller so its not good. There is any possibility to make it correct if everyone wants to check my webpage scale my object correctly to their resolution automatically?
Here is my code:
.grey {
background-color: rgba(30, 32, 29, 0.5);
}
.brown {
background-color: rgba(85, 41, 0, 0.6);
}
.red {
background-color: rgba(255, 0, 0, 0.4);
}
.purple {
background-color: rgba(152, 0, 255, 0.4);
}
.blue {
background-color: rgba(0, 0, 255, 0.4);
}
.yellow {
background-color: rgba(255, 255, 0, 0.3);
}
/* CSS reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 100%;
}
body {
height: 100vh; /* középre rendezés */
display: flex; /* középre rendezés */
align-items: center; /* középre rendezés */
justify-content: center;/* középre rendezés */
background: url('http://www.galaxyradio.es/wp-content/uploads/2016/09/Galaxy-Background.jpg') no-repeat center center fixed; /* teljes nagítású háttér */
background-size: cover;/* teljes nagítású háttér */
}
#head, #headstory {
text-align: center; /* középre rendezés szöveg*/
}
#head {
margin: 0 auto;
}
img {
margin-top: -60px;
width: 19%;
height: 19%;
border-radius: 50%;
padding: 1px;
background-color: #666;
filter: grayscale(50%);
transition: all 0.5s ease-in-out;
}
img:hover {
filter: grayscale(20%);
transform: scale(1.1);
}
#profile-card {
background-color: hsla(0, 0%, 100%, .5);
border-radius: 4px;
box-shadow: hsla(0, 0%, 0%,0.9) 10px 10px 80px;
}
#music-title {
text-align: center;
color:rgba(255,255,255,.8);
font-size: 20px;
}
#contacts {
text-align: center;
}
#media (max-height: 850px) {
body {
height: initial;
}
#profile-card {
margin-top: 60px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div id="profile-card" class="grey">
<div id="head" class="">
<div id="imgsen" class="">
<img src="http://kepkezelo.com/images/ljookd6qf43392rycg01.jpg" alt="coder">
</div>
<div id="headlines" class="">
My name is
<p> <h1>Junior Elliot</h1><p>
My job is
<p> <h3>Learn programming</h3>
From
<p> <h2><i class="fa fa-map-marker"></i> Don't tell anyone <br>but i dont even know.</h2>
</div>
<div id="headstory" class="">
"Learn from every mistake you made. Adapt and Evolve".
</div>
<div id="music-title" class="grey">
<h2>my music</h2>
</div>
<div id="youtubelink" class="g">
<iframe width="640" height="360" src="https://www.youtube.com/embed/kDqdM7wLVns" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div id="contacts" class="">
You can contact me via
<p> Telepathy </p>
</div>
</div>
</body>
</html>
Use "media query" that will help you to learn better Web designing....learning Bootstrap is a good thing but when you are good with css then go for Bootstrap that will help you learn better design...
Check here how media query works
Resolved! Thanks to #Shomz
Resolved by adding 100% height to html and body.
html, body, #background {
height: 100%;
}
Original Question
So I have a div containing a background-image, the image however does not cover the bottom of the screen, it seems to always follow the height of another div, here's an image of my problem (Colour Code: WHITE = div class="content",BLACK = div id="background",BLUE=What div id="background" should be covering.)
This is what I want to above image to look like
Also, sorry if it sounds confusing, I'm in a rush! Here's the source code;
HTML;
<!DOCTYPE html>
<html>
<head>
<title>PROJECT_SPACE</title>
<!--add the styling-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--change background script-->
<script>
$(switchBackground);
var oFReader = new FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function(oFREvent) {
localStorage.setItem('b', oFREvent.target.result);
switchBackground();
};
function switchBackground() {
var backgroundImage = localStorage.getItem('b');
if (backgroundImage) {
$('#background').css('background-image', 'url(' + backgroundImage + ')');
}
else {
$('#background').css('background-image', 'url("img/grass_side.png")');
}
}
function loadImageFile(testEl) {
if (! testEl.files.length) { return; }
var oFile = testEl.files[0];
if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(oFile);
}
function removeImageFile()
{
localStorage.removeItem('b');
switchBackground();
location.reload();
}
</script>
</head>
<body>
<!--navigation-->
<ul class="nav">
<li>Home</li>
<li>Projects</li>
<li>Skins</li>
<li>Packs</li>
<li>Servers</li>
<li>Forums</li>
</ul>
<!--end navigation-->
<div id="background">
<div class="content">
<input id="test" type="file" onchange="loadImageFile(this)" />
<button type="button" onclick="removeImageFile()">Clear background</button>
</div>
</div>
</body>
</html>
CSS:
body{
background-color: #82b2ff;
}
.logo {
width: 50px;
height: 50px;
background-color: #000;
}
/*fonts*/
#font-face { font-family: cool; src: url('../fonts/coolvetica.ttf'); }
/*background*/
#background {
height: 100%;
}
/*content -- where all site content will go */
.content {
background-color: #fff;
margin-left: auto;
margin-right: auto;
width: 80%;
height: 700px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
/*navigation*/
.nav{
border:1px solid #ccc;
border-width:1px 0;
list-style:none;
margin:0;
margin-top: 150px;
padding:0;
text-align:center;
list-style: none;
background-image: url('../img/sandstone_smooth.png');
background-repeat: repeat;
font-family: cool;
}
.nav li{
display:inline;
}
.nav a{
display:inline-block;
padding:10px;
text-decoration: none;
color: #fff;
font-size: 20px;
letter-spacing: 4px;
}
.nav a:hover {
color: #E0E0E0;
}
/*links*/
a:link {
color: #fff;
}
/* visited link */
a:visited {
color: #fff;
}
/* mouse over link */
a:hover {
color: #fff;
}
/* selected link */
a:active {
color: #fff;
}
The following rules should fix your background:
html, body, #background {
height: 100%;
}
Based on the screen layouts you've displayed above, I'd be tempted to simply declare the body background-color: black:
body {
background-color: rgba(0,0,0,1);
}
If you need to, you can also give the .nav a padding-top: and (possibly) a position: absolute;.
That seems to me the most straightforward way to reproduce your desired screen layout above.
Do you think that will work for you?
I am trying to create an overlay box and want the whole background to be masked.
However, the mask is only covering the body of the page. I want the mask to extend to the edge and top of the page.
Is there a way to manually position the mask to cover the entire page?
Thank you.
CSS:
body
{
background-color: #C75656;
text-align:center;
font-size:16px;
font-variant:small-caps;
font-family:Lucida,Helvetica,sans-serif;
font-weight:500;
text-decoration: none;
position: absolute;
left: 50%;
width: 780px;
margin-left: -390px;
}
#middleContainer {
width:780px;
margin: 5px auto;
padding: 10px 0;
}
.box {
background:white;
border-style:solid;
border-width:1.5px;
border-color:#071419;
border-radius: 12px;
-moz-border-radius: 12px;
}
.modal {
background-color:#fff;
display:none;
width:700px;
padding:15px;
text-align:left;
border:2px solid #333;
opacity:0.8;
-moz-border-radius:6px;
-webkit-border-radius:6px;
-moz-box-shadow: 0 0 50px #ccc;
-webkit-box-shadow: 0 0 50px #ccc;
}
.modal h2 {
margin:0px;
padding:10px 0 10px 45px;
border-bottom:1px solid #333;
font-size:20px;
}
HTML:
<!DOCTYPE html>
<html lang='en'>
<head>
<title>mySITE</title>
<!-- Meta tags go here -->
<!-- Links to Icon, favicon, css, jquery, ajax, etc. -->
<link rel='stylesheet' type='text/css' href='default.css' />
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<script>
$(document).ready(function() {
var triggers = $(".modalInput").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.5,
},
});
$("#login form").submit(function(e) {
triggers.eq(1).overlay().close();
var input = $("input", this).val();
triggers.eq(1).html(input);
return e.preventDefault();
});
});
</script>
</head>
<body>
<span><h1>my<font color="red">SITE</font></h1></span>
<a class="modalInput" rel="#login">Login</a>
<div id="middleContainer" class="box">
<div id="title">Content</div>
</div>
<div class="modal" id="login">
<h2>Login or Regester.</h2>
<form>
<input />
<button type="submit"> OK </button>
<button type="button" class="close"> Cancel </button>
</form>
<br />
</div>
</body>
</html>
This is what i am using for all my projects
<style>
.mask {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:1000;
opacity: 0.5;
}
.overlay {
position: absolute;
width: 300px;
height: 200px;
top: 100px;
left: -50%;
margin-left: -150px;
background: white;
z-index: 1001
}
</style>
<div class="mask"></div>
<div class="overlay"></div>
Put this in the head of your document
<style type="text/css" media="all">
.mask {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2000px;
background: black;
opacity: 0.5;
}
</style>
And then put
<div class="mask"></div>
anywhere in your html, but I would put it at the top or the bottom. Because it is absolutely positioned, it really doesn't matter.