Nama : Erza Janitradevi Nadine
NRP : 05111940000153
Kelas : PWEB B
Berikut adalah jawaban untuk Evaluasi Tengah Semester :
No 4
Link web : ETS PWEB
Link video tutorial : Demo ETS PWEB
Dokumentasi tampilan website:
1. Home
2. Contact
3. About Me
Source code :
Link source code : Source code
1. index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <!-- This source code is exported from pxCode, you can get more document from https://www.pxcode.io --> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta | |
| name="viewport" | |
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | |
| /> | |
| <link rel="stylesheet" href="css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="css/main.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet" | |
| </head> | |
| <!-- ======= navbar ======= --> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <a class="navbar-brand" href="#"></a> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"> | |
| </span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav lh-base"> | |
| <li class="nav-item active"> | |
| <a class="nav-link" href="index.html">Home <span class="sr-only"></span></a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="cv-erza.pdf">Download CV</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="contact.html">Contact</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="about.html">About Me</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <!-- ======= navbar ======= --> | |
| <!-- ======= home ======= --> | |
| <section class="hero d-flex align-items-center" style=" background: #FEFEF3 url(img//bg.jpg); background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover;" > | |
| <div class="container"> | |
| <div class="row align-items-center"> | |
| <div class="col"> | |
| <h1>Hi, I’m Erza</h1> | |
| <P> Informatics Engineering Student at Institut | |
| Teknologi Sepuluh Nopember | |
| </P> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======= End section1 ======= --> | |
| <!-- ======= experiences ======= --> | |
| <section class="abouts"> | |
| <!-- <div id = "abouts"></div> --> | |
| <div class="container"> | |
| <div class="row align-lg-start"> | |
| <div class="row align-items-lg-start"> | |
| <div class="col"> | |
| <table style="width: 500px;" > | |
| <tr> | |
| <th><b>Skill</b></th> | |
| </tr> | |
| <tr> | |
| <th>HTML<br> | |
| CSS<br> | |
| JavaScript<br> | |
| C, C#, C++<br> | |
| Python<br> | |
| Java | |
| </th> | |
| </tr> | |
| </table> | |
| </div> | |
| <div class="col"> | |
| <table style="width: 500px;" > | |
| <tr> | |
| <th><b>Experiences</b></th> | |
| </tr> | |
| <tr> | |
| <th>Product Development Intern at Kalbe E-Health<br> | |
| Documentation Team at PPDB SMA Sumatera Selatan 2021<br> | |
| Digital System Teaching Assistant at Informatics Engineering<br> | |
| </th> | |
| </tr> | |
| </div> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======= End section1 ======= --> | |
| <script src="js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
2. about.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>About Me</title> | |
| <link rel="stylesheet" href="css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="css/about.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet" | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <a class="navbar-brand" href="#"></a> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"> | |
| </span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav lh-base"> | |
| <li class="nav-item active"> | |
| <a class="nav-link" href="index.html">Home <span class="sr-only"></span></a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="cv-erza.pdf">Download CV</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="contact.html">Contact</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="about.html">About Me</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <section class="experiences"> | |
| <div id = "abouts"></div> | |
| <div class="container"> | |
| <div class="row align-lg-start"> | |
| <div class="col"> | |
| <h1>About Me</h1> | |
| <!-- <img src="img/if.jpg" style="float: left; margin-right: 20px;"/> --> | |
| </div> | |
| <div class="col"> | |
| <h4 class="test1-section2__subtitle layout"> | |
| <strong> About</strong> | |
| </h4> | |
| <P> | |
| Born in Surabaya and spent my childhood in Denpasar, I was genuinely influenced by | |
| Javanese and Balinese culture. Over 9 years in Denpasar, I and my family came back | |
| to Surabaya and stay in Surabaya until now. I highly appreciate arts, literature, and technology. | |
| I have interested in many things, such as music, | |
| dance, books, artificial intelligence, psychology, and UI & UX Design.<br><br> | |
| Programming languages that i currently studying are HTML, CSS, and JavasScript because those three | |
| are important for web development. I am willing to get to know more about web development because it is interesting. | |
| <P> | |
| <div class="row"> | |
| <h4 class="test1-section2__subtitle layout"> | |
| <br> <strong>Social Media</strong> | |
| </h4> | |
| <P> | |
| <a href="https://www.linkedin.com/in/erzajanitradevi">LinkedIn</a> <br> | |
| <a href="https://github.com/erzajanitra">Github</a> | |
| <P> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ======= End section1 ======= --> | |
| <script src="js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
3.contact.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Contact Us</title> | |
| <link rel="stylesheet" href="css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="css/contact.css" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet" | |
| <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> | |
| <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-expand-lg navbar-light bg-light"> | |
| <a class="navbar-brand" href="#"></a> | |
| <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> | |
| <span class="navbar-toggler-icon"> | |
| </span> | |
| </button> | |
| <div class="collapse navbar-collapse" id="navbarNav"> | |
| <ul class="navbar-nav lh-base"> | |
| <li class="nav-item active"> | |
| <a class="nav-link" href="index.html">Home <span class="sr-only"></span></a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="cv-erza.pdf">Download CV</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="contact.html">Contact</a> | |
| </li> | |
| <li class="nav-item"> | |
| <a class="nav-link" href="about.html">About Me</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </nav> | |
| <div class="container contact-form"> | |
| <form method="post"> | |
| <h2>Contact Me</h2> | |
| <h3>Leave your message here !</h3> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <input type="text" name="txtName" class="form-control" placeholder="Your Name *" value="" /> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="txtEmail" class="form-control" placeholder="Your Email *" value="" /> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" name="txtPhone" class="form-control" placeholder="Your Phone Number *" value="" /> | |
| </div> | |
| <div class="form-group"> | |
| <input type="submit" name="btnSubmit" class="btnContact" value="Send Message" /> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="form-group"> | |
| <textarea name="txtMsg" class="form-control" placeholder="Your Message *" style="width: 100%; height: 150px;"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <script src="js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |
Comments
Post a Comment