Added src/img folder and freeCodeCamp camelCase titles.

dist/css/home.css

@@ -1 +1,169 @@
-body{font-family:Karla,Helvetica,Arial,sans-serif;font-size:16px;color:rgba(0,0,0,.86);font-weight:400}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#4990e2;text-decoration:none}strong{font-weight:700}.homepage .main-header{background-color:#fff;box-shadow:0 2px 2px rgba(0,0,0,.05);height:80px;z-index:1}.homepage .main-header .main-header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;height:100%}.homepage .main-header .logo{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}.homepage .main-header .logo .logo-image{margin-right:10px}.homepage .main-header .logo .logo-text{margin:0;font-size:16px;font-weight:400}.homepage .main-header .logo .logo-text .title{display:inline-block;margin-bottom:4px}.homepage .main-header .logo .logo-text .subtitle{color:rgba(0,0,0,.54)}.homepage .main-header .main-navigation{display:inline-block}.homepage .main-header .main-navigation-list{display:-ms-flexbox;display:flex;padding:10px;list-style-type:none}.homepage .main-header .main-navigation-item{padding:6px;margin:0 14px}.homepage .main-header .main-navigation-item a{color:rgba(0,0,0,.54);transition:color .2s}.homepage .main-header .main-navigation-item a.active,.homepage .main-header .main-navigation-item a:hover{color:rgba(0,0,0,.86)}.homepage .hero{color:#fff;text-align:center;position:relative;min-height:420px;padding-top:90px;background-color:#53acdc}.homepage .hero .diagonal-divider{width:0;height:0;border-right:100vw solid #fff;border-top:100px solid #53acdc}.homepage .hero .hero-title{font-size:32px;font-weight:400}.homepage .hero .hero-description{font-weight:400;font-size:18px;line-height:1.75em}.homepage .hero .video-launcher{position:relative;margin:60px auto -160px;width:600px;height:320px;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/4/6/a/3/highres_453138083.jpeg);background-size:cover;border-radius:3px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.homepage .hero .video-launcher .video-launcher-btn{text-transform:uppercase;font-size:14px;padding:14px 28px;border-radius:3px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);border:none;cursor:pointer;transition:transform .2s}.homepage .hero .video-launcher .video-launcher-btn:hover{transform:scale(1.025)}.homepage .about-us{margin-top:200px}.homepage .about-us .section-description{font-size:18px;line-height:1.5em;color:rgba(0,0,0,.86)}.homepage .section-title{text-align:center;font-size:32px;font-weight:400;margin-bottom:40px}
+body {
+    font-family: Karla, Helvetica, Arial, sans-serif;
+    font-size: 16px;
+    color: rgba(0, 0, 0, .86);
+    font-weight: 400
+}
+
+button,
+input,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit
+}
+
+a {
+    color: #4990e2;
+    text-decoration: none
+}
+
+strong {
+    font-weight: 700
+}
+
+.homepage .main-header {
+    background-color: #fff;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, .05);
+    height: 80px;
+    z-index: 1
+}
+
+.homepage .main-header .main-header-container {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    -ms-flex-align: center;
+    align-items: center;
+    height: 100%
+}
+
+.homepage .main-header .logo {
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    -ms-flex-direction: column;
+    flex-direction: column
+}
+
+.homepage .main-header .logo .logo-image {
+    margin-right: 10px
+}
+
+.homepage .main-header .logo .logo-text {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 400
+}
+
+.homepage .main-header .logo .logo-text .title {
+    display: inline-block;
+    margin-bottom: 4px
+}
+
+.homepage .main-header .logo .logo-text .subtitle {
+    color: rgba(0, 0, 0, .54)
+}
+
+.homepage .main-header .main-navigation {
+    display: inline-block
+}
+
+.homepage .main-header .main-navigation-list {
+    display: -ms-flexbox;
+    display: flex;
+    padding: 10px;
+    list-style-type: none
+}
+
+.homepage .main-header .main-navigation-item {
+    padding: 6px;
+    margin: 0 14px
+}
+
+.homepage .main-header .main-navigation-item a {
+    color: rgba(0, 0, 0, .54);
+    transition: color .2s
+}
+
+.homepage .main-header .main-navigation-item a.active,
+.homepage .main-header .main-navigation-item a:hover {
+    color: rgba(0, 0, 0, .86)
+}
+
+.homepage .hero {
+    color: #fff;
+    text-align: center;
+    position: relative;
+    min-height: 420px;
+    padding-top: 90px;
+    background-color: #53acdc
+}
+
+.homepage .hero .diagonal-divider {
+    width: 0;
+    height: 0;
+    border-right: 100vw solid #fff;
+    border-top: 100px solid #53acdc
+}
+
+.homepage .hero .hero-title {
+    font-size: 32px;
+    font-weight: 400
+}
+
+.homepage .hero .hero-description {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 1.75em
+}
+
+.homepage .hero .video-launcher {
+    position: relative;
+    margin: 60px auto -160px;
+    width: 600px;
+    height: 320px;
+    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(https://a248.e.akamai.net/secure.meetupstatic.com/photos/event/4/6/a/3/highres_453138083.jpeg);
+    background-size: cover;
+    border-radius: 3px;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: center;
+    justify-content: center
+}
+
+.homepage .hero .video-launcher .video-launcher-btn {
+    text-transform: uppercase;
+    font-size: 14px;
+    padding: 14px 28px;
+    border-radius: 3px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
+    border: none;
+    cursor: pointer;
+    transition: transform .2s
+}
+
+.homepage .hero .video-launcher .video-launcher-btn:hover {
+    transform: scale(1.025)
+}
+
+.homepage .about-us {
+    margin-top: 200px
+}
+
+.homepage .about-us .section-description {
+    font-size: 18px;
+    line-height: 1.5em;
+    color: rgba(0, 0, 0, .86)
+}
+
+.homepage .section-title {
+    text-align: center;
+    font-size: 32px;
+    font-weight: 400;
+    margin-bottom: 40px
+}

index.html

@@ -1 +1,118 @@
-<!DOCTYPE html><html><head><link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" type="text/css"><link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet" type="text/css"><link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet" type="text/css"><link href="./dist/css/home.css" rel="stylesheet"></head><body class="homepage"><header class="main-header"><div class="container main-header-container"><div class="logo"><img class="logo-image" src="" alt=""><h1 class="logo-text"><span class="title">freeCodeCamp</span><br><span class="subtitle">Buenos Aires</span></h1></div><nav class="main-navigation"><ul class="main-navigation-list"><li class="main-navigation-item"><a href="#home">Home</a></li><li class="main-navigation-item"><a href="#sobre-nosotros">Sobre nosotros</a></li><li class="main-navigation-item"><a href="#proximos-encuentros">Proximos encuentros</a></li></ul></nav></div></header><section class="hero"><div class="container"><h2 class="hero-title">Somos la comunidad de <strong>freeCodeCamp </strong>en <strong>Buenos Aires</strong></h2><h4 class="hero-description">Veni a conocernos todos los domingos para aprender sobre desarrollo web,<br>siguendo la currícula de freeCodeCamp👋. </h4><div class="video-launcher"><img src="" alt=""><button>Mira nuestro video</button></div></div></section><section class="about-us"><div class="container"><div class="copy-container"><h2>Sobre nosotros</h2><p>Somos un grupo de personas interesadas en el aprendizaje de tecnologías relacionadas con el desarrollo web.</p><p>Nos encontramos los domingos (16:00 a 20:00) para aprender a programar siguiendo la currícula de freeCodeCamp.</p><p>En los encuentros no hay profesores ni alumnos, sino que todos nos ayudamos entre si para resolver los distintos problemas. El aprendizaje se basa en tecnologias web como HTML, CSS, Javascript, entre otras.</p><p>Si queres saber más sobre nosotros, podes revisar nuestra guia para quienes ingresan al grupo 💪.</p></div><div class="photo-slider"><ul class="slider"><li><div class="image-container"><img src="" alt=""><div class="image-copy"><div class="image-title">Meetup Febrero 2016</div><div class="image-subtitle">Area Tres</div></div></div></li><li><div class="image-container"><img src="" alt=""><div class="image-copy"><div class="image-title">Meetup Febrero 2016</div><div class="image-subtitle">Area Tres</div></div></div></li><li><div class="image-container"><img src="" alt=""><div class="image-copy"><div class="image-title">Meetup Febrero 2016</div><div class="image-subtitle">Area Tres</div></div></div></li></ul></div></div></section><section class="meetups"><div class="container"><h2>Proximos encuentros</h2><article class="meetup-card"><div class="content"><h3 class="meetup-title">freeCodeCamp BA S02E01</h3><div class="meetup-info"><span class="info-label">Fecha:</span><span class="info-text">Domingo 12/17</span><span class="info-label">Horario:</span><span class="info-text">16:00 a 20:00</span><span class="info-label">Lugar:</span><span class="info-text">Area Tres (El Salvador 5000)</span></div><button>Inscribite</button></div><div class="image"><img src="" alt=""></div></article><article class="meetup-card"><div class="content"><h3 class="meetup-title">freeCodeCamp BA S02E01</h3><div class="meetup-info"><span class="info-label">Fecha:</span><span class="info-text">Domingo 12/17</span><span class="info-label">Horario:</span><span class="info-text">16:00 a 20:00</span><span class="info-label">Lugar:</span><span class="info-text">Area Tres (El Salvador 5000)</span></div><button>Inscribite</button></div><div class="image"><img src="" alt=""></div></article></div></section><section class="supporters"><div class="container"><h2>Supporters</h2><p>Estas son algunas de las comunidades y empresas que nos apoyan para seguir creciendo.</p><div class="supporters-list"><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""></div></div></section></body></html>
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet" type="text/css">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet" type="text/css">
+    <link href="https://fonts.googleapis.com/css?family=Karla:400,700" rel="stylesheet" type="text/css">
+    <link href="./dist/css/home.css" rel="stylesheet">
+</head>
+
+<body class="homepage">
+    <header class="main-header">
+        <div class="container main-header-container">
+            <div class="logo"><img class="logo-image" src="" alt="">
+                <h1 class="logo-text"><span class="title">freeCodeCamp</span><br><span class="subtitle">Buenos Aires</span></h1>
+            </div>
+            <nav class="main-navigation">
+                <ul class="main-navigation-list">
+                    <li class="main-navigation-item"><a href="#home">Home</a></li>
+                    <li class="main-navigation-item"><a href="#sobre-nosotros">Sobre nosotros</a></li>
+                    <li class="main-navigation-item"><a href="#proximos-encuentros">Proximos encuentros</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    <section class="hero">
+        <div class="container">
+            <h2 class="hero-title">Somos la comunidad de <strong>freeCodeCamp </strong>en <strong>Buenos Aires</strong></h2>
+            <h4 class="hero-description">Veni a conocernos todos los domingos para aprender sobre desarrollo web,<br>siguendo la curricula del sitio de
+                e-learning freeCodeCamp 👋. </h4>
+            <div class="video-launcher"><button class="video-launcher-btn">Mira nuestro video</button></div>
+        </div>
+        <div class="diagonal-divider"></div>
+    </section>
+    <section class="about-us">
+        <div class="container">
+            <div class="copy row">
+                <div class="col-xs-12">
+                    <h2 class="section-title">Sobre nosotros</h2>
+                </div>
+                <div class="section-description col-xs-6 col-xs-offset-3">
+                    <p>Somos un grupo de personas interesadas en el aprendizaje de tecnologías relacionadas con el desarrollo
+                        web.</p>
+                    <p>Nos encontramos los domingos (16:00 a 20:00) para aprender a programar siguiendo la curricula propuesta
+                        por el sitio de e-learning freeCodeCamp.</p>
+                    <p>En los encuentros no hay profesores ni alumnos, sino que todos nos ayudamos entre si para resolver los
+                        distintos problemas. El aprendizaje se basa en tecnologias web como HTML, CSS, Javascript, entre
+                        otras.</p>
+                    <p>Si queres saber más sobre nosotros, podes revisar nuestra guia para quienes ingresan al grupo 💪.</p>
+                </div>
+            </div>
+            <div class="photo-slider">
+                <ul class="slider">
+                    <li>
+                        <div class="image-container"><img src="" alt="">
+                            <div class="image-copy">
+                                <div class="image-title">Meetup Febrero 2016</div>
+                                <div class="image-subtitle">Area Tres</div>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="image-container"><img src="" alt="">
+                            <div class="image-copy">
+                                <div class="image-title">Meetup Febrero 2016</div>
+                                <div class="image-subtitle">Area Tres</div>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="image-container"><img src="" alt="">
+                            <div class="image-copy">
+                                <div class="image-title">Meetup Febrero 2016</div>
+                                <div class="image-subtitle">Area Tres</div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </section>
+    <section class="meetups">
+        <div class="container">
+            <h2>Proximos encuentros</h2>
+            <article class="meetup-card">
+                <div class="content">
+                    <h3 class="meetup-title">freeCodeCamp BA S02E01</h3>
+                    <div class="meetup-info"><span class="info-label">Fecha:</span><span class="info-text">Domingo 12/17</span><span class="info-label">Horario:</span>
+                        <span
+                            class="info-text">16:00 a 20:00</span><span class="info-label">Lugar:</span><span class="info-text">Area Tres (El Salvador 5000)</span></div><button>Inscribite</button></div>
+                <div
+                    class="image"><img src="" alt=""></div>
+        </article>
+        <article class="meetup-card">
+            <div class="content">
+                <h3 class="meetup-title">freeCodeCamp BA S02E01</h3>
+                <div class="meetup-info"><span class="info-label">Fecha:</span><span class="info-text">Domingo 12/17</span><span class="info-label">Horario:</span>
+                    <span
+                        class="info-text">16:00 a 20:00</span><span class="info-label">Lugar:</span><span class="info-text">Area Tres (El Salvador 5000)</span></div><button>Inscribite</button></div>
+            <div
+                class="image"><img src="" alt=""></div>
+        </article>
+        </div>
+    </section>
+    <section class="supporters">
+        <div class="container">
+            <h2>Supporters</h2>
+            <p>Estas son algunas de las comunidades y empresas que nos apoyan para seguir creciendo.</p>
+            <div class="supporters-list"><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt=""><img src="" alt="">
+                <img
+                    src="" alt=""><img src="" alt=""></div>
+        </div>
+    </section>
+    <script src="./dist/js/index.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>
+</body>
+
+</html>