Cara Membuat Web Company Profil dengan HTML CSS

Cara Membuat Web Company Profil dengan HTML CSS

Cara Membuat Web Company Profil dengan HTML CSS – Disini admin akan berbagi info mengenai membuat web statis dengan menggunakan bahasa HTML CSS bertema company profile (profil perusahaan), untuk script ini saya dapatkan di https://codepen.io/dwiki13 (terima kasih sudah mempublikasikan karyanya diweb tersebut). Semoga source codenya bermanfaat untuk teman-teman pelajar yang sedang mencari referensi hal ini.

Untuk web sederhana yang satu ini tampilannya cukup menarik, dengan background parallax yang keren dan menarik untuk dicoba.

Yuk kita simak !

Cara Membuat Web Perusahaan dengan HTML CSS

Adapun langkah tutorial membuat web company profil keren dan sederhana versi koran-indonesia.com, sebagai berikut.

Langkah 1: Buat File company-profile.html

Tahapan pertama yang anda lakukan adalah membuat sebuah file “company-profile.html”. Kemudian silahkan copy dan paste script dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>CAMPANY PROFILE | KORAN-INDONESIA.COM</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#page-top">Company Name</a>
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto my-2 my-lg-0">
        <li class="nav-item">
          <a class="nav-link" href="#about">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#partners">Partners</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="parallax1" id="page-top">
  <div class="heading">
    Company Profile
  </div>
</div>

<section class="section1" id="about">
  <h1>About Us</h1>
  <br>
  <div class="col-md-12 row">
    <div class="col-md-6">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatem illum molestiae quisquam nulla aspernatur delectus voluptatum quo, doloribus et porro consectetur possimus architecto nesciunt, magnam ipsam! Molestias ipsum explicabo quod,
      culpa doloremque eos delectus voluptate cum expedita. Nihil at qui animi illum impedit deleniti fuga, aspernatur error accusantium fugit ad, sed deserunt vitae? Amet nam quaerat, veritatis enim et itaque velit architecto earum, saepe voluptate debitis
      iure, ab aliquam doloribus. Cum exercitationem eveniet laborum voluptates ipsa eius, soluta commodi. Eos eveniet corporis repellendus, quis ad debitis perferendis veniam sunt molestiae omnis, officia suscipit nesciunt ducimus! Temporibus quis nobis
      asperiores.
    </div>
    <div class="col-md-6">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, voluptatem illum molestiae quisquam nulla aspernatur delectus voluptatum quo, doloribus et porro consectetur possimus architecto nesciunt, magnam ipsam! Molestias ipsum explicabo quod,
      culpa doloremque eos delectus voluptate cum expedita. Nihil at qui animi illum impedit deleniti fuga, aspernatur error accusantium fugit ad, sed deserunt vitae? Amet nam quaerat, veritatis enim et itaque velit architecto earum, saepe voluptate debitis
      iure, ab aliquam doloribus. Cum exercitationem eveniet laborum voluptates ipsa eius, soluta commodi. Eos eveniet corporis repellendus, quis ad debitis perferendis veniam sunt molestiae omnis, officia suscipit nesciunt ducimus! Temporibus quis nobis
      asperiores.
    </div>
  </div>
</section>

<div class="parallax2" id="services">
  <div class="heading-sm">
    <span class="border">
                Description
            </span>
  </div>
</div>

<section class="dark">
  <h2>Description</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae repellat debitis cupiditate. Cupiditate aspernatur rerum voluptas doloribus ut? Odit minima fuga earum temporibus assumenda. Saepe libero, adipisci hic consequatur nisi illo eius neque rem
    ratione! Saepe nisi eos, corporis provident, recusandae delectus, officia vero eius quaerat voluptas error molestiae rem rerum! Odit facilis quos est tempora, aspernatur
  </p>
</section>

<div class="parallax3" id="partners"></div>

