Ada-C15 · Raque-lita · Jun 6, 2021 · Jun 7, 2021 · Jun 8, 2021 · Jun 8, 2021
diff --git a/about.html b/about.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>SOBRE YO &mdash; Raqi's Portfolio Site</title>
+        <link rel="stylesheet" href="./stylesheets/style.css" />
+    </head>
+    <body>
+            <nav>
+                <a class="navlink" href="index.html">Home</a>
+                <a class="navlink" href="portfolio.html">Portfolio</a>
+                <a class="navlink" href="about.html">About</a>
+                <a class="navlink" href="community-action.html">Community Action Blog</a>
+
+                </nav>
+    </body>
+
+    <header class="header">
+        <h1>About  Author</h1>    
+    </header>
+
+    <main class="about-me">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper imperdiet dui, ac sollicitudin erat mollis luctus. In ullamcorper orci et mi tincidunt sagittis. Suspendisse mollis turpis nec sollicitudin tincidunt. Suspendisse potenti. Proin aliquam ex quis risus mollis malesuada. Curabitur ipsum turpis, convallis ut ligula at, congue pellentesque eros. In erat ante, eleifend at bibendum ut, ullamcorper sed lacus. In vehicula leo lectus, id malesuada eros euismod eu. Vivamus non elementum libero, ut tincidunt neque. Ut elementum, velit eu iaculis blandit, ligula leo vulputate neque, eu egestas tortor ante sit amet justo. Curabitur sed congue ex. Etiam vitae dignissim risus. Pellentesque sed felis purus. Mauris aliquet tellus id malesuada interdum. Aenean quis ultricies est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>        
+            <img class="about-img-1" src="./images/barton-springs-cleanip.jpeg" alt="barton springs clean up" loading="lazy">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper imperdiet dui, ac sollicitudin erat mollis luctus. In ullamcorper orci et mi tincidunt sagittis. Suspendisse mollis turpis nec sollicitudin tincidunt. Suspendisse potenti. Proin aliquam ex quis risus mollis malesuada. Curabitur ipsum turpis, convallis ut ligula at, congue pellentesque eros. In erat ante, eleifend at bibendum ut, ullamcorper sed lacus. In vehicula leo lectus, id malesuada eros euismod eu. Vivamus non elementum libero, ut tincidunt neque. Ut elementum, velit eu iaculis blandit, ligula leo vulputate neque, eu egestas tortor ante sit amet justo. Curabitur sed congue ex. Etiam vitae dignissim risus. Pellentesque sed felis purus. Mauris aliquet tellus id malesuada interdum. Aenean quis ultricies est. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>        
+            <img class="about-img-2" src="./images/foggy-austin-skyline.jpeg" alt="foggy austin foggy-austin-skyline" loading="lazy"> 
+
+
+
+    </main>
+
+    <footer>
+        &copy; 2021 Ada Developers Academy
+    </footer>
+
+</html>
diff --git a/community-action.html b/community-action.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Community Action &mdash; Raqi's Portfolio Site</title>
+        <link rel="stylesheet" href="./stylesheets/style.css" />
+    </head>
+    <body>
+        <nav>
+            <a class="navlink" href="index.html">Home</a>
+            <a class="navlink" href="portfolio.html">Portfolio</a>
+            <a class="navlink" href="about.html">About</a>
+            <a class="navlink" href="community-action.html">Community Action Blog</a>
+        </nav>
+
+
+    <header class="header">
+        <h1>COMMUNITY SPACES</h1>
+
+        <img src="./images/Builing-Our-Power-and-Safety-Through-Solidarity-1024x341.jpeg" alt= "people coming together to support one another" />
+    </header>
+
+    <main>
+        <section class="feature-group">
+            <h1>Featured Community Space</h1>
+            <h2>Yellow Bike Project</h2>
+            <h3>1216 Webberville Rd, Austin Tx, 78721</h3>
+        </section>
+        <section class="post-content">
+        <img src="./images/yellowbikeproject.png" alt="yellow bike project">
+        <p>
+            Yellow Bike Project (YBP) was started in 1997 and we are a 501c(3) non-profit. Our Mission: Reuse bicycles and to provide tools, workspace, and guidance for all. YBP has many active and past projects aimed at getting people on bikes. Special projects are targeted towards children and those without the means of purchasing bikes. View our Special Projects and Kids’ Programs pages for more details. We also support making the streets of Austin safer.                   
+        </p>
+        <p>
+            Over 100 bicycles have been distributed to kids from underserved communities together through our partner organisations and during our Sunday Spring Kids’ Bike Giveaway. Big thank you to all mechanics who supported us in the last few moths to put those bikes together. We would also like to thank all our donors, thanks to which, we managed to equip the bikes with helmets. We would like to express big gratitude to all of you and each one of you who helped us make this event happen. Bikes have the right to children!
+        <p>
+            We are now offering both Volunteer Shops and Open/Community Shops both phases of Earn-a-Bike can now be completed. Please review YBP’s Earn-a-Bike form. It explains the program and divides it into two supervised repair checklists: the first performed by E-a-B participants on any bikes YBP plans to donate; the second on the frameset participants earn on the first checklist. You may complete the first checklist at either Volunteer Shops or an Open Shops, And the second checklist at Open Shops. The checklists are self-paced and because the pool of E-a-B framesets come from donations, YBP cannot guarantee that there will be 1) one you like or 2) one that fits you when you’re ready to choose one.
+        </p>
+        </section>
+
+
+
+
+
+            <h2>Previously Featured Spaces</h2>
+
+        <div class="additional-group">
+            <div class="featured-group">
+                    <img class="org-img" src="./images/SCA.png" alt="social cycling austin">
+
+                <h3>Social Cycling Austin</h3>
+                <a href="https://www.facebook.com/socialcyclingaustin/">Social Cycling Austin</a>
+            </div>
+
+            <div class="featured-group">
+                <img class="org-img" src="./images/barton-springs.jpeg" alt="Barton Springs pool">
+                <h3>Friends of Barton Springs</h3>
+                <a href="http://friendsofbartonspringspool.org/">Barton Springs</a>
+            </div>
+
+            <div class="featured-group">
+                <img class="org-img" src="./images/MSVW+Logo+Transparent+Upscaled.webp" alt="Mama Sana Vibrant woman org">
+                <h3>Mama Sana Vibrant Woman</h3>
+                <a href="https://www.msvwatx.org/">Mama Sana Vibrant Woman</a>
+            </div>
+
+        </div>
+
+
+    </main>
+            <footer class="footer">
+                &copy; 2021 Ada Developers Academy
+            </footer>
+    </body>
+</html>
diff --git a/images/Builing-Our-Power-and-Safety-Through-Solidarity-1024x341.jpeg b/images/Builing-Our-Power-and-Safety-Through-Solidarity-1024x341.jpeg
diff --git a/images/MSVW+Logo+Transparent+Upscaled.webp b/images/MSVW+Logo+Transparent+Upscaled.webp
diff --git a/images/SCA.png b/images/SCA.png
diff --git a/images/TNSRcapitol.jpg b/images/TNSRcapitol.jpg
diff --git a/images/austin-bike-1.jpeg b/images/austin-bike-1.jpeg
diff --git a/images/barton-springs-cleanip.jpeg b/images/barton-springs-cleanip.jpeg
diff --git a/images/barton-springs.jpeg b/images/barton-springs.jpeg
diff --git a/images/foggy-austin-skyline.jpeg b/images/foggy-austin-skyline.jpeg
diff --git a/images/food-distro.jpeg b/images/food-distro.jpeg
diff --git a/images/houston-critical-mass.jpeg b/images/houston-critical-mass.jpeg
diff --git a/images/yellowbikeproject.png b/images/yellowbikeproject.png
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Casita &mdash; Raqi's Portfolio Site</title>
+        <link rel="stylesheet" href="./stylesheets/style.css" />
+    </head>
+
+
+    <body>
+        <nav>
+            <a class="navlink" href="index.html">Home</a>
+            <a class="navlink" href="portfolio.html">Portfolio</a>
+            <a class="navlink" href="about.html">About</a>
+            <a class="navlink" href="community-action.html">Community Action Blog</a>
+
+            </nav>
+
+
+        <header class="header">
+            <h1>a site about love for community</h1>
+            <h3>a work in progress by r mena</h3>
+
+            </header>
+
+            <main class="container">
+                <section class="intro">
+                <img src="./images/TNSRcapitol.jpg" alt= "thursday night social ride, bikes in front of capitol" />
+
+                <p>
+                    Al contrario del pensamiento popular, el texto de Lorem Ipsum no es simplemente texto aleatorio. Tiene sus raices en una pieza cl´sica de la literatura del Latin, que data del año 45 antes de Cristo, haciendo que este adquiera mas de 2000 años de antiguedad. Richard McClintock, un profesor de Latin de la Universidad de Hampden-Sydney en Virginia, encontró una de las palabras más oscuras de la lengua del latín, "consecteur", en un pasaje de Lorem Ipsum, y al seguir leyendo distintos textos del latín, descubrió la fuente indudable. Lorem Ipsum viene de las secciones 1.10.32 y 1.10.33 de "de Finnibus Bonorum et Malorum" (Los Extremos del Bien y El Mal) por Cicero, escrito en el año 45 antes de Cristo.
+                </p>
+                <p> 
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan, felis vel malesuada consequat, felis erat varius lorem, quis lobortis urna lectus ac ex. Praesent sapien arcu, sagittis sed purus id, varius fringilla felis. Phasellus commodo felis id augue tristique, condimentum bibendum justo malesuada. Nam vel diam nunc. Quisque quis neque luctus, congue libero malesuada, sollicitudin justo. Fusce fermentum odio sed nunc hendrerit, sit amet consectetur metus dignissim. Integer fringilla molestie lectus vitae ultricies. Nulla interdum aliquet ante a commodo. Proin luctus malesuada aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce placerat dui libero, sit amet maximus purus consequat at.  
+                </p>
+                </section>
+
+
+
+
+            </main>
+            <footer class="footer">
+                &copy; 2021 Ada Developers Academy
+            </footer>
+    </body>
+</html>
diff --git a/portfolio.html b/portfolio.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <title>Projects &mdash; Raqi's Portfolio Site</title>
+        <link rel="stylesheet" href="./stylesheets/style.css" />
+    </head>
+    <body>
+        <nav>
+            <a class="navlink" href="index.html">Home</a>
+            <a class="navlink" href="portfolio.html">Portfolio</a>
+            <a class="navlink" href="about.html">About</a>
+            <a class="navlink" href="community-action.html">Community Action Blog</a>
+
+            </nav>
+</body>
+
+        <header class="header">
+            <h1>Projects, Professional and Personal</h1>    
+            </header>
+
+            <footer>
+                &copy; 2021 Ada Developers Academy
+            </footer>
+    </body>
+</html>
diff --git a/stylesheets/style.css b/stylesheets/style.css
@@ -0,0 +1,150 @@
+h1, h2 {
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+
+}
+
+body {
+    background-color: rgba(219, 201, 184, 1);
+
+}
+
+footer {
+    background-color: brown;
+    margin-top: 0,5em;
+    padding: 0.5em 2em;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+main {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    max-width: 60em;
+    margin-left: auto;
+    margin-right: auto;
+
+}
+
+.container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.header{
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 50px;
+}
+
+.header img{
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    align-items: center;
+}
+
+
+.footer {
+    grid-row: auto;
+}
+
+/*NAVIGATION*/
+nav{
+    display:flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width:70%;
+    margin:30 15% 0 15%;
+}
+.navlink{
+    font-family: 'Rubik', serif;
+    font-size: 15px;
+    color: black;
+    text-decoration: none;
+}
+.navlink:hover{
+    color:#c9c9c9;
+
+}
+/* COMMUNITY ACTION HEADER*/
+.communityheader img {
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto
+}
+
+
+/* COMMUNITY ACTION FEATURED SPACE*/
+.post-content img {
+
+    float: right;
+    width: 50%;
+    padding: 5%;
+}
+.post-content p {
+    display:flex
+}
+/*COMMUNITY ACTION EXTRA RESOURCES*/
+
+.additional-group {
+    display: flex;
+    text-align: center;
+    flex-basis: 100%;
+    flex-grow: 1;
+    color:black;
+    justify-content: space-around;
+}
+
+.additional-group h2{
+    padding-left: 10px;
+    margin: 0;
+    font-size: 35px;
+    font-weight: 100;
+    letter-spacing: 2px;
+}
+
+.featured-group {
+    width:25%;
+    flex-grow: 1 21%;
+    color: black;
+    text-align: center;
+    font-size: 30px;
+
+}
+
+.featured-group img {
+    width:100% !important;
+}
+
+.featured-group img{
+    width: 100%;
+    height: auto; 
+}
+
+
+.featured-group h3{
+    margin: 0;
+    font-weight: 100;
+
+}
+
+.featured-group a {
+    text-decoration: none;
+    color: #e26565;
+    font-size: 20px;
+}
+/*ABOUT ME SECTION*/
+
+.about-me {
+
+}
+
+.about-me-photos img {
+
+}