index.html

---
layout: default
---

<style>
@media (min-width:0px)  { 
 .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 99%;
        height: auto;
    }
}
@media (min-width:480px)  { 
 .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: auto;
        height: auto;
    }
}
@media (min-width:1025px) { 
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 60%;
        height: auto;
    }
}
@media (min-width:1281px) { 
    .modal-content {
        background-color: #fefefe;
        margin: auto;
        padding: 20px;
        border: 1px solid #888;
        width: 60%;
        height: auto;
    }
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
</style>

<!-- One -->
    <section id="one">
        <div class="container">
            <header class="major">
                <h2>FOSSCELL MEC</h2>
            </header>
            <p>FOSSCELL of MEC was made to inherit the technical workings of the College into a more ordered working conditions under the club, and also to bring forth Open Source culture by having enthusiasts working with the club on different interesting softwares and projects, with people around the world.</p>
        </div>
    </section>

    <div id="myModal" class="modal container-fluid">
        <div class="modal-content" style="height:95%;">
            <span class="close">&times;</span>
            <h1 style="font-size: 24px;">Join our mailing list for updates.</h1>
            <p style="height:90%;"><iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfT3PioKmBjlD3ZNdmtHeCzoOZomnotuKMMPQX98D8pEhvyFQ/viewform?embedded=true"  frameborder="0" marginheight="0" marginwidth="0" style="width:100%; height:100%;">Loading...</iframe></p>
        </div>
    </div>

<script>

if (! localStorage.noFirstVisti){

    var modal = document.getElementById('myModal');

    var span = document.getElementsByClassName("close")[0];

    modal.style.display = "block";
    
    span.onclick = function() {
        modal.style.display = "none";
    }

    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
}
</script>