Could you help me with designing a CSS design that is found in the following link?
Could you help me with designing a CSS design that is found in the following link?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My Document</title>
</head>
<style>
.upperdiv {
width: 200px;
height: 80px;
border: 1px solid;
border-radius: 25px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.upperdiv::before {
position: absolute;
padding: 2em;
border-radius: 50%;
content: '';
background: white;
}
.TL::before {
margin: -28px;
padding: 2em;
}
.TR::before {
margin: -28px;
margin-left: 167px;
}
.lowerdiv {
width: 200px;
height: 80px;
border: 1px solid;
border-radius: 25px;
border-top: 0px solid;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.lowerdiv::before {
position: absolute;
padding: 2em;
border-radius: 50%;
content: '';
background: white;
}
.BR::before {
margin: -28px;
margin-top: 45px;
margin-left: 167px;
}
.BL::before {
margin: -28px;
margin-top: 45px;
margin-left: -33px;
}
.container {
margin: 3em;
display: inline-block;
}
</style>
<body>
<div class="container">
<div class="upperdiv TL"></div>
<div class="lowerdiv"></div>
</div>
<div class="container">
<div class="upperdiv TR"></div>
<div class="lowerdiv"></div>
</div>
<div class="container">
<div class="upperdiv"></div>
<div class="lowerdiv BR"></div>
</div>
<div class="container">
<div class="upperdiv"></div>
<div class="lowerdiv BL"></div>
</div>
</body>
</html>One way to achieve this is by implementing the following design.
.container {
width: 100px;
height: 50px;
background: #FFF;
border-radius: 10px;
border: 1px solid #000;
position: relative;
float: left;
margin: 5px;
font-size: 10px;
line-height: 25px;
text-align: center;
}
.contentsTop {
width: 100%;
height: 25px;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.contentsBottom {
width: 100%;
height: 24px;
position: absolute;
left: 0px;
top: 25px;
border-top: 1px solid #000;
z-index: 1;
}
.hideCorner {
height: 10px;
width: 10px;
background: #FFF;
position: absolute;
}
.top-left {
top: 0px;
left: 0px;
}
.top-right {
top: 0px;
right: 0px;
}
.bottom-left {
bottom: 0px;
left: 0px;
}
.bottom-right {
bottom: 0px;
right: 0px;
}<div class="container">
<div class="hideCorner top-left"></div>
<div class="contentsTop">TOP LEFT</div>
<div class="contentsBottom">TOP LEFT</div>
</div>
<div class="container">
<div class="hideCorner top-right"></div>
<div class="contentsTop">TOP RIGHT</div>
<div class="contentsBottom">TOP RIGHT</div>
</div>
<div class="container">
<div class="hideCorner bottom-left"></div>
<div class="contentsTop">BOTTOM LEFT</div>
<div class="contentsBottom">BOTTOM LEFT</div>
</div>
<div class="container">
<div class="hideCorner bottom-right"></div>
<div class="contentsTop">BOTTOM RIGHT</div>
<div class="contentsBottom">BOTTOM RIGHT</div>
</div>I'm having trouble coming up with a title for my question, so please bear with me. I am working on a Bootstrap website and I want to create a consistent navbar and footer across all pages without duplicating the code in each document. How can I achiev ...
As I develop a web app using AngularJS and Gulp, I encounter an issue where the CSS does not seem to work when running 'gulp serve'. Despite attempting to reinstall various components like node_modules, Node.js, and Gulp, the same error persists. ...
My CSS file contains properties that are common for both PC and cellphone browsing, but some vary between the two platforms. I utilize @media screen and (max-width: X px) to handle this, with one set of rules for narrow screens and another for wider screen ...
I have a simple JS animation script that fetches data from the <div class="quiz"> Some content </div> for animation. When I include this script in my HTML, the animation and other functions such as previous and next work properly. See ...
Currently, I am diving into the world of react while also incorporating bootstrap styles. My current project involves creating a navigation bar using bootstrap, however, I'm facing an issue where the navbar is displaying in the middle rather than wher ...
Is there a way to select only one checkbox out of two? I know it can be done easily using Jquery, but is there a default option in HTML for this as well? I have exactly 2 checkboxes. Thank you. code: <input type="checkbox" value="1" name="foo" /> ...
index.html - here is the index.html file code containing all the necessary html code <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width ...
Css: .woocommerce-placeholder.wp-post-image { content: url("DSC0926-1.jpg"); } /*for firefox*/ .woocommerce-placeholder.wp-post-image::before { content: url("DSC0926-1.jpg"); } HTML <img src="placeholder.png" alt="Placeholder" class="woocomm ...
I have been struggling to center the buttons on my navigation bar for quite some time now, despite my efforts searching through Google (I'm still a beginner in CSS). Below is the code I have for the navbar (excluding my numerous unsuccessful attempts ...
I am facing a situation where I need to manipulate a CSS file through PHP. The CSS file contains the following properties: #firstdiv { width:100%; height:200px; } #seconddiv { width:80%; height:70px; } #thirddiv { width:80%; height:70px; } #firstdiv { col ...
Is there a way to apply border radius to an image only on larger screens and maintain straight edges on smaller screens? I'm working with Nextjs and Tailwind CSS. ...
Looking to customize the color and size of an svg image named "headset.svg". Prior to this, I used next/image: <Image src={'/headset.svg'} alt='logo' width={30} height={30} className='object-contain' /> The s ...
Ensure that the text is centered vertically with left padding and placeholder text included Check out the image link below: https://i.stack.imgur.com/PbHDa.jpg Snippet of my xPage code: <xe:djTextBox id="djTextBoxSearch" style="width:100%;height: ...
Currently, I'm developing a drawing board using only html/css/jquery and the drawing functionality is working smoothly. The approach I've taken involves capturing the mousemove events and placing a dot (div) at each point where the event occurs, ...
Hello fellow developers, I am currently working with npm bootstrap version 4.5.2 and above. However, I am facing an issue with the compatibility of @popperjs/core. If anyone can assist me in resolving the bootstrap.js error temporarily, specifically re ...
Is there a way to hide the button with the id #stats while the user is scrolling, and then have it fade back in once they finish scrolling? It seems like the code below is not working as expected. Any help would be greatly appreciated! <button id="st ...
Hey there, I'm currently working on dynamically changing the CSS of a website. Let's say we have a div like this: <div id="fooid" class="fooclass" ></div> The div has a class "fooclass" and an ID "fooid", and we're getting its ...
When using Impress.js, I noticed that the default slides have a large left margin (or padding - it's hard to determine with Firefox's Inspector). I have a slide with a wide <pre> block that would fit if it were aligned to the left, but it d ...
In my React project, I created a table using the array.map function. However, I'm facing an issue where the output of array.map is always aligned to the left, even before the table itself. I want to center the entire table. JSX: <div className=&qu ...
I'm having trouble positioning the eyeball icon to the right side of my form when using Bootstrap v5 and FontAwesome v5. Instead, the password field is being shifted further to the right compared to the username field, and the eye icon is not displayi ...