Profile Picture

Firdhila Ananda Syahputri

Nama saya Firdhila Ananda Syahputri, biasanya dipanggil Firdhila.Saya lahir di Lhokseumawe pada 18 Mei 2006. Saya merupakan mahasiswa semester 2 jurusan Teknologi Informasi dan Komputer prodi Teknik Informatika di Politeknik Negeri Lhokseumawe.

Mengubah Layout Web dengan SCSS.

25 Apr 2025 -

Mengubah Layout Web dengan SCSS.

  1. update file navigation.html yang berada didalam folder _includes 
         <ul>
            
         <li>
         <a href="/" >
             Home
         </a>
         </li>
            
         <li>
         <a href="/friends.html" >
             Friends
         </a>
         </li>
            
         <li>
         <a href="/blog.html" >
             Blog
         </a>
         </li>
            
     </ul>
  2. update kode SCSS yang berada pada file main.scss 
         $primary-color: #b13f57;
     $secondary-color: #f30606;
     $font-stack: Helvetica, sans-serif;

     body,
     h1,
     h2,
     p {
         margin: 0; padding: 0; box-sizing: border-box;
     }

     body {
         font-family: $font-stack; line-height: 1.6;
         background-color: #ffffff;
     }

     header {
         text-align: center; padding: 24px; color: #fff;
         background-color: $primary-color;
     }

     main {
         padding: 24px; margin-top: 24px; color: white;
         box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
         background-color: #966f6f;

     }

     footer {
         text-align: center; padding: 8px; margin-top: 24px; color: #ffffff;
         background-color: $primary-color;
     }

     h2 {
         color: #333; margin-bottom: 8px;
     }

     nav {
         margin: 24px 0;
         ul {
             list-style-type: none; margin: 0; padding: 0; overflow: hidden;
             background-color: $primary-color;
         }
         li {
             float: left;
             a {
                 display: block; color: white; text-align: center; padding: 8px 16px;
                 text-decoration: none;
                 &:hover:not(.active) {
                     background-color: $secondary-color;
                 }
             }
         }
     }

     .container {
         width: 80%; margin: auto; overflow: hidden;
     }

     .profile-picture {
         width: 150px; height: 150px; border-radius: 50%; margin: 24px auto;
         background-color: $secondary-color;
     }

     .active {
         background-color: $secondary-color;
     }
  3. update file default.html yang berada didalam folder _layouts seperti dibawah ini
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Mengubah Layout Web dengan SCSS.</title>

            <!--Stylesheet-->
            <link rel="stylesheet" href="/assets/css/styles.css">

            <!--Favicon-->
            <link rel="icon" href="/assets/images/favicon.ico">

            <!--JavaScript-->
            <script src="/assets/js/scripts.js"></script>

            <!--Plugins-->
            <link type="application/atom+xml" rel="alternate" href="https://firdhilaananda.github.io/feed.xml" title="Firdhila Ananda Syahputri" />
            <!-- Begin Jekyll SEO tag v2.8.0 -->
<title>Mengubah Layout Web dengan SCSS. | Firdhila Ananda Syahputri</title>
<meta name="generator" content="Jekyll v4.4.1" />
<meta property="og:title" content="Mengubah Layout Web dengan SCSS." />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Mengubah Layout Web dengan SCSS." />
<meta property="og:description" content="Mengubah Layout Web dengan SCSS." />
<link rel="canonical" href="https://firdhilaananda.github.io/2025/04/25/Mengubah-layout-web-dengan-scss.html" />
<meta property="og:url" content="https://firdhilaananda.github.io/2025/04/25/Mengubah-layout-web-dengan-scss.html" />
<meta property="og:site_name" content="Firdhila Ananda Syahputri" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2025-04-25T00:00:00+00:00" />
<meta name="twitter:card" content="summary" />
<meta property="twitter:title" content="Mengubah Layout Web dengan SCSS." />
<script type="application/ld+json">
{"@context":"https://schema.org","@type":"BlogPosting","dateModified":"2025-04-25T00:00:00+00:00","datePublished":"2025-04-25T00:00:00+00:00","description":"Mengubah Layout Web dengan SCSS.","headline":"Mengubah Layout Web dengan SCSS.","mainEntityOfPage":{"@type":"WebPage","@id":"https://firdhilaananda.github.io/2025/04/25/Mengubah-layout-web-dengan-scss.html"},"url":"https://firdhilaananda.github.io/2025/04/25/Mengubah-layout-web-dengan-scss.html"}</script>
<!-- End Jekyll SEO tag -->


        </head>
        <body>
            <div class="container">
                <header>
                    <img src="/assets/images/fotofirdhila.jpg" alt="Profile Picture"
                    class="profile-picture">
                    <h1>Firdhila Ananda Syahputri</h1>
                    <p>Nama saya Firdhila Ananda Syahputri, biasanya dipanggil Firdhila.Saya lahir di Lhokseumawe pada 18 Mei 2006. Saya merupakan mahasiswa semester 2 jurusan Teknologi Informasi dan Komputer prodi Teknik Informatika di Politeknik Negeri Lhokseumawe.<br></p>
                </header>
        <nav>
                    <ul>
    
    <li>
    <a href="/" >
        Home
    </a>
    </li>
    
    <li>
    <a href="/friends.html" >
        Friends
    </a>
    </li>
    
    <li>
    <a href="/blog.html" >
        Blog
    </a>
    </li>
    
