Task 3-Templates & Globals

by

Portfolio

  1. Add Elementor Kit Library Template to your website.
  2. Create a color palette and export as an “Hex” image like the one shown here –which also has the  coolors.co URL for the palette in the image; add and image of it to your post.
  3. Create 3 posts, each with a different course (NMD 344, NMD 345 etc) or genre (video, code) category.  OR, import posts with categories from a previous NMD 100/200 portfolio.  We will use this for our Menu later.
  4. Begin your logo design–you can use a simple logo, which you can update later. Mine is just a fancy version of my name in an unusual font. 

HTML Practice

W3Schools

  1. W3S Basic & Elements, CSS Selectors, CSS How To
  2. Quiz 3  HTML & CSS

Codepen

<!-- 5. Add a <p> if you want to create a block of text. -->
<p>Experience the epic grandeur of Rome, a city where every corner tells a story. From the awe-inspiring Colosseum to the majestic Vatican City, Rome is an exhilarating mix of historical wonders and vibrant street life. It's an ideal spot for young explorers eager to uncover the layers of time.</p>
<div class="section" id="rome">
  <!-- 6. Nest <div>s with class "card" inside some of the sections. -->
  <div class="card">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Rome%2C_Italy%2C_Triton%2C_The_Moor_Fountain_on_Piazza_Navona.jpg/400px-Rome%2C_Italy%2C_Triton%2C_The_Moor_Fountain_on_Piazza_Navona.jpg" />
    Photo: CC BY Vyacheslav Argenberg   
  </div>
  <div class="card">  
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Roma_luglio_1974_-_Piazza_di_Spagna.jpg/466px-Roma_luglio_1974_-_Piazza_di_Spagna.jpg" />
    Photo: "Family photos of Infrogmation"
  </div>
  <div class="card">    
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Rome%2C_Italy%2C_Streets_of_Rome%2C_The_Eternal_City.jpg/400px-Rome%2C_Italy%2C_Streets_of_Rome%2C_The_Eternal_City.jpg" />
    Photo: CC BY Vyacheslav Argenberg
  </div>
</div>
<h2 id="naples-heading">Naples: city of hidden gems</h2>
<div class="section" id="naples-section">
  Discover Naples, a city with an infectious spirit and heartwarming authenticity. Wander through the lively streets, savor the world-famous Neapolitan pizza, and explore the intriguing underground catacombs. Naples is a treasure trove of cultural and culinary delights. (Photo: CC BY-SA alterdimaggio1957)
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/Palazzo_Don.jpg/800px-Palazzo_Don.jpg" />
</div>
<h2 id="reserve-heading">Reserve your trip</h2>
<div class="section" id="reserve-section">
  <div class="card">
    Choose your favorite Italian city - be it Florence, Rome, or Naples - and let us handle your personalized travel and accommodation arrangements.
    <!-- 7. Add one or more <button>s. -->
    <button>Book one city</button>
  </div>
  <div class="card">
    Experience the diverse beauty of Italy with our multi-city tours, offering a perfect blend of guided experiences and personal exploration in Florence, Rome, and Naples.
    <button>Book three cities</button>
  </div>
  <div class="card">
    Explore beyond these cities; our website is your portal to other Italian gems and European capitals, complete with travel resources and expert recommendations.
    <button>Other destinations</button>
  </div>
</div>
<div class="section" id="footer">
  <div class="card">
    <!-- 8. Make some text bold with <strong> tags. -->
    <strong>General Information</strong>
    <!-- 9. Create an unordered list with <ul> and <li>s. -->
    <ul>	
      <li>About Us</li>
      <li>FAQs</li>
      <li>Site Map</li>
      <li>Contact Us</li>
    </ul>
  </div>
  <div class="card">
    <strong>Policies and Support</strong>
    <ul>	
      <li>Privacy Policy</li>
      <li>Terms & Conditions</li>
      <li>Customer Support</li>
      <li>Accessibility Information</li>
      <li>COVID-19 Updates</li>
    </ul>
  </div>
  <div class="card">
    <strong>Travel Planning and Offers</strong>
    <ul>	
      <li>Special Offers</li>
      <li>Group Bookings</li>
      <li>Travel Insurance</li>
      <li>Gift Vouchers</li>
      <li>Sustainable Travel</li>
    </ul>
  </div>
  <div class="card">
    <strong>Engagement and Updates</strong>
    <ul>	
      <li>Travel Blog</li>
      <li>Newsletter Signup</li>
      <li>Social Media Links</li>
      <li>Affiliate Program</li>
      <li>Career Opportunities</li>
    </ul>
  </div>
</div>

Post

  1. Subject: Task 3-yourname
  2. Category: Task 3
  3. Portfolio URL
  4. Codepen URL
  5. Image of your palette from Colors.co with a short description of why you chose these colors for your portfolio & why you choose your fonts.