sushma
/
webtrigon-job-portal

<!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>Job portal</title>

    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>

    <div class="background"></div>

    <div class="foreground">
        <header>
            <h2>Work with Us</h1>
            <p>Totally we have 11 job openings<p>
        </header>
    
        <div class="tabs-holder">
            <section class="tab active">Employment</section>
            <section class="tab">Internship</section>
        </div>

        <div class="card">
            <div class="card-header-grid">
                    <div class="grid-item1">
                        <img srcset = "./image/Developer.svg 480w,
                                        ./image/Developer.svg 800w"
                            sizes="(max-width : 750px) 480px,800px"                                       
                            src = "./image/Developer.svg"
                            alt = "A perosn avatar"
                        >
                    </div>
                    <div class="grid-item2">
                        <h2>Software Developer</h2>
                        <p>developer</p>
                    </div>
                    <div class="grid-item3">
                        <img 
                            srcset="./image/share.svg,
                                    ./image/share.svg 0.5x,
                                    ./image/share.svg 1x"    
                            src="./image/share.svg"
                            alt = "share icon"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="card-body-grid">
                <div class="card-body-grid-item-1">
                    <img src="./image/officechair.svg" alt="office chair image">                
                </div>
                <div class="card-body-grid-item-2">
                    <p class="postion-count">4 open positions</p>
                </div>
                <div class="card-body-grid-item-3">
                    <img src="./image/infinite.svg" alt="infinte logo">
                </div>
                <div class="card-body-grid-item-4">
                    <p class="experience-count">Minimum 3 years Experience</p>
                </div>
                <div class="card-body-grid-item-5">
                    <img src="./image/infinite.svg" alt="infinte logo">
                </div>
                <div class="card-body-grid-item-6">
                    <p class="location">Montreal, Canada</p>
                </div>   
                <div class="card-body-grid-item-7">
                    <section class="green-outline-button">Show more details</section>
                </div>        
            </div>
        </div>

        <div class="card">
            <div class="card-header-grid">
                    <div class="grid-item1">
                        <img srcset = "./image/Developer.svg 480w,
                                        ./image/Developer.svg 800w"
                            sizes="(max-width : 750px) 480px,800px"                                       
                            src = "./image/Developer.svg"
                            alt = "A perosn avatar"
                        >
                    </div>
                    <div class="grid-item2">
                        <h2>Software Developer</h2>
                        <p>developer</p>
                    </div>
                    <div class="grid-item3">
                        <img 
                            srcset="./image/share.svg,
                                    ./image/share.svg 0.5x,
                                    ./image/share.svg 1x"    
                            src="./image/share.svg"
                            alt = "share icon"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="card-body-grid">
                <div class="card-body-grid-item-1">
                    <img src="./image/officechair.svg" alt="office chair image">                
                </div>
                <div class="card-body-grid-item-2">
                    <p class="postion-count">4 open positions</p>
                </div>
                <div class="card-body-grid-item-3">
                    <img src="./image/infinite.svg" alt="infinte logo">
                </div>
                <div class="card-body-grid-item-4">
                    <p class="experience-count">Minimum 3 years Experience</p>
                </div>
                <div class="card-body-grid-item-5">
                    <img src="./image/infinite.svg" alt="infinte logo">
                </div>
                <div class="card-body-grid-item-6">
                    <p class="location">Montreal, Canada</p>
                </div>   
                <div class="card-body-grid-item-7">
                    <section class="green-outline-button">Show more details</section>
                </div>        
            </div>
        </div>

        <div class="card">
            <div class="card-header-grid">
                    <div class="grid-item1">
                        <img srcset = "./image/Developer.svg 480w,
                                        ./image/Developer.svg 800w"
                            sizes="(max-width : 750px) 480px,800px"                                       
                            src = "./image/Developer.svg"
                            alt = "A perosn avatar"
                        >
                    </div>
                    <div class="grid-item2">
                        <h2>Software Developer</h2>
                        <p>developer</p>
                    </div>
                    <div class="grid-item3">
                        <img 
                            srcset="./image/share.svg,
                                    ./image/share.svg 0.5x,
                                    ./image/share.svg 1x"    
                            src="./image/share.svg"
                            alt = "share icon"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="card-body-grid">
                <div class="card-body-grid-item-1">
                    <img src="./image/officechair.svg" alt="office chair image">                
                </div>
                <div class="card-body-grid-item-2">
                    <p class="postion-count">4 open positions</p>
                </div>
                <div class="card-body-grid-item-3">
                    <img src="./image/infinite.svg" alt="infinte logo">
                </div>
                <div class="card-body-grid-item-4">
                    <p class="experience-count">Minimum 3 years Experience</p>
                </div>
                <div class="card-body-grid-item-5">
                    <img src="./image/infinite.svg" alt="infinte logo">
                </div>
                <div class="card-body-grid-item-6">
                    <p class="location">Montreal, Canada</p>
                </div>   
                <div class="card-body-grid-item-7">
                    <section class="green-outline-button">Show more details</section>
                </div>        
            </div>
        </div>

    </div>
    

</body>
</html>