Membuat Web Portofolio Responsive

Membuat Web Portofolio Responsive

Membuat Web Portofolio Responsive
Membuat Web Portofolio Responsive

Hallo sahabat ruangcoder, artikel kali ini tentang Membuat Web Portofolio Responsive, Sederhana, Dan Menggunakan HTML, CSS, JavaScript atau JS dimana membuat sebuah website portofolio adalah untuk menunjukkan hasil kerja kalian, baik graphic, video, maupun tulisan. nah jadi bagi sahabat ruangcoder yang ingin menjadi freelance tentu harus mempunyai sebuah portofolio untuk menunjang keyakinan pada sisi client sobat, apalagi sobat seorang programmer, disaat sobat menawarkan jasa kepada client, dan harus meyakinkan client, seperti yang admin bilang kalian harus meyakinkan client bahwa kalian sering  mengerjakan proyek - proyek sebelumnya, nah adanya web portofolio ini memperjelas bahwasanya kalian memang lah seorang proffesional yang dapat diandalkan oleh client.

membuat situs web portofolio yang  responsif menggunakan CSS dan jQuery . Pada dasarnya, templat ini memiliki latar belakang gradien tinggi dan penuh dengan logo, judul, dan teks. Di bagian bawah tata letak, ada animasi scroll down arrow ikon atau indikator. Ketika kalian akan scroll ke bawah ,sticky navbar muncul di bagian atas. Di dalam navbar terdapat anchor target untuk menavigasi bagian di halaman web.

Nah jika kalian tertarik dengan membuat web portofolio sederhana dan programnya seperti apa kalian bisa melihat preview nya dibawah tentu dengan source code yang sudah disediakan.


Membuat Web Portofolio Responsive


Pertama admin telah membuat tata letak menggunakan tag HTML seperti bagian, div, dll. Admin telah membuat semua bagian menggunakan tag < section > HTML dan menempatkan properti lain seperti tag div, heading, paragraf, dll di dalamnya. Dan semua ikon didasarkan pada library Font-Awesome yang ditautkan dalam file HTML , file lain seperti CSS, JS, jQuery ditautkan dalam file HTML.

Sekarang menggunakan CSS untuk menempatkan semua elemen di tempat yang tepat, seperti yang kalian lihat di pratinjau. Dengan CSS pertama admin memberikan ukuran dan posisi untuk semua elemen, dan menggunakan perintah CSS @ keyframe untuk membuat ikon gulir ke bawah animasi . Desain responsif didasarkan pada permintaan CSS @ media admin telah mengurangi dan menempatkan item untuk 2 atau lebih ukuran layar.

jQuery di sini terdapat 4 fitur penting dari program ini. Keempat fitur tersebut adalah tinjauan putaran, navigasi anchor target, scroll halus, dan navigasi mobile. Sebagian besar fungsi didasarkan pada add dan menghapus yang nama kelas metode, dan bekerja di klik menggunakanj Query .click(function()) perintah.

Kalian akan mengerti setelah mendapatkan kode , admin tidak bisa menjelaskan semuanya secara tertulis. Untuk membuat program ini, kalian harus membuat 3 file. Pertama untuk HTML , kedua untuk CSS , dan file ketiga untuk JavaScript . Ikuti langkah-langkah untuk membuat ini tanpa kesalahan.


Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!-- Code By RuangCoder ( https://www.ruangcoder.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Responsive Website Template | RuangCoder.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="./style.css">

</head>
<body>

<!-- Header Section -->

<header id="header">
  <div class="main_nav">
    <div class="container">
      <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div>
      <nav>
        <ul>
          <li><a class="smoothscroll" href="#header">Home</a></li>
          <li><a class="smoothscroll" href="#about">About</a></li>
          <li><a class="smoothscroll" href="#skills">Skills</a></li>
          <li><a class="smoothscroll" href="#portfolio">Portfolio</a></li>
          <li><a class="smoothscroll" href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
  <div class="title">
    <div><i class="fa fa-code" aria-hidden="true"></i></div>
    <div class="smallsep heading"></div>
    <h1 class="heading"> Single Page Website</h1>
    <h2 class="heading">With Achor Smooth Scrolling</h2>
    <a class="smoothscroll" href="#about">
    <div class="mouse">
      <div class="wheel"></div>
    </div>
    </a> </div>
  <a class="smoothscroll" href="#about">
  <div class="scroll-down"></div>
  </a> </header>
  
<!-- About Section -->  
  
<section id="about">
  <div class="container">
    <div class="row">
      <h1>About</h1>
      <div class="block"></div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="row">
      <div class="six columns">
        <h3><i class="fa fa-cog" aria-hidden="true"></i>Our Process</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <div class="six columns">
        <h3><i class="fa fa-pencil-square" aria-hidden="true"></i>Our Approach</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
      <div class="row">
        <div class="six columns">
          <h3><i class="fa fa-bullseye" aria-hidden="true"></i>Our Goal</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div class="six columns">
          <h3><i class="fa fa-fighter-jet" aria-hidden="true"></i>Our Mission</h3>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- Team Section -->  

<section id="team">
  <div class="container">
    <div class="row">
      <h1>Meet the Team</h1>
      <div class="block"></div>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="row">
      <div class="three columns"> <img src="https://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>John Doe</h4>
        <p>Creative Director</p>
      </div>
      <div class="three columns"> <img src="https://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Alex Dcruz</h4>
        <p>Lead Designer</p>
      </div>
      <div class="three columns"> <img src="https://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Leren Okas</h4>
        <p>Designer</p>
      </div>
      <div class="three columns"> <img src="https://placehold.it/220x220" width="220" height="220" alt=""/>
        <h4>Shantanu</h4>
        <p>Developer</p>
      </div>
    </div>
  </div>
</section>

<!-- Skills Section -->  

<section id="skills">
  <div class="container">
    <h1>Skills</h1>
    <div class="block"></div>
    <div class="row">
      <div class="one-third column">
        <h3>Design</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus.</p>
      </div>
      <div class="one-third column">
        <h3>Development</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus.</p>
      </div>
      <div class="one-third column">
        <h3>Marketing</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus.</p>
      </div>
    </div>
    <div class="row">
      <div class="eight columns">
        <div class="progressBar">
          <h4>HTML5</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-90"></div>
          </div>
        </div>
        <div class="progressBar">
          <h4>CSS3</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-80"></div>
          </div>
        </div>
        <div class="progressBar">
          <h4>Jquery</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-30"></div>
          </div>
        </div>
        <div class="progressBar">
          <h4>WordPress</h4>
          <div class="progressBarContainer">
            <div class="progressBarValue value-70"></div>
          </div>
        </div>
      </div>
      <div class="four columns">
        <p>Lorem ipsum dolor sit amet, enim soluta consectetur adipisicing elit. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis in quia eum autem. Enim soluta consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
</section>

<!-- Portfolio Section -->  

<section id="portfolio">
  <div class="container">
    <h1>Portfolio</h1>
    <div class="block"></div>
    <div class="row">
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work One"/></div>
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work Two"/></div>
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work Three"/></div>
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work Four"/></div>
    </div>
    <div class="row" style="margin-top: 30px;">
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work Five"/></div>
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work Six"/></div>
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work Seven"/></div>
      <div class="three columns"> <img src="https://placehold.it/220x220?text=Image" class="image" alt="Work Eight"/></div>
    </div>
  </div>
</section>

<!-- Testimonials Section -->  

<section id="testimonial">
  <div class="container">
    <div class="quoteLoop">
      <blockquote class="quote"> <img src="https://placehold.it/100x100?text=First Client" width="100" height="100" alt=""/>
        <h5>&nbsp;<br>
          &rdquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.&rdquo;<br>
          <small>Steve Bruce, Sed ut perspiciatis unde omnis</small></h5>
      </blockquote>
      <blockquote class="quote"> <img src="https://placehold.it/100x100?text=Second Client" width="100" height="100" alt=""/>
        <h5>&nbsp;<br>
          &ldquo;Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.&rdquo;<br>
          <small>Tom Jones, Sed ut perspiciatis unde omnis</small></h5>
      </blockquote>
    </div>
  </div>
</section>

<!-- Contact Section -->  

<section id="contact">
  <div class="container">
    <h1>Contact</h1>
    <div class="block"></div>
    <form>
      <div class="row">
        <div class="six columns">
          <label for="exampleRecipientInput">Name</label>
          <input class="u-full-width" type="text">
        </div>
        <div class="six columns">
          <label for="exampleEmailInput">Email</label>
          <input class="u-full-width" type="email">
        </div>
      </div>
      <div class="row">
        <label for="exampleMessage">Message</label>
        <textarea class="u-full-width"></textarea>
        <input class="button-primary" type="submit" value="Submit">
      </div>
    </form>
  </div>
</section>

<!-- Footer Section -->  

<footer>
  <div class="container">
    <div class="nine columns">
      <p>Copyright @ RuangCoder.com</p>
    </div>
    <div class="three columns"> <i class="fa fa-facebook-square" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i>
      <i class="fa fa-twitter-square" aria-hidden="true"></i><i class="fa fa-reddit-square" aria-hidden="true"></i> </div>
  </div>
</footer>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
  <script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");

html {
    font-size: 62.5%;
}
body {
    font-size: 1.5em;
    line-height: 1.6;
    font-weight: 400;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: #222;
}
/* Grid */  
.container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}
.column, .columns {
    width: 100%;
    float: left;
    box-sizing: border-box;
}
.fa {
    font-size: 3rem;
    color: white;
    letter-spacing: 1rem;
}
h3 .fa {
    color: #ff3636;
}
.title .fa {
    font-size: 5rem;
}
/* About */

