The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> How to add a coloured line above a card
JUI43555
post 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.

IPB Image

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;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 20 2023, 04:10 AM
Post #2


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there JUI43555,

remove this...
CODE

.card::after {
    content: "";
    position: absolute;
    height: 5px;
    width: 350px;
    top: 0;
    left: 0;
}

.card1::after {
    background-color: blue;
}

...and add this...
CODE

.middle-section {
    border-top: 5px solid #b36769;
}
.card1 {
    border-top: 5px solid #76bcbe;
}
.card3 {
    border-top: 5px solid #e6cf98;
}
.card4 {
    border-top: 5px solid #759db8;
}


Note
Please do not quote this post. It really is not necessary. IPB Image


coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
JUI43555
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
coothead
post Apr 20 2023, 08:57 AM
Post #4


Advanced Member
****

Group: Members
Posts: 206
Joined: 12-January 23
From: chertsey, a small town 25 miles south west of london, england
Member No.: 28,743
Hi there

I've just noticed that I told you to use this...

CODE

.middle-section {
    border-top: 5px solid #b36769;
}

...and although it works OK I would suggest, for consistency's sake, that you use...

CODE

.card2 {
    border-top: 5px solid #b36769;
}

...instead. IPB Image



coothead
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Cascading Style Sheets · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 27th April 2024 - 09:20 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC