[RU-002] new Title and Media links

.gitignore

@@ -4,3 +4,4 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+.DS_Store

_layouts/default.html

@@ -6,9 +6,29 @@
     {% include header.html %}
 
     <article>
-      <header>
-        <h1> Ruby UY </h1>
-        <h2> Comunidad Ruby en Uruguay &#127482;&#127486; </h2>
+      <header class='mainHeader'>
+        <div class='mainTitleBox'>
+          <h2 class='mainTitle'> COMUNIDAD RUBY EN URUGUAY </h2>
+          <img class='mainLogo' src='/assets/images/logo.svg'/>
+        </div>
+        <div class='mainInfo'>
+          <div class='mainInvitationBox'>
+            <h1 class='mainInvitation'> Sé parte_ </h1> 
+          </div>
+          <div class='mainLinksBox'>
+            <div class='mainLinks'>
+              <div class='linkRow'>
+                <a class='shapeLink' href="https://www.meetup.com/ruby-montevideo/"> Meetup <img src='/assets/images/arrow.svg'/></a>
+                <a class='shapeLink' href="https://www.instagram.com/ruby_uruguay/"> Instagram <img src='/assets/images/arrow.svg'/></a>
+              </div>
+              <div class='linkRow'>
+                <a class='shapeLink' href="https://twitter.com/rubymontevideo"> Twitter <img src='/assets/images/arrow.svg'/></a>
+                <a class='shapeLink' href="https://owu.slack.com/archives/C52L2AK8W"> Slack <img src='/assets/images/arrow.svg'/></a>
+                <a class='shapeLink' href="https://github.com/rubyuy/ruby.uy"> Github <img src='/assets/images/arrow.svg'/></a>
+              </div>
+            </div>
+          </div>
+        </div>
       </header>
 
       <section> {{ content }} </section>

_sass/header.scss

@@ -0,0 +1,129 @@
+.mainHeader {
+  position: absolute;
+  top: 88px;
+  left: 0px;
+  display: flex;
+  width: 100%;
+  height: 907px;
+  flex-direction: column;
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+}
+
+.mainTitleBox {
+  background: #3967D1;
+  height: 604px;
+  width: 100%;
+  position: relative;
+
+  @media (max-width: 820px) {
+    height: 260px;
+  }
+}
+
+.mainTitle {
+  position: absolute;
+  top: 20px;
+  left: 52px;
+  margin: 0px;
+  height: 405px;
+  width: 55.9588%;
+  color: #FEE5DC;
+  font-family: 'Syncopate', sans-serif;
+  font-size: 7.25vw;
+  font-style: normal;
+  font-weight: 900;
+  line-height: 96.5%;
+}
+
+.mainLogo {
+  position: absolute;
+  top: 43%;
+  left: 62%;
+  width: 29.449%;
+  z-index: 1;
+}
+
+.mainInfo {
+  height: 303px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+
+  @media (max-width: 820px) {
+    height: 200px;
+
+    img {
+      height: auto; 
+      max-width: 20%;
+    }
+  }
+}
+
+.mainInvitationBox {
+  width: 50%;
+  position: relative;
+}
+
+.mainInvitation {
+  margin: 0px;
+  position: absolute;
+  top: 40px;
+  left: 52px;
+  width: 50%;
+  height: 184px;
+  color: #3967D1;
+  font-family: 'Syncopate', sans-serif;
+  font-size: 4.782vw;
+  font-style: normal;
+  font-weight: 900;
+}
+
+.mainLinksBox {
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  background: #4E9E94;
+  width: 50%;
+  color: #FFF;
+  font-family: 'Syncopate', sans-serif;
+  font-size: 1.547vw;
+  font-style: normal;
+  font-weight: 800;
+  line-height: normal;
+}
+
+.mainLinks {
+  position: absolute;
+  display: flex;
+  top: 4.531vw;
+  left: 51px;
+  width: 90%;
+  height: 129px;
+  flex-wrap: wrap;
+  align-content: center;
+}
+
+.linkRow {
+  width: 42.448vw;
+  height: 64.5px;
+}
+
+.shapeLink {
+  display: inline-flex;
+  padding: 0.43vw 1.719vw;
+  justify-content: center;
+  align-items: center;
+  gap: 8.25px;
+  border-radius: 59.396px;
+  border: 3.3px solid #FFF;
+  background: rgba(237, 111, 77, 0.00);
+}
+
+.oldSection {
+  position: absolute;
+  top: 1007px;
+}

assets/css/styles.scss

@@ -1,3 +1,8 @@
 ---
 ---
 @import 'application', 'topbar';
+@import 'header';
+
+body {
+  background: #F6EEEC;
+}

index.md

@@ -1,3 +1,4 @@
+<div class='oldSection'>
 <ul>
   <li>Meetup: <a href="https://www.meetup.com/ruby-montevideo/" target="_blank">Montevideo</a></li>
   <li>
@@ -19,3 +20,5 @@
     <li><a href="{{ meetup.url }}"> {{ meetup.date | date_to_string }} - {{ meetup.title }} </a></li>
 {% endfor %}
 </ul>
+
+</div>