Sakura

Sakura - Documentation


Sakura is a Modern HTML5 portfolio & resume Template.
Sakura is 100% responsive. This template is best suitable for Portfolio / vCard / CV / Resume template designed for creative designers, developers, freelancers, photographer or pretty much any profession around the world and in a few moments you can customize this template to suit your own needs. All files are super organized and highly documented


What We Need To Start

  1. Unzip The Template File
  2. Install Code Editor Like vs code
  3. Open The Project In The Code Editor
  4. Open index.html on your web browser to see your website

i will learn you how to edit the template in next sections

Aside Menu

social media links

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it what you want
  3. to change the link you need to change The value of href attribute to your link
    example href="http://example.com"
  4. to change the icon click here
  5. refresh your browser
  6. done
                
                
            

to change the image you need to change The value of src attribute to image URL
example src="images/1.png"

                

the href value = the id for the section

               
                

Home Section

Edit Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
                .home {
                  @include backgroundImg($url: 'http://placehold.it/1920x1080');
                  .intro-section {
                    vertical-align: middle;
                    .kayo-hello {
                      margin: 0;
                      color: #FFF;
                      font-weight: 100;
                      text-transform: uppercase;
                    }
            

Edit Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                /* Start Home
                ================================= */
                .home {
                  background: url("http://placehold.it/1920x1080") center center no-repeat scroll;
                  background-size: cover;
                }
            

Edit The Information

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it Save File
  3. refresh your browser
  4. done
                

HELLO, I'M

SAAD TAREK

Work As

  1. Open js/plugin.js in the code editor
  2. go to the code in the preview Save File
  3. you can change Web Developer. to any thing and you can add more or delete one like
    • ["Web Developer.", "Web Designer.", "DB designer"]
    • OR ["Web Developer."]
    Save File
  4. refresh your browser
  5. done
                /**  Start Typed
                 **====================== **/
                $typedSection = $("#home");
                $checkTyped = false;
                function typed($typedSection) {
                    if (!$checkTyped && $(document).scrollTop() === $typedSection.offset().top) {
                        $(".kayo-work").typed({
                            strings: ["Web Developer.", "Web Designer."],
                            cursorChar: "",
                            typeSpeed: 100,
                            loop: true,
                            backSpeed: 50,
                        });
                        $checkTyped = true;
                    }
                }
            

AboutMe Section

Edit Section Intro Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
                .aboutMe {
                  .aboutMe-intro-section {
                    @include backgroundImg($url: "http://placehold.it/1920x1080", $position: fixed);
                    .kayo-container {
                      padding-top: 60px;
                      padding-bottom: 60px;
                    }
                  }
            

Edit Section Intro Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                /* Start About Me
                ================================= */
                .aboutMe .aboutMe-intro-section {
                  background: url("http://placehold.it/1920x1080") center center no-repeat fixed;
                  background-size: cover;
                }
            

Know Me Section

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it
  3. to change the link you need to change The value of href attribute to your link
    example href="http://example.com"
  4. to change the image you need to change The value of src attribute to image URL
    example src="images/1.png"
  5. refresh your browser
  6. done
                
                

KNOW ME

I am Web Developer/Designer

Iā€™m Saad Tarek. I designed this site so you can get to know me on a personal level. My career as a UX Designer, my portfolio, my personal photography, my blog, my favorite quotes, and so much more. So please sit back and enjoy!

SERVICE Section

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it
  3. to change the link you need to change The value of href attribute to your link
    example href="http://example.com"
  4. to change the image you need to change The value of src attribute to image URL
    example src="images/1.png"
  5. refresh your browser
  6. done
                
                

Service

Web Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Responsive UI

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

DB Design

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

photography

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

SERVICE Section - Edit Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
              .kayo-service {
                @include backgroundImg($url: "http://placehold.it/1920x1080", $position: fixed);
            

SERVICE Section - Edit Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                .aboutMe .kayo-service {
                  background: url("http://placehold.it/1920x1080") center center no-repeat fixed;
                  background-size: cover;
                }
            

MY CLIENTS Section

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it what you want
  3. to change the link you need to change The value of href attribute to your link
    example href="http://example.com"
  4. to change the image you need to change The value of src attribute to image URL
    example src="images/1.png"
  5. refresh your browser
  6. done
                
                
            

AWESOME FACTS Section

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it
  3. for edit the icon and counter >> click here
  4. refresh your browser
  5. done
                

Awesome Facts

                

PROJECTS

AWESOME FACTS - Edit Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
                .kayo-facts-about-me {
                    @include backgroundImg($url: "http://placehold.it/1920x1080", $position: fixed);
                    .kayo-container {
                      padding-top: 60px;
                      padding-bottom: 30px;
                    }
            

AWESOME FACTS - Edit Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                .aboutMe .kayo-facts-about-me {
                  background: url("http://placehold.it/1920x1080") center center no-repeat fixed;
                  background-size: cover;
                }
            

TESTIMONIALS Section

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it what you want
  3. to change the image you need to change The value of src attribute to image URL
    example src="images/1.png"
  4. refresh your browser
  5. done
                

Testimonials

                
                
ā€œ

Praesent et purus ac libero euismod egestas. Aliquam feugiat luctus eros eget maecenas semper pulvinar. tiam in auctor tortor. Aliquam vulputate risus placerat congue ornare. Donec semper odio non efficitur congue.

ā€

portfolio Section

Edit Section Intro Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
                .portfolio {
                  .portfolio-intro-section {
                    @include backgroundImg($url: "http://placehold.it/1920x1080", $position: fixed);
                    .kayo-container {
                      padding-top: 60px;
                      padding-bottom: 60px;
                    }
                  }
            

Edit Section Intro Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                /* Start Portfolio
                ================================= */
                .portfolio .portfolio-intro-section {
                  background: url("http://placehold.it/1920x1080") center center no-repeat fixed;
                  background-size: cover;
                }
            

Change The Filter

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it what you want
  3. to create the filter you need to create tje category as value of data-filter attribute and don't forget to put . before the category name like in the preview
    example data-filter=".design"
    then add the category to the grid-item as class value WITHOUT . in the first of the word like the preview
  4. to change the link you need to change The value of href attribute to your link
    example href="http://example.com"
  5. to change the image you need to change The value of src attribute to image URL
    example src="images/1.png"
  6. to change the icon click here
  7. refresh your browser
  8. done
                
  • All
  • Front End
  • Back End
  • Graphic Design
                

Project Name

Front End

resume Section

Edit Section Intro Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
              .resume-intro-section {
                @include backgroundImg($url: "http://placehold.it/1920x1080", $position: fixed);
                .kayo-container {
                  padding-top: 60px;
                  padding-bottom: 60px;
                }
              }
            

Edit Section Intro Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                /* Start Resume
                ================================= */
                .resume .resume-intro-section {
                  background: url("http://placehold.it/1920x1080") center center no-repeat fixed;
                  background-size: cover;
                }
            

Skills Section - Edit Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
                .kayo-skills {
                    @include backgroundImg($url: "http://placehold.it/1920x1080", $position: fixed);
                    .technical-skills {
            

Skills Section - Edit Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                .resume .kayo-skills {
                  background: url("http://placehold.it/1920x1080") center center no-repeat fixed;
                  background-size: cover;
                }
            

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it Save File
  3. refresh your browser
  4. done
                
2007 - 2016

Facebook

UX/UI Designer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aut commodi earum eligendi ipsum, laborum maiores mollitia, optio quam quis rerum totam voluptas voluptates. Excepturi fugiat nobis reprehenderit sequi veniam!

to change the link you need to change The value of href attribute to your link
example href="http://example.com"

to change the progress bar value you need to edit the value for data-value

                

Communication

to change the counter & progress bar value you need to edit the value for data-from this is the start value and also the value data-to and this is the end value

NOTE: the value of progress bar dependence on the counter value

                

HTML5

contactMe Section

Edit Section Intro Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
                .contact {
                  .contact-intro-section {
                    @include backgroundImg($url: "http://placehold.it/1920x1080", $y: bottom, $position: fixed);
                    .kayo-container {
                      padding-top: 60px;
                      padding-bottom: 60px;
                    }
                  }
            

Edit Section Intro Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                /* Start Contact
                ================================= */
                .contact .contact-intro-section {
                  background: url("http://placehold.it/1920x1080") center bottom no-repeat fixed;
                  background-size: cover;
                }
            

Contact Form - Edit Background Image - using SCSS

  1. Open scss/style.scss in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. compile style.scss file to css/style.css
  5. refresh your browser
  6. done
              .contact-form {
                @include backgroundImg($url: "http://placehold.it/1920x1080", $y: bottom, $position: fixed);
                .kayo-container {
                  padding-bottom: 60px;
                }
              }
            

Contact Form - Edit Background Image - using CSS

  1. Open css/style.css in the code editor
  2. go to the code in the preview
  3. Change http://placehold.it/1920x1080 to your image URL (RECOMMENDED 1920 x 1080) Save File
  4. refresh your browser
  5. done
                .contact .contact-form {
                  background: url("http://placehold.it/1920x1080") center bottom no-repeat fixed;
                  background-size: cover;
                }
            

contact information

  1. Open index.html in the code editor
  2. go to the code in the preview and edit it
  3. to change the icon click here
  4. refresh your browser
  5. done
                

Location

Los Angeles, USA

Other Changes

Edit Icons AND Counter

  1. Open index.html in the code editor
  2. go to the code in the preview
  3. to change the Icon you need change the class for the other icon's class
    Example change class="pe-7s-display1" to class="fa fa-edit" you can search for your icon here

  4. to change the counter you need to edit the value for data-from this is the start value and also the value data-to and this is the end value
  5. refresh your browser
  6. done
                

PROJECTS