this is how it looks:
I want it to get it top next to the first card.
<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
<!--Section heading-->
<center>
<h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<div style="padding-left:30%;padding-top:3%">
<!--Card-->
<div class="card testimonial-card back" style="width:25%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<center>
<p>Tester, web designer, programmer and a game developer</p>
</center>
</div>
</div>
<!--Card-->
</div>
<div style="padding-left:50%">
<!--Card-->
<div class="card testimonial-card back" style="width:35%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<p>Tester, web designer, programmer and a game developer</p>
</div>
</div>
<!--Card-->
</div>
<!-- footer-->
<div style="padding-top:17.6%">
<footer class="page-footer fixed-bottom font-small white pt-4">
<div class="container">
<div class="row">
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">contact</h5>
<p>filip.dvorak13#gmail.com</p>
</div>
<div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">sponsor</h5>
<p>Construsoft s.r.o.</p>
</div>
</div>
</div>
</footer>
</div>
This might be a possible solution. Using flexbox for the introduced <section> element and also for the immediate children.
section {
display: flex;
}
section>div {
flex-grow: 1;
display: flex;
justify-content: center;
}
<!-- top nav-->
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:white">
<a class="navbar-brand" href="index.html">Home</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="products.html">Products</a></li>
<li class="nav-item"><a class="nav-link" href="inspiration.html">Inspiration</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
</ul>
</div>
</nav>
<!--Section heading-->
<center>
<h1 class="section-heading h1 pt-4">Vedení / zaměstnanci</h1>
</center>
<!--Section description-->
<section>
<div>
<!--Card-->
<div class="card testimonial-card back" style="width:25%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<center>
<p>Tester, web designer, programmer and a game developer</p>
</center>
</div>
</div>
<!--Card-->
</div>
<div>
<!--Card-->
<div class="card testimonial-card back" style="width:35%">
<!--Background color-->
<div class="card-up teal lighten-2">
</div>
<!--Avatar-->
<div class="avatar mx-auto back" style="padding-top:10%"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(27).jpg" alt="avatar mx-auto white" class="rounded-circle img-fluid" style="width:120px;height:120px;border-radius: 60px 60px 10px 10px;">
</div>
<div class="card-body">
<!--Name-->
<center>
<h4 class="card-title mt-1">Filip Dvořák</h4>
</center>
<hr>
<!--Quotation-->
<p>Tester, web designer, programmer and a game developer</p>
</div>
</div>
<!--Card-->
</div>
</section>
<!-- footer-->
<div>
<footer class="page-footer fixed-bottom font-small white pt-4">
<div class="container">
<div class="row">
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">contact</h5>
<p>filip.dvorak13#gmail.com</p>
</div>
<div class="col"><img src="https://cdn.glitch.com/b511ed4c-fabf-49df-b72a-741fff06f5ca%2Ffghfghf.jpg?1538487766651" class="img" alt="" style="width:400px;height:125px"></div>
<div class="col spodek text-center" style="padding-top:25px">
<h5 class="text-uppercase font-weight-bold">sponsor</h5>
<p>Construsoft s.r.o.</p>
</div>
</div>
</div>
</footer>
</div>
Related
So I am trying to make my carousel responsive to resizing, and mobile devices. However, when I resize the screen, the actual images do not stay within the card that I have the carousel in.
The website is actually live, so if you wanted to take a look, please visit wwww.alysaandjordanplustwo.baby
Excuse my skills - I am learning front-end for the first time.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Alysa and Jordan Plus Two | Home </title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="background-image: url(img/background.png); background-size:cover;">
<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-dark" style="background-color: #6C3400;" >
<a class="navbar-brand" style="color: white;" href="#">Jordan and Alysa Plus Two</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="background-color: #6C3400;">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active" >
<a class="nav-link" style="color: #FFCD73;" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="photo_gallery.html">Photo Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="registry.html">Registry</a>
</li>
<div class="dropdown nav-link" style="padding: none; margin: none;">
<a class="dropdown-toggle" href="about.html" style="background-color: #6c3400; color: white;" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
About Us
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item no-border" href="baby_b_memorial.html">Baby B Memorial</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" style="color: white;" href="#">Contact Us</a>
</li>
</ul>
</div>
</nav>
<div class="container justify-content-center">
<div class="row justify-content-center">
<div class="card justify-content-center" style="margin-top: 1rem;">
<div class="card-body">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="width: 800px; height: 400px" >
<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 justify-content-center">
<div class="carousel-item justify-content-center active " style="width:800px; height:400px;">
<img class="card-img" src="img/first_halloween_resized.jpg" alt="First slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;" >
<img class="card-img" src="img/2nd_image_resized.jpeg" alt="Second slide">
</div>
<div class="carousel-item justify-content-center" style="width:800px; height:400px;">
<img class="card-img" src="img/third_slide.svg" alt="Third slide">
</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>
</div>
</div>
</div>
<div class="container text-center" style="background-color: #FFCD73; border-radius: 10px; height: 100%; width: 100%; margin-top: 5vh;">
<h3 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">"Don't find love. Let love find you. <br> That is why it is called falling in love because you do not force yourself to fall,<br> you just fall" <br> - Author Unknown</h3>
<h2 style="font-style:italic; padding-top: 15px; padding-bottom: 15px;">~~~</h2>
<h3 style="font-style:bold; color: #6c3400; padding-top: 15px; padding-bottom: 15px;">Find out our babies gender!</h3>
</div>
<div class="container" style="padding-top: 5vh;">
<div class="row">
<div class="col-lg">
<!-- Photo on the left -->
<img class="rounded mx-auto d-block img-thumbnail" src="img/first_photo.jpg" style="margin-bottom: 5vh;">
</div>
<div class="col-sm" style="background-color: #FFCD73; border-radius: 10px; padding-top: 15px; padding-bottom: 10vh;">
<H2>Our Story</H2>
<p>Alysa and I met for the first time at Kennesaw State University in the Fall 2022 semester. I was the first one to message Alysa, as we were in a student group where we could all talk about our majors and meet new people. I decided to message Alysa to see if she wanted to meet and perhaps study together. Which is just what we did – we ended up studying together, and I offered as much help as I could remember while she was taking Calculus. It had been years since I took Calculus 1, and I was very rusty. Before we knew it, we were always around each other, almost every possible minute that we could. Eventually, I believe, we ended up falling for each other, even though we both were hesitant to enter a relationship. I am so, so, so glad that we met, and for the next steps of our life together! <br><br> - Jordan | September 7th, 2022 </p>
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small white pt-4" style="background-color: #6C3400; margin-top: 10vh;">
<!-- Footer Links -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mt-md-0 mt-3">
<!-- Content -->
<h5 style="color: #FFFFFF;">Thank you for visiting our website!</h5>
<p style="color: #FFFFFF;">Please be respectful, and only share this website with immediate family for the time being. Thank you! <br><br>- Jordan & Alysa</p>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none pb-3">
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Registry Links</h5>
<ul class="list-unstyled">
<li>
Amazon
</li>
<li>
Buy Buy Baby
</li>
<li>
Target
</li>
</ul>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-3 mb-md-0 mb-3">
<!-- Links -->
<h5 class="text-uppercase" style="color:#FFFFFF;">Quick Links</h5>
<ul class="list-unstyled">
<li>
RSVP Form (Coming Soon)
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
<li>
Link 4
</li>
</ul>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3" style="color:#FFFFFF">Copyright © 2022:
Written with ♥ by Jordan Viehmeyer (Dad)
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- Javascript-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have not modified the CSS code of the carousel itself, so it is bootstrap standard using the min.css file.
The photos are sized 800 width, 400 height. That is how I'd like them to display, but proportionally.
Remove all style="width:800px; height:400px;" from your code. By adding this you forcing the element to a fixed size, so element wont be responsive.
In your carousel replace .card-img class with d-block w-100 classes, as per this example... (don't use card-img class)
Follow these bs docs... Carousel with indicators
<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">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</button>
</div>
I have an HTML page designed in Bootstrap 5 which has a simple form with a single text input field. When I test the page in my desktop or laptop, I am able to copy any text or web link and paste it into the form's text input field. If the test the same page from my live website and test it in my mobile phone's browser, the paste operation sometimes works and sometimes does not.
On older Android phones, if I copy some text and then try to paste it into my form, it works. But, if I use a relatively new Android phone, I am unable to paste the copied text. It appears as if the text was not copied properly, i.e. the clipboard is empty.
Is this an issue with my code or JavaScript loaded in my html or is this an issue with my mobile device?
Please advise.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<div class="container-fluid">
<!-- Navbar Brand -->
<a class="navbar-brand" href="index.html">
<img class="img-fluid ps-5 pt-2" src="https://via.placeholder.com/150" alt="Example Logo" width="150" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.html">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Headline -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h3>Example Website</h3>
<p>Demonstrate HTML5 Forms</p>
</div>
<!-- Form Input Area -->
<div class="container rounded mt-3 pt-3 pb-1 bg-dark text-white" style="width: 70%;">
<form method="post" class="needs-validation" novalidate>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-addon"><img src="https://via.placeholder.com/35" width="35" height="35"></span>
</div>
<input type="text" class="form-control" placeholder="Enter your name" name="fullname" required>
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<div class="invalid-feedback">Compulsory field</div>
</div>
<div class="form-check ms-2">
<input class="form-check-input" type="checkbox" id="check1" name="checkrules" value="accept" required>
<label class="form-check-label">I accept the rules policy.</label>
</div>
</form>
</div>
<br>
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<div class="row">
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test1">
<p class="text-center mt-2">Test 1</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test2">
<p class="text-center mt-2">Test 2</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test3">
<p class="text-center mt-2">Test 3</p>
</div>
</div>
</div>
<!-- Description -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h5>Welcome to Example.com</h5>
<ul>
<li>Sentence 1</li>
<li>Sentence 2</li>
<li>Sentence 3</li>
<li>Sentence 4</li>
<li>Sentence 5</li>
</ul>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<br>
<p class="text-muted text-center">Copyright ©
<script>
document.write(new Date().getFullYear())
</script> Example</p>
<p class="text-muted text-center">Rules</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
This my html file. I dont know why in the menu dropdown-menu is always active even when not selected!
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/theme/css/style.css">
<link rel="preload" as="style" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/print.css">
<style>
.home {
padding: 5rem 0 10rem 0;
background: url('http://arisk-icelab.polito.it/engine/static/assets/images/Slide_ARISK.JPG') no-repeat;
background-size: 100% 100%;
margin-top: 3rem;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a:after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<div id="home">
<!--- Navigation --->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="menu" aria-haspopup="true" aria-expanded="false">Business Continuity<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Mappatura del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#rischio-soci">Rischio Soci</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Trattamento del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-ambiente">Trattamento Ambiente e Sociale</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-compliance">Trattamento Compliance</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="nav-item">
<a class="dropdown-item" href="#survey-risk">Risk Top 10</a>
</li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End Navigation --->
<!--- Start Landing Page Section --->
<div class="landing">
<div class="row">
</div>
</div>
<!--- End Landing Page Section--->
</div>
<div id="rischio-soci" class="offset">
<div class="home">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<div style="height: 600px" id="drawRischioSoci"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
<div class="row text-md-center text-center text-sm-center" style="padding-left: 1rem">
<div class="col-md-8">
</div>
</div>
</div>
</div>
<!-- Start Trattamento Section-->
<div id="trattamento-ambiente" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Ambiente</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoAmbiente"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<!-- Start Trattamento Section-->
<div id="trattamento-compliance" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Compliance</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoCompliance"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<script src="http://arisk-icelab.polito.it/engine/static/assets/web/assets/jquery/jquery.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/popper/popper.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/smoothscroll/smooth-scroll.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/viewportchecker/jquery.viewportchecker.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/theme/js/script.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/print.css"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>
My question is how to resolve this problem that you can see in the menu. You can replicate this page by copy paste of the code.
I posted this question 3 days ago but no answer! yet. the javascript code is from another SO answer. link
Here is the image of problem as well.
As you can see "trattamento del riscio" is active (blue) while only mapatura del rischio should be since it's submenu is open!
I have a very basic MVC 5 Application which I am attempting to add AdminLTE to. I downloaded the AdminLTE Nuget package and added the code from the startup.html page to my MVC application's _Layout.cshtml page. I updated all the CSS and JS links to point to the right directory for my application.
Here is the code in the _Layout.cshtml file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<!-- Theme style -->
<link href="~/admin-lte/css/AdminLTE.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/admin-lte/css/skins/skin-blue.css" rel="stylesheet" />
<!-- Google Font: Source Sans Pro -->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini">
#if (Request.IsAuthenticated)
{
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
See All Messages
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
See All Notifications
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">
<i class="fas fa-th-large"></i>
</a>
</li>
</ul>
</nav>
<!-- /.navbar -->
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<!-- Brand Logo -->
<a href="index3.html" class="brand-link">
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Sidebar -->
<div class="sidebar">
<!-- Sidebar user panel (optional) -->
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
</div>
<div class="info">
Alexander Pierce
</div>
</div>
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Starter Pages
<i class="right fas fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="#" class="nav-link active">
<i class="far fa-circle nav-icon"></i>
<p>Active Page</p>
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="far fa-circle nav-icon"></i>
<p>Inactive Page</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-th"></i>
<p>
Simple Link
<span class="right badge badge-danger">New</span>
</p>
</a>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
<!-- /.sidebar -->
</aside>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">Starter Page</h1>
</div><!-- /.col -->
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item">Home</li>
<li class="breadcrumb-item active">Starter Page</li>
</ol>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
Card link
Another link
</div>
</div><!-- /.card -->
</div>
<!-- /.col-md-6 -->
<div class="col-lg-6">
<div class="card">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
<div class="card card-primary card-outline">
<div class="card-header">
<h5 class="m-0">Featured</h5>
</div>
<div class="card-body">
<h6 class="card-title">Special title treatment</h6>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<!-- /.col-md-6 -->
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
<!-- Control sidebar content goes here -->
<div class="p-3">
<h5>Title</h5>
<p>Sidebar content</p>
</div>
</aside>
<!-- /.control-sidebar -->
<!-- Main Footer -->
<footer class="main-footer">
<!-- To the right -->
<div class="float-right d-none d-sm-inline">
Anything you want
</div>
<!-- Default to the left -->
<strong>Copyright © 2014-2019 AdminLTE.io.</strong> All rights reserved.
</footer>
</div>
}
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
Here is what the Home page currently looks like. It seems like not all the JS and/or CSS is being loaded but I have no idea what is missing as the Chrome console is not showing any errors. What am I missing here?
I am trying to create a program that scrolls on div via data-id. I place my data-id on my menus and trying to scroll them on their respective id divs.
Here's my HTML look like:
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials" href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>
And here's how I selected data attribute so that they can scroll smoothly on each div:
<script>
$('html, body').animate({
scrollTop: $( '#' + data_id).offset().top
}, 'slow');
</script>
Somehow this did not work. I was wondering how can I fix this so that each data-id can scroll to each div?
data_id in your snippet is an undefined var, apart from that all looks good, and works as well.
function scrollToData(data_id){
$('html, body').animate({
scrollTop: $('#' + data_id).offset().top
}, 'slow');
}
scrollToData("about")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials" href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br> contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy
for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br> I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br> look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>
You can use scroll-behavior: smooth; css property to achieve this.
html{
scroll-behavior: smooth;
}
You can set this behavior to any scrolling container. By default it is the root of the document that is <html>.
You need to use ids of the elements in the links such as href="#id"
html {scroll-behavior: smooth;}
div {
height: 500px;
border: solid 1px red;
margin: 20px;
}
<ul>
<li>go to last</li>
</ul>
<section>
<div id="first">first</div>
<div id="second">second</div>
<div id="last">last</div>
</section>
But if you want things to work on click then you have to bind event to the relative element.
function goToElement(data_id){
$('html, body').animate({
scrollTop: $( '#' + data_id).offset().top
}, 'slow');
}
Then you have to bind an event to the nav-link element.
$('.nav-link').on('click', function(){
goToElement($(this).data('id'));
});
Try below code
$(".nav-link").click(function(){
var topData= $( '#' + $(this).attr("data-id")).offset();
$('html, body').animate({
scrollTop: topData.top
}, 'slow');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"></a> <button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="about" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" data-id="testimonials" href="#">Testimonials</a>
</li>
<li class="nav-item border-button">
<a class="nav-link" href="#">Login</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
<section id="big-hero">
<div class="container">
<div class="row ">
<div class="col-lg-5 pl-5">
<h1 class="display-4 main-text-white">Manage Your Contacts Online</h1>
<p class="lead sub-text-white">We provide a seemless way to manage your contacts. Keeping them on file and accessible online.</p><button class="btn btn-primary btn-lg main-btn" type="button">Get Started</button>
</div>
<div class="offset-lg-1 col-lg-6"><img class="img-fluid" src="img/intro-img.svg"></div>
</div>
</div>
</section>
<section id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 mb-4">
<h1 class="display-5 main-text-blue text-center">Organize Your Contacts At Ease</h1>
<p class="lead sub-text-blue text-center">Your easy go online address book for with intuitive<br>
contact management for individuals, teams & small businesses.</p>
</div>
<div class="col-lg-5 offset-lg-1"><img class="img-fluid" src="img/list-img.svg"></div>
<div class="offset-lg-1 col-lg-5">
<p class="lead sub-text-blue left">If you’re doing all you can to organize all the people you are communicating with, you’re collecting contacts from different people categories, you might worry that some of your contacts are getting lost in the shuffle? Contact Hub makes it easy for you to:</p>
<div class="icon-box">
<i class="fa fa-users fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Add, update, delete, and segment your contact list online.</p>
</div>
<div class="icon-box">
<i class="fa fa-tasks fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Categorize your contacts accordingly so you can stay organize with your contact list.</p>
</div>
<div class="icon-box">
<i class="fa fa-book fa-2x icon-radius float-left"></i>
<p class="lead sub-text-blue float-right">Clean, manage, and grow your list. This app helps you stay organized year round.</p>
</div>
</div>
</div>
</div>
</section>
<section id="testimonials">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="display-5 main-text-blue text-center">Testimonials</h1><img class="img-thumbnail img-rounded mx-auto d-block" src="img/testimonial.jpg">
<p class="lead sub-text-blue text-center">"I love contact hub. It has been helpful to me so far in managing my contacts.<br>
I don't worry of loosing my contacts on my phone since I can easily jump on the app and take a<br>
look on my contacts per category. Definitely recommended."</p>
<h4 class="testimonials-name">- CHRISTINE JACOBS, Contact Hub User</h4>
</div>
</div>
</section>
<footer>
<p class="text-center">© Copyright 2020. All Rights Reserved.</p>
</footer>