How to set a position that changes when the window size changes
Question
I'm creating a web page for my grandpa, and I'm going to have this lil biker dude, that runs across the screen and when hovered over, stops and says"wear a helmet". I got him to move back and forth and it is fixed to the navbar, but the problem is that when the screen size changes, say it's on a smaller phone or computer, then the biker dude turns around at a different spot and it runs infront of the navbar stuff.
here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>CountrySideBycicling</title>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min.css">
<script src="https://kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- lil dude -->
<h6 id="message"></h6>
<img src="../lil dude/riding.gif" alt="riding" id="riding">
<script>
let message = document.getElementById('message');
let speed = 5;
let lastspeed = 0;
let counter = 0;
let x = 50;
let y = 25;
let mX = 0;
let mY = 0;
//flipping and animating
function move() {
x += speed;
document.getElementById('riding').style.left=(x + "px");
if (x + document.getElementById('riding').style.width >= window.innerWidth - 550) {
speed = -5;
document.getElementById('riding').style.transform="rotateY(150deg)";
}
if (x <= 200) {
speed = 5;
document.getElementById('riding').style.transform="rotateY(0deg)";
}
if (speed == 0) {
document.getElementById('riding').src="../lil dude/stop.gif";
message.style.top = (y - 40 + "px");
message.style.left = (x + 50 + "px");
message.innerHTML = "Wear a Helmet!";
setTimeout(reset, 2000);console.log('hi');
}
else requestAnimationFrame(move);
}
//mouse move collision detection
window.addEventListener('mousemove', function(e) {
mX = e.clientX;
mY = e.clientY;
if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) {
lastspeed = speed || lastspeed;
if (counter == 0) {
slow();
counter = 1;
}
}
console.log(mX + " " + mY)
});
//braking it
function slow() {
document.getElementById('riding').src="../lil dude/brake.gif";
do {
if (speed > 0){
speed -= 0.1;
} else if(speed < 0) {
speed += 0.1;
}
}
while (Math.abs(speed)>0.01);
speed=0;
}
//reset
function reset() {
document.getElementById('riding').src="../lil dude/riding.gif";
message.innerHTML = "";
do {
if (lastspeed > 0) {
speed += 0.1;
} else if (lastspeed < 0) {
speed -= 0.1;
}console.log(lastspeed,speed);
}
while(5-Math.abs(speed) > 0.01);
move();
counter = 0;
}
move();
</script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<!-- logo -->
<img class = "navbar-brand" src="https://w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contacts.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="brands.html.html">Brands</a>
</li>
</ul>
</div>
</div>
</nav>
<div style="height: 50;"></div>
<div class="jumbotron text-center">
<div class="container">
<div style="height: 25px;"></div>
<h1>CountrySideBycicling</h1>
<div style="height: 25px;"></div>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt,
quod officia neque quam sint dicta, mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores.
</p>
<div style="height: 25px;"></div>
<button class="btn btn-primary">Read More</button>
</div>
</div>
<!-- Page Content -->
<div class="container">
<!-- Heading Row -->
<div class="row align-items-center my-5">
<div class="col-lg-7">
<img class="img-fluid rounded mb-4 mb-lg-0" src="http://placehold.it/900x400" alt="">
</div>
<!-- /.col-lg-8 -->
<div class="col-lg-5">
<h1 class="font-weight-light">Business Name or Tagline</h1>
<p>This is a template that is great for small businesses. It doesn't have too much fancy flare to it, but it makes a great use of the standard Bootstrap core components. Feel free to use this template for any project you want!</p>
<a class="btn btn-primary" href="#">Call to Action!</a>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
<!-- Call to Action Well -->
<div class="card text-white bg-secondary my-5 py-4 text-center">
<div class="card-body">
<p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline!</p>
</div>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- Image Section - set the background image for the header in the line below -->
<section class="py-5 bg-image-full" style="background-image: url('https://unsplash.it/1900/1080?image=1081');">
<!-- Put anything you want here! There is just a spacer below for demo purposes! -->
<div style="height: 200px;"></div>
</section>
<!-- Content section -->
<section class="py-5">
<div class="container">
<h1>Section Heading</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p>
</div>
</section>
<!-- slider -->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active"></div>
<div id="target" class="carousel-item"></div>
<div class="carousel-item"></div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div style="height: 50px;"></div>
</div>
</div>
<div class="container">
<!-- Content Row -->
<div class="row">
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card One</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary btn-sm">More Info</a>
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Two</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary btn-sm">More Info</a>
</div>
</div>
</div>
<!-- /.col-md-4 -->
<div class="col-md-4 mb-5">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Card Three</h2>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
</div>
<div class="card-footer">
<a href="#" class="btn btn-primary btn-sm">More Info</a>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small mdb-color pt-4">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Footer links -->
<div class="row text-center text-md-left mt-3 pb-3">
<!-- Grid column -->
<div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6>
<p>Here you can use rows and columns to organize your footer content. Lorem ipsum dolor sit amet,
consectetur
adipisicing elit.</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6>
<p>
<a href="#!">Bikesite</a>
</p>
<p>
<a href="#!">Bikesite</a>
</p>
<p>
<a href="#!">Bikesite</a>
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6>
<p>
<a href="gallery.html">Gallary</a>
</p>
<p>
<a href="brands.html">Brands</a>
</p>
<p>
<a href="about.html">About</a>
</p>
</div>
<!-- Grid column -->
<hr class="w-100 clearfix d-md-none">
<!-- Grid column -->
<div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3">
<h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
<p>
<i class="fas fa-home mr-3"></i> windsor, oh, cox road</p>
<p>
<i class="fas fa-envelope mr-3"></i> grandpa@gmail.com</p>
<p>
<i class="fas fa-phone mr-3"></i> + 01 234 567 88</p>
</div>
<!-- Grid column -->
</div>
<!-- Footer links -->
<hr>
<!-- Grid row -->
<div class="row d-flex align-items-center">
<!-- Grid column -->
<div class="col-md-7 col-lg-8">
<!--Copyright-->
<p class="text-center text-md-left">© 2020 Copyright:
<a href="http://www.countrysidebicycling.com/">
<strong>countrysidebicycling.com</strong>
</a>
</p>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-5 col-lg-4 ml-lg-0">
<!-- Social buttons -->
<div class="text-center text-md-right">
<ul class="list-unstyled list-inline">
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-facebook"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-instagram"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-twitter"></span>
</a>
</li>
<li class="list-inline-item">
<a class="btn btn-social-icon btn-vk">
<span class="fa fa-pinterest"></span>
</a>
</li>
</ul>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
</footer>
<script src="jquery.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
here is the css
margin: 0;
padding: 0;
}
div{
width: 100%;
height: 100%;
}
.navbar-default {
background: none;
}
.navbar{
position: fixed;
z-index: 10;
padding: 10px 0 10px 10px;
top: 0;
width: 100%;
}
footer{
background-color:#e6e6e6;
}
.jumbotron{
background-image: url('download.jpeg');
color: white;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
min-height: 400px;
margin-top: 0px;
margin-bottom: 8px;
}
a{
color:#2e5984;
}
.navbar-brand{
height: 60px;
width: 100px;
}
#aboutusimg{
background-size: 100%;
background-image: url(download.jpeg);
background-repeat:no-repeat;
height: 400px;
}
/* slider */
.carousel .carousel-item {
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
}
.carousel .carousel-item:first-of-type {
background-image: url('download.jpeg');
}
.carousel .carousel-item:nth-of-type(2) {
background-image: url("download.jpeg");
}
.carousel .carousel-item:last-of-type {
background-image: url("download.jpeg");
}
.carousel-control-prev-icon, .carousel-control-next-icon {
width: 50px;
height: 50px;
}
/* partners slider, about page */
/* carousel */
h2{
text-align:center;
padding: 20px;
}
/* Slider */
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* lil dude */
#riding{
width: 50px;
height: 40px;
z-index: 30;
position: fixed;
top: 25px;
left: 0px;
transform: rotateY(0deg);
}
#message{
color: white;
position: fixed;
top: 0;
left: 0;
}
keep in mind that there are other files, this is just the index.html, so the css has other stuff in it, but the little dude is at the bottom of the css, and before the navbar in the html.
1 answers
solution1
1 ACCPTED 2020-05-05 21:37:12
The hardcoded values of 200 and 550 will not work when the navbar dimensions are adjusted for diffeerent size screens. I've changed it to retrieve the offsetWidth and offsetLeft of the (.navbar-toggle button or.nav-item[0]) and.navbar-brand image to bounce back.
body { margin: 0; padding: 0; } div{ width: 100%; height: 100%; }.navbar-default { background: none; }.navbar{ position: fixed; z-index: 10; padding: 10px 0 10px 10px; top: 0; width: 100%; } footer{ background-color:#e6e6e6; }.jumbotron{ background-image: url('download.jpeg'); color: white; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; min-height: 400px; margin-top: 0px; margin-bottom: 8px; } a{ color:#2e5984; }.navbar-brand{ height: 60px; width: 100px; } #aboutusimg{ background-size: 100%; background-image: url(download.jpeg); background-repeat:no-repeat; height: 400px; } /* slider */.carousel.carousel-item { width: 100%; height: 100vh; background-size: cover; background-position: center; }.carousel.carousel-item:first-of-type { background-image: url('download.jpeg'); }.carousel.carousel-item:nth-of-type(2) { background-image: url("download.jpeg"); }.carousel.carousel-item:last-of-type { background-image: url("download.jpeg"); }.carousel-control-prev-icon, .carousel-control-next-icon { width: 50px; height: 50px; } /* partners slider, about page */ /* carousel */ h2{ text-align:center; padding: 20px; } /* Slider */.slick-slide { margin: 0px 20px; }.slick-slide img { width: 100%; }.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }.slick-list:focus { outline: none; }.slick-list.dragging { cursor: pointer; cursor: hand; }.slick-slider.slick-track, .slick-slider.slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }.slick-track { position: relative; top: 0; left: 0; display: block; }.slick-track:before, .slick-track:after { display: table; content: ''; }.slick-track:after { clear: both; }.slick-loading.slick-track { visibility: hidden; }.slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'].slick-slide { float: right; }.slick-slide img { display: block; }.slick-slide.slick-loading img { display: none; }.slick-slide.dragging img { pointer-events: none; }.slick-initialized.slick-slide { display: block; }.slick-loading.slick-slide { visibility: hidden; }.slick-vertical.slick-slide { display: block; height: auto; border: 1px solid transparent; }.slick-arrow.slick-hidden { display: none; } /* lil dude */ #riding{ width: 50px; height: 40px; z-index: 30; position: fixed; top: 25px; left: 0px; transform: rotateY(0deg); } #message{ color: white; position: fixed; top: 0; left: 0; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>CountrySideBycicling</title> <link rel="stylesheet" href="main:css"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/bootstrap-social/5.1.1/bootstrap-social.min:css"> <script src="https.//kit.fontawesome.com/8333c8288f.js" crossorigin="anonymous"></script> </head> <body> <.-- lil dude --> <h6 id="message"></h6> <img src="../lil dude/riding;gif" alt="riding" id="riding"> <script> let message = document;getElementById('message'); let speed = 5; let lastspeed = 0; let counter = 0; let x = 50; let y = 25; let mX = 0; let mY = 0. //flipping and animating function move() { x += speed. document.getElementById('riding');style.left=(x + "px"); var v=document.getElementsByClassName('navbar-toggler')[0]. if(v&&v;offsetLeft===0) v=document.getElementsByClassName('nav-item')[0]; var w=document.getElementsByClassName('navbar-brand')[0]. if (speed > 0 && x + document.getElementById('riding').style.width >= (v&&(v;offsetLeft-v.offsetWidth))) { speed = -5. document.getElementById('riding');style.transform="rotateY(150deg)". } if (speed < 0 && x <= (;w||(w.offsetLeft+w.offsetWidth))) { speed = 5. document;getElementById('riding').style.transform="rotateY(0deg)". } if (speed == 0) { document.getElementById('riding').src=";./lil dude/stop.gif"; message.style.top = (y - 40 + "px"); message.style;left = (x + 50 + "px"), message;innerHTML = "Wear a Helmet."; setTimeout(reset; 2000).console,log('hi'). } else requestAnimationFrame(move); } //mouse move collision detection window.addEventListener('mousemove'; function(e) { mX = e;clientX; mY = e;clientY. if (mX >= x && mX <= x + 50 && mY >= y && mY <= y + 40) { lastspeed = speed || lastspeed; if (counter == 0) { slow(). counter = 1. } } console.log(mX + " " + mY) }). //braking it function slow() { document.getElementById('riding');src=".;/lil dude/brake.gif"; do { if (speed > 0){ speed -= 0.1. } else if(speed < 0) { speed += 0;1; } } while (Math.abs(speed)>0.01). speed=0. } //reset function reset() { document.getElementById('riding');src=".;/lil dude/riding.gif"; message.innerHTML = ""; do { if (lastspeed > 0) { speed += 0.1, } else if (lastspeed < 0) { speed -= 0;1. }console.log(lastspeed;speed); } while(5-Math;abs(speed) > 0;01): move(). counter = 0. } move(). </script> <nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top"> <div class="container"> <a class="navbar-brand" href="#"> <.-- logo --> <img class = "navbar-brand" src="https.//w7.pngwing.com/pngs/764/321/png-transparent-bicycle-shop-cycling-logo-fixed-gear-bicycle-cyclist-top-sport-bicycle-logo.png" alt=""> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About</a> </li> <li class="nav-item"> <a class="nav-link" href="gallery:html">Gallery</a> </li> <li class="nav-item"> <a class="nav-link" href="services;html">Services</a> </li> <li class="nav-item"> <a class="nav-link" href="contacts:html">Contact</a> </li> <li class="nav-item"> <a class="nav-link" href="brands;html:html">Brands</a> </li> </ul> </div> </div> </nav> <div style="height; 50."></div> <div class="jumbotron text-center"> <div class="container"> <div style="height, 25px,"></div> <h1>CountrySideBycicling</h1> <div style="height. 25px:"></div> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit; Quisquam officiis aperiam temporibus exercitationem hic provident nesciunt: quod officia neque quam sint dicta. mollitia commodi illo necessitatibus inventore blanditiis eveniet maiores. </p> <div style="height. 25px,"></div> <button class="btn btn-primary">Read More</button> </div> </div> <.-- Page Content --> <div class="container"> <.-- Heading Row --> <div class="row align-items-center my-5"> <div class="col-lg-7"> <img class="img-fluid rounded mb-4 mb-lg-0" src="http.//placehold.it/900x400" alt=""> </div> <.-- /.col-lg-8 --> <div class="col-lg-5"> <h1 class="font-weight-light">Business Name or Tagline</h1> <p>This is a template that is great for small businesses, It doesn't have too much fancy flare to it. but it makes a great use of the standard Bootstrap core components, Feel free to use this template for any project you want.</p> <a class="btn btn-primary" href="#">Call to Action,</a> </div> <,-- /.col-md-4 --> </div> <:-- /:row --> <.-- Call to Action Well --> <div class="card text-white bg-secondary my-5 py-4 text-center"> <div class="card-body"> <p class="text-white m-0">This call to action card is a great place to showcase some important information or display a clever tagline?</p> </div> </div> <;-- /:col-md-4 --> </div> <;-- /,row --> </div> <.-- /,container --> <.-- Content section --> <section class="py-5"> <div class="container"> <h1>Section Heading</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit: Aliquid; suscipit, rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p> </div> </section> <,-- Image Section - set the background image for the header in the line below --> <section class="py-5 bg-image-full" style="background-image, url('https.//unsplash.it/1900/1080,image=1081')."> <,-- Put anything you want here, There is just a spacer below for demo purposes. --> <div style="height. 200px,"></div> </section> <.-- Content section --> <section class="py-5"> <div class="container"> <h1>Section Heading</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit,</p> <p>Lorem ipsum dolor sit amet. consectetur adipisicing elit. Aliquid, suscipit. rerum quos facilis repellat architecto commodi officia atque nemo facere eum non illo voluptatem quae delectus odit vel itaque amet.</p> </div> </section> <.-- slider --> <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li> <li data-target="#carouselExampleIndicators" data-slide-to="1"></li> <li data-target="#carouselExampleIndicators" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"></div> <div id="target" class="carousel-item"></div> <div class="carousel-item"></div> </div> <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <div style="height. 50px,"></div> </div> </div> <div class="container"> <,-- Content Row --> <div class="row"> <div class="col-md-4 mb-5"> <div class="card h-100"> <div class="card-body"> <h2 class="card-title">Card One</h2> <p class="card-text">Lorem ipsum dolor sit amet. consectetur adipisicing elit: Rem magni quas ex numquam: maxime minus quam molestias corporis quod. ea minima accusamus.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary btn-sm">More Info</a> </div> </div> </div> <.-- /.col-md-4 --> <div class="col-md-4 mb-5"> <div class="card h-100"> <div class="card-body"> <h2 class="card-title">Card Two</h2> <p class="card-text">Lorem ipsum dolor sit amet. consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim: Nesciunt pariatur voluptatem sunt quam eaque. vel. non in id dolore voluptates quos eligendi labore.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary btn-sm">More Info</a> </div> </div> </div> <.-- /.col-md-4 --> <div class="col-md-4 mb-5"> <div class="card h-100"> <div class="card-body"> <h2 class="card-title">Card Three</h2> <p class="card-text">Lorem ipsum dolor sit amet. consectetur adipisicing elit. Rem magni quas ex numquam: maxime minus quam molestias corporis quod. ea minima accusamus.</p> </div> <div class="card-footer"> <a href="#" class="btn btn-primary btn-sm">More Info</a> </div> </div> </div> </div> </div> <.-- Footer --> <footer class="page-footer font-small mdb-color pt-4"> <.-- Footer Links --> <div class="container text-center text-md-left"> <.-- Footer links --> <div class="row text-center text-md-left mt-3 pb-3"> <.-- Grid column --> <div class="col-md-3 col-lg-3 col-xl-3 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">CountrySideBycicling</h6> <p>Here you can use rows and columns to organize your footer content: Lorem ipsum dolor sit amet. consectetur adipisicing elit.</p> </div> <.-- Grid column --> <hr class="w-100 clearfix d-md-none"> <.-- Grid column --> <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">Brand Sites</h6> <p> <a href="#.">Bikesite</a> </p> <p> <a href="#.">Bikesite</a> </p> <p> <a href="#!">Bikesite</a> </p> </div> <!-- Grid column --> <hr class="w-100 clearfix d-md-none"> <!-- Grid column --> <div class="col-md-3 col-lg-2 col-xl-2 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">Useful links</h6> <p> <a href="gallery.html">Gallary</a> </p> <p> <a href="brands.html">Brands</a> </p> <p> <a href="about.html">About</a> </p> </div> <!-- Grid column --> <hr class="w-100 clearfix d-md-none"> <!-- Grid column --> <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mt-3"> <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6> <p> <i class="fas fa-home mr-3"></i> windsor, oh, cox road</p> <p> <i class="fas fa-envelope mr-3"></i> grandpa@gmail.com</p> <p> <i class="fas fa-phone mr-3"></i> + 01 234 567 88</p> </div> <!-- Grid column --> </div> <!-- Footer links --> <hr> <!-- Grid row --> <div class="row d-flex align-items-center"> <!-- Grid column --> <div class="col-md-7 col-lg-8"> <!--Copyright--> <p class="text-center text-md-left">© 2020 Copyright: <a href="http://www.countrysidebicycling.com/"> <strong>countrysidebicycling.com</strong> </a> </p> </div> <!-- Grid column --> <!-- Grid column --> <div class="col-md-5 col-lg-4 ml-lg-0"> <!-- Social buttons --> <div class="text-center text-md-right"> <ul class="list-unstyled list-inline"> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-facebook"></span> </a> </li> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-instagram"></span> </a> </li> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-twitter"></span> </a> </li> <li class="list-inline-item"> <a class="btn btn-social-icon btn-vk"> <span class="fa fa-pinterest"></span> </a> </li> </ul> </div> </div> <!-- Grid column --> </div> <!-- Grid row --> </div> <!-- Footer Links --> </footer> <script src="jquery.slim.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> </body> </html> here is the css
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to change a position of element when a window size changes?
Move div with fixed position if window size changes
How to prevent divs overlapping when window size changes?
How do I change the function of a button when the window size changes?
Simple Modal autoresize when window size changes
Javascript changes on window size
Position element over image element but the image changes size with the window
Is it possible to auto change the size of group elements when the window size changes?
How do I resize an IMG element so that it is proportionately in the same place on the window when the window size changes?
Set size and position when create window
Related Tags