<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>History &#8211; Explore Córdoba</title>
	<atom:link href="https://explorecordoba.be/category/history/feed/" rel="self" type="application/rss+xml" />
	<link>https://explorecordoba.be</link>
	<description></description>
	<lastBuildDate>Thu, 19 Mar 2026 08:43:01 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://explorecordoba.be/wp-content/uploads/2026/03/cropped-D684106F-3569-4CF4-9F6E-D590C3ECD2A1-32x32.png</url>
	<title>History &#8211; Explore Córdoba</title>
	<link>https://explorecordoba.be</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>History of Cordoba</title>
		<link>https://explorecordoba.be/2026/03/11/225/</link>
					<comments>https://explorecordoba.be/2026/03/11/225/#respond</comments>
		
		<dc:creator><![CDATA[Angela Romero Higuera]]></dc:creator>
		<pubDate>Wed, 11 Mar 2026 10:39:46 +0000</pubDate>
				<category><![CDATA[History]]></category>
		<guid isPermaLink="false">https://ucll.info/uojm/?p=225</guid>

					<description><![CDATA[Córdoba is a historic city in southern Spain, known for its rich cultural heritage and stunning architecture. Influenced by Roman, Islamic, and Christian civilizations, it offers a unique blend of history, tradition, and beauty that can be seen in its streets, monuments, and vibrant atmosphere.]]></description>
										<content:encoded><![CDATA[
<p class="has-medium-font-size">Córdoba is a historic city in southern Spain, known for its rich cultural heritage and stunning architecture. Influenced by Roman, Islamic, and Christian civilizations, it offers a unique blend of history, tradition, and beauty that can be seen in its streets, monuments, and vibrant atmosphere.<br></p>



<div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow">
<div id="myapp-cordoba-timeline" class="myapp-wrap">
  <style>
    #myapp-cordoba-timeline {
      --myapp-bg: #e9dccb;
      --myapp-card: #f4eadc;
      --myapp-line: #b44a45;
      --myapp-title: #a62f2c;
      --myapp-text: #4f433c;
      --myapp-muted: #7a6b62;
      --myapp-shadow: 0 10px 24px rgba(90, 54, 43, 0.10);
      --myapp-radius: 18px;
      background: var(--myapp-bg);
      color: var(--myapp-text);
      padding: 32px 20px 40px;
      border-radius: 20px;
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;
      font-family: inherit;
    }

    #myapp-cordoba-timeline * {
      box-sizing: border-box;
    }

    .myapp-header {
      max-width: 1000px;
      margin: 0 auto 28px;
      text-align: center;
    }

    .myapp-kicker {
      display: inline-block;
      font-size: 0.85rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--myapp-muted);
      margin-bottom: 8px;
    }

    .myapp-main-title {
      margin: 0 0 10px;
      color: var(--myapp-title);
      font-size: clamp(2rem, 4.5vw, 3.7rem);
      line-height: 1.02;
      font-weight: 700;
    }

    .myapp-subtitle {
      margin: 0 auto;
      max-width: 760px;
      color: var(--myapp-text);
      font-size: 1rem;
      line-height: 1.6;
    }

    .myapp-controls {
      max-width: 1000px;
      margin: 22px auto 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center;
    }

    .myapp-filter-btn {
      appearance: none;
      border: 1px solid rgba(166, 47, 44, 0.22);
      background: rgba(255, 255, 255, 0.35);
      color: var(--myapp-title);
      border-radius: 999px;
      padding: 10px 16px;
      font: inherit;
      cursor: pointer;
      transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }

    .myapp-filter-btn:hover,
    .myapp-filter-btn:focus {
      transform: translateY(-1px);
      background: rgba(255, 255, 255, 0.62);
      outline: none;
    }

    .myapp-filter-btn.myapp-active {
      background: var(--myapp-title);
      color: #fff;
      box-shadow: 0 6px 18px rgba(166, 47, 44, 0.18);
    }

    .myapp-timeline {
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
      padding: 24px 0 8px;
    }

    .myapp-timeline::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 4px;
      transform: translateX(-50%);
      background: linear-gradient(to bottom, rgba(180,74,69,0.1), var(--myapp-line), rgba(180,74,69,0.1));
      border-radius: 999px;
    }

    .myapp-item {
      position: relative;
      width: 50%;
      padding: 0 28px 28px;
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.28s ease, transform 0.28s ease;
    }

    .myapp-item.myapp-hidden {
      opacity: 0;
      transform: translateY(8px);
      pointer-events: none;
      position: absolute;
    }

    .myapp-item[data-side="left"] {
      left: 0;
    }

    .myapp-item[data-side="right"] {
      left: 50%;
    }

    .myapp-dot {
      position: absolute;
      top: 22px;
      width: 18px;
      height: 18px;
      background: var(--myapp-title);
      border: 4px solid var(--myapp-bg);
      border-radius: 50%;
      box-shadow: 0 0 0 3px rgba(166, 47, 44, 0.16);
      z-index: 2;
    }

    .myapp-item[data-side="left"] .myapp-dot {
      right: -9px;
    }

    .myapp-item[data-side="right"] .myapp-dot {
      left: -9px;
    }

    .myapp-card {
      background: var(--myapp-card);
      border-radius: var(--myapp-radius);
      box-shadow: var(--myapp-shadow);
      padding: 20px 20px 16px;
      border: 1px solid rgba(166, 47, 44, 0.08);
      transition: transform 0.24s ease, box-shadow 0.24s ease;
    }

    .myapp-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 16px 32px rgba(90, 54, 43, 0.14);
    }

    .myapp-year {
      display: inline-block;
      margin-bottom: 10px;
      color: var(--myapp-title);
      font-weight: 700;
      font-size: 1rem;
      letter-spacing: 0.02em;
    }

    .myapp-card-title {
      margin: 0 0 8px;
      color: var(--myapp-title);
      font-size: 1.35rem;
      line-height: 1.15;
      font-weight: 700;
    }

    .myapp-card-text {
      margin: 0 0 12px;
      color: var(--myapp-text);
      line-height: 1.65;
      font-size: 0.98rem;
    }

    .myapp-tag {
      display: inline-block;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.8rem;
      color: var(--myapp-title);
      background: rgba(166, 47, 44, 0.09);
      margin-bottom: 12px;
    }

    .myapp-more-btn {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--myapp-title);
      padding: 0;
      font: inherit;
      font-weight: 600;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .myapp-extra {
      display: none;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(166, 47, 44, 0.12);
      color: var(--myapp-text);
      line-height: 1.6;
      font-size: 0.95rem;
    }

    .myapp-card.myapp-open .myapp-extra {
      display: block;
    }

    .myapp-card.myapp-open .myapp-more-btn::after {
      content: " less";
    }

    .myapp-more-btn::after {
      content: " more";
    }

    .myapp-footer-note {
      max-width: 1000px;
      margin: 18px auto 0;
      text-align: center;
      color: var(--myapp-muted);
      font-size: 0.92rem;
    }

    @media (max-width: 820px) {
      .myapp-timeline::before {
        left: 18px;
        transform: none;
      }

      .myapp-item,
      .myapp-item[data-side="left"],
      .myapp-item[data-side="right"] {
        width: 100%;
        left: 0;
        padding: 0 0 22px 44px;
      }

      .myapp-item[data-side="left"] .myapp-dot,
      .myapp-item[data-side="right"] .myapp-dot {
        left: 9px;
        right: auto;
      }

      .myapp-card-title {
        font-size: 1.2rem;
      }
    }
  </style>

  <div class="myapp-header">
    <div class="myapp-kicker">Interactive timeline</div>
    <h2 class="myapp-main-title">History of Córdoba, Spain</h2>
    <p class="myapp-subtitle">
      Explore the main historical periods that shaped Córdoba, from Roman times to the present day.
      Use the filters to focus on a specific era and open each card to read more.
    </p>
  </div>

  <div class="myapp-controls" aria-label="Timeline filters">
    <button class="myapp-filter-btn myapp-active" type="button" data-filter="all">All</button>
    <button class="myapp-filter-btn" type="button" data-filter="ancient">Ancient</button>
    <button class="myapp-filter-btn" type="button" data-filter="medieval">Medieval</button>
    <button class="myapp-filter-btn" type="button" data-filter="modern">Modern</button>
  </div>

  <div class="myapp-timeline">
    <article class="myapp-item" data-side="left" data-era="ancient">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">169 BC</div>
        <div class="myapp-tag">Ancient period</div>
        <h3 class="myapp-card-title">Roman Córdoba</h3>
        <p class="myapp-card-text">
          Córdoba became an important Roman settlement and later a major city of Hispania, known as Corduba.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          Under Roman rule, Córdoba developed political, commercial, and cultural importance. It was also connected to the wider Roman world through roads, bridges, and urban infrastructure.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="right" data-era="ancient">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">1st century BC</div>
        <div class="myapp-tag">Ancient period</div>
        <h3 class="myapp-card-title">Birthplace of Seneca</h3>
        <p class="myapp-card-text">
          The philosopher Seneca, one of the most famous intellectual figures of Roman Spain, was born in Córdoba.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          Seneca became one of the best-known Stoic philosophers of the Roman Empire. His connection with Córdoba reflects the city’s importance during the Roman period.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="left" data-era="medieval">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">711 AD</div>
        <div class="myapp-tag">Medieval period</div>
        <h3 class="myapp-card-title">Islamic rule begins</h3>
        <p class="myapp-card-text">
          After the Muslim conquest of the Iberian Peninsula, Córdoba entered a new period that transformed the city.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          This marked the start of al-Andalus in the region. Córdoba gradually became one of the most influential urban centres in Europe during the medieval period.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="right" data-era="medieval">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">756 AD</div>
        <div class="myapp-tag">Medieval period</div>
        <h3 class="myapp-card-title">Capital of the Emirate</h3>
        <p class="myapp-card-text">
          Abd al-Rahman I established the Emirate of Córdoba and made the city its political capital.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          Córdoba gained political stability and prestige. This period also saw the beginning of major architectural and urban growth, including the early construction of the Great Mosque.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="left" data-era="medieval">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">929 AD</div>
        <div class="myapp-tag">Medieval period</div>
        <h3 class="myapp-card-title">The Caliphate of Córdoba</h3>
        <p class="myapp-card-text">
          Abd al-Rahman III proclaimed the Caliphate, and Córdoba reached its greatest political and cultural power.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          During the Caliphate, Córdoba became famous for scholarship, science, philosophy, trade, and architecture. It was one of the most remarkable cities in medieval Europe.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="right" data-era="medieval">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">10th century</div>
        <div class="myapp-tag">Medieval period</div>
        <h3 class="myapp-card-title">Medina Azahara</h3>
        <p class="myapp-card-text">
          The palatial city of Medina Azahara was built near Córdoba as a symbol of caliphal power and splendour.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          The complex included administrative, ceremonial, and residential areas. Today it remains one of the most important archaeological sites connected with Islamic Spain.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="left" data-era="medieval">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">1236 AD</div>
        <div class="myapp-tag">Medieval period</div>
        <h3 class="myapp-card-title">Christian conquest</h3>
        <p class="myapp-card-text">
          Córdoba was conquered by Ferdinand III of Castile and became part of the Christian kingdoms.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          This event reshaped the city politically and religiously. The Great Mosque was later adapted into the cathedral, creating one of Córdoba’s most iconic monuments.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="right" data-era="modern">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">16th century</div>
        <div class="myapp-tag">Modern period</div>
        <h3 class="myapp-card-title">Cathedral inside the Mosque</h3>
        <p class="myapp-card-text">
          A Renaissance cathedral nave was inserted into the former mosque, creating the Mezquita-Catedral we know today.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          This transformation reflects the layered history of Córdoba, where Roman, Islamic, Jewish, and Christian influences remain visible in the urban landscape.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="left" data-era="modern">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">1984</div>
        <div class="myapp-tag">Modern period</div>
        <h3 class="myapp-card-title">UNESCO recognition</h3>
        <p class="myapp-card-text">
          The historic centre and the Mosque-Cathedral gained international recognition as World Heritage landmarks.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          UNESCO recognition highlighted Córdoba’s exceptional architectural and cultural value and helped reinforce its position as one of Spain’s most important heritage cities.
        </div>
      </div>
    </article>

    <article class="myapp-item" data-side="right" data-era="modern">
      <div class="myapp-dot" aria-hidden="true"></div>
      <div class="myapp-card">
        <div class="myapp-year">Today</div>
        <div class="myapp-tag">Modern period</div>
        <h3 class="myapp-card-title">A city of living heritage</h3>
        <p class="myapp-card-text">
          Córdoba continues to be known for its history, patios, gastronomy, and the coexistence of different cultural traditions.
        </p>
        <button class="myapp-more-btn" type="button" aria-expanded="false">Read</button>
        <div class="myapp-extra">
          The city combines tourism, daily life, and historical identity. Its monuments, festivals, and neighbourhoods make the past visible in the present.
        </div>
      </div>
    </article>
  </div>

  <p class="myapp-footer-note">
    Tip: tap the buttons to filter by period and open each card for more details.
  </p>

  <script>
    (function () {
      var root = document.getElementById('myapp-cordoba-timeline');
      if (!root) return;

      var filterButtons = root.querySelectorAll('.myapp-filter-btn');
      var items = root.querySelectorAll('.myapp-item');
      var readButtons = root.querySelectorAll('.myapp-more-btn');

      for (var i = 0; i < filterButtons.length; i++) {
        filterButtons[i].addEventListener('click', function () {
          var selected = this.getAttribute('data-filter');

          for (var j = 0; j < filterButtons.length; j++) {
            filterButtons[j].classList.remove('myapp-active');
          }
          this.classList.add('myapp-active');

          for (var k = 0; k < items.length; k++) {
            var era = items[k].getAttribute('data-era');
            var show = selected === 'all' || era === selected;
            items[k].classList.toggle('myapp-hidden', !show);
          }
        });
      }

      for (var m = 0; m < readButtons.length; m++) {
        readButtons[m].addEventListener('click', function () {
          var card = this.closest('.myapp-card');
          var expanded = this.getAttribute('aria-expanded') === 'true';
          this.setAttribute('aria-expanded', expanded ? 'false' : 'true');
          card.classList.toggle('myapp-open');
        });
      }
    })();
  </script>
</div>
</div>
]]></content:encoded>
					
					<wfw:commentRss>https://explorecordoba.be/2026/03/11/225/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
