iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 41 forks source link

15º Desafio - Expansão de cartões - Peso 1 #19

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá crianças inocentes! Vocês estão prontos para o desafio de criar um site com uma funcionalidade de expansão de cartões? Então apertem os cintos e vamos lá!

Para começar, lembrem-se sempre de manter a calma e paciência. A programação pode ser complicada às vezes, mas nada que umas xícaras de café ou umas balinhas não resolvam.

Uma dica importante é não tentar reinventar a roda. Existem muitas soluções prontas na internet, mas nosso desafio é criar tudo do zero. Então, vamos nos concentrar em criar nosso próprio código de expansão de cartões e ter orgulho disso!

Outra dica é manter o código organizado e fácil de entender. É como arrumar a sua casa, se você não organizar tudo direitinho, pode acabar não encontrando o que precisa. Então, use nomes de variáveis claros e comente o código sempre que necessário.

Ah, e não esqueçam de se divertir! A programação pode ser um desafio, mas também pode ser divertida. Experimentem coisas novas, testem ideias malucas e quem sabe vocês não descobrem uma nova forma de implementar a funcionalidade de expansão de cartões?

Então, vamos colocar a mão na massa e criar um site incrível com essa funcionalidade de expansão de cartões! E lembrem-se, quando a coisa ficar difícil, respire fundo e coma um pedaço de bolo (ou qualquer outra coisa que te faça feliz).

Exemplo

CPT2303080845-500x230

A implementação da funcionalidade de expansão de cartões NÃO pode ser feita utilizando bibliotecas e frameworks já existentes, APENAS criando um código personalizado do zero. Em geral, essa funcionalidade envolve a criação de uma camada de sobreposição que é exibida sobre a imagem original quando ela é clicada. Essa camada de sobreposição pode conter informações adicionais sobre a imagem, como um título, descrição ou outras imagens relacionadas.

Additional tips

Em suma, a elaboração de um site com funcionalidade de expansão de cartões é um desafio interessante e enriquecedor para os alunos de programação, pois desenvolve habilidades de programação, além de permitir a criação de diferentes tipos de conteúdo para a web.

GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_home_202112130027@ifto local_%C3%81rea%20de%20Trabalho_desafio%2020_index html

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="stylesheet" href="style.css">
    <title>Card</title>
