• Skip to main content
  • Skip to primary sidebar

WordPress, Genesis Framework and Storefront customization tutorials

  • Archive
    • Free
    • Premium
  • Design
  • Blog
  • About
  • Contact
  • Newsletter
  • Membership
    • Login
Home ยป HTML

HTML

Landing Page with CSS Animations – Karate

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

 
 
Forgot Password

Filed Under: Premium, UI / UX Tagged With: CSS, HTML

Responsive Website with Smooth Scroll Navigation

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium, UI / UX Tagged With: CSS, HTML

Responsive Product Landing Page – Laptop

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium, UI / UX Tagged With: CSS, HTML

Portfolio Landing Page Design HTML, CSS

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium, UI / UX Tagged With: CSS, HTML

Responsive Business Website Design with HTML / CSS

View Demo

To view the full content, please sign up for the membership.

If You are already a member, please log in below:

Filed Under: Premium, UI / UX Tagged With: CSS, HTML, landing

HTML5 Video with subtitle

<video controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.mp4" type="video/mp4">
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge.ogg" type="video/ogg">
        <track label="English" kind="subtitles" srclang="en" src="bridge-captions.vtt" default>
      </video>
      
      <h2>Audio Example</h2>
      
      <audio controls>
        <source src="http://treehouse-code-samples.s3.amazonaws.com/html-video-and-audio/bridge-audio.mp3" type="audio/mp3">
      </audio>

Filed Under: Free Tagged With: HTML

Responsive Header Top Bar Contact Info with Icons

HTML

<ul class="top-header">
    <li class="address">
       <a href=""><i class="fas fa-map-marker"></i>
            <span></span>
        </a> 
    </li>
    <li class="tel">
        <span>
           <a href="tel:"><i class="fas fa-phone"></i>
                
            </a> 
        </span>
    </li>
    <li class="mail">
        <a href="mailto:"><i class="fas fa-envelope"></i>
            <span></span>
        </a>
    </li>
    <li>
        <a target="_blank" href="">
            <i class="fab fa-facebook-f"></i> <span>Facebook</span>
        </a>
    </li>
</ul>

CSS

/* Mobile First */
.top-header li a:hover, 
.top-header li a i:hover{
    color: #EA6F22
}
.top-header{
    display: flex;
    background: #151211;
    color: white;
}

.top-header {
	margin-bottom: 0;
	padding: 10px;
	font-size: 1.6rem;
	color: rgba(255,255,255,.8);
	justify-content: space-around;
}
.top-header span{
    display: none;
}
.top-header .fab,
.top-header .fas {
	margin: 0 10px;
	font-size: 3rem;
}


/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  
    .top-header .fas,
    .top-header .fab{
	font-size: 1.5rem;
}

Filed Under: Free Tagged With: CSS, HTML

Social Media Icons

<ul class="social-icons">
   <li>
       <a href="tel:">
            <i class="fas fa-phone"></i>
       </a>
    </li>
    <li>
       <a href="mailto:">
            <i class="fas fa-envelope"></i>
       </a>
    </li>
    <li>
       <a target="_blank" href="https://www.facebook.com/">
            <i class="fab fa-facebook-f"></i>
       </a>
    </li>
    <li>
       <a target="_blank" href="">
            <i class="fab fa-youtube"></i>
       </a>
    </li>
    <li>
       <a target="_blank" href="">
            <i class="fab fa-yelp"></i>
       </a>
    </li>
</ul>

Hook in Genesis

//SOCIAL ICONS
add_action('genesis_header', 'add_social_icons');
    function add_social_icons(){
            include('inc/social.php');
}

Filed Under: Free Tagged With: HTML

Primary Sidebar

MacBook

12 Essential Snippets for Genesis Developers

Subscribe to my Newsletter to view my basic collection of Genesis snippets that I use for my projects!

Sign Up for Free
Gabor Flamich

Hi! I'm Gabor.
I write tutorials on WordPress, Genesis Framework and WooCommerce.

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter
  • YouTube
WP Rocket - WordPress Caching Plugin
UpdraftPlus Premium

Tags

ACF Ajax Analytics Animation API Bootstrap Breadcrumb Card category CPT CSS Genesis Git Google Maps Grid GSAP Gutenberg htaccess HTML JavaScript jQuery json landing layout Map masonry Menu Parallax PHP SASS skew SQL Storefront SVG tab tag manager tags Taxonomy Tool upsell Wholesale WooCommerce WordPress WPML

Disclosure: Some of the links in this site are affiliate links. I will be paid a commission if you use this link to make a purchase.

  • Privacy Policy / Terms of Service
© 2021 WP Flames - All Right Reserved