<div class="dark">
  <h3 class="text-center">Description here</h3>
  <br>
  <div class="col-md-12 row">
    <div class="col-md-6">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur consequuntur omnis repudiandae magnam animi architecto excepturi exercitationem soluta. Cupiditate, omnis similique, magnam veritatis vitae molestias temporibus esse doloribus asperiores
      exercitationem, iste corrupti earum. Hic saepe non eius amet temporibus at autem officiis suscipit doloribus. Dignissimos odit possimus ex, voluptatum debitis nostrum iusto maxime obcaecati corporis, aut nihil odio mollitia facere dolore voluptas
      natus consectetur porro hic ut est tempora in doloribus, aspernatur accusantium. Perspiciatis ab nemo iusto eveniet distinctio odit voluptatum necessitatibus et neque quidem natus, enim officiis optio voluptate alias inventore dolores sint provident
      sunt nihil, doloribus voluptas dolorum.
    </div>
    <div class="col-md-6">
      quisquam molestias sequi ipsa magnam quasi ad reiciendis libero expedita nemo asperiores nobis ducimus ab aliquid accusantium fugit unde quis cum consequatur? Libero, inventore, perspiciatis explicabo ipsam repellat at quod, iure ullam temporibus autem
      tempore ad odio eveniet debitis amet necessitatibus accusantium earum.
    </div>
  </div>

</div>

<div class="parallax4"></div>

<section class="section1" id="contact-header">
  <h1>Contact Us</h1>
</section>
<div class="parallax5">
  <section id="contact">
    <div class="container">
      <div id="form-content" class="col-lg-8 mx-auto bg-light form">
        <h3>Got Questions?</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At voluptatibus esse voluptate ullam ab consequatur, ex illo sed harum ut labore doloremque ipsum voluptatum tempore? Incidunt magni reiciendis totam? Ducimus?</p>
        <hr>
        <form style="padding: 30px;">
          <div class="control-group">
            <div class="group">
              <div class="form-group floating-label-form-group controls mb-0 pb-2">
                <input class="col-md-12" type="text" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Name</label>
                <p class="help-block text-danger"></p>
              </div>
            </div>
          </div>
          <div class="control-group">
            <div class="group">
              <div class="form-group floating-label-form-group controls mb-0 pb-2">
                <input class="col-md-12" type="text" required>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Email</label>
                <p class="help-block text-danger"></p>
              </div>
            </div>
          </div>
          <div class="control-group">
            <div class="group">
              <div class="form-group floating-label-form-group controls mb-0 pb-2">
                <textarea class="col-md-12" type="textarea" rows="5" required="required"></textarea>
                <span class="highlight"></span>
                <span class="bar"></span>
                <label>Message</label>
                <p class="help-block text-danger"></p>
              </div>
            </div>
          </div>
          <br>
          <div id="success"></div>
          <div class="form-group">
            <button type="submit" class="btn btn-primary col-md-12 btn-xl" id="sendMessageButton">Send
                                Message</button>
          </div>
        </form>
      </div>
    </div>
  </section>
</div>
</body>
<script>

$(function() {
  $(document).scroll(function() {
    var $nav = $(".fixed-top");
    //add background to nav when scrolled
    $nav.toggleClass("scrolled", $(this).scrollTop() > $nav.height());

    // $(".heading").css("top", Math.max(180 - 0.2 * window.scrollY, 0) + "px");
    // $(".parallax1").css("opacity", Math.max(1 - 0.004 * window.scrollY, 0));
  });
});

// $(document).on('scroll', function () {
//     // $(".heading").css("top", Math.max(180 - 0.2 * window.scrollY, 0) + "px");
//     $(".parallax1").css("opacity", Math.max(1 - 0.004 * window.scrollY, 0));
// })

</script>
</html

Langkah 2: Buat file style.css

Tahap kedua yang anda lakukan adalah membuat file “style.css”. Kemudian silahkan copy dan paste script dibawah ini.

