off aa a

mau ngehapus tapi kok gabisa jadinya ya gini deh hehe he ehehehe

avatar tampanberiman
@tampanberiman

1 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

2 Jawaban:

<pre> &lt;!DOCTYPE &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Rayhan Naufal Ramadhan&lt;/title&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;

&amp;lt;!-- CSS --&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;css/main.css&quot;/&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;css/responsive.css&quot;/&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;css/pace-theme-center-atom.css&quot;&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.typekit.net/ypn1nlu.css&quot;&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://use.fontawesome.com/releases/v5.6.3/css/all.css&quot;&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;&amp;gt;
&amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css&quot;&amp;gt;

&amp;lt;!-- favicon --&amp;gt;
&amp;lt;link rel=&quot;shortcut icon&quot; type=&quot;image/png&quot; href=&quot;images/hantu.png&quot;&amp;gt;

&amp;lt;!-- JavaScript --&amp;gt;

&amp;lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt;

&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt; &lt;script data-pace-options='{ "ghostTime": 500 }' src="js/pace.min.js"&gt;&lt;/script&gt; &lt;script src="js/typed.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;main&gt; &lt;!-- intro --&gt; &lt;div id="intro"&gt; &lt;nav&gt; &lt;div class="menu-icon"&gt; &lt;a class="menu-toggle" href="#"&gt;&lt;span&gt;Menu&lt;/span&gt;&lt;/a&gt; &lt;/div&gt; &lt;div class="logo"&gt; &lt;img src="images/logomini.png" alt="logo"&gt; &lt;/div&gt; &lt;div class="menu"&gt; &lt;ul class="menu-list"&gt; &lt;li&gt;&lt;a href="#intro"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#skills"&gt;Skills&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#timeline"&gt;Timeline&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#project"&gt;Portfolio&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="https://ugm.id/PesanBuatRayhan" target="_blank"&gt;Message&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/nav&gt; &lt;img class="intro-logo" src="images/logo.png"&gt; &lt;h4 class="intro-hello"&gt;&lt;/h4&gt; &lt;h1 class="intro-name"&gt;&lt;/h1&gt; &lt;p class="intro-job"&gt; &lt;span&gt;Graphic Designer&lt;/span&gt; &lt;span&gt;Computer Science Student&lt;/span&gt; &lt;span&gt;Front-End Developer&lt;/span&gt; &lt;/p&gt; &lt;a class="intro-button " href="#about" style= "text-decoration: none;"&gt;More About Me &lt;span class="fa fa-chevron-down"&gt;&lt;/span&gt;&lt;/a&gt;

        &amp;lt;!-- social media --&amp;gt;
        &amp;lt;ul class=&quot;intro-social&quot;&amp;gt;
            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://www.linkedin.com/in/rayhantu&quot; target=&quot;_blank&quot;&amp;gt;&amp;lt;i class=&quot;fa fa-linkedin&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;http://github.com/rayhannr&quot; target=&quot;_blank&quot;&amp;gt;&amp;lt;i class=&quot;fa fa-github&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://www.facebook.com/naufalramadhannn&quot; target=&quot;_blank&quot;&amp;gt;&amp;lt;i class=&quot;fa fa-facebook&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://plus.google.com/111388155287137108474&quot; target=&quot;_blank&quot;&amp;gt;&amp;lt;i class=&quot;fa fa-google-plus&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;http://instagram.com/rayhantu&quot; target=&quot;_blank&quot;&amp;gt;&amp;lt;i class=&quot;fa fa-instagram&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
          &amp;lt;/ul&amp;gt;
        &amp;lt;/div&amp;gt;
    &amp;lt;!-- about me --&amp;gt;
    &amp;lt;div id=&quot;about&quot;&amp;gt;
        &amp;lt;div class=&quot;row self-intro&quot; id=&quot;self-introduction&quot;&amp;gt;
            &amp;lt;div class=&quot;col-twelve&quot;&amp;gt;
                &amp;lt;h4 class=&quot;about-title&quot;&amp;gt;ABOUT&amp;lt;/h4&amp;gt;
                &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Brief Introduction&amp;lt;/h1&amp;gt;
                &amp;lt;div class=&quot;intro-desc&quot;&amp;gt;
                    &amp;lt;img src=&quot;images/rupamu.jpg&quot; alt=&quot;Profile Picture&quot;&amp;gt;
                    &amp;lt;p class=&quot;desc&quot;&amp;gt;Hi! I&#039;m Rayhan. Young Computer Science student who has a huge interest in Front-End Development. Besides, I&#039;ve been working as Graphic Designer for almost two years. All of my designs are made with Adobe Photoshop. I&#039;ve never made any illustration design due to lack of drawing skill.&amp;lt;/p&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;row about-content&quot;&amp;gt;
            &amp;lt;div class=&quot;col-six profile&quot; id=&quot;profile&quot;&amp;gt;
                &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Profile&amp;lt;/h1&amp;gt;
                &amp;lt;ul class=&quot;profile-list&quot;&amp;gt;
                    &amp;lt;li&amp;gt;
                      &amp;lt;strong&amp;gt;Fullname:&amp;lt;/strong&amp;gt;
                      &amp;lt;span&amp;gt;Rayhan Naufal Ramadhan&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                      &amp;lt;strong&amp;gt;Date of Birth:&amp;lt;/strong&amp;gt;
                      &amp;lt;span&amp;gt;Ramadhan 11&amp;lt;sup&amp;gt;th&amp;lt;/sup&amp;gt; 1421 H&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                      &amp;lt;strong&amp;gt;Age:&amp;lt;/strong&amp;gt;
                      &amp;lt;span&amp;gt;18&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;strong&amp;gt;Hometown:&amp;lt;/strong&amp;gt;
                        &amp;lt;span&amp;gt;Pemalang, Central Java&amp;lt;/span&amp;gt;
                      &amp;lt;/li&amp;gt;
                      &amp;lt;li&amp;gt;
                        &amp;lt;strong&amp;gt;Current City:&amp;lt;/strong&amp;gt;
                        &amp;lt;span&amp;gt;Sleman, Yogyakarta&amp;lt;/span&amp;gt;
                      &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                      &amp;lt;strong&amp;gt;Status:&amp;lt;/strong&amp;gt;
                      &amp;lt;span&amp;gt;Single&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;strong&amp;gt;Email:&amp;lt;/strong&amp;gt;
                        &amp;lt;span&amp;gt;&amp;lt;a href=&quot;mailto:rayhannr07@gmail.com&quot;&amp;gt;rayhannr07@gmail.com&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;
                      &amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class=&quot;interest&quot; id=&quot;interest&quot;&amp;gt;
                &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Interest&amp;lt;/h1&amp;gt;
                &amp;lt;ul class=&quot;symbol&quot;&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;i class=&quot;fas fa-venus&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;i class=&quot;fa fa-book&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;i class=&quot;fas fa-pen-fancy&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;i class=&quot;fas fa-code&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;i class=&quot;fas fa-quran&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
                &amp;lt;ul class=&quot;interest-progress&quot;&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent100&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Female&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent82&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Reading&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent86&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Designing&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent65&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Programming&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;              
                        &amp;lt;div class=&quot;progress percent87&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Islamic Learning&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;!-- skill set --&amp;gt;
        &amp;lt;div class=&quot;row skill&quot; id=&quot;skills&quot;&amp;gt;
            &amp;lt;h4 class=&quot;about-title&quot;&amp;gt;Skills&amp;lt;/h4&amp;gt;
            &amp;lt;div class=&quot;skill-computer&quot;&amp;gt;
                &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Computer Languages&amp;lt;/h1&amp;gt;
                &amp;lt;ul class=&quot;symbol1&quot;&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;i class=&quot;fa fa-html5&quot; aria-hidden=&quot;true&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;i class=&quot;fa fa-css3&quot; aria-hidden=&quot;true&quot;&amp;gt;&amp;lt;/i&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/js.png&quot; height=&quot;30px&quot; width=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/jquery.png&quot; height=&quot;30px&quot; width=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/java.png&quot; width=&quot;30px&quot; height=&quot;40px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/sql.png&quot; width=&quot;30px&quot; height=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
                &amp;lt;ul class=&quot;computer-progress&quot;&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent81&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;HTML5&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent85&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;CSS3&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent55&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;JavaScript&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent41&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;jQuery&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;              
                        &amp;lt;div class=&quot;progress percent72&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Java&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;              
                        &amp;lt;div class=&quot;progress percent86&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;SQL&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class=&quot;skill-software&quot;&amp;gt;
                &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Softwares&amp;lt;/h1&amp;gt;
                &amp;lt;ul class=&quot;symbol2&quot;&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/ps.png&quot; width=&quot;30px&quot; height=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/lr.png&quot; width=&quot;30px&quot; height=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/xd.png&quot; width=&quot;30px&quot; height=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/vscode.png&quot; width=&quot;30px&quot; height=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;&amp;lt;img src=&quot;images/netbeans.png&quot; width=&quot;30px&quot; height=&quot;30px&quot;&amp;gt;&amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
                &amp;lt;ul class=&quot;software-progress&quot;&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent90&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Photoshop&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent95&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Lightroom&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent60&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Adobe XD&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent83&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;VS Code&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;              
                        &amp;lt;div class=&quot;progress percent70&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;NetBeans&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class=&quot;skill-human&quot;&amp;gt;
                &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Human Languages&amp;lt;/h1&amp;gt;
                &amp;lt;ul class=&quot;human-progress&quot;&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent91&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;English&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent96&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Indonesian&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent97&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Javanese&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                    &amp;lt;li&amp;gt;
                        &amp;lt;div class=&quot;progress percent45&quot;&amp;gt;&amp;lt;/div&amp;gt;
                        &amp;lt;strong&amp;gt;Arabic&amp;lt;/strong&amp;gt;&amp;lt;span&amp;gt;&amp;lt;/span&amp;gt;
                    &amp;lt;/li&amp;gt;
                &amp;lt;/ul&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;timeline&quot; id=&quot;timeline&quot;&amp;gt;
            &amp;lt;h4 class=&quot;about-title&quot;&amp;gt;TIMELINE&amp;lt;/h4&amp;gt;
            &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Education&amp;lt;/h1&amp;gt;
            &amp;lt;ul&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h3&amp;gt;SD N 06 Purwoharjo&amp;lt;/h3&amp;gt;
                        &amp;lt;p&amp;gt;This is where my education started. It&#039;s located in my hometown, not really far from my house.
                            6 years of study there was an amazing memory. I made a lot of good friends. I wasn&#039;t the best
                            among them, but all praises to Allah that I got good score when I graduated.
                        &amp;lt;/p&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;time&quot;&amp;gt;
                        &amp;lt;h4&amp;gt;2006 - 2012&amp;lt;/h4&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h3&amp;gt;SMP N 2 Yogyakarta&amp;lt;/h3&amp;gt;
                        &amp;lt;p&amp;gt;After I graduated from elementary school, my family moved to Yogyakarta. I entered
                            this school because it was the best school within 1 kilometer from my house and my score
                            was enough to enroll. All praises to Allah that it only took 2 years for me to graduate
                            because I joined accelereation program provided there.
                        &amp;lt;/p&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;time&quot;&amp;gt;
                        &amp;lt;h4&amp;gt;2012 - 2014&amp;lt;/h4&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h3&amp;gt;SMA N 1 Yogyakarta&amp;lt;/h3&amp;gt;
                        &amp;lt;p&amp;gt;This is it. My high school. It was the best school in my city and it&#039;s only 2 kilometers from my house.
                            My first year wasn&#039;t really good after i sucked at math and physics, but all praises to Allah that
                            I made good progress in the next semesters. My highscool time was great. I met a lot of great friends
                            and made some rather-absurd good memories.
                        &amp;lt;/p&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;time&quot;&amp;gt;
                        &amp;lt;h4&amp;gt;2014 - 2017&amp;lt;/h4&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h3&amp;gt;Universitas Gadjah Mada&amp;lt;/h3&amp;gt;
                        &amp;lt;p&amp;gt;Here I am studying right now. I&#039;m accepted to study Computer Science for my bachelor degree.
                            I start learning a lot of things and acquiring some skills after going to college. Because of that,
                            I feel that my decision to study here is right.
                        &amp;lt;/p&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;time&quot;&amp;gt;
                        &amp;lt;h4&amp;gt;2017 - Now&amp;lt;/h4&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;div style=&quot;clear: both;&quot;&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;/ul&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;timeline2&quot;&amp;gt;
            &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Experience&amp;lt;/h1&amp;gt;
            &amp;lt;ul&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h3&amp;gt;Graphic Designer&amp;lt;/h3&amp;gt;
                        &amp;lt;h5&amp;gt;Majeedr&amp;lt;/h5&amp;gt;
                        &amp;lt;p&amp;gt;Majeedr stands for Majeelis Dakwah Remaja. It&#039;s an organization engaging in the
                            field of Da&#039;wah for teenagers like I have mentioned above. I joined them after
                            attending one of their lecture. At first, I didn&#039;t even know what to do. But, everything
                            started to change after I learned Photoshop to make posters to be posted on their social media.
                            I&#039;m so lucky to join them because I feel like my life has changed a lot after
                            I know these guys.
                        &amp;lt;/p&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;time&quot;&amp;gt;
                        &amp;lt;h4&amp;gt;June 2017 - Now&amp;lt;/h4&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h3&amp;gt;Front-End Developer&amp;lt;/h3&amp;gt;
                        &amp;lt;h5&amp;gt;Omah TI UGM&amp;lt;/h5&amp;gt;
                        &amp;lt;p&amp;gt;My first year in college was bad for me because my routines are just going t
                             college or mosque near there, listening to lectures, designing posters for 
                             Majeedr, and having no special skill to join Omah TI (Organisasi Mahasiswa Ahli
                             Teknologi Informasi) that time. In the first days of the next year, I decided 
                             to apply for Web Design divison at Omah TI after learning HTML, CSS, and 
                             JavaScript during the holiday before and thinking that I have a better speaking skill. All praises to Allah that now I&#039;m 
                             accepted as Web Designer or you can call it Front-End Developer at Omah TI.
                        &amp;lt;/p&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;time&quot;&amp;gt;
                        &amp;lt;h4&amp;gt;Oct 2018 - Now&amp;lt;/h4&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;div style=&quot;clear: both;&quot;&amp;gt;&amp;lt;/div&amp;gt;
            &amp;lt;/ul&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div class=&quot;project&quot; id=&quot;project&quot;&amp;gt;
            &amp;lt;h4 class=&quot;about-title&quot;&amp;gt;PORTFOLIO&amp;lt;/h4&amp;gt;
            &amp;lt;h1 class=&quot;about-explain&quot;&amp;gt;Some of my works&amp;lt;/h1&amp;gt;
            &amp;lt;div class=&quot;container&quot;&amp;gt;
                &amp;lt;div class=&quot;card&quot;&amp;gt;
                    &amp;lt;div class=&quot;img-box&quot;&amp;gt;
                        &amp;lt;img src=&quot;images/project1.png&quot; alt=&quot;&quot;&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h2&amp;gt;Form Validation&amp;lt;/h2&amp;gt;
                        &amp;lt;p&amp;gt;A non responsive client-side validation page made for Web Programming assignment&amp;lt;/p&amp;gt;
                        &amp;lt;ul&amp;gt;
                            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://rayhannr.github.io/formvalidation/ampas.html&quot;&amp;gt;Take a Look&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
                            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://github.com/rayhannr/formvalidation&quot;&amp;gt;View on Github&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
                        &amp;lt;/ul&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/div&amp;gt;
                &amp;lt;div class=&quot;card&quot;&amp;gt;
                    &amp;lt;div class=&quot;img-box&quot;&amp;gt;
                        &amp;lt;img src=&quot;images/project2.png&quot; alt=&quot;&quot;&amp;gt;
                    &amp;lt;/div&amp;gt;
                    &amp;lt;div class=&quot;content&quot;&amp;gt;
                        &amp;lt;h2&amp;gt;converThings&amp;lt;/h2&amp;gt;
                        &amp;lt;p&amp;gt;A responsive website having some features to convert users&#039;
                             input into the desired result&amp;lt;/p&amp;gt;
                        &amp;lt;ul&amp;gt;
                            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://rayhannr.github.io/converthings/index.html&quot;&amp;gt;Take a Look&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
                            &amp;lt;li&amp;gt;&amp;lt;a href=&quot;https://github.com/rayhannr/converthings&quot;&amp;gt;View on Github&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
                        &amp;lt;/ul&amp;gt;
                    &amp;lt;/div&amp;gt;
                &amp;lt;/div&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;h2 class=&quot;about-explain&quot;&amp;gt;Will be a lot more soon...&amp;lt;/h2&amp;gt;
        &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
    &amp;lt;div id=&quot;work&quot;&amp;gt;
        &amp;lt;div class=&quot;interested&quot; id=&quot;recruit&quot;&amp;gt;
            &amp;lt;div class=&quot;work-head&quot;&amp;gt;
                &amp;lt;h1&amp;gt;Interested to work with me?&amp;lt;/h1&amp;gt;
            &amp;lt;/div&amp;gt;
            &amp;lt;div class=&quot;buttons&quot;&amp;gt;
                &amp;lt;a href=&quot;mailto:rayhannr07@gmail.com&quot;&amp;gt;HIRE ME&amp;lt;/a&amp;gt;
                &amp;lt;a href=&quot;https://bit.ly/2LMB8t3&quot; target=&quot;_blank&quot;&amp;gt;DOWNLOAD MY CV&amp;lt;/a&amp;gt;
            &amp;lt;/div&amp;gt;
        &amp;lt;/div&amp;gt;
        &amp;lt;div id=&quot;contact&quot;&amp;gt;
            &amp;lt;h1 class=&quot;about-title&quot;&amp;gt;CONTACT&amp;lt;/h1&amp;gt;
            &amp;lt;ul class=&quot;contact-list&quot;&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;i class=&quot;fas fa-map-marker-alt&quot;&amp;gt;&amp;lt;/i&amp;gt;
                    &amp;lt;h2&amp;gt;ADDRESS&amp;lt;/h2&amp;gt;
                    &amp;lt;p&amp;gt;Krapyak RT 06 RW 18 Sidoarum&amp;lt;br&amp;gt;Godean, Sleman, DIY&amp;lt;br&amp;gt;55264 Indonesia&amp;lt;/p&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;i class=&quot;fa fa-building&quot; aria-hidden=&quot;true&quot;&amp;gt;&amp;lt;/i&amp;gt;
                    &amp;lt;h2&amp;gt;WORKPLACE&amp;lt;/h2&amp;gt;
                    &amp;lt;p&amp;gt;Faculty of Mathematics and Natural Science UGM&amp;lt;br&amp;gt;Sinduadi, Sleman, DIY&amp;lt;br&amp;gt;55281 Indonesia&amp;lt;/p&amp;gt;
                &amp;lt;/li&amp;gt;
                &amp;lt;li&amp;gt;
                    &amp;lt;i class=&quot;fa fa-mobile-phone&quot; aria-hidden=&quot;true&quot;&amp;gt;&amp;lt;/i&amp;gt;
                    &amp;lt;h2&amp;gt;CHATS AND CALLS&amp;lt;/h2&amp;gt;
                    &amp;lt;p&amp;gt;WhatsApp: +62 878 3935 5841&amp;lt;br&amp;gt;Line: rayhanaahh&amp;lt;/p&amp;gt;
                &amp;lt;/li&amp;gt;
            &amp;lt;/ul&amp;gt;
            &amp;lt;footer&amp;gt;&amp;copy; Copyright Rayhan Naufal Ramadhan 2019&amp;lt;/footer&amp;gt;
        &amp;lt;/div&amp;gt;
    &amp;lt;/div&amp;gt;
&amp;lt;/main&amp;gt;

&amp;lt;!-- loader animation --&amp;gt;
&amp;lt;script&amp;gt;
    Pace.on(&quot;done&quot;, function(){
        console.log(&quot;finished&quot;);
        $(&#039;#intro&#039;).fadeIn(1500);
        $(&#039;#about&#039;).fadeIn(1500);
        $(&#039;#contact&#039;).fadeIn(1500);
        $(&#039;#work&#039;).fadeIn(1500);
    });

    $(document).ready(function(){
        $(&quot;.menu-icon&quot;).on(&quot;click&quot;, function(){
            $(&#039;.menu-toggle&#039;).toggleClass(&#039;is-clicked&#039;);
            $(&quot;nav ul&quot;).toggleClass(&quot;showing&quot;);
        });
        $(&#039;nav ul&#039;).find(&#039;li a&#039;).on(&quot;click&quot;, function(){
            $(&#039;.menu-toggle&#039;).toggleClass(&#039;is-clicked&#039;);
            $(&#039;nav ul&#039;).toggleClass(&quot;showing&quot;);
        });
    });
    $(window).on(&quot;scroll&quot;, function(){
        if($(window).scrollTop()){
            $(&#039;.menu&#039;).addClass(&#039;black&#039;);
        }
        else{
            $(&#039;.menu&#039;).removeClass(&#039;black&#039;);
        }
    });

   $(&#039;document&#039;).ready(function(){
        var typee = new Typed(&#039;.intro-hello&#039;,{
           strings: [&quot;Hello, Welcome to my website!&quot;],
           backSpeed: 40,
           typeSpeed: 40,
           startDelay: 1500
       });
        var typed = new Typed(&#039;.intro-name&#039;,{
           strings: [&quot;I&#039;m Rayhan Naufal Ramadhan&quot;],
           backSpeed: 40,
           typeSpeed: 50,
           startDelay: 3100
       });
   });
&amp;lt;/script&amp;gt;

&lt;/body&gt; &lt;/html&gt; </pre>

avatar stefanuspn
@stefanuspn

250 Kontribusi 69 Poin

Dipost 5 tahun yang lalu

kalau mau pake jquery diketik paling pertama dulu baru kemudian plugin jquery dan skrip javascript yg membutuhkan jquery

avatar stefanuspn
@stefanuspn

250 Kontribusi 69 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban