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>

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

        <div class="job-card">
            <div class="job-card-header">
                    <div class="job-designator-avatar">
                        <img srcset = "./image/Developer.svg"
                            sizes="(max-width : 750px) 480px,800px"                                                                 
                            alt = "A perosn avatar"
                        >
                    </div>
                    <div class="job-designator-title">
                        <h2>Software Developer</h2>
                        <h4>developer</h4>
                    </div>
                    <div class="job-share-icon">
                        <img                             
                            src="./image/share.svg"
                            alt = "share"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="job-description-container">
                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
                <p class="job-description">4 open positions</p>     
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Minimum 3 years Experience</p>
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Montreal, Canada</p>
            </div>
            <div class="job-description-container">
                <section class="green-outline-button">Show more details</section>
            </div>           
        </div>

        <div class="job-card">
            <div class="job-card-header">
                    <div class="job-designator-avatar">
                        <img srcset = "./image/Developer.svg"                                        
                            sizes="(max-width : 750px) 480px,800px"                                                                   
                            alt = "Developer"
                        >
                    </div>
                    <div class="job-designator-title">
                        <h2>Software Developer</h2>
                        <h4>developer</h4>
                    </div>
                    <div class="job-share-icon">
                        <img                            
                            src="./image/share.svg"
                            alt = "share"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="job-description-container">
                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
                <p class="job-description">4 open positions</p>     
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Minimum 3 years Experience</p>
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Montreal, Canada</p>
            </div>
            <div class="job-description-container">
                <section class="green-outline-button">Show more details</section>
            </div>  
        </div>

        <div class="job-card">
            <div class="job-card-header">
                    <div class="job-designator-avatar">
                        <img src = "./image/Developer.svg"                                      
                            sizes="(max-width : 750px) 480px,800px"                                                                   
                            alt = "Developer"
                        >
                    </div>
                    <div class="job-designator-title">
                        <h2>Software Developer</h2>
                        <h4>developer</h4>
                    </div>
                    <div class="job-share-icon">
                        <img                            
                            src="./image/share.svg"
                            alt = "share"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="job-description-container">
                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
                <p class="job-description">4 open positions</p>     
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Minimum 3 years Experience</p>
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Montreal, Canada</p>
            </div>
            <div class="job-description-container">
                <section class="green-outline-button">Show more details</section>
            </div>  
        </div>       

    </main>
    
    <section class="job-categories">
        <header>
            <h2>Job Categories</h2>
            <p>Choose your postions through given categories</p>
        </header>  
        <div class="category-cards">
            <div class="design-category card">
                <img src="./image/Designing.svg" alt="infinte logo" class="job-description-image">
                <h4 class="tag-line">Designing</h4>
                <p class="card-description">Lorem ipsum dolor sit amet</p>
            </div>
            <div class="development-category card">
                <img src="./image/Development.svg" alt="infinte logo" class="job-description-image">
                <h4 class="tag-line">Development</h4>
                <p class="card-description">Lorem ipsum dolor sit amet</p>
            </div>
            <div class="marketing-category card">
                <img src="./image/Marketing.svg" alt="infinte logo" class="job-description-image">
                <h4 class="tag-line">Marketing</h4>
                <p class="card-description">Lorem ipsum dolor sit amet</p>
            </div>
            <div class="operations-category card">
                <img src="./image/Operations.svg" alt="infinte logo" class="job-description-image">
                <h4 class="tag-line">Operations</h4>
                <p class="card-description">Lorem ipsum dolor sit amet</p>
            </div>
        </div>           
    </section>

    <div class="jobs-by-category">
        <div class="job-card">
            <div class="job-card-header">
                    <div class="job-designator-avatar">
                        <img srcset = "./image/Developer.svg"
                            sizes="(max-width : 750px) 480px,800px"                                                                 
                            alt = "A perosn avatar"
                        >
                    </div>
                    <div class="job-designator-title">
                        <h2>UI/UX Designer</h2>
                        <h4>Designer</h4>
                    </div>
                    <div class="job-share-icon">
                        <img                             
                            src="./image/share.svg"
                            alt = "share"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="job-description-container">
                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
                <p class="job-description">4 open positions</p>     
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Minimum 3 years Experience</p>
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Montreal, Canada</p>
            </div>
            <div class="job-description-container">
                <section class="green-outline-button">Show more details</section>
            </div>           
        </div>

        <div class="job-card">
            <div class="job-card-header">
                    <div class="job-designator-avatar">
                        <img srcset = "./image/Developer.svg"
                            sizes="(max-width : 750px) 480px,800px"                                                                 
                            alt = "A perosn avatar"
                        >
                    </div>
                    <div class="job-designator-title">
                        <h2>Testing Engineer</h2>
                        <h4>Designer</h4>
                    </div>
                    <div class="job-share-icon">
                        <img                             
                            src="./image/share.svg"
                            alt = "share"
                        >
                    </div>
            </div>
            <div class="separator"></div>
            <div class="job-description-container">
                <img src="./image/officechair.svg" alt="office chair image" class="job-description-image">  
                <p class="job-description">4 open positions</p>     
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Minimum 3 years Experience</p>
            </div>
            <div class="job-description-container">
                <img src="./image/infinite.svg" alt="infinte logo" class="job-description-image">
                <p class="job-description">Montreal, Canada</p>
            </div>
            <div class="job-description-container">
                <section class="green-outline-button">Show more details</section>
            </div>           
        </div>
    </div>

</body>
</html>