I included the following link in the head section of my html page but the animation is not working:
An animated element I tried this and it is working. Do I need to write animate__animated instead of only animated ?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.0/animate.min.css" />
I also added bootstrap links in my original code. Bootstrap links are working but not animation. Is there any other link need to add?
<div class="container">
<header class="animated slideInDown text-center text-white p-5">
<h1 class="display-4"> Using Animation! </h1>
</header>
</div>
All you need to do is to call the right classes for it to work and activate.
you must call animate__animated and just copy the effect from their website and paste it and it should work.
Note that when I copied their class it was animate__slideInDown not slideInDown.
<div class="container">
<header class="animate__animated animate__slideInDown text-center p-5">
<h1 class="display-4"> Using Animation! </h1>
</header>
</div>
It could be that for some animations you need all librarys from bootstrap (also js und jquery)
also bootstrap has no animations
what you mean is mdboostrap
try following this guid -> https://mdbootstrap.com/md-bootstrap-cdn/
Related
im new to this.
i want to make an image as a background to my text that will say Welcome, !
i'm not sure if i should use jumbotron for this or just an image with text over it?
anyway i went ahead with jumbotron and my image would not show up; i have downloaded the banner image in the images folder.
here are some codes, i couldn't see where i've gone wrong, please help?
Relevant css codes
<head>
link rel="stylesheet" href="assets/css/BS5-Jumbotron-with-background-Image.css"/>
</head>
<body class="text-end">
<div class="p-5 mb-4 round-3 position-relative">
<div id="bgImage" style="background-image:url('img src=/images/homepage_banner.jpeg');">
</div>
<div class="container-fluid py-5 style=" z-index:999999">
<h1 class="display-5 text-start fw-bold"> Welcome, nic!</h1>
</div>
</div>
</body>
thanks in advance :)
Add your link tag properly
<link rel="stylesheet" href="assets/css/BS5-Jumbotron-with-background-Image.css"/>
Good evening, I'm a novice at applying styles, well my problem is that I have the following slider, and I want to add opacity to it.
<div class="single-hero-slide bg-img" style="background-image: url(img/slider/slider4.jpg);">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12">
<div class="hero-slides-content">
<h4 data-animation="fadeInUp" data-delay="100ms">All the courses you need</h4>
<h2 data-animation="fadeInUp" data-delay="400ms">Wellcome to our <br>Online University</h2>
Read More
</div>
</div>
</div>
</div>
</div>
I would like you to help me with the css code.
I don't recommend inline styles which is what you have included, as it's not maintainable. To add a css file to your project make a new css file (preferable called main.css and then link to it using <link rel="stylesheet" href="*"> Paste this code in to the header of your html and then change the * to the file location. Next you can reference the slider classes, in your case you would type .container h-100{} and then within the curly braces type opacity: ; and in between : & ; write
any number on a scale of 0 ~ 1. An opacity of 0 will be invisible and an opacity of 1 will be completely visible. Hope this answered your question!
I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.
Hey so I am trying to inject a background image to my Django template however for some reason I do not know why it not loading I tried inline styling on the html(** ) tag but nothing
I the tried to to make an external css file but still not working can you please show me what I can be possibly doing wrong here.
** Below is the code to my html tag that I want to put the background image to**
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5">
<div class="overlay"></div>
<div class="container">
<div class="row no-gutters slider-text js-fullheight align-items-center justify-content-start" data-scrollax-parent="true">
<div class="col-md-6 ftco-animate">
<h2 class="subheading">Leave the house cleaning chores to us</h2>
<h1 class="mb-4">Let us do the dirty work, so you don't have to.</h1>
<p>Learn more <span class="ion-ios-arrow-forward"></span></p>
</div>
</div>
</div>
</div>
And here below is the external css file that I made to test if it would work having an external stylesheet
.hero-wrap js-fullheight{
background-image: url('static/images/bg_1.jpg');
}
If possible can you teach me how I can make inline background-image on the html tags using Django templates
try this:
<div class="hero-wrap js-fullheight" data-stellar-background-ratio="0.5" style="background-image: url({% static '/images/bg_1.jpg' %});">
My Angular Version: Angular 7
I just started learning Angular and I'm trying to use a downloaded Bootstrap template in my Angular project. My owl-carousel works great when it's on index.html in my Angular project. But it does not when it's moved to a new component. I'll be providing the steps I followed. Kindly help me troubleshoot
Step 1: I copied all assets (JS, CSS & Images) to the assets folder under src in Angular
Step 2: Copies the code in index.html in the template to the angular index.html and changed the 'src' for images and JS files in index.html
At this point, everything works PERFECT!
Step 3: Since it's not a good practice to keep everything in one file so I tried to refactor the code by moving the home-slider which is based on 'owl-carousel' to a component called 'home' as below
Below is the entire code in home-component.html and all imports such as Javascript and CSS are already in index.html of my Angular Project
<!-- Welcome Area Start -->
<section class="welcome-area">
<div class="welcome-slides owl-carousel">
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInLeft" data-delay="200ms">Creativity & Excellence</h6>
<h2 data-animation="fadeInLeft" data-delay="500ms">Welcome to to my Web</h2>
Explore our work
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single Welcome Slide -->
<div class="single-welcome-slide bg-img bg-overlay" style="background-image: url(./assets/macbook-1.jpg);" data-img-url="macbook-1.jpg">
<!-- Welcome Content -->
<div class="welcome-content h-100">
<div class="container h-100">
<div class="row h-100 align-items-center">
<!-- Welcome Text -->
<div class="col-12">
<div class="welcome-text text-center">
<h6 data-animation="fadeInDown" data-delay="200ms">Hotel & Resort</h6>
<h2 data-animation="fadeInDown" data-delay="500ms">Welcome To my Web </h2>
Discover Now
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I expected the code to have a working owl-carousel slider when the component is selected in app-component.html using <app-home></app-home> but the actual output just gives nothing.
Note: The selector is right as if I give plain text and call the selector as <app-home></app-home> in app-component.html it works but not the owl-carousel
Thanks in advance.
when are you initialising the owl carousel? because index page loads with the application and hence its working in index, but component page only loads when its navigated so you need to call owl initialising explicitly after component is loaded into DOM
$(".owl-carousel").owlCarousel();