If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box.
If you notice the code snippet, you will see that a "read more" button appears. How can I add another "read more" button to align side by side? I may even want to include three "read more" buttons, each opening in a separate modal box.
Two read more button inline can be styled using the float property.
Add
.view a.info{
float:left;
}.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 1000px;
max-width: 90%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
h1 {
color:green;
padding-left:10px
}
#hover {
color:rgba(188,175,204,0.9)
}
h2#testimonials {
color:#fffae3
}
div#all {
height: 90%;
width: 100%;
max-height: 900px;
display: flex;
overflow: overlay;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-style: solid;
border-width: 1px;
background: #634c30
}
.view {
float:left;
border:5px solid #fff;
overflow:hidden;
position:relative;
text-align:center;
box-shadow:1px 1px 2px #e6e6e6;
cursor:default;
background:#fff url(../images/bgimg.jpg) no-repeat center center;
margin:10px
}
.view .mask,.view .content {
width:100%;
height:100%;
position:absolute;
overflow:auto;
top:0;
left:1px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center
}
.view img {
display:block;
position:relative
}
.view h2 {
text-transform:uppercase;
color:white;
text-align:center;
position:relative;
font-size:25px;
font-family:Raleway, serif;
margin:20px 0 0;
padding:10px
}
.view p {
font-family:Merriweather, serif;
font-style:italic;
font-size:14px;
position:relative;
color:black;
text-align:center;
padding:0
}
.view a.info{
float:left;
text-decoration: none;
background: #000;
color: white;
font-family: Raleway, serif;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
padding: 2px 10px;
margin: 4px;
}
.view a.info:hover {
box-shadow:0 0 5px #000
}
.view-tenth img {
width:650px;
height:200px;
transform:scaleY(1);
transition:all 3s ease-in-out
}
.view-tenth .mask {
background-color:rgba(255,231,179,0.3);
transition:all .5s linear;
opacity:0
}
.view-tenth h2 {
border-bottom:1px solid rgba(0,0,0,0.3);
background:transparent;
transform:scale(0);
color:green;
transition:all 3.5s linear;
opacity:0;
margin:20px 40px 0
}
.view-tenth p {
color:red;
opacity:0;
transform:scale(0);
transition:all 2.5s linear
}
.view-tenth a.info {
opacity:0;
transform:scale(0);
transition:all 4.5s linear
}
.view-tenth:hover img {
-webkit-transform:scale(10);
transform:scale(10);
opacity:0
}
.view-tenth:hover .mask {
opacity:1
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
transform:scale(1);
opacity:1
Looking to create a design similar to this one, but unsure of the terminology: I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw .container { width: 600px; } .speaker ...
Within my Angular 12 application, I am seeking to enable users to "view" a PDF file stored locally in the application within a new tab on Google Chrome. Currently, when implementing the code below in HTML, the file downloads rather than opening in a new ta ...
I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it. <ul class="menu"> <li class=" menuItem1 first parent"></li> <li class=" menuItem2 parent"></li> ...
Is it possible to create a unique JQuery slidedown() function that will only be applied to the div where the mouse is hovering? I have managed to make it work by giving each div a separate class, but when I name them all the same, it triggers the slide do ...
For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...
Is there a way to limit the number of times a button can be clicked using jQuery? For example, I want a button that can only be clicked three times before disabling itself automatically. test.html <div class="main"> <input class="one" type="t ...
I am having trouble deleting a table row from my database using MySQL and PHP. Despite reviewing my code, I cannot identify the issue. I believe that I am close to resolving the problem, likely something simple that I am overlooking. When hovering over th ...
Is there a way to make the tooltip wider in Bootstrap Vue? I have a long statement to display in the tooltip, but it is only showing three words per row, resulting in a taller tooltip with less width. <div> <span id="disabled-wrapper" class=" ...
I'm struggling to achieve automatic vertical alignment for this. While I can manually center it using padding-bottom, I prefer a way to position it vertically on its own. How can I accomplish this while retaining the display: inline-block feature? &l ...
How can I create a simpler JavaScript code for clicking buttons to input letters into a text box? Instead of creating getElementByID for each button, is it possible to use some kind of loop? <div id="alpha" > <br/> <div align="cente ...
The hyperlinks on this particular page seem to be malfunctioning despite the fact that the li.a tags are correctly targeting specific section IDs. Markup: <header> <a href="#0" class="nav_icon"><i></i></a> </header> ...
My webpage is encoded in HTML with the charset ISO-8859-2. All content on the page adheres to this charset and appears correctly. However, I am facing an issue when making an Ajax call to a PHP server. When I send the character á and receive the same valu ...
I am trying to position a Font Awesome icon in a React Native project using absolute positioning relative to the grandparent element, rather than its direct parent. After some research, I came across the following information on this page: https://reactna ...
One interesting feature on my webpage is a textarea that can be resized using resize:both; I am looking for a way to apply a specific style to this textarea only when the user resizes it. While I would prefer to achieve this with CSS alone, it seems like ...
Hey there, I'm looking to design a header similar to the one shown in this image. Can someone provide guidance on how I can achieve this UI using React.js? ...
As a newcomer to this, I could really use some guidance. Currently, I have a Mat Table that is displaying a specific range of data from my firestore. My goal is to be able to click on a particular row and have its data appear in a list below the table. I ...
For days, I have been on a relentless search for a solution to my problem to no avail. My ideal scenario involves embedding a fillable pdf form into an intranet html form for submission to the server, with the ability to parse field/values being a bonus b ...
Is there a way to modify the color of my slider using <input type="range" id="input"> I attempted changing it with color, background-color, and bg-color but none seem to work... UPDATE: I am looking to alter it with javascript. Maybe something al ...
Visit this website for agriculture updates: I have utilized PHP to generate specific color schemes and styles. It seems to function correctly on all tested desktop laptops, however, it fails to load the CSS files (only loads HTML) on a Galaxy Note runnin ...
I am attempting to create and retrieve a cookie using JavaScript. Despite running the code below in Google Chrome, the cookie does not persist after page reload. Here is my code: <html> <title> Cookies </title> <b ...