#about {
    padding: 100px 0 50px 0;
}
/* Team */
#team {
    padding: 50px 0 100px 0;
}
#team .icon {
    font-size: 26px;
}
/* Skills */
#skills {
    padding: 100px 0 100px 0;
    background-color: #F5F5F5;
}
.progressBar {
    margin-bottom: 26px;
    margin-bottom: 1.66em;
}
.progressBar h4 {
    font-size: 16px;
    text-transform: none;
    margin-bottom: 7px;
    margin-bottom: .33em;
}
.progressBarContainer {
    width: 100%;
    height: 8px;
    background: #E1E1E1;
    overflow: hidden;
}
.progressBarValue {
    height: 8px;
    float: left;
    background: #e55d87; 
    background: -moz-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
    background: -webkit-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
    background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);
}
.value-00 {
    width: 0;
}
.value-10 {
    width: 10%;
}
.value-20 {
    width: 20%;
}
.value-30 {
    width: 30%;
}
.value-40 {
    width: 40%;
}
.value-50 {
    width: 50%;
}
.value-60 {
    width: 60%;
}
.value-70 {
    width: 70%;
}
.value-80 {
    width: 80%;
}
.value-90 {
    width: 90%;
}
.value-100 {
    width: 100%;
}
/* Portfolio */
#portfolio {
    padding: 100px 0 100px 0;
}
.image {
    background-color: #5a5a5a;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    transition: .5s;
}
.image:hover {
    opacity: 0.6;
    transition: .3s;
    background-image: url(../images/hoverbg.png);
    background-repeat: no-repeat;
    background-position: center;
}

/* Testimonial */
#testimonial {
    background-color: #F5F5F5;
    padding: 100px 0 100px 0;
}
.quoteLoop {
    height: auto;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.quote {
    margin: 10px 30px;
    height: inherit;
    top: 0px;
    display: none;
    text-align: center;
}
/* Contact Section */
#contact {
    padding: 100px 0 100px 0;
}
input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {
    height: 38px;
    padding: 6px 10px; 
    background-color: #F5F5F5;
    border: none;
    box-shadow: none;
    box-sizing: border-box;
    border-radius: 0;
    outline: none;
}
textarea {
    min-height: 250px;
}
input[type="submit"] {
    display: inline-block;
    height: 38px;
    padding: 0 30px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    letter-spacing: .1rem;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background: #5fc3e4;
    border-radius: 0px;
    border: 0;
    cursor: pointer;
    box-sizing: border-box;
}
input[type="submit"]:hover {
    background: #e55d87;
    text-decoration: none;
}
/* Footer */
footer {
    min-height: 120px;
    padding: 40px 0 40px 0;
    background: #e55d87;
    background: -moz-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
    background: -webkit-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
    background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55d87', endColorstr='#5fc3e4', GradientType=1 );
    box-sizing: border-box;
}
footer p {
    color: #FFFFFF;
    margin: 20px 0 0 0;
}
.socialIcons {
    font-size: 34px;
    color: rgba(255, 255, 255, 0.7);
}
/* Lists */
ul {
    list-style: circle inside;
}
ol {
    list-style: decimal inside;
}
ol, ul {
    padding-left: 0;
    margin-top: 0;
}
ul ul, ul ol, ol ol, ol ul {
    margin: 1.5rem 0 1.5rem 3rem;
    font-size: 90%;
}
li {
    margin-bottom: 1rem;
}
/* Spacing */
button, .button {
    margin-bottom: 1rem;
}
input, textarea, select, fieldset {
    margin-bottom: 1.5rem;
}
pre, blockquote, dl, figure, table, p, ul, ol, form {
    margin-bottom: 2.5rem;
}
/* Utilities */
.u-full-width {
    width: 100%;
    box-sizing: border-box;
}
.u-max-full-width {
    max-width: 100%;
    box-sizing: border-box;
}
.u-pull-right {
    float: right;
}
.u-pull-left {
    float: left;
}
/* Clearing */
.container:after, .row:after, .u-cf {
    content: "";
    display: table;
    clear: both;
}
/* Misc */

.icon {
    padding-right: 10px;
    color: #e55d87;
}
.block {
    width: 70px;
    height: 2px;
    background: #e55d87; 
    background: -moz-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
    background: -webkit-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
    background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);
    margin-bottom: 50px;
}
/* For devices larger than 400px */
@media (min-width: 400px) {
    .container {
        width: 85%;
        padding: 0;
    }
    }
    
    /* For devices larger than 550px */
    @media (min-width: 550px) {
    .container {
        width: 80%;
    }
    .column,  .columns {
        margin-left: 4%;
    }
    .column:first-child,  .columns:first-child {
        margin-left: 0;
    }
    .one.column,  .one.columns {
        width: 4.66666666667%;
    }
    .two.columns {
        width: 13.3333333333%;
    }
    .three.columns {
        width: 22%;
    }
    .four.columns {
        width: 30.6666666667%;
    }
    .five.columns {
        width: 39.3333333333%;
    }
    .six.columns {
        width: 48%;
    }
    .seven.columns {
        width: 56.6666666667%;
    }
    .eight.columns {
        width: 65.3333333333%;
    }
    .nine.columns {
        width: 74.0%;
    }
    .ten.columns {
        width: 82.6666666667%;
    }
    .eleven.columns {
        width: 91.3333333333%;
    }
    .twelve.columns {
        width: 100%;
        margin-left: 0;
    }
    .one-third.column {
        width: 30.6666666667%;
    }
    .two-thirds.column {
        width: 65.3333333333%;
    }
    .one-half.column {
        width: 48%;
    }
    /* Offsets */
    .offset-by-one.column,  .offset-by-one.columns {
        margin-left: 8.66666666667%;
    }
    .offset-by-two.column,  .offset-by-two.columns {
        margin-left: 17.3333333333%;
    }
    .offset-by-three.column,  .offset-by-three.columns {
        margin-left: 26%;
    }
    .offset-by-four.column,  .offset-by-four.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-five.column,  .offset-by-five.columns {
        margin-left: 43.3333333333%;
    }
    .offset-by-six.column,  .offset-by-six.columns {
        margin-left: 52%;
    }
    .offset-by-seven.column,  .offset-by-seven.columns {
        margin-left: 60.6666666667%;
    }
    .offset-by-eight.column,  .offset-by-eight.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-nine.column,  .offset-by-nine.columns {
        margin-left: 78.0%;
    }
    .offset-by-ten.column,  .offset-by-ten.columns {
        margin-left: 86.6666666667%;
    }
    .offset-by-eleven.column,  .offset-by-eleven.columns {
        margin-left: 95.3333333333%;
    }
    .offset-by-one-third.column,  .offset-by-one-third.columns {
        margin-left: 34.6666666667%;
    }
    .offset-by-two-thirds.column,  .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%;
    }
    .offset-by-one-half.column,  .offset-by-one-half.columns {
        margin-left: 52%;
    }
    }
    /* Typography
    ********************************************************************* */
    h1, h2, h3, h4, h5, h6 {
        margin-top: 0;
        margin-bottom: 2rem;
        font-weight: 300;
    }
    h1 {
        font-size: 4.0rem;
        line-height: 1.2;
        letter-spacing: -.1rem;
    }
    h2 {
        font-size: 3.6rem;
        line-height: 1.25;
        letter-spacing: -.1rem;
    }
    h3 {
        font-size: 3.0rem;
        line-height: 1.3;
        letter-spacing: -.1rem;
    }
    h4 {
        font-size: 2.4rem;
        line-height: 1.35;
        letter-spacing: -.08rem;
    }
    h5 {
        font-size: 1.8rem;
        line-height: 1.5;
        letter-spacing: -.05rem;
    }
    h6 {
        font-size: 1.5rem;
        line-height: 1.6;
        letter-spacing: 0;
    }
    
    /* Larger than phablet */
    @media (min-width: 550px) {
    h1 {
        font-size: 5.0rem;
    }
    h2 {
        font-size: 4.2rem;
    }
    h3 {
        font-size: 3.6rem;
    }
    h4 {
        font-size: 3.0rem;
    }
    h5 {
        font-size: 2.4rem;
    }
    h6 {
        font-size: 1.5rem;
    }
    }
    p {
        margin-top: 0;
    }
    /* Links
    ********************************************************************* */
    a {
        color: #1EAEDB;
    }
    a:hover {
        color: #0FA0CE;
    }
    /* Header Section
    ********************************************************************* */
    
    
    header {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
     width: 100%%;
        height: 100vh;
        background: #e55d87;
        background: -moz-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
        background: -webkit-linear-gradient(-45deg, #FF416C 0%, #FF4B2B 100%);
        background: linear-gradient(135deg, #FF416C 0%, #FF4B2B 100%);
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e55d87', endColorstr='#5fc3e4', GradientType=1 );
    }
    .title {
        -webkit-align-self: center;
        -ms-flex-item-align: center;
        align-self: center;
        padding: 2rem;
        max-width: 960px;
        text-align: center;
    }
    .title .smallsep {
        background: #fff;
        height: 2px;
        width: 70px;
        margin: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .title h1 {
        font-size: 80px;
        font-weight: 300;
        text-transform: uppercase;
        line-height: 0.85;
        margin-bottom: 28px;
        margin: 0;
        padding: 0;
        color: #FFFFFF;
    }
    .title h2 {
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 5px;
        margin-top: 50px;
    }
    
    @media only screen and (max-height: 700px) {
    .title h1 {
        font-size: 80px;
    }
    }
    .title p {
        max-width: 600px;
        margin: 0 auto;
        line-height: 150%;
    }
    
    @media only screen and (max-width: 500px) {
    .title h1 {
        font-size: 65px;
    }
    }
    .title .icon {
        color: #FFFFFF;
        font-size: 50px;
    }
    .main_nav {
        position: fixed;
        top: 0px;
        max-height: 50px;
        z-index: 999;
        width: 100%;
        padding-top: 17px;
        background: none;
        overflow: hidden;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        opacity: 0;
        top: -100px;
        padding-bottom: 6px;
    }
    
    @media only screen and (max-width: 766px) {
    .main_nav {
        padding-top: 25px;
    }
    }
    .open-nav {
        max-height: 400px !important;
    }
    .sticky {
        background-color: #ffffff;
        opacity: 1;
        top: 0px;
    }
    nav {
        width: 100%;
        margin-top: 5px;
    }
    
    @media only screen and (max-width: 766px) {
    nav {
        width: 100%;
    }
    }
    nav ul {
        list-style: none;
        overflow: hidden;
        text-align: center;
    }
    
    @media only screen and (max-width: 766px) {
    nav ul {
        padding-top: 0px;
        margin-bottom: 22px;
        text-align: center;
        width: 100%;
    }
    }
    nav ul li {
        display: inline-block;
        margin-left: 35px;
        line-height: 1.5;
        letter-spacing: 1px;
    }
    
    @media only screen and (max-width: 766px) {
    nav ul li {
        width: 100%;
        padding: 7px 0;
        margin: 0;
    }
    nav ul li:first-child {
        margin-top: 70px;
    }
    }
    nav ul a {
        text-transform: uppercase;
        font-size: 12px;
        text-decoration: none;
    }
    nav ul a:hover {
        color: #CFCFCF;
    }
    .mobile-toggle {
        display: none;
        cursor: pointer;
        font-size: 20px;
        position: absolute;
        right: 22px;
        top: 0;
        width: 30px;
    }
    
    @media only screen and (max-width: 766px) {
    .mobile-toggle {
        display: block;
    }
    }
    .mobile-toggle span {
        width: 30px;
        height: 4px;
        margin-bottom: 6px;
        background: #000000;
        display: block;
    }
    .scroll-down {
        position: absolute;
        left: 50%;
        bottom: 5vh;
        display: block;
        text-align: center;
        font-size: 20px;
        z-index: 100;
        text-decoration: none;
        text-shadow: 0;
        width: 13px;
        height: 13px;
        border-bottom: 2px solid #fff;
        border-right: 2px solid #fff;
        z-index: 9;
        -webkit-transform: translate(-50%, 0%) rotate(45deg);
        -moz-transform: translate(-50%, 0%) rotate(45deg);
        transform: translate(-50%, 0%) rotate(45deg);
        -webkit-animation: fade_move_down 2s ease-in-out infinite;
        -moz-animation: fade_move_down 2s ease-in-out infinite;
        animation: fade_move_down 2s ease-in-out infinite;
    }
    /* arrow animation */
@-webkit-keyframes fade_move_down {
    0% {
   -webkit-transform:translate(0, -10px) rotate(45deg);
   opacity: 0;
   }
    50% {
   opacity: 1;
   }
    100% {
   -webkit-transform:translate(0, 10px) rotate(45deg);
   opacity: 0;
   }
   }
   @-moz-keyframes fade_move_down {
    0% {
   -moz-transform:translate(0, -10px) rotate(45deg);
   opacity: 0;
   }
    50% {
   opacity: 1;
   }
    100% {
   -moz-transform:translate(0, 10px) rotate(45deg);
   opacity: 0;
   }
   }
   @keyframes fade_move_down {
    0% {
   transform:translate(0, -10px) rotate(45deg);
   opacity: 0;
   }
    50% {
   opacity: 1;
   }
    100% {
   transform:translate(0, 10px) rotate(45deg);
   opacity: 0;
   }
   }

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

// Code By RuangCoder ( https://www.ruangcoder.com )
// Review Loop
function fade($ele) {
    $ele.fadeIn(1000).delay(3000).fadeOut(1000, function() {
        var $next = $(this).next('.quote');
        fade($next.length > 0 ? $next : $(this).parent().children().first());
   });
}
fade($('.quoteLoop > .quote').first());

// Navigation

$(window).scroll(function() {

    if ($(window).scrollTop() > 300) {
        $('.main_nav').addClass('sticky');
    } else {
        $('.main_nav').removeClass('sticky');
    }
});

// Mobile Navigation
$('.mobile-toggle').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.main_nav').removeClass('open-nav');
    } else {
        $('.main_nav').addClass('open-nav');
    }
});

$('.main_nav li a').click(function() {
    if ($('.main_nav').hasClass('open-nav')) {
        $('.navigation').removeClass('open-nav');
        $('.main_nav').removeClass('open-nav');
    }
});

// Smooth Scrolling

jQuery(document).ready(function($) {

   $('.smoothscroll').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 800, 'swing', function () {
            window.location.hash = target;
        });
    });
  
});


TweenMax.staggerFrom(".heading", 0.8, {opacity: 0, y: 20, delay: 0.2}, 0.4);

Nah sampai disini kalian telah berhasil Membuat Web Portofolio Responsive, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini