index_components.html

<!DOCTYPE HTML>

<html lang="pt-br">
<head>
    <title>r4cs portfolio</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
    <noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">

<!-- Wrapper -->
<div id="wrapper">

        <!-- Header -->
        <div data-include="header.html"></div>
<!--        <header id="header" class="alt">-->
<!--            <a href="index-ipo.html" class="logo"><strong>r4cs</strong> <span>projects</span></a>-->
<!--            <nav>-->
<!--                <a href="#menu">Menu</a>-->
<!--            </nav>-->
<!--        </header>-->

<!--        &lt;!&ndash; Menu &ndash;&gt;-->
<!--        <nav id="menu">-->
<!--            <ul class="links">-->
<!--                <li><a href="index-ipo.html">Home</a></li>-->
<!--                <li><a href="https://github.com/r4cs">Git Repositories</a></li>-->
<!--                <li><a href="data-analysis.html">Data Analysis</a></li>-->
<!--                <li><a href="#">SQL and DB Management</a></li>-->
<!--            </ul>-->
<!--            <ul class="actions stacked">-->
<!--                <li><a href="https://www.linkedin.com/in/raquelCalmon" class="button primary fit">LinkedIn Profile</a></li>-->
<!--                <li><a href="https://www.hackerrank.com/rctguzansky" class="button fit">Hacker Rank Profile</a></li>-->
<!--            </ul>-->
<!--            <a class="close" href="#menu">Close</a>-->
<!--        </nav>-->

    <!-- Banner -->
    <section id="banner" class="major">
        <div data-include="banner-home.html" class="inner"></div>
    </section>

    <!-- Main -->
    <div id="main">

        <!-- One -->
        <section id="one" class="tiles">
            <article>
					<span class="image">
						<img src="images/pic01.jpg" alt="" />
					</span>
                <header class="major">
                    <h3><a href="https://github.com/r4cs" class="link">Git Repositories</a></h3>
                    <!-- <p>Code solutions</p> -->
                </header>
            </article>
            <article>
        <span class="image">
            <img src="images/pic02.jpg" alt="" />
        </span>
                <header class="major">
                    <!--										<h3><a href="ipo_aLinkToTheFuture/index-ipo.html" class="link">IPO - A link to the future</a></h3>-->
                    <h3><a href="ipo_aLinkToTheFuture/index-ipo.html" class="link">IPO - A link to the future</a></h3>
                    <p>Gamification for IPO learning</p>
                </header>
            </article>
            <article>
        <span class="image">
            <img src="images/pic03.jpg" alt="" />
        </span>
                <header class="major">
                    <h3><a href="data-analysis.html" class="link">Data analysis</a></h3>
                    <!-- <p>Lorem etiam nullam</p> -->
                </header>
            </article>

            <article>
        <span class="image">
            <img src="images/pic05.jpg" alt="" />
        </span>
                <header class="major">
                    <h3><a href="https://www.hackerrank.com/rctguzansky" class="link"></a>HackerRank Profile</h3>
                    <p>Code solutions</p>
                </header>
            </article>

            <!--								<article>-->
            <!--									<span class="image">-->
            <!--										<img src="images/pic04.jpg" alt="" />-->
            <!--									</span>-->
            <!--									<header class="major">-->
            <!--										&lt;!&ndash; <h3><a href="#" class="link">SQL and DB management</a></h3> &ndash;&gt;-->
            <!--										<h3>SQL and DB management</h3>-->
            <!--										<p>soon.</p>-->
            <!--									</header>-->
            <!--								</article>-->
            <!--								<article>-->
            <article>
        <span class="image">
            <img src="images/pic04.jpg" alt="" />
        </span>
                <header class="major">
                    <h3><a href="react.html" class="link">React</a></h3>
                    <p>Projetos</p>
                </header>
            </article>
            <article>
        <span class="image">
            <img src="images/pic06.jpg" alt="" />
        </span>
                <header class="major">
                    <h3 class="showPopup" onclick="showPopup('snac-popUp')">React Native</h3>
                    <p  class="showPopup" onclick="showPopup('snac-popUp')">Snacs MedicaMix</p>
                    <div id="snac-popUp" class="popup-container">
							<span class="close-button" onclick="closePopup('snac-popUp')">
								X
							</span>
                        <div style="width: 50%">
                            <div data-snack-id="@r4cs/globalsolution"
                                 data-snack-platform="web"
                                 data-snack-preview="true"
                                 data-snack-theme="dark"
                                 style="
																overflow:hidden;
																background:#0C0D0E;
																border:1px solid #2e3450;
																border-radius:4px;
																height:505px;
																width:100%">
                            </div>
                            <script async src="https://snack.expo.dev/embed.js"></script>
                        </div>
                    </div>
                </header>
            </article>
        </section>
    </div>

    <section style="width:100%; display: -webkit-box;margin-top: 5%;-webkit-box-pack: center;">
        <section style="display: flex; flex-direction: row; flex-wrap: wrap;">
            <div class="contact-method">
                <span class="icon solid alt fa-envelope"></span>
                <h3>Email</h3>
                <a href="#">raquel@wewewe.com.br</a>
            </div>
        </section>

        <section style="display: flex; flex-direction: row; flex-wrap: wrap;">
            <div class="contact-method">
                <span class="icon solid alt fa-phone"></span>
                <h3>Phone</h3>
                <span> +55 (11) 95963-9004</span>
            </div>
        </section>

        <section style="display: flex; flex-direction: row; flex-wrap: wrap;">
            <div class="contact-method">
                <span class="icon solid alt fa-home"></span>
                <h3>Address</h3>
                <span>São Paulo<br/>
						  Brazil<br/>
					</span>
            </div>
        </section>
    </section>

    <!-- Footer -->
    <div data-include="footer.html"></div>

</div>

<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/modals.js"></script>

</body>
</html>