Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    Ayu Purba
    12 views6 pages

    Original Title

    html

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    12 views6 pages

    HTML

    Uploaded by

    Ayu Purba

    Copyright:

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

    <html>

    <head>
      <title>Dicoding Indonesia Website</title>
    </head>
    <body>
      <main>
        <h1>Dicoding Indonesia</h1>
        <h2>Gudangnya developer handal</h2>
        <p>Mencetak banyak lulusan terbaik khususnya para developer.</p>
        <img src="logo_dicoding.png" alt="Image dicoding">
        <p>Paragraph two with a <a href="https://dicoding.com">klik disini</a></p>
      </main>
    </body>
    </html>

    1 !DOCTYPE html>
    2 <html lang="en">
    3 <head>
    4     <meta charset="UTF-8">
    5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6     <link rel="stylesheet" href="style.css">
    7     <title>Web | Portofolio</title>
    8 </head>
    9 <body>
    10     <div class="container">
    11         <div class="sidebar">
    12             <nav>
    13                 <ul>
    14                     <li><a href="">About</a></li>
    15                     <li><a href="">Portofolio</a></li>
    16                     <li><a href="">Blog</a></li>
    17                     <li><a href="">Contact</a></li>  
    18                 </ul>
    19             </nav>
    20         </div>
    21         <main class="content">
    22               <section class="hero">
    23                   <img src="online.png" alt="">
    24               <div class="hero-content">
    25                   <h1>Profesi</h1><br></h2>Junior Content Writer at
    26 Dicoding</h2><br><br>  
    27 <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos, aperiam dolore
    28 assumenda velit repellendus recusandae magni consectetur mollitia facere incidunt
    29 inventore perspiciatis  debitis doloribus ullam minima culpa voluptatem. Repellendus,
    30 option.</p>
    <a href="" class="action-btn">Profile Saya</a>
                  </div>
    31                 </section>
    32         </div>
    33         <div class="footer">
    34             <footer>
    35             <ul>
    36                 <li><img src="instagram.png" alt=""><p>Instagram</p></a></li>
    37                 <li><img src="facebook.png" alt=""><p>Facebook</p></a></li>
    38                 <li><img src="twitter.png" alt=""><p>Twitter</p></a></li>
    39                 <li><img src="telegram.png" alt=""><p>Telegram</p></a></li>
    40             </ul>
    41             </footer>
    42         </div>
    43     </div>    
    </body>
    </html>

    1 *{
    2       margin: 0;
    3       padding: 0;
    4  
    5   }
    6  
    7   body {
    8       background-color: #eff1f2;
    9       font-family: sans-serif;
    10   }
    11  
    12 .content {
    13     grid-area: content;
    14 }
    15 .sidebar{
    16     grid-area: sidebar;
    17     background: linear-gradient(to right, rgba(200,107,142,1), rgba(218,105,250,1),
    18      rgba(110,125,253,1)) ;
    19     justify-content: center;
    20 }
    21 .footer {
    22     grid-area: footer;
    23     background: white;
    24 }
    25 .container {
    26     font-size: 1.5em;
    27     width: 100%;
    28     height: 100;
    29     height: 100vh;
    30     display: grid;
    31     grid-template-areas: "sidebar" "content" "footer";
    32     grid-template-columns: 1fr;
    33     grid-template-rows: 130px 800px 250px;
    34  
    35 }
    36  
    37 .content, .sidebar, .footer{
    38     padding: 1em;
    39 }
    40  
    41 nav ul {
    42     margin: 0;
    43     padding: 0;
    44     display: flex;
    45     justify-content: space-between;
    46     text-align: center;
    47 }
    48  
    49 nav li{
    50     list-style: none;
    51     padding: 1em 0;
    52 }
    53  
    54 nav li a {
    55     color: white;
    56     font-weight: 700;
    57     opacity: 0.6;
    58     text-decoration: none;
    59     transition: 0.3s;
    60 }
    61  
    62 nav li a:hover {
    63     opacity: 1;
    64 }
    65 .hero {
    66     max-width: 90 px;
    67     margin: 0 auto;
    68     text-align: center;
    69 }
    70  
    71 .hero img {
    72     width: 200px;
    73 }
    74  
    75 .hero h1 {
    76     font-size: 2em;
    77     font-weight: 300;
    78     color: #373046;
    79 }
    80  
    81 .hero p {
    82     font-weight: 300;
    83     line-height: 1.3em;
    84     color: #98aBad;
    85 }
    86  
    87 .action-btn {
    88     display: inline-block;
    89     text-decoration: none;
    90     color: white;
    91     font-weight: 700;
    92     background: #567bfb;
    93     padding: 0.5em 2em;
    94     border-radius: 60px;
    95     margin: 1em 0;
    96     transition: 0.3s;
    97 }
    98  
    99 footer ul {
    100 max-width: 640px;
    101 margin: 2em auto;
    102 padding: 0;
    103 text-align: center;
    104 display: flex;
    105 flex-direction: row;
    106  
    107 }
    108  
    109 footer ul li {
    110     list-style: none;
    111     align-self: flex-end;
    112 }
    113  
    114 footer ul li a{
    115     text-decoration: none;
    116     color: #c1c6ce;
    117 }
    118  
    119 footer ul li img {
    120     width: 30%;
    121 }
    122  
    123 footer p {
    124     font-size: 0.8em;
    125 }
    126  
    127 @media (min-width: 1040px){
    128     .container {
    129         grid-template-areas:"sidebar content" "sidebar footer" ;
    130         grid-template-rows: 1fr auto ;
    131         grid-template-columns: 300px 1f;
    132     }
    133  
    134     nav ul{
    135         display: flex;
    136         justify-content: space-between;
    137         flex-direction: column;
    138     }
    139     .sidebar{
    140         background: linear-gradient( rgba(200,107,142,1), rgba(218,105,250,1),
    141         rgba(110,125,253,1)) ;
    142         padding-top: 10em;
    143     }
    144     .hero{
    145         text-align: left;
    146         margin: 7em 0;
    147     }
    148     .hero img {
    149         width: 200px;
    150         float: right;
    151     }
    152     .hero h1{
    153         font-size: 3em;
    154     }
    155     .hero p{
    156         width: 60%;
    157     }
    158     footer ul {
    159         max-width: 900px;
    160         margin: 0 auto;
    161         padding: 1em 0;
    162     }
    163  
    164     footer ul li a img {
    165         width: 20%;
    166     }
    167 }

    You might also like