I just came across a website where almost all the div were styled that way, and I would be interested to know how it is done.
You can easily get the orange shape by using the clip-path property. I used a Generator to make this shape.
p {
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
width: 300px;
background-color: #1D1D1D;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading {
font-size: 18px;
text-transform: uppercase;
color: white;
}
.orange {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 20px;
width: 100%;
height: 100px;
margin-top: 0;
background-color: #FB961B;
clip-path: polygon(0 0, 100% 0, 100% 50%, 60% 100%, 40% 100%, 0% 50%);
}
.container {
margin: 10px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p{
color: white;
}
#heading{
font-size: 18px;
text-transform: uppercase;
}
.para{
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="orange">
<p class="heading">starter</p>
<p class="para">weekly 100% for 4 times</p>
</div>
<div class="container">
<p id="heading">weekly return</p>
<p>Lorem ipsum... </p>
</div>
</div>
</body>
</html>
Related
I am sure this is really easy but I am facing issue the image is overflowing the card-box section
Wanted to achieve similar to this
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product</title>
</head>
<body>
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
tried to change height and width of container, tried changing display of image class to block but no change is shown in output
My output:
enter image description here
Expecting
enter image description here
I'm not sure flex is the best answer to do that. Personally I would prefer grid.
Display grid for the card, position left and right (image, details) inside.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body {
background-color: hsl(30, 38%, 92%);
}
.container {
display: flex;
justify-content: center;
position: relative;
z-index: -1;
border: 1px solid black;
}
.product {
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image {
grid-area: 1 / 1 / 2 / 2;
height: 100%;
width: auto;
}
.details {
grid-area: 1 / 2 / 2 / 3;
}
img {
max-width: 100%;
height: 100%;
border-radius: 1.5em 0 0 1.5em;
}
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
This may be a way to solve it: just add style="overflow:hidden;" to your code. Or you can try to use "border-radius:20px;" to hide it.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product</title>
</head>
<body>
<div class="container">
<section class="card-box" style="overflow:hidden;">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed last year.
i want to set z-index -999 in the green small rectangle that be set it behind the glass card but it dose not work. i have position rel and abs in my code and i rellay confiusing about this that why it is not work!
.second-card::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -5%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
i use before for that.
https://jsfiddle.net/9do7hpnx/1/
The issue is that you are trying to hide the green rectangle from its parent , you cant do that , because when you apply z index to the parent , it gets applied to the child also ( ie the green rectangle ) to solve this issue create another div which is not a child of the blurred div like
here is a working demo
https://jsfiddle.net/mcshjxqt/1/
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Payment</title>
</head><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Payment</title>
</head>
<body>
<div class="payment-container">
<div class="payment-content">
<div class="container-content">
<h2 class="payment-title">Checkout</h2>
<p class="payment-timer">
<span class="timer-txt">0</span>
<span class="timer-txt">1</span>
<span class="timer-semicolumn">:</span>
<span class="timer-txt">1</span>
<span class="timer-txt">9</span>
</p>
</div>
</div>
<div class="payment">
<div class="card">
<div class="main-card">
<div class="main-card--top">
<div class='greenBg'>
</div>
<div class="second-card">
<div class="second-card--logo">
<img src="img/logo.png" alt="logo" class="logo-img">
</div>
<div class="second-card--content">
<div class="second-card--txt">
<p class="card-name">Benjamin Taylor</p>
<div class="card-name--details">
<span class=""></span>
</div>
</div>
<div class="second-card--icon">
<p class="second-card--date">
12 / 05
</p>
<ion-icon class="sec-icon-wifi" name="wifi-outline"></ion-icon>
</div>
</div>
</div>
<div class="main-card--content">
<div class="main-card--order">
<p class="order-title">order</p>
<p class="order-number">4239421</p>
</div>
<div class="main-card--product">
<p class="product-title">product</p>
<p class="product-name">reels on rails</p>
</div>
<div class="main-card--vat">
<p class="vat-title">vat (<span class="vat-per">10</span>%)</p>
<p class="vat-price">Rp 25.000</p>
</div>
</div>
</div>
<div class="main-card--bottom">
<div class="main-card--total">
<div class="total-price--content">
<p class="total-title">total</p>
<div class="total-price">
<p class="total-price-sym">Rp</p>
<p class="totla-price-pay">2.256.100</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pay">2</div>
</div>
</div>
<!-- JavaScript -->
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#500;600;700&display=swap');
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html {
font-size: 62.5%;
}
body {
min-height: 100vh;
font-size: 1rem;
background-color: #212529;
color: #fff;
}
/* ================== Payment container ================== */
.payment-container {
max-width: 100rem;
margin-inline: auto;
}
/* ================== Payment content ================== */
.payment-content {
display: grid;
grid-template-columns: 1fr 2fr;
padding: 3.2rem;
}
.payment-title {
font-weight: 600;
font-size: 2rem;
}
.container-content {
grid-column: 2;
display: flex;
align-items: center;
justify-content: space-between;
}
/* ================== Payment timer ================== */
.payment-timer {
display: flex;
align-items: center;
gap: .5rem;
}
.timer-txt {
width: 3.2rem;
height: 3.2rem;
font-size: 2rem;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
/* ================== Payment ================== */
.payment {
display: grid;
grid-template-columns: 1fr 2fr;
}
/* ================== Card ================== */
.main-card {
background-color: #313538;
width: 90%;
margin-inline: auto;
}
.main-card--content {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.main-card-container--content {
width: 70%;
margin-inline: auto;
}
.second-card {
background: rgba(255, 255, 255, 0.25);
border-radius: 5px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-bottom: 5px solid #94d82d;
min-height: 20rem;
transform: translateY(-60px);
display: flex;
flex-direction: column;
justify-content: space-around;
}
.main-card--top {
width: 75%;
margin-inline: auto;
position: relative;
z-index: 999;
}
.second-card--logo {
margin-block: 4rem;
text-align: center;
}
.logo-img {
width: 6.4rem;
}
.sec-icon-wifi {
color: #fff;
width: 2rem;
height: 2rem;
}
.second-card--content {
display: flex;
flex-direction: column;
gap: 3.2rem;
}
.card-name {
font-size: 1.4rem;
margin-block: 5px;
}
.card-name--details {
font-size: 1.2rem;
}
.second-card--icon {
display: flex;
justify-content: space-around;
align-items: center;
margin-block: 1rem;
}
.second-card--txt {
text-align: center;
margin-top: 2rem;
}
.order-title,
.product-title,
.vat-title {
color: #8a8a8a;
}
.main-card--bottom {
background-color: #525353;
padding: 2rem 3rem;
position: relative;
}
.main-card--bottom::before {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
left: -5%;
}
.main-card--bottom::after {
content: '';
display: block;
width: 3rem;
height: 3rem;
background: #212529;
border-radius: 50%;
position: absolute;
top: -20%;
right: -5%;
}
.total-price--content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.total-title {
text-align: right;
text-transform: uppercase;
font-weight: 600;
}
.total-price-sym {
font-weight: 700;
}
.totla-price-pay {
font-size: 1.2rem;
font-weight: 700;
}
.total-price {
display: flex;
justify-content: space-between;
}
.greenBg::before {
content: '';
display: inline-block;
width: 5rem;
height: 2rem;
background-color: #82c91e;
border-radius: 2px;
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
z-index: -999;
}
I have put this code on the board class to organize the < div > in the class.
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
However the justify content doesn't work... both div inside board class glued each other. but the align-items and flex-flow works well, why justify-content doesn't?
Here is my website looks like currently
my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
<header>
<h1>Draw clues about the music playing </h1> <img src="images/v94_61.png">
</header>
<div class="board">
<div class="color-board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="drawer">
</div>
<div class="tool-board">
</div>
</div>
</main>
</body>
</html>
my css code:
body {
margin: 0px;
background: linear-gradient(rgba(218, 210, 153, 1), rgba(176, 218, 185, 1));
background-repeat: no-repeat;
background-size: 100% 100%;
}
main {
display: flex;
flex-flow: column nowrap;
align-items: center;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
margin: 10px;
padding: 15px;
overflow: hidden;
}
header {
display: flex;
flex-flow: row nowrap;
justify-content: center;
width: fit-content;
height: fit-content;
border-radius: 1.75em;
background-color:rgba(131, 131, 131, 0.4000000059604645);
margin-bottom: 2%;
padding: 0px 5%;
}
header img {
width: "fit-content";
height: 90px;
}
header h1 {
vertical-align: middle;
white-space: nowrap;
min-width: 270px;
}
.board{
display:flex;
flex-flow: row nowrap;
align-items: center;
justify-content: space-around;
}
.color-board{
display: flex;
flex-flow: row wrap;
align-items: center;
background-color: rgba(131, 131, 131, 0.4000000059604645);
width: 100px;
height: fit-content;
}
.color-board div {
width: 30px;
height: 30px;
margin: 5px;
border: 1px black solid;
border-radius: 0.5em;
background-color: white;
}
.drawer{
background-color: white;
border: 3px solid rgba(76, 121, 60, 1);
border-radius: 1em;
width: 732px;
height: 352px;
}
I have been trying to use a media query to resize some letters when the device or width of the browser screen changes.
I have checked the syntax and I have added on my main HTML:
<meta name="viewport"content="width=device-width, initial-scale=1"/> on my main HTML
The media query I am trying to implement is this one:
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
If it matters I am developing on Angular 10 in a Mac and testing with Safari and Chrome on a Mac computer and iPhone XS.
app.component.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"/>
<!-- shrink-to-fit=no -->
<title>title</title>
</head>
<body class="mat-app-background">
<div class="page">
<h1>Clock</h1>
<div class="menu-container" >
<button mat-raised-button class="clock type1">World Clock</button>
<button mat-raised-button class="clock type2">Alarm</button>
<button mat-raised-button class="clock type3">Stopwatch</button>
<button mat-raised-button class="clock type4" (click)="myFunction('hello')">Timer</button>
</div>
<div class="content">
<!-- <div class="box"> box</div> -->
<app-timer>
</app-timer>
</div>
</div>
</body>
</html>
<router-outlet></router-outlet>
app.component.css
#import url('https://fonts.googleapis.com/css2?family=Karla&family=Montserrat:wght#500&display=swap');
h1{
text-align:center;
font-size: 6em;
font-family: 'Montserrat', sans-serif;
padding-top: 40px;
padding-bottom: 20px;
}
.page{
height: 100vh;
background-color: #f1eaea;
}
.menu-container{
height: 100px;
display: flex;
border: 0px solid black;
background-color: #f1eaea;
flex-direction: row;
align-items: center;
justify-content: center;
}
.clock{
display: flex;
text-align: center;
font-family: 'Karla', sans-serif;
color: white;
font-weight: 600;
font-size: 1.6em;
line-height: 1.4;
align-items: center;
justify-content: center;
height: 80%;
width: 10em;
margin: 6px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.80);
}
.type1{
background-color: #002642;
}
.type2{
background-color: #840032;
}
.type3{
background-color: #E59500;
}
.type4{
background-color: #2A9D8F;
}
.content{
display: flex;
flex-direction: row;
align-items: flex-start;
padding-top: 5vh;
justify-content: center;
height: calc(100vh - 265px);
}
.box{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 80%;
}
#media screen and(max-width:720px)and (max-device-width:720px){
.clock{
font-size: 0.5em;
}
}
Global css style.css
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
html {
min-height: 100%;
}
body{
min-height:100%;
height:100vh;
}
html, body { height: 100%; }
I want a centered heading like this using CSS only [Without flexbox].
[EDIT] My example using flexbox below. There are some limitations with this code as I can't use the same class again for a different heading as the title is hardcoded in the CSS. Does using flexbox for such a small task is a good practice?
body {
background-color: #0f1932;
}
.wrapper {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px 0px;
}
.heading {
color: white;
}
.heading::before {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
transform: translateX(-50%);
opacity: 0.06;
text-transform: uppercase;
content: "demo-shadow";
}
.heading::after {
font-family: 'Quicksand', sans-serif;
display: flex;
justify-content: center;
align-items: center;
margin-top: -40px;
content: "demo";
text-transform: uppercase;
white-space: nowrap;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<header>
<div class="heading-container">
<h1 class="heading"></h1>
</div>
</header>
</div>
</body>
</html>
.
Got the solution. I have to use the custom data attribute to display dynamic content.
body {
background-color: #0f1932;
}
.wrapper {
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
}
header {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 10px 0px;
}
.heading {
color: white;
}
.heading::before {
font-family: 'Montserrat', sans-serif;
font-size: 3rem;
transform: translateX(-50%);
opacity: 0.06;
text-transform: uppercase;
content: attr(before-title);;
}
.heading::after {
font-family: 'Quicksand', sans-serif;
display: flex;
justify-content: center;
align-items: center;
margin-top: -40px;
content: attr(after-title);;
text-transform: uppercase;
white-space: nowrap;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<header>
<div class="heading-container">
<h1 class="heading" after-title="titele1" before-title="titele1"></h1>
<h1 class="heading" after-title="titele2" before-title="titele2"></h1>
</div>
</header>
</div>
</body>
</html>