I recently started diving into the world of building web pages. To practice, I created a simple site but for some reason, I'm having trouble changing the text size.
When I try to remove the background image code, it seems to work fine, but I can't just do that:
<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">Changes are
inevitable</button>
</div>
</div>
</body>
I've been stuck here trying to figure this out for the past couple of days.