I am new to building Web pages. Just for training, I made a really simple site but, I don't understand why I can't change text size.
If I delete background image code works, but I can't do that like this:
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="jquery/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("h1, p").addClass("dark");
$("div").addClass("important");
});
});
</script>
<style>
body,
html {
height: 100%;
}
#grad1 {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
p {
font-size: 28px;
}
.important {
font-weight: bold;
font-size: xx-large;
}
.dark {
color: dark;
}
</style>
</head>
<body>
<div id="grad1">
<div class="container">
<h1 align="center">Dzīves jēga</h1><br><br>
<p align="center"><dfn>“Dzīves jēga nav gaidīt, kad beigsies
negaiss..
bet gan iemācīties dejot lietū!”</dfn></p>
<button type="button" class="btn btn-lg btn-info">Izmaiņas ir
neizbēgamas</button>
</div>
</div>
</body>
I just cant figure this out siting here for 2 days.
The issue was because you did not have the closing bracket for #grad1 style.
Change style to -
#grad1 {
background-image: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full page/img(20).jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is the JS Fiddle
Related
Basically, I have created a parallax effect with 6 images with media queries for desktop and mobile. The images display fine in desktop mode. However, once I shrink my screen to mobile mode, some of the images just cut off and are not responsive. Because of this, I would like my parallax to only show 4 images on mobile view and the regular 6 images on desktop view. I have tried rearranging my code with my media queries to get this, but I can't seem to figure out a way. How can I do this so only the "viewable" images are only shown on mobile view? Any help is appreciated. Here is my code.
section.module h2 {
margin-bottom: 40px;
font-size: 30px;
}
section.module p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
}
section.module.content {
padding: 40px 0;
background-color: #AFC9F1;
}
section.module.parallax {
height: 800px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.module.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
line-height: 600px;
font-weight: 700;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-0 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
height: 100vh;
opacity: 0.65;
}
section.module.parallax-1 {
background-image: url("https://mms.businesswire.com/media/20170310005534/en/574694/5/NIO_EVE_04_Fr34.jpg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
/* Parallax Mobile */
#media (min-width: 200px) and (max-width: 899px) {
section.module.parallax-0 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-1 {
background-image: url("https://miro.medium.com/max/3840/1*LT87ktpOB50UhsrRJYjI5A.jpeg");
}
section.module.parallax-2 {
background-image: url("https://autodesignmagazine.com/wp-content/uploads/2017/03/2017031301_nio_eve.jpg");
}
section.module.parallax-3 {
background-image: url("https://www.nio.com/prod/s3fs-public/styles/tile_double_square_desktop_1x/public/2018-09/zip-eve-gallery-5.jpg?Agd8SYcynlrs7LqQu6N.GbrzxLw8vYJF&itok=hGg1N1lm");
}
section.module.parallax-4 {
background-image: url("https://cdn.vox-cdn.com/thumbor/bP1-Ysv4wJcYCMLrAoJv-T03Oto=/0x0:1920x1080/1400x1050/filters:focal(807x387:1113x693):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/53656791/EVE_005_Overhead.0.jpg");
}
section.module.parallax-5 {
background-image: url("https://cimg1.ibsrv.net/ibimg/hgm/1920x1080-1/100/595/nio-eve-concept-2017-sxsw_100595869.jpg");
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Parallax</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css' rel='stylesheet'>
</head>
<body>
<section class="module parallax parallax-0">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-1">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-2">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-3">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-4">
<div class="container text-center"></div>
</section>
<section class="module parallax parallax-5">
<div class="container text-center"></div>
</section>
<script src="script.js"></script>
</body>
</html>
You can play with background-size:contain on your section.module.parallax class for the mobile view. And for displaying images, you can put display: none on images you don't want to show on mobile.
If I understood you well.
Okay, okay. I know many people have asked this question on Stack Overflow, but the solutions don't work for me. So my problem is simple: how do I make the female-av-button and male-av-button have a background URL of female-avatar & male-avatar respectively? Here's my code:
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
// document.getElementsByClassName("user-input").style.height="500px";
function chooseanav() {
document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat";
}
</script>
</body>
</html>
Any help is greatly appreciated.
Thanks!
Change your code to be;
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
Oddly, unlike .getElementById() when you use .getElementsByClassName() you need to index the object. I think this is because IDs are unique where classes can be many.
The clue is in the getElement vs getElements.
EDIT: to answer your comment regarding clicking outside it etc you will have to change up your code a bit. Check my snippet below and let me know if anything doesn't make sense!
body{
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: black;
}
.avatars{
justify-content: center;
margin-left: 15%;
display: flex;
}
.choose-a-user-text{
font-family: 'Luckiest Guy';
font-size: 400%;
justify-content: center;
}
.choose-a-username{
margin-left: 25%;
}
.user-input{
margin-left: 29%;
}
.user-input:focus{
outline: none;
}
.female-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av-button:focus{
}
.male-av-button{
background: none;
border: none;
padding: 1px;
}
.female-av{
background: url('../img/female-avatar-silhouette.png') no-repeat;
width: 500px;
height: 700px;
}
.female-av:hover{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
.male-av{
background: url("../img/male-avatar-silhouette.png") no-repeat;
width: 500px;
height: 700px;
}
.male-av:hover{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Choose Your Character</title>
<link rel="stylesheet" href="css/avatar-page.css">
<link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet">
</head>
<body>
<div class="choose-a-username">
<h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2>
<input class="user-input" type="text" name="" value="" placeholder="username">
</div>
<div class="avatars">
<button type="button" class="female-av-button" name="button"><div class="female-av"></div></button>
<button type="button" class="male-av-button" name="button"><div class="male-av"></div></button>
</div>
<!-- <div class="avatars">
<div class="silhos">
<img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho">
<img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho">
</div>
<div class="avas">
<img src="img/male-avatar.png" class="avatar" alt="male avatar">
<img src="img/female-avatar.png" class="avatar" alt="female avatar">
</div>
</div> -->
<script type="text/javascript">
var femaleAV = document.getElementsByClassName('female-av')[0];
var maleAV = document.getElementsByClassName('male-av')[0];
document.addEventListener('click', function(e) {
if (e.target.className == 'female-av') {
femaleAV.style.background = "url('../img/female-avatar.png') no-repeat";
maleAV.style.background = "";
} else if (e.target.className == 'male-av') {
femaleAV.style.background = "";
maleAV.style.background = "url('../img/male-avatar.png') no-repeat";
} else {
femaleAV.style.background = "";
maleAV.style.background = "";
}
});
</script>
</body>
</html>
Basically, I have removed your onclick="" event from the female-av and have put an overall listener in the <script>. From here I have set 2 variables (Female & Male) and then an if-statement to check what is being clicked. Depending on what is being clicked it will either set/unset the female or male background respectively and if neither of the two are clicked it resets both.
There is a downside to this though, should the user click ANYWHERE else it means it will reset the selection. Example, if you select your MALE or FEMALE and then click to change your username you will see it deselects/resets.
To fix this, you can narrow the function like so;
document.querySelector('.avatars').addEventListener('click', function(e) {...})
That way it only listens to clicks inside the .avatars box.
I hope it's clear! If not, let me know and I'll try explain further!
You don`t have to use javascript to change it. You can use :focus directly in css.
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
So this way when the button is clicked you can keep the image or change the background color.But it returns to normal when clicked outside of the button.
This will make any element that has class female-av change its background on click
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
if you want only one specific element to have this behavior give it an id and use
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
Maybe have the image contained in the button itself and not the CSS.
Then have a JavaScript function that changes the image.
Or (the easier option) have a JS function that toggles the class containing the new image and the one with the old image (with the old image class already in there).
Say...
<html>
<style>
/* add this to <style> the css (exept the image links) */
.confirm {
background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat;
}
.unclicked {
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat;
}
</style>
<script>
/*add this to <script> block*/
function change() {
var btnImg= document.getElementById("btn")
btnImg.classList.toggle("confirm")
btnImg.classList.toggle("unclicked")
}
</script>
<div id="Copy this"></div>
<button class="unclicked" id="btn" onClick=change()></button>
</html>
The classes are so the background can be swapped and clicking it twice will result in the original image showing!
It does work for me, so I hope this helps!
Gypsy.jpg location (uploaded)
This will work:
//CSS
button {
background: blue;
}
<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button>
<script>
var putimage = function(i) {
// i is image url.
document.getElementById("this").style = 'background: url("' + i + '") space !important';
};
</script>
> I have this yellow box (with class="yellow-box") , and a small blue
box (with class="box-1") inside it. I need 12 times the same div in
HTML with JavascriptDOM - without hardcoding in HTML by typing 12
times the same div.
HTML code
<html>
<head>
<title>Match the box</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="boxGame.js"></script>
</head>
<body class="background-img">
<div class="yellow-box">
<div class="box-1"> </div>
</div>
</body>
</html>
.background-img {
background-image: url("fundal.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
.yellow-box {
background-color: yellow;
width: 850px;
height: 600px;
margin: auto;
top: 30px;
position: relative;
}
.box-1 {
background-color: blue;
width: 160px;
height: 120px;
float: left;
position: relative;
margin: 25px;
}
Add this code to your javascript file, or inside your script tag:
let outerDiv = document.querySelector('.yellow-box');
for(let i = 0; i++; i<=12 ){
let boxDiv = document.createElement('div');
div.setAttribute('class', 'box-1');
outerDiv.appendChild(boxDiv);
}
UPDATED The white bar is still there, however, the white bar is smaller and so is the image (the image is within the white bar) and the white bar stretches across the whole page. The white bar is above the particles.js and its background.
HTML:
<!DOCTYPE html>
<html>
<head>
<link href='css/style.css' rel='stylesheet' type="text/css">
<title></title>
</head>
<body>
<div id="wrapper">
<center>
<img class='' src='img/kaylumlogo.png'></img>
</center>
</div>
<div id="particles-js"></div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js">
</script>
<script src="js/index.js">
</script>
</body>
</html>
CSS:
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("http://i.imgur.com/5F64MpH.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
#wrapper {
border: 0;
width: 200px;
}
img {
width: 200px;
}
Some of your tags are not close, some are closed incorrectly.
We always close a link tag within the tag with "/"
<link ... />
Same with images
<img ... /> instead of <img ... ></img>
I think "< center >" is deprecated.
With good semantic everything is possible.
It might solve your issue
I'm very much basic to jquery so im doing a site where when the page loads, i want my Heading on the top jumbotron fadeIn while the buttons below remains constant.
Could someone help me with this.because the buttons stay on top when the page starts and comes back to its position, i mean to the bottom. when the page completely loads and the Heading fadein...
$(document).ready(function () {
$('.main-heading').fadeIn(1000).removeClass('main-heading-hidden');
});
.jumbotron {
background-image: url("googlenownewyork.png");
background-position: center center ;
background-repeat: no-repeat;
background-size: cover;
width:100%;
height: 600px;
margin:0;
padding: 0;
}
.main-heading{
color: white;
text-align: center;
padding-top:140px;
}
.main-heading-hidden{
display: none;
}
.header-button{
text-align: center;
padding-top: 30px;
}
.header-button .btn:hover{
color: white;
background-color: black;
}
<script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" ></script>
<script src="metcorp.js" type="text/javascript"></script>
<div class="jumbotron">
<div class="container first-div">
<div class="row main-heading main-heading-hidden">
<h1>Mount Edge Technologies</h1>
<h3></h3>
</div>
<div class="row header-button btn-padding">
<button type="button" class="btn">About Us</button>
<button type="button" class="btn">Get A Quote</button>
</div>
</div>
</div>
display: none removes the header from the layout of the page.
Rather than display, try opacity.
You can also do this with css3 animations fairly easily, avoiding needing to use jquery's fadeIn function at all.
Live Demo
Add this script link to your code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>
And Don't write this code in ready function:
write directly in script
$('.main-heading').fadeIn(2000).removeClass('main-heading-hidden');