How to add a coloured line above a card |
How to add a coloured line above a card |
JUI43555 |
Apr 19 2023, 11:31 PM
Post
#1
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Hi, trying to replicate the screenshot below with the coloured lines above the cards. But as per the code provided the line seems to move when re-scaling the screen size and is not fixed to the box. Any tips?
Thanks. 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="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;600&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="style.css" /> <title>Frontend Mentor | Four card feature section</title> </head> <body> <main> <div class="container"> <section class="container__text"> <div class="container__text--content"> <h2 class="thin-heading">Reliable, efficient delivery</h2> <h2 class="bold-heading">Powered by Technology</h2> <p>Our Artificial Intelligence powered tools use millions of project data points to ensure that your project is successful</p> </div> </section> <section class="card-container"> <div class="card card1"> <div class="supervisor-content"> <h3>Supervisor</h3> <p>Monitors activity to identify project roadblocks</p> <img src="images/icon-supervisor.svg" alt="" class="icons" /> </div> </div> <div class="middle-section"> <div class="card card2"> <div class="team-content"> <h3>Team Builder</h3> <p>Scans our talent network to create the optimal team for your project</p> <img src="images/icon-team-builder.svg" alt="" class="icons" /> </div> </div> <div class="card card3"> <div class="karma-content"> <h3>Karma</h3> <p>Regularly evaluates our talent to ensure quality</p> <img src="images/icon-karma.svg" alt="" class="icons" /> </div> </div> </div> <div class="card card4"> <div class="calculator-content"> <h3>Calculator</h3> <p>Uses data from past projects to provide better delivery estimates</p> <img src="images/icon-calculator.svg" alt="" class="icons" /> </div> </div> </section> </div> </main> CODE :root { --text-color: #4d4f62; --red: hsl(0, 78%, 62%); --cyan: hsl(180, 62%, 55%); --orange: hsl(34, 97%, 64%); --blue: hsl(212, 86%, 64%); } * { margin: 0; padding: 0; box-sizing: border-box; } body { margin: 80px 165px; font-family: "Poppins", sans-serif; color: var(--text-color); background-color: #fafafa; } .container__text { text-align: center; margin-bottom: 64px; } .thin-heading { font-weight: 200; font-size: 36px; } .bold-heading { font-weight: 600; font-size: 36px; } .container__text--content p { font-size: 15px; } .card-container { display: flex; justify-content: center; align-items: center; overflow: hidden; position: relative; overflow: visible; } .middle-section { display: flex; flex-direction: column; gap: 30px; } .card-container h3 { margin-bottom: 6px; } .card { padding: 35px; width: 350px; height: 250px; box-shadow: 0px 15px 30px -11px rgba(131, 166, 210, 0.5); } .card1 { margin-right: 30px; } .card4 { margin-left: 30px; } img { display: block; margin-left: auto; } .card p { font-weight: 400; font-size: 13px; margin-bottom: 40px; } .card::after { content: ""; position: absolute; height: 5px; width: 350px; top: 0; left: 0; } .card1::after { background-color: blue; } |
coothead |
Apr 20 2023, 04:10 AM
Post
#2
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there JUI43555,
coothead |
JUI43555 |
Apr 20 2023, 05:59 AM
Post
#3
|
Member Group: Members Posts: 44 Joined: 6-March 23 From: Perth Member No.: 28,833 |
Thanks heaps for the advice. I also swear I thought i tried the border-top method and it didn't work for some reason. Must have been doing something wrong.
Tried again and of course, it works gloriously. Thanks again Coothead. |
coothead |
Apr 20 2023, 08:57 AM
Post
#4
|
Advanced Member Group: Members Posts: 226 Joined: 12-January 23 From: chertsey, a small town 25 miles south west of london, england Member No.: 28,743 |
Hi there
coothead |
Lo-Fi Version | Time is now: 25th September 2024 - 05:02 AM |