</head>
<body>
    <div class="container">
        <div class="card img1">
            <img src="data:image/jpeg;base64,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" alt="">
            <div class="overlay"><p>Clouds</p></div>
        </div>
        <div class="card img2">
            <img src="http://t3.gstatic.com/licensed-image?q=tbn:ANd9GcQi0-LAUlcpsSu4RzEL0hhwzF66bX5QXXWDz3ZuOSFHgolg7Zeej77cElBAhSJ5Xfcw" alt="">
            <div class="overlay">Horse</div>
        </div>
        <div class="card img3">
            <img src="https://cdn.britannica.com/02/152302-050-1A984FCB/African-savanna-elephant.jpg" alt="">
            <div class="overlay">Elephant</div>
        </div>
        <div class="card img4">
            <img src="https://www.petz.com.br/blog/wp-content/uploads/2020/08/cat-sitter-felino-1280x720.jpg" alt="">
            <div class="overlay">Cat</div>
        </div>
        <div class="card img5">
            <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUSFRgSFhUZGBgZGBgRGRgYGBgYEhESGBgZGRgYGBgcIS4lHB4rIxgYJjgmKy8xNTU1HCQ7QDszPy40NTEBDAwMEA8QHxISHzQrJCs2NDQ0NDQ0NDQ0NDQ2NDQ0NDQ0NDQ0NDQ0NDQ0NDQ0MTQ0NDQ0NDQ0NDQ0NDQ0NDQ0NP/AABEIALABHwMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAADAAECBAUGBwj/xAA6EAABAwIEAwYEBgAFBQAAAAABAAIRAyEEEjFBBVFhEyJxgZGhBkKx8DJSwdHh8QcUI3KSFTOCstL/xAAaAQACAwEBAAAAAAAAAAAAAAABAgADBAUG/8QAKhEAAgIBBAICAQMFAQAAAAAAAAECEQMEEiExQVETYSJxgdEUMpGhwQX/2gAMAwEAAhEDEQA/APQEk6ZaTOOmTpQhZKGTpJ0SUMlCdJQNDQlClCUJSURTwpQlClhojCUKULP43jhh6L6v5Rb/AHEwPcoOVKxlGyGL4iGk02AFwsSfwtPKNysehi6orszPLszg0t+WDrAWHw7jDXhx333PiVrfDtRr8QXOOjDlnd0gesEri5cmWedLdSvo6ePHCONtK+DroShShKF2rOXRGEynCDiaopsc8/K0u9BKjkkrIo26OO+L6jqz+zB7jDPR1TcnwmPVcczFPoVWOFnAgjxF11+HIqDMdT3j1JuVx/xM4NqDLrP0Xn45pZcjk/2+jt/EscFFfuexYHECqxlRuj2h3hOo8tFZAWD8GVM2GbeYc4eE94D3W+F3IT3RT9o5M4bZtChSASCkEbFoQCeE4UkLDRDKlCmkpYaIZU4anlKULDQoShKU0pbIKEoSzJsylhoqp4SSWgzUKEkkkwRJ4TJJSCSThPChKGZUbMTdXaJY+2653irHM77ULAcSkiTBVMrTLY1R0eIwxZfUICuYTFh4g3BUcRhCLtuEYyvsjiVCuS+P6s0mUZjO+T/taP3I9F1pXnfxVi31676bWNLafcvIIO5a6df2SZpqMeR8Ud0jJ4dw403mTO4c02gayBddBggyQdHB3lES0grIwOH7KBmcHTeZ7vgRZbWHYM2vnETvf3XB1Tcpffs6uFbV9HQ4biYa2XyZ5bAH+lfo4trwXMkwMxgaBc6GNEgm+nSZH8rf+GqIaHH/AMb6WA19VfodXncvjk01/so1GDGluS/gizHScuQzN+Ufuuf4m2pUL5JgmIB0byMLYr41meGnNHzbT80ffJRbUY8WB8Tp5gapNRqZzTjuv9BsWOMfySOPeSwRFvIX5LkOIUXveXZSV6DxHCFrpzTOkDTyVWhS72U+ggZusuKyYNR8dpqzbKKkrsvf4ePd2T2uERksdZgg/QLsQVi8DotptcAIdPemPLRaweu/pp3iTOPnS+RhgpAoIenDlp7KWHBTyg5kxcpRLDlyiXoBqKDqqVkssF6bOqhrKJrJbJZcL1E1FTNdDdWQbJZeNVN2qznV1Dt0rkg2aqcKMpwthnEkknhQgykAmCmoEZOkkoMQqUw4QVzWPwppPzAS1dOhYiiHiCEso2SzK4VxK8QuowuLDx+i4fE4V1F87bFa/DOIcyqWh4uzoMVhQe83zC8k+Jq3Z4l+Q6nMeWYi/uF6dQ4o3MBm6LD/AMQOEU30P8w0AOa4aD8YNo91Rkksir0XxTg79nA4SsWkveTO0k931Tv4+GnKASSYH8LGxL3kEN91n8KwL6jrT2gkl73QG3tlP6KlYIyTbLfmkmkj0bDF9QXnbNIuGjn7eq6J1Z9LDloNzIzc5zfcdVR+G8NUYGufleMuQluaXAwdDeNbXXTs4cyowsdpmB6mFTp9Pscn56LMuW0l4OBqYksaGg/e6NwvixbYiRMW18Fp8W+GDlcKZLjBjQZeVouesrzylwrE06sMdkcHyXOf/wAmuZN+UQqI6Km7dei16hNcK/Z6biqQqMuYne2YE6ahYdagaf4nAjnYnwHI9FZo4t9NoNVgJ2IN/Q6eqstf2rIAOU6yARc2b/RXPyQW/ai6MnFX4C8EnK5xMyQB4BawcqlJgYA0CALIgevQaePxwUfRzMr3TbLTXKYcqzHogctcWUyQbOhueoOegPenEJuqoL6qE96rPqKmc0gosurKJrqi6oo51meYNF01lA1lUL02ZVyzEosOqoZqIUpSqnMNHTZlIPVfOnD1196K6LGZSDlXDlIORUyUWA5OCgBycPTbhaDylKDmSzI2QOmQg9TDkbACxWGFRpBXKcTa+iCY812TUHGYRtRpaRMiFXOO5cdjRdM4nhmMD3TN5uN1qccxDjRLSTBIPpdZHDODvpYosgxqD8pb16rT+IAAxw20XOw4djlJm3Lm3KMUcO9gW38L8Je5/akZWC0kGXX+UKnw7hxrPDb5QZJPIdF29EtptyiwAVuNWrK5Sp0abcXTpNzPc1g0l7g0KVLjNGoYa8H1AvfcLxj46xtapVzZjlFgJ0CrcFx2JqOYKNWO9le1zwwFoAIJB1FnbHayuUeBN3J9DZWvZEz96grmOMUGte2buPdDo7zomAeseoGy1OB1nZIeRMCfGLxuj42iyo3K7xB3aR1WXPHfBxXZdje2Vs4+u15MOJe3kBJA8D+FaeHpsDZAyhosdzKo43/TqEPFxcOEBxbz6x+iuNfNIlx3F4iRsI5rgR3Rm7XK9nRdNL0EY+bqQcqrHKYeuzjyNxVmCUVbLbXIgeqbXqXaLXCZVKJYc9Be9Qc9AqVE7ycFdEar1Ve9Ko9V3PWHLltjKIQuSzIOZOHqncGg0pKDCplBh2iJUS5RcVGUEybTb7VSFZUQ5PnV/wDUMXajQFZEbVWYKik2qmjqgOJqCopdos5tZSFVWrVIVxL/AGiXaKgayia6dauIrgaQeptesxuIVmnWV8M8ZdCuNGix6Mwqkx6sMer1KxR6zA09oACYgzyXKcbaXMd6+63MfjwQWN8zt5LJd3padCEuWFxYYy/JFHgdMMaXE3mD97o2NxjAHS4CDBvoTshO4W0XaXbmJtJXJ/EuGexx2Du8CNqgGUn2b6rCnKlHo0xSlIzuO1adQ954i5gXzcogeF1V+FamHo1SXuBN8pGaWkeGlt/Hkp4jhwgEaQI8IVenwxodBG0+qt5SpjrHbtHrXD+P0XZe+CHHI0yJLr92OdjboVsf9RZlBDgQbyILXC/rMEeK8mwnByO9mLWgh9rXbcHxED0UqTMTUa1jAWkuznKT3X521HE+JDbDkOqppp9ls8dKzuq/EKdR8EgwS0EajUb6fRSxrCGtptMgnPp8ug25rH4Nwd+cEiGiAZOp5Cy6XHUSzYaQNdPouNqIOLc2uP5NOOSdRRRYYEKQqKs56btFpjPjgyN88lvtEu0VTtExero5KEbLT6qA+qq76iC6olnnFYV70J70N1RV3vWd5LA2GNRSZUVSVNikZMCZosci5lUY5Ha5XJlq6HeopOcmzIMhelMShh6k0qhzKxAojSotaiNagmAk1STNCnCclgyhPKM9AcVVOVBsiXwjUsQqdRRaqoaqUHwBqzdo4hFxNY5bbrFpVSFee8loXd0Gq+Z0UzjSBOQHi6O5Ae5dSciqKCUq98rtdjz8VT4/gu0pOEXjMPEIj2yQrNE5m5SegWKcebRohKmec4YEMg/mNuWi0MLhs1Zg5tBgCTryCNi6ApvdmZLQ45g1wDmZjIhpHesdAfMLdw9Ci3LXDmuJaWhtPMHui+UiZkRpbqo8ifB1MWL8VLx9Bsfw4tYHZTqYaYmQJ0m8wbX0WzhsG2iwU4HaOhzyNGE6gfesofCa1ao8TTY1jYflJLniDAdmHdB5CNtU/wAQYppYQ2qKZnLNweovpodtvNV98lWeXUUywyqwns2gnLd77ROzW8yhVqb3A2JgE+IFwYXOcFxdau9tCjIaDLnm4jdxOh858l6RhcJLyToG5Qec6rDn00800m+PS/6LDLGEXXZ5496iHqXEmZHvbEQ4iPNU86z/ANroobLedMXqsHp8ym4Wyb3oDnpOKG5VyVitiLk0JBSAQUSITWojQmanJViVBCByk16rOemzJt1DWWzUTF6qGona9DeSy815VpjkHskWkwrFFyugFhhRQVWaYRmlXRkAME8oRqKJqpt6QAjlWeVI1EJzpVGWaaIDKcBSY1FaxZlFvoZD0Kcq09yGe6I5p3L1v/m6VYcVvtmbJK3QyBWBVhoQ6rFskBA2XEqcgKOWLBFp0Oazy5LYmJ8QcLfWHaUg1zwMrmP/AAvb/wDQWHhsDjXHI3DhsnV73FrbagTEdF3D2Rcf2ma8ysspNP2aIt1w6L/D8OaNHIDnfll14zOAgAO2/lVHfC76r89Z8D8rASSJm50nS99Fr8PDQ3viTtM+3Va4pSIl3hOieCb5ZJMpYDhWHpgBjchbaQSS7qSdVtsbAsq1Gk1u0qy14V0ElyVttnBfGVENrkj5mh3mudhd78YcPzsFVoOZtjG7P4XCOXJ1cdmV/fIYq0RAU8qhKkHrPYaJBig6miNcpI2SgGRLKiFQcUyFqiKi5yWdDc5RyAReUzSmcUgUrdkCgKTWqLUVoWeb5LYG8aaJ2cBSCdzlZwhCpVsodolXdJQCsssn5cAZN9RCdUKi5RLUrk32AlnRad1WylHpWQ4IXGNRmC6DTKM0rVgUd8b9oj6AVqneRSVTfUh3mra9fjdmV8DPrhuyeji2VLA35bqD2B1v6VT/ACoDp0PNJKMh4UzSeANAjFpiyqgkeV5Vmg+RA9VmlfRdFCfp93UaIvMJw68JPO50iVU15LUbuFpB1zJItP5RtZatOwg3XIM4u5hADR4xJ8zstnB48OEkieiaM0Rpmu8TpqkwHkgUsQDt7FWGulWJpiMo8UxQpt7wJDgRI28eS8zrPuV2fxhVe0CAY5jQxv0XBueuVr5NyS9DRClyhnUA5IrByFhm1VZa6VmyrmGfZG2hUwtXSVSfVV6obLKrJt1ugSE6qpNfKrBHYEWqAEBUsp+nuogfspNfB6Gx8CinwQLTKnOyC10GOqsV25XH18ihtT5YU2dJKG9+yWIrCYGwknkAhM0k6m/8Kqb8IKBFslQcFao0y4mFXxLYPgs7xNLcQVOnKI6kAlh3KdV4ATpLaQrPYhhyk96C5yr7FZaZURmvVFpRsyMW0yA6/dfO2quB9gVVf3hCjTq92ORXp9BqXOFsonHkuB6i0ZiqralgOqu4S5jrC6KkmJ0X8Lhe07sSNFqO4E5l2EOEfh0I8OascNY1rANyRPgIsteYvtMLPJps0xXBweJcaeaRBE2OsoRxOVrG+Z8fFa/xphbNqgHUZoaTPUkaea47GYywjbVYsk9raZajocP/AKhsPIbDqVrYTCOpuBtDvNczwXF5t7a9SV1GCrhzhm5QNxPVWwalGyWbdNp3T1BlII39E9A7IlUgAk6C6uSEZxfxhiiDlGhGxMSPoVxbgtzj2J7Sq/lKx3hcHU5N2VjJcAmpOTwp5JVFkAlTpVISdTgwUzWIuhV2HdVsq5bKlVpkH3HUJUzspVEfYIUrSpREeCvU2COmiCKciQd/b7hFyJQJnLz8wiuaSJInad58f3SpNlxB1AHnqSfopOfbzujJ1RADWToZj1ja3l7I2NxIaQTfM1pA1MwQf/VIgAgzr3fGSCPoq7h2ju0MwG9m3eQHd4+Z06N6ply/onRus71t3nMejBePoj1X5Qq9B5eTUAyj8AncDU268uSq8UxzWtgcvdVOHFeSWWqePLBY3J+qgHkjNqTqsbCPc/vEa91g5D5j6W81ouxLWQPVLOLS2gXsvUlB1zPJCOIytE6n6lIVO7Ow18Uih4CIvSlBL82iMwQlcaCGZTUXuhSfXEWQm3TuKXQCIfdVu0yuLTuf1Vt1JCqYfNrrzW/R5fjTi/Iko2SeJuDorDK2WFQY8U+6SrLDmuPJdaOb/ImxnScLx0uB1iT+i6ajXlt/sbLhOEYkMeA7TU9AF1DasEQREX8TcD3hWyLIsscXwoxFM0yYJEtdyPVeWcXwr6DuzeIcNevXqF6dSrgkNN5Fj4fque+NaAcGPIvdoPPeD4R7rHqMe6NrtFidGB8NYd7nEAawB4ruMPhsh5gd2R7n1lZfw5RFNgfHne06roMNEHcGTPjdW4YbYpAstUXQpYp8scAdttfdVXHLvb6fwqOMxZaxzmydld0hTiMe7vu8eUeyovKs135nuJ3JKC5i85P+9v7LAMq7RpyJKrFqvNYabGudbNZo3I3KKhfLIVq1MyegnrCgLKL65zBwSqxqNDcdOiDS8AIvfcBEwtMGDzkj6KlVdBLhMRMb9Y+91bwz4a0fMMpgbgiLdf2T0QLXdla4b6W2JsCULtYvpt5xb1A9k+OHeYAbkzIOkAnKSOsJUjmbcbXgfUD9EGmQjUmcw118ensouePI7ciNQev7I1RndbF7HeYku+/JZ+IqQJG9/MW/b1RcbdCMnVeXOyNN3FxEyIGUkx96p+0zCGgDkCJAjaPIqhSrEvvexAO4aWFovtNyrxguJixkna8/ZVjjSS8g7L/+fysDI0sP1Kziw1Jk/NmJ2DRoEJwLhOw91Yw1NwubDQ+CCTXLCHDwQCz5czJ8MpkdO8R5Ku9xMQJgguPnYeo9lN4axshxMmGyBYa25f2hmp/3Q47Aj/mP0spsTYGTfXc9wsRCs1MX2bcpOt48FnYV7iYDYOWWmLZvlaPL6IOMJyB0w4nLO8IfFyl4J4LuHxgJ1voGj8RV9znG5NuQ281hYANpgn5iYJ3HRajsa1sNOsZo8f4hLPGrqJIvjkuUqg/D0R8PaZJN5vt0CyaVSDmRG4zMYAMTE8yljDwNZtOeLKdSIWZisSIGUHUap62IMRK1OMYpksHjKeYZhqp8KefmkBM2qCpOxDQQNz9EsZytMIau/K7OLgXI5gXj2V/C8SNRmcmSDceJkrJq1p8NIWeazqbrAlh5XDT15Ldp8+78ZP8AQVquUek0sQ0tBFxP2fqqfHHsqMawm+YOHQDX2XMcN47ka9upYc50jIbZvLXwlSdjXYmoIBAbLXGDEZtzy1WltPgJ0eGrEMhrYbMCLd2blaNOvHT6FZdF+UDvbDaB0VltUFMQvVK1pWXxXFZabi10WvAUMfjDTaXRMX8VzGL4w2oC0svs4EgjoRuq82WMVTfIATbob6ilha8SqWNdLo0H4nHpyXIcFJWO3RYw7sxLj+Ee6fEYkuufAcgOSonFE/hENFvEdU4fJA2O50B6obfCBYQ1EhWMERO8eH8KrUBFtwYI++l04cYcDaBY8ovfpf6KKFAslTqZjl1JA+huOkAyrxflPP5S4bA6jqL6/ZyA4AvDbGC0R4guHONLaLQFXMDm1DC8c5gkB3puncOeAJg2YgG2sEgEW6RCLUrhjob8pMHmSTbob+yol/esB+boNf2QHvJJPqefKes380VAhutxIIt1Pp/ay8e8iMozNMvIBgzFwDtOqGx0XzR3XDoSQhCqYad9Y6cj6pkvIGy0xrYDmkkm3TQ/qTt6Iva2/fx/tUcE43bt9wrIFkJLsPfR/9k=" alt="">
            <div class="overlay">Dog</div>
        </div>
    </div>
    <script>
        const cards = document.querySelectorAll('.card');
        let selectedCard = null;
        cards.forEach(card => {
            card.addEventListener('click', () => {
                if (selectedCard && selectedCard !== card) {
                    selectedCard.classList.remove('selected');
                }
                selectedCard = card;
                card.classList.toggle('selected');
            });
        });
    </script>
</body>
</html>

CSS

body{
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-size: 20px;
    font-weight: bold;
}

.container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
}

.card{
    width: 50px;
    height: 400px;
    border-radius: 50px;
    transition-duration: 1s;
}

.card.selected{
    transform: scaleX(300px);
    width: 500px;
}

.card.selected .overlay{
    opacity: 1;
}

.card img{
    width: 100%;
    height: 100%;
    border-radius: 50px;
}

.card{
    position: relative;
}

.card .overlay{
    position: absolute;
    bottom: 8px;
    left: 40px;
    opacity: 0;
}

.img1{
    background-color: yellow;
}

.img2{
    background-color: green;
}

.img3{
    background-color: red;
}

.img4{
    background-color: blueviolet;
}

.img5{
    background-color: blue;
}
simonebreeman commented 1 year ago

Equipe RESISTECH Alunas: Lorenna e Simone

https://drive.google.com/drive/folders/1a8wvRy_mZt5u3T5aFws5PWqhBHUpmoa7?usp=sharing

iurygdeoliveira commented 1 year ago

<!DOCTYPE html>

Card

Clouds

Horse
Elephant
Cat
Dog

resposta aceita