I want to move the blue icon with the question mark to the bottom of the box right above the paragraph while also moving the gray icon to the top right of the paragraph without messing up my text.
I tried making multiple flex containers but nothing seems to be working.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
html,
body {
height: 100%;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
/* SOLUTION: */
.modal {
display: flex;
gap: 16px;
padding: 16px;
flex-direction: column;
}
.icon {
/* this keeps the icon from getting smashed by the text */
display: flex;
flex-shrink: 0;
}
.ic {
display: flex;
align-items: flex-sart;
}
.header {
display: flex;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="ic">
<div class="icon">!</div>
</div>
<div class="container">
<div class="header">Are you sure you want to do that?</div>
<div class="close-button">✖</div>
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
in css add this :
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 7px;
margin-left:5px;
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
}
in html
<div class="modal">
<div class="ic">
<div class="icon">!</div>
<div class="header">Are you sure you want to do that?
</div>
<div class="close-button">✖</div>
</div>
<div class="container">
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
<link rel="stylesheet" href="style.css">
put the element in the container that you want it to show up in its corner or edge.
then make the parent container position: relative; and your element position: absolute; then control their position using top, right, left, and bottom. here is the code.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
html,
body {
height: 100%;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
position: relative;
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
margin: 5px;
cursor: pointer;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
/* SOLUTION: */
.modal {
display: flex;
gap: 16px;
padding: 16px;
flex-direction: column;
}
.icon {
/* this keeps the icon from getting smashed by the text */
display: flex;
flex-shrink: 0;
}
.ic {
display: flex;
align-items: flex-sart;
}
.header {
display: flex;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="ic">
</div>
<div class="container">
<div class="header">Are you sure you want to do that?</div>
</div>
<div class="close-button">✖</div>
<div class="text"><div class="icon">!</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
Related
I have on button which is used to play a song.
In that button, I use a unicode icon for control playing the audio track and it's working fine but the main issue is it's not displaying as per my required ICON (https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitar&unicon=f7a6)
I want to show that icon at the right side top corner of the page without effecting my remaining page mainly cards,This is my output
.
please help me to acheive this thing
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<script>
</script>
</head>
<body>
// thi is the audio code
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<div>
<button id="music" onclick="document.getElementById('player').play()"></button>
</div>
<!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">Me</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>AK</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
#music {
font-size: 50px;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box.content p {
color: #fff;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
</style>
</html>
Just do what they do on the page you linked to
You do need an element with the FAS classes - you can give the button that class
Note the CSS to place the button
Also your HTML is invalid. You have too many body tags
#music { position: absolute; top: 10px; right:50px}
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()" class='fas'></button>
You mentioned w3example using font-awsome icons to display the icons
You given Example: https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitar&unicon=f7a6
Related Font Awsome Icon: https://fontawesome.com/v5.15/icons/guitar
So icon is not display into frontend without calling fontawsome library
I made changes
1st Add font awsome library in to head
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
2nd Add fas class to button
<button id="music" onclick="document.getElementById('player').play()"></button>
Changed to
<button id="music" onclick="document.getElementById('player').play()" class='fas'></button>
Please check the following Working code sinppet
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
</head>
<body>
// thi is the audio code
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<div>
<button id="music" onclick="document.getElementById('player').play()" class='fas'>
</button>
</div>
<!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">Me</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>AK</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
#music {
font-size: 50px;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box.content p {
color: #fff;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
</style>
</html>
I am trying to make my code repeat several times these html elements on my page but I am stuck, my code works for the moment but I can't add html tags which have the same parents and I don't know why...
What I wanna do is a "vitrine" website for a friend's Etsy shop... I want the page to display all his articles... So I need to create a loop which writes as many html elements as articles...
Do you guys can help me ?
I am new to JavaScript by the way ;)
let productCount = 8;
for (let i = 0; i <= productCount; i++) { // on repète la boucle autant de fois qu'il y a d'articles
const newContainer = document.createElement('article');
let container = document.getElementById("product-list");
newContainer.classList.add("product");
const newContent = document.createElement('div');
let content = document.getElementsByTagName("article");
newContent.classList.add("product-content");
const newProductInfo = document.createElement('div');
let productInfo = document.querySelector("#product-list > article > product-content");
newProductInfo.classList.add("product-info");
const newProductTitleColumn = document.createElement('div');
let productTitleColumn = document.querySelector("#product-list > article > product-content > product-info");
newProductTitleColumn.classList.add("product-title-column");
const newProductRow = document.createElement('div');
let productRow = document.querySelector("#product-list > article > product-content > product-info > product-title-column");
newProductRow.classList.add("product-row");
const newProductTitle = document.createElement('h2');
let productTitle = document.querySelector("#product-list > article > product-content > product-info > product-title-column > product-row");
newProductTitle.classList.add("product-title");
container.appendChild(newContainer).appendChild(newContent).appendChild(newProductInfo).appendChild(newProductTitleColumn).appendChild(newProductRow).appendChild(newProductTitle);
};
* {
padding: 0;
margin: 0;
height: auto;
list-style: none;
font-family: "Lato", sans-serif;
color: #363636;
text-decoration: none;
}
.product-list {
display: flex;
justify-content: center;
}
.product-content {
display: flex;
align-items: center;
padding: 50px;
margin: 50px;
width: fit-content;
border-radius: 25px;
box-shadow: 0px 0px 50px #bdbdbd;
}
.product-img {
width: 350px;
height: 350px;
border-radius: 25px;
}
.product-title-column {
display: flex;
flex-direction: column;
}
.product-info {
height: 350px;
margin-left: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 350px;
}
.product-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-line {
display: flex;
justify-content: center;
width: 350px;
height: 3px;
margin-top: 5px;
background-color: #363636;
}
.product-title {
font-weight: 900;
font-size: 2em;
}
.product-price {
font-weight: 600;
font-size: 2em;
}
.product-description {
font-size: 1.25em;
}
.shipping-info {
display: flex;
justify-content: space-between;
font-weight: 700;
margin: 10px;
}
.product-quantity {
text-align: right;
font-size: 1.25em;
}
.product-link {
display: block;
font-size: 1.5em;
text-align: center;
padding: 25px;
font-weight: 800;
border-radius: 15px;
color: white;
background-color: #eb6d20;
}
<article class="product">
<div class="product-content">
<img src="Images/Products/IMG_4303.JPG" class="product-img">
<div class="product-info">
<div class="product-title-column">
<div class="product-row">
<h2 class="product-title">Bavoir élastique</h2>
<h2 class="product-title">-</h2>
<h2 class="product-price">5€</h2>
</div>
<p class="product-line"></p>
</div>
<div class="product-column">
<p class="product-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Recusandae minus tenetur
ea placeat odit et doloremque laudantium incidunt blanditiis minima quaerat adipisci, nesciunt
distinctio
possimus quas odio nostrum rem commodi.</p>
<div class="shipping-info">
<p class="product-quantity">Livraison gratuite</p>
<p class="product-quantity">9 en stock <i class="fas fa-check"></i></p>
</div>
<a class="product-link" href="#">Acheter sur Etsy</a>
</div>
</div>
</div>
</article>
I have made a HTML page, in that when I hover on the container class, I wanted the read-more class to be displayed or else it should be hidden.
I've tried a lot but I'm unable to figure out it!
If you know, please make it for me!!
I'm even OK with JQuery
HTML Code
HTML
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn">Read More</a>
</div>
</div>
</div>
</div>
CSS Code
CSS
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
JavaScript Code
JAVASCRIPT
????????
If you NEED javascript, just add an event listener to the <div>.
Here is an example:
document.getElementById("info").addEventListener("mouseover", function() {
document.getElementById("auBtn").style = "display: block;";
});
document.getElementById("info").addEventListener("mouseout", function() {
document.getElementById("auBtn").style = "display: none;";
});
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info" id="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn" style="display: none;" id="_id">Read More</a>
</div>
</div>
</div>
</div>
A living demo: https://codepen.io/marchmello/pen/mdJNNQV?editors=1010
Or you can add some transitions by using both of functions hide() and fadeToggle() in jQuery:
$("#auBtn").hide();
$("#info").hover(function() {
$("#auBtn").fadeToggle(400);
});
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
/* display: none; */
}
.author .box .container .info a:hover {
background: var(--dark-primary);
transition: linear 0.2s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info" id="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<a class="read-more" href="#" id="auBtn" id="_id">Read More</a>
</div>
</div>
</div>
</div>
Living demo: https://codepen.io/marchmello/pen/ExVYYjz
You can also do it with CSS as
<!DOCTYPE html>
<html>
<style>
.author {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
.author .box {
margin-left: 80px;
margin-right: 80px;
}
.author .box .container {
padding: 1em;
width: 100%;
height: auto;
border-radius: 5px;;
background: linear-gradient(45deg, #F45C43, #EB3349);
background-size: contain;
}
.author .box .container .logo {
padding: 8px;
margin: 12px;
float: left;
display: flex;
align-items: center;
justify-content: center;
}
.author .box .container .logo img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 6px solid var(--light);
}
.author .box .container .info {
float: right;
padding: 10px;
margin: 4px;
}
.author .box .container .info h2 {
font-size: 26px;
font-family: 'Lobster', cursive;
transition: linear 0.3s;
}
.author .box .container .info h2 a {
text-decoration: none;
color: var(--light-primary);
cursor: pointer;
text-shadow: 0.1px 0.1px 2px var(--dark);
transition: ease 0.3s;
}
.author .box .container .info h2 a:hover {
transition: linear 0.3s;
text-shadow: 0.8px 0.8px 3.9px var(--dark);
color: var(--primary);
}
.author .box .container .info p {
font-size: 20px;
font-family: 'Poppins', sans-serif;
font-weight: 600;
line-height: 32px;
word-spacing: 1px;
color: var(--light-primary);
text-shadow: 0.1px 0.1px var(--dark);
cursor: default;
}
.author .box .container .info .read-more {
text-decoration: none;
float: right;
padding: 12px;
margin: 5px;
text-transform: uppercase;
font-size: 1em;
font-family: 'Lato', sans-serif;
font-weight: 900;
color: var(--dark);
background: var(--primary);
transition: ease 0.4s;
/* display: none; */
}
.details{
position : relative;
}
.tooltip {
visibility : hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 43px;
left: 84%;
margin-left: -60px;
}
.tooltip::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.details:hover .tooltip {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="author">
<div class="box">
<div class="container" id="auHov">
<div class="logo">
<img src="authorLogo.png" alt="Author Logo">
</div>
<div class="info">
<h2>Quic Flicks</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<div class = "details">
<a class="read-more" href="#" id="auBtn">Read More</a>
<span class ="tooltip">Read</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Note : For more details https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_top
Im pretty new at this guyz... I try to make a custom bootstrap change the slides automatically. I follow the documentation here https://getbootstrap.com/docs/4.3/components/carousel/ but i cant find what im doing wrong. The slides turn by hand just find but i cant make them change on interval
https://codepen.io/Ale3andr0s/pen/ExYPWgQ#=
Ι followed the documentation as i should. I imported bootstrap.js and jquery.js but the slides still dont change on automatic interval. I also used
$('.carousel').carousel({
interval: 10
});
and
$(document).ready(function() {
$('.carousel').carousel({
interval: 10
})
});
HTML:
<div class="slider carousel slide" data-ride="carousel">
<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav active"/>
<input type="radio" name="slider" title="slide2" class="slider__nav"/>
<input type="radio" name="slider" title="slide3" class="slider__nav"/>
<input type="radio" name="slider" title="slide4" class="slider__nav"/>
<div class="slider__inner data-interval=100">
<div class="slider__contents active"><i class="slider__image fa fa-codepen"></i>
<h2 class="slider__caption">codepen</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-newspaper-o"></i>
<h2 class="slider__caption">newspaper-o</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-television"></i>
<h2 class="slider__caption">television</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
<div class="slider__contents"><i class="slider__image fa fa-diamond"></i>
<h2 class="slider__caption">diamond</h2>
<p class="slider__txt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At cupiditate omnis possimus illo quos, corporis minima!</p>
</div>
</div>
</div>
CSS:
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
#import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
#import url(https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css);
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
color: #444;
font-family: 'Roboto', sans-serif;
font-size: 1rem;
line-height: 1.5;
}
.slider {
height: 100%;
position: relative;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-align: end;
-webkit-align-items: flex-end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__nav {
width: 12px;
height: 12px;
margin: 2rem 12px;
border-radius: 50%;
z-index: 10;
outline: 6px solid #ccc;
outline-offset: -6px;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.slider__nav:checked {
-webkit-animation: check 0.4s linear forwards;
animation: check 0.4s linear forwards;
}
.slider__nav:checked:nth-of-type(1) ~ .slider__inner {
left: 0%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
left: -100%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
left: -200%;
}
.slider__nav:checked:nth-of-type(4) ~ .slider__inner {
left: -300%;
}
.slider__inner {
position: absolute;
top: 0;
left: 0;
width: 400%;
height: 100%;
-webkit-transition: left 0.4s;
transition: left 0.4s;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.slider__contents {
height: 100%;
padding: 2rem;
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.slider__image {
font-size: 2.7rem;
color: #2196F3;
}
.slider__caption {
font-weight: 500;
margin: 2rem 0 1rem;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: uppercase;
}
.slider__txt {
color: #999;
margin-bottom: 3rem;
max-width: 300px;
}
#-webkit-keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
#keyframes check {
50% {
outline-color: #333;
box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
100% {
outline-color: #333;
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}
JS:
$('.carousel').carousel({
interval: 10
});
$(document).ready(function() {
$('.carousel').carousel({
interval: 10
})
});
The carousel should turn slides automatically but it doesnt.
the attribute name is data-interval
and remeber that the unit of time is Millisecond
<div class="carousel-item active" data-interval="10000">
The Code: http://jsfiddle.net/techsin/zLA8j/4/show
For some reason when you click the button and as animation is about to finish a white falsh appears for no reason. I can't debug it. I need help. But sometimes There is no problem.
$('.btn').click(
function(){
var t= $(this);
t.css('transform','scale(.9)');
setTimeout(function(){t.css('transform','');},600);
}
);
html---
<div class="con">
<div class="con2">
<div class="pop">
<header>Would you like to be Awesome?</header>
<div class="txt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat totam quos quisquam in iure ea provident asperiores nesciunt assumenda autem sequi expedita quae reiciendis labore vitae aspernatur eaque repellat quis.</p>
</div>
</div>
<div class="btns">
css---
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: rgb(245, 246, 247);
width: 100%;
display: table;
}
.con {
display: table-cell;
vertical-align: middle;
}
.con2 {
display: table;
margin: auto;
}
.pop {
min-width: 300px;
border-radius:3px;
border:1px solid rgb(218, 218, 218);
position: relative;
height: 250px;
background-color: rgb(252, 253, 255);
}
.pop header {
height: 50px; line-height: 50px;
background-color: rgb(248, 248, 248);
position: relative;
padding-left: 15px;
font-family: sans-serif;
font-weight: bold;
color: rgb(123, 123, 134);;
}
.pop header:after {
content:'';
position: absolute;
height: 1px;
background: rgb(207, 207, 207);
left: 0;
width: 100%;
bottom: 0;
}
.btn {
-webkit-transition: all .2s ease-in-out;;
height: 48px;
width: 95px;
background-color: rgb(117, 117, 117);
border-radius:3px;
text-align: center;
line-height: 48px;
font-family: sans-serif;
color:white;
font-size: 15px;
display: inline-block;
margin: 0 5px;
cursor:default;
}
.btns {
width:300px;
text-align: center;
margin: auto;
margin-top: 11px;
}
.btn:hover { -webkit-transform: scale(1.1); }
.dec {background-color: rgb(70, 182, 151); }
.txt {
/* border:1px solid; */
text-align: center;
padding: 15px;
}
.txt p {
text-align: left;
width: 250px;
font-family: sans-serif;
font-size: 14px;
line-height: 22px;
margin: auto;
}