/* href Transition */
html {
  scroll-behavior: smooth;
  height: 100%;
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: sans-serif;
  color: #666;
  text-align: center;
}
/* PARALLAX START */
.parallax1 {
  background: url("https://images.pexels.com/photos/1092063/pexels-photo-1092063.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 100%;
}

.parallax2 {
  background: url("https://images.pexels.com/photos/1516704/pexels-photo-1516704.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 80%;
}

.parallax3 {
  background: url("https://images.pexels.com/photos/1105766/pexels-photo-1105766.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 60%;
}

.parallax4 {
  background: url("https://images.pexels.com/photos/116720/pexels-photo-116720.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  background-position: 0 -231px !important;
  min-height: 80%;
}

.parallax5 {
  background: url("https://images.pexels.com/photos/1661004/pexels-photo-1661004.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  min-height: 80%;
}

.parallax1,
.parallax2,
.parallax3,
.parallax4,
.parallax5 {
  position: relative;
  opacity: 0.7;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

/* PARALLAX END */

.heading {
  position: absolute;
  color: white;
  font-size: 400%;
  top: 38%;
  width: 100%;
  text-transform: uppercase;
  letter-spacing: 8px;
  text-shadow: 0 0 10px black;
}

.heading-sm {
  position: absolute;
  top: 45%;
  width: 100%;
  color: white;
  font-size: 250%;
  text-transform: uppercase;
  letter-spacing: 5px;
  text-shadow: 0 0 16px black;
  text-align: center;
}

h1,
.heading {
  text-align: center;
}
.border {
  background-color: black;
  padding: 5px;
  text-align: center;
}

.two-col {
  float: left;
  width: 42%;
  padding: 0 4%;
  text-align: left;
}

#contact-header {
  background-color: #323232;
  color: white;
}

section {
  overflow: auto;
  padding: 50px 80px;
}

.section1 {
  padding: 15px 80px;
}

.dark {
  overflow: auto;
  padding: 50px 80px;
  background-color: #323232;
  color: #f2f2f2;
}

.form {
  border-radius: 7px;
  padding: 30px;
}

#form-content {
  transition: 0.5s;
}

#form-content:hover {
  -webkit-box-shadow: 0px 5px 13px 2px rgba(71, 70, 71, 0.76);
  -moz-box-shadow: 0px 5px 13px 2px rgba(71, 70, 71, 0.76);
  box-shadow: 0px 5px 13px 2px rgba(71, 70, 71, 0.76);
}

.group {
  position: relative;
  margin-bottom: 45px;
}

textarea {
  resize: none !important;
}

input,
textarea {
  background: none;
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block;
  width: 300px;
  border: none;
  border-bottom: 1px solid #757575;
}
input:focus,
textarea:focus {
  outline: none;
}

label {
  color: #999;
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label,
input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264ae;
}

textarea:focus ~ label,
textarea:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #5264ae;
}

/* BOTTOM INPUT BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 100%;
}
.bar:before,
.bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #03588c;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.bar:before {
  left: 50%;
}
.bar:after {
  right: 50%;
}

/* active state */
input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width: 50%;
}

textarea:focus ~ .bar:before,
textarea:focus ~ .bar:after {
  width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */
input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

textarea:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

.fixed-top {
  transition: background-color 500ms;
}

.fixed-top.scrolled {
  background-color: #fff;
  color: black;
}

@media (max-width: 768px) {
  .heading {
    font-size: 250%;
  }

  .heading-sm {
    font-size: 180%;
  }

  .two-col {
    width: 100%;
    padding: 0;
    text-align: center;
  }
  .parallax4 {
    background-attachment: scroll;
    min-height: 21%;
  }
}

Penutup

Demikian artikel mengenai Cara Membuat Web Company Profil dengan HTML CSS, semoga bermanfaat untuk anda.

Baca Juga :  Mengenal GDI+ untuk Menggambar pada Windows Form

Jika ada kritik maupun saran, anda bisa berkomentar dibawah ini.

Selamat membaca dan ngoding 😀

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *