Scribd Logo
Upload

Welcome to Scribd!

  • 10 views

    Biodata Diri (: : ) (: ) (: : : : (,, ,) : )

    Uploaded by

    Ddw
    The document contains biographical information about Ahmad Rizal presented through a profile page with sections for his photo, name, school details, birthdate, address, and email. The profile uses CSS styling to organize the content into a navigation bar, photo and description section, and an information section listing key details in a grid-like format.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Biodata Diri (: : ) (: ) (: : : : (,, ,) : )

    Uploaded by

    Ddw
    10 views6 pages
    The document contains biographical information about Ahmad Rizal presented through a profile page with sections for his photo, name, school details, birthdate, address, and email. The profile uses CSS styling to organize the content into a navigation bar, photo and description section, and an information section listing key details in a grid-like format.

    Original Description:

    Y

    Original Title

    CSV

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains biographical information about Ahmad Rizal presented through a profile page with sections for his photo, name, school details, birthdate, address, and email. The profile uses CSS styling to organize the content into a navigation bar, photo and description section, and an information section listing key details in a grid-like format.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    10 views6 pages

    Biodata Diri (: : ) (: ) (: : : : (,, ,) : )

    Uploaded by

    Ddw
    The document contains biographical information about Ahmad Rizal presented through a profile page with sections for his photo, name, school details, birthdate, address, and email. The profile uses CSS styling to organize the content into a navigation bar, photo and description section, and an information section listing key details in a grid-like format.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 6

    <!

    DOCTYPE html>
    <html>
        <head>
            <title>Biodata Diri</title>
            <style type="text/css">
            body{
        margin: 0;
        padding: 0;
    }
    body{
    background color: #f8f8f8;
    }
    /*navbar*/
    nav{
        position: relative;
        width: 100%;
        height: 45px;
        background-color: rgba(107, 168, 197, 0.719);
        box-shadow: -1px -7px 20px 0px #888;
    }

    /*navbar*/
    nav ul{
        position: relative;
        top: 20px;
        margin:0;
        float: right;
        right: 10%;
    }
    nav ul li{
        float: left;
        display: block;
        margin: 0px 15px 0px 15px;
    }
    nav ul li a{
        text-decoration: none;
        color: #888;
        font-family:'Helvetica', sans-serif
    }
      nav ul li a:hover{
          color:#55a8fd; }

    .menu-mobile{
          position: relative;
          float right;
          display: none;
      }
      .menu-mobile a{
          color:#888
          font-size: 14px;
          text-transform: uppercase;
          text-decoration: none;
          padding: 5px 10px 5px 10px;
          border: 1px solild #888
      }
      /*profil section*/
      section#box-profil{
          position: relative;
          width:800%;
          min-height: 250px;
          margin-left: 10%;
          margin-right: 10%;
          margin-top: 60px;
          border-radius:6px;
          background-color: #fff;
          box-shadow: 3px 3px 7px 0px rgba(136, 136, 136, 0.2)

      }
      #box-profil .img-profil{
          position: relative;
          display: inline-block;
          width: 200px;
          height: 200px;
          border-radius: 300px;
          float: left;
          top: 25;
          margin-left: 40px;
      }
      .img-profil .photo{
          height: 100%;
          background-size: 100%;
          background-repeat: no-repeat;
          background-position: 0px -20px;
          border-radius: 300px;
      }
      .description{
          position: relative;
          width: 400px;
          display: inline-block;
          float: left;
          top: 50px;
          margin-left: 30px;
          font-family: 'Helvetica', sans-serif;
          border-right: 1px solid #efefef;
      }
      .description h1{
          font-size: 25px;
          margin-bottom: 14px;
      }
      .description p{
          color: #888;
      }
      .description .button{
          margin-top: 35px;
      }
      .information{
          position: relative;
          display: inline-block;
          float: left;
          font-family: 'Helvetica', sans-serif;
          top: 40px;
          margin-left: 30px;
      }
      .information .data{
          display: block;
          width: 100%;
          height: 30px;
      }
      .information p.field{
          font-weight: 600;
          width: 150px;
          color: #333;
      }
      .information .data p{
          float: left;
          height: 5px;
      }
       </style>
        </head>
        <body>
            <nav>
                <div class="menu-mobile">
                    <a href="#">Menu</a>
                </div>
                <ul>
                    <li><a href="saya.html">PROFILE</a></li>
                    <li><a href="pendidikan.html">PENDIDIKAN</a></li>
                    <li><a href="jadwal.html">JADWAL</a></li>
                    <li><a href="#">KEGIATAN</a></li>
                </ul>
            </nav>

            <section id="box-profil">
                <div class="img-profil"> 
                    <div class="photo" style="background-image:
                     url(assets/img/profile.jpg);">
                     </div>
                </div>
                <div class="description">
                    <h1>Ahmad Rizal</h1>
                    <a href="https://www.instagram.com/ahmrzll_">Instagram</a>
                </div>
                <div class="information">
                    <div class="data">
                          <p class="field">Sekolah:</p>
                         <p class="text-gray">SMKN 2 SAMPIT</p>
                    </div>
                    <div class="data">
                        <p class="field">Ttl:</p>
                        <p class="text-gray">Sampit, 22 Oktober 2004</p>
                    </div>
                    <div class="data">
                        <p class="field">Alamat:</p>
                        <p class="text-gray">Sampit, KALTENG</p>
                    </div>
                    <div class="data">
                        <p class="field">Email:</p>
                        <p class="text-gray">rahmadrizal782@gmail.com</p>
                    </div>
                </div> 
            </section>
        </body>
    </html>
    \

    You might also like