pagina.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.0">

    <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=Shippori+Antique+B1&display=swap" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.css" rel="stylesheet">
    <link href="./estilos.css" rel="stylesheet">
    <title>Workshop HTML e CSS</title>
</head>

<body>

    <header class="headerContainer">
        <div class="header confineWidth">
            <div class="logoContainer">
                <i class="fab fa-airbnb"></i>
                <label><b>ncgm</b></label>
            </div>
            <div class="searchBar">
                <input class="searchInput" placeholder="Start your search" />
                <button class="searchBtn">
                    <i class="fas fa-search searchIcon"></i>
                </button>
            </div>
            <div class="end">
                <label class="hostText">Become a sigma</label>
                <i class="fas fa-globe-europe"></i>
                <i class="fas fa-user-circle"></i>
            </div>
        </div>
    </header>

    <div class="confineWidth mainContent">
        <div class="articleTitle">
            <h3>Workshop de Html e Css</h3>
        </div>
        <div class="articleSubTitle">
            <div class="articleSubTitleOne">
                <div>
                    <i class="fas fa-star"></i>
                    <label for="">4.99</label>
                </div>
                <div>
                    <label for=""><u>(68 reviews)</u></label>
                </div>
                <label for=""><u>Porto,Portugal</u></label>
            </div>
            <div class="articleSubTitleOne">
                <div>
                    <i class="fas fa-external-link-alt"></i>
                    <label for=""><u>Share</u></label>
                </div>
                <div>
                    <i class="far fa-heart"></i>
                    <label for=""><u>Save</u></label>
                </div>
            </div>
        </div>
        <div class="imagesContainer">
            <span class="firstImg"></span>
            <div class="quadImgContainer">
                <span class="quadImg img1" /></span>
                <span class="quadImg img2" /></span>
                <span class="quadImg img3" /></span>
                <span class="quadImg img4" /></span>
            </div>
        </div>
    </div>


</body>

<style>
  
</style>

</html>