</ul>
                </nav>
                <main>
                    <h1>HTML Link dan List</h1>
<p>21 Mar 2025 - </p>

<p>Penjelasan tentang Link dan List pada HTML.</p>

<h3 id="1-html-link">1. HTML Link</h3>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>HTML Link digunakan untuk membuat hyperlink ke halaman lain, sintaksnya: &lt;a href="URL"&gt;Linknya&lt;/a&gt;
</code></pre></div></div>
<p>contohnya : <a href="https://www.instagram.com/firdhilas?igsh=MTFnZmNrcWZnNjI5cg==">Coba Buka</a></p>

<h3 id="2-html-list">2. HTML List</h3>

<ol>
  <li>Tidak Berurutan (Unorded List)</li>
</ol>

<p>Menggunakan &lt;ul&gt; dan dengan daftar item dimulai dengan &lt;li&gt;
Contohnya:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;ul&gt;
  &lt;li&gt;Baju&lt;/li&gt;
  &lt;li&gt;Celana&lt;/li&gt;
  &lt;li&gt;Anting&lt;/li&gt;
&lt;/ul&gt;
</code></pre></div></div>

<p>Hasilnya:</p>

<ul>
  <li>Baju</li>
  <li>Celana</li>
  <li>Anting</li>
</ul>

<ol>
  <li>Daftar Berurutan (Ordered List)</li>
</ol>

<p>Menggunakan &lt;ol&gt; dan dengan daftar item dimulai dengan &lt;li&gt;
Contohnya:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;ol&gt;
  &lt;li&gt;Baju&lt;/li&gt;
  &lt;li&gt;Celana&lt;/li&gt;
  &lt;li&gt;Anting&lt;/li&gt;
&lt;/ol&gt;
</code></pre></div></div>
<p>Hasilnya:</p>
<ol>
  <li>Baju</li>
  <li>Celana</li>
  <li>Anting</li>
</ol>

<h1 id="membuat-link-dan-list-ke-website-friends">Membuat Link dan List ke website Friends</h1>
<ul>
  <li>Edit file index.html menjadi
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Nama: Firdhila Ananda Syahputri&lt;/h1&gt;
      &lt;p&gt;Deskripsi Diri: Saya merupakan mahasiswa semester 2 jurusan Teknologi Informasi dan Komputer prodi Teknik Informatika di Politeknik Negeri Lhokseumawe.&lt;br&gt; 
          Saya lahir di Lhokseumawe pada 18 Mei 2006.&lt;/p&gt;
      &lt;h2&gt;Berikut teman-teman saya di kelas: &lt;/h2&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href ="https://lepii1.github.io/" target="blank"&gt;Ahmad Aulia Fahlevi&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="https://alvi0syahril.github.io/" target="blank"&gt;Alvi Syahril&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="https://bunga-hub.github.io/" target="blank"&gt;Bunga Alfa Zahrah&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="https://devarisny.github.io" target="blank"&gt;Deva Risny&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="https://faizul-abrar.github.io/" target="blank"&gt;Faizul Abrar&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="https://faqriyadiandika.github.io" target="blank"&gt;Faqriyadi Andika&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="https://fathan-mubina.github.io/" target="blank"&gt;Fathan Mubina&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href ="https://firdhilaananda.github.io" target="blank"&gt;Firdhila Ananda Syahputri&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
</code></pre></div>    </div>
  </li>
  <li>Kemudian buat file baru dengan nama friends.md dan isi file tersebut seperti dibawah ini dengan link yang sama seperti di file index.html:
    <div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>  # Friends page

  Berikut teman-teman saya di kelas:
  1. [Ahmad Aulia Fahlevi](https://lepii1.github.io/)
  2. [Alvi Syahril](https://alvi0syahril.github.io/)
  3. [Bunga Alfa Zahrah](https://bunga-hub.github.io/)
  4. [Deva Risny](https://devarisny.github.io)
  5. [Faizul Abrar](https://faizul-abrar.github.io/)
  6. [Faqriyadi Andika](https://faqriyadiandika.github.io)
  7. [Fathan Mubina](https://fathan-mubina.github.io/)
  8. [Firdhila Ananda Syahputri](https://firdhilaananda.github.io)
</code></pre></div>    </div>
  </li>
</ul>

                </main>

                <footer>
                    <p>&copy; 2025 Firdhila Ananda Syahputri. All rights reserved.</p>
                </footer>
            </div>
        </body>
        </html>