Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
I've been trying to convert a website design to shopify and have run into a few issues. This is just a test site - if I can get it looking the way it's supposed to I planned on messing with it to have the info needed.
(This is one page only - the rest of the production site will run on the Supply theme)
I was wondering if someone could take a look and figure out where I went wrong, since I know just about nothing about shopify.
Here's the test page: https://gts-test-dev.myshopify.com/pages/test#about
Here's the preview page of what it should look like: https://colorlib.com/demo?theme=creative-agency
Here's my page code - you can see where I attempted to translate it to shopify. All the css, fonts, etc that came with the free design I put in assets.
{% layout 'theme.subscription' %}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Title?</title>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7CVarela+Round" rel="stylesheet">
{{ 'google-font.css' | asset_url | stylesheet_tag }}
<!-- Bootstrap -->
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
<!-- Owl Carousel -->
<link type="text/css" rel="stylesheet" href="css/owl.carousel.css" />
{{ 'owl.carousel.css' | asset_url | stylesheet_tag }}
<link type="text/css" rel="stylesheet" href="css/owl.theme.default.css" />
{{ 'owl.theme.default.css' | asset_url | stylesheet_tag }}
<!-- Magnific Popup -->
<link type="text/css" rel="stylesheet" href="css/magnific-popup.css" />
{{ 'magnific-popup.css' | asset_url | stylesheet_tag }}
<!-- Font Awesome Icon -->
<link rel="stylesheet" href="css/font-awesome.min.css">
{{ 'font-awesome.min.css' | asset_url | stylesheet_tag }}
<!-- Custom stlylesheet -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
{{ 'style.css' | asset_url | stylesheet_tag }}
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body >
<!-- Header -->
<header id="home">
<!-- Background Image -->
<div class="bg-img"> <img src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/background1.jpg?11898970986288917917"/>
<div class="overlay"></div>
</div>
<!-- /Background Image -->
<!-- Nav -->
<nav id="nav" class="navbar nav-transparent">
<div class="container">
<div class="navbar-header">
<!-- Logo -->
<div class="navbar-brand">
<a href="index.html">
<img class="logo" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/logo1.png?14440651309315112879" alt="logo">
<img class="logo-alt" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/logo-alt1.png?14440651309315112879" alt="logo">
</a>
</div>
<!-- /Logo -->
<!-- Collapse nav button -->
<div class="nav-collapse">
<span></span>
</div>
<!-- /Collapse nav button -->
</div>
<!-- Main navigation -->
<ul class="main-nav nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#service">Services</a></li>
<li><a href="#pricing">Prices</a></li>
<li><a href="#team">Team</a></li>
<li class="has-dropdown"><a href="#blog">Blog</a>
<ul class="dropdown">
<li><a href="blog-single.html">blog post</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
<!-- /Main navigation -->
</div>
</nav>
<!-- /Nav -->
<!-- home wrapper -->
<div class="home-wrapper">
<div class="container">
<div class="row">
<!-- home content -->
<div class="col-md-10 col-md-offset-1">
<div class="home-content">
<h1 class="white-text">Website Title?</h1>
<p class="white-text">Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere.
</p>
<button class="white-btn">Get Started!</button>
<button class="main-btn">Learn more</button>
</div>
</div>
<!-- /home content -->
</div>
</div>
</div>
<!-- /home wrapper -->
</header>
<!-- /Header -->
<!-- About -->
<div id="about" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Welcome To The Website</h2>
</div>
<!-- /Section header -->
<!-- about -->
<div class="col-md-4">
<div class="about">
<i class="fa fa-cogs"></i>
<h3>Fully Customizible</h3>
<p>We can change what these say or remove them all together.</p>
<a href="#">Read more</a>
</div>
</div>
<!-- /about -->
<!-- about -->
<div class="col-md-4">
<div class="about">
<i class="fa fa-magic"></i>
<h3>Awesome Features</h3>
<p>There's potential to add other features later.</p>
<a href="#">Read more</a>
</div>
</div>
<!-- /about -->
<!-- about -->
<div class="col-md-4">
<div class="about">
<i class="fa fa-mobile"></i>
<h3>Fully Responsive</h3>
<p>Everything SHOULD work once everything is in place.</p>
<a href="#">Read more</a>
</div>
</div>
<!-- /about -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /About -->
<!-- Portfolio -->
<div id="portfolio" class="section md-padding bg-grey">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Featured Boxes</h2>
</div>
<!-- /Section header -->
<!-- Work -->
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/work1.jpg?11898970986288917917" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Category</span>
<h3>These</h3>
<div class="work-link">
<a href="#"><i class="fa fa-external-link"></i></a>
<a class="lightbox" href="./img/work1.jpg"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/work2.jpg?11898970986288917917" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Category</span>
<h3>Could</h3>
<div class="work-link">
<a href="#"><i class="fa fa-external-link"></i></a>
<a class="lightbox" href="./img/work2.jpg"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/work3.jpg?11898970986288917917" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Category</span>
<h3>Be</h3>
<div class="work-link">
<a href="#"><i class="fa fa-external-link"></i></a>
<a class="lightbox" href="./img/work3.jpg"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/work4.jpg?11898970986288917917" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Category</span>
<h3>Different</h3>
<div class="work-link">
<a href="#"><i class="fa fa-external-link"></i></a>
<a class="lightbox" href="./img/work4.jpg"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/work5.jpg?11898970986288917917" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Category</span>
<h3>Style</h3>
<div class="work-link">
<a href="#"><i class="fa fa-external-link"></i></a>
<a class="lightbox" href="./img/work5.jpg"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
<!-- Work -->
<div class="col-md-4 col-xs-6 work">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/work6.jpg?11898970986288917917" alt="">
<div class="overlay"></div>
<div class="work-content">
<span>Category</span>
<h3>Boxes</h3>
<div class="work-link">
<a href="#"><i class="fa fa-external-link"></i></a>
<a class="lightbox" href="./img/work6.jpg"><i class="fa fa-search"></i></a>
</div>
</div>
</div>
<!-- /Work -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Portfolio -->
<!-- Service -->
<div id="service" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">What we offer - This will probably be removed</h2>
</div>
<!-- /Section header -->
<!-- service -->
<div class="col-md-4 col-sm-6">
<div class="service">
<i class="fa fa-diamond"></i>
<h3>App Development</h3>
<p>Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero.</p>
</div>
</div>
<!-- /service -->
<!-- service -->
<div class="col-md-4 col-sm-6">
<div class="service">
<i class="fa fa-rocket"></i>
<h3>Graphic Design</h3>
<p>Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero.</p>
</div>
</div>
<!-- /service -->
<!-- service -->
<div class="col-md-4 col-sm-6">
<div class="service">
<i class="fa fa-cogs"></i>
<h3>Creative Idea</h3>
<p>Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero.</p>
</div>
</div>
<!-- /service -->
<!-- service -->
<div class="col-md-4 col-sm-6">
<div class="service">
<i class="fa fa-diamond"></i>
<h3>Marketing</h3>
<p>Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero.</p>
</div>
</div>
<!-- /service -->
<!-- service -->
<div class="col-md-4 col-sm-6">
<div class="service">
<i class="fa fa-pencil"></i>
<h3>Awesome Support</h3>
<p>Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero.</p>
</div>
</div>
<!-- /service -->
<!-- service -->
<div class="col-md-4 col-sm-6">
<div class="service">
<i class="fa fa-flask"></i>
<h3>Brand Design</h3>
<p>Maecenas tempus tellus eget condimentum rhoncus sem quam semper libero.</p>
</div>
</div>
<!-- /service -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Service -->
<!-- Why Choose Us -->
<div id="features" class="section md-padding bg-grey">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- why choose us content -->
<div class="col-md-6">
<div class="section-header">
<h2 class="title">Why Choose Us - Basically an About Us section</h2>
</div>
<p>Molestie at elementum eu facilisis sed odio. Scelerisque in dictum non consectetur a erat. Aliquam id diam maecenas ultricies mi eget mauris. Ultrices sagittis orci a scelerisque purus.</p>
<div class="feature">
<i class="fa fa-check"></i>
<p>Quis varius quam quisque id diam vel quam elementum.</p>
</div>
<div class="feature">
<i class="fa fa-check"></i>
<p>Mauris augue neque gravida in fermentum.</p>
</div>
<div class="feature">
<i class="fa fa-check"></i>
<p>Orci phasellus egestas tellus rutrum.</p>
</div>
<div class="feature">
<i class="fa fa-check"></i>
<p>Nec feugiat nisl pretium fusce id velit ut tortor pretium.</p>
</div>
</div>
<!-- /why choose us content -->
<!-- About slider -->
<div class="col-md-6">
<div id="about-slider" class="owl-carousel owl-theme">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/about1.jpg?11898970986288917917" alt="">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/about2.jpg?11898970986288917917" alt="">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/about1.jpg?11898970986288917917" alt="">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/about2.jpg?11898970986288917917" alt="">
</div>
<!-- /About slider -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Why Choose Us -->
<!-- Numbers -->
<div id="numbers" class="section sm-padding">
<!-- Background Image -->
<div class="bg-img"> <img src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/background2.jpg?11898970986288917917";>
<div class="overlay"></div>
</div>
<!-- /Background Image -->
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- number -->
<div class="col-sm-3 col-xs-6">
<div class="number">
<i class="fa fa-users"></i>
<h3 class="white-text"><span class="counter">451</span></h3>
<span class="white-text">Happy clients</span>
</div>
</div>
<!-- /number -->
<!-- number -->
<div class="col-sm-3 col-xs-6">
<div class="number">
<i class="fa fa-trophy"></i>
<h3 class="white-text"><span class="counter">12</span></h3>
<span class="white-text">Awards won</span>
</div>
</div>
<!-- /number -->
<!-- number -->
<div class="col-sm-3 col-xs-6">
<div class="number">
<i class="fa fa-coffee"></i>
<h3 class="white-text"><span class="counter">154</span>K</h3>
<span class="white-text">Cups of Coffee</span>
</div>
</div>
<!-- /number -->
<!-- number -->
<div class="col-sm-3 col-xs-6">
<div class="number">
<i class="fa fa-file"></i>
<h3 class="white-text"><span class="counter">45</span></h3>
<span class="white-text">Projects completed</span>
</div>
</div>
<!-- /number -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Numbers -->
<!-- Pricing -->
<div id="pricing" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Pricing Table</h2>
</div>
<!-- /Section header -->
<!-- pricing -->
<div class="col-sm-4">
<div class="pricing">
<div class="price-head">
<span class="price-title">Basic plan</span>
<div class="price">
<h3>$9<span class="duration">/ month</span></h3>
</div>
</div>
<ul class="price-content">
<li>
<p>1GB Disk Space</p>
</li>
<li>
<p>100 Email Account</p>
</li>
<li>
<p>24/24 Support</p>
</li>
</ul>
<div class="price-btn">
<button class="outline-btn">Purchase now</button>
</div>
</div>
</div>
<!-- /pricing -->
<!-- pricing -->
<div class="col-sm-4">
<div class="pricing">
<div class="price-head">
<span class="price-title">Silver plan</span>
<div class="price">
<h3>$19<span class="duration">/ month</span></h3>
</div>
</div>
<ul class="price-content">
<li>
<p>1GB Disk Space</p>
</li>
<li>
<p>100 Email Account</p>
</li>
<li>
<p>24/24 Support</p>
</li>
</ul>
<div class="price-btn">
<button class="outline-btn">Purchase now</button>
</div>
</div>
</div>
<!-- /pricing -->
<!-- pricing -->
<div class="col-sm-4">
<div class="pricing">
<div class="price-head">
<span class="price-title">Gold plan</span>
<div class="price">
<h3>$39<span class="duration">/ month</span></h3>
</div>
</div>
<ul class="price-content">
<li>
<p>1GB Disk Space</p>
</li>
<li>
<p>100 Email Account</p>
</li>
<li>
<p>24/24 Support</p>
</li>
</ul>
<div class="price-btn">
<button class="outline-btn">Purchase now</button>
</div>
</div>
</div>
<!-- /pricing -->
</div>
<!-- Row -->
</div>
<!-- /Container -->
</div>
<!-- /Pricing -->
<!-- Testimonial -->
<div id="testimonial" class="section md-padding">
<!-- Background Image -->
<div class="bg-img" src='https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/background3.jpg?11898970986288917917';>
<div class="overlay"></div>
</div>
<!-- /Background Image -->
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Testimonial slider -->
<div class="col-md-10 col-md-offset-1">
<div id="testimonial-slider" class="owl-carousel owl-theme">
<!-- testimonial -->
<div class="testimonial">
<div class="testimonial-meta">
<img src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/perso1.jpg?11898970986288917917" alt="">
<h3 class="white-text">John Doe</h3>
<span>Web Designer</span>
</div>
<p class="white-text">Molestie at elementum eu facilisis sed odio. Scelerisque in dictum non consectetur a erat. Aliquam id diam maecenas ultricies mi eget mauris.</p>
</div>
<!-- /testimonial -->
<!-- testimonial -->
<div class="testimonial">
<div class="testimonial-meta">
<img src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/perso2.jpg?11898970986288917917" alt="">
<h3 class="white-text">John Doe</h3>
<span>Web Designer</span>
</div>
<p class="white-text">Molestie at elementum eu facilisis sed odio. Scelerisque in dictum non consectetur a erat. Aliquam id diam maecenas ultricies mi eget mauris.</p>
</div>
<!-- /testimonial -->
</div>
</div>
<!-- /Testimonial slider -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Testimonial -->
<!-- Team -->
<div id="team" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Our Team</h2>
</div>
<!-- /Section header -->
<!-- team -->
<div class="col-sm-4">
<div class="team">
<div class="team-img">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/team1.jpg?11898970986288917917" alt="">
<div class="overlay">
<div class="team-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
<div class="team-content">
<h3>John Doe</h3>
<span>Web Designer</span>
</div>
</div>
</div>
<!-- /team -->
<!-- team -->
<div class="col-sm-4">
<div class="team">
<div class="team-img">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/team2.jpg?11898970986288917917" alt="">
<div class="overlay">
<div class="team-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
<div class="team-content">
<h3>John Doe</h3>
<span>Web Designer</span>
</div>
</div>
</div>
<!-- /team -->
<!-- team -->
<div class="col-sm-4">
<div class="team">
<div class="team-img">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/team3.jpg?11898970986288917917" alt="">
<div class="overlay">
<div class="team-social">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
</div>
</div>
</div>
<div class="team-content">
<h3>John Doe</h3>
<span>Web Designer</span>
</div>
</div>
</div>
<!-- /team -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Team -->
<!-- Blog -->
<div id="blog" class="section md-padding bg-grey">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section header -->
<div class="section-header text-center">
<h2 class="title">Recents news</h2>
</div>
<!-- /Section header -->
<!-- blog -->
<div class="col-md-4">
<div class="blog">
<div class="blog-img">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/blog1.jpg?11898970986288917917" alt="">
</div>
<div class="blog-content">
<ul class="blog-meta">
<li><i class="fa fa-user"></i>John doe</li>
<li><i class="fa fa-clock-o"></i>18 Oct</li>
<li><i class="fa fa-comments"></i>57</li>
</ul>
<h3>Molestie at elementum eu facilisis sed odio</h3>
<p>Nec feugiat nisl pretium fusce id velit ut tortor pretium. Nisl purus in mollis nunc sed. Nunc non blandit massa enim nec.</p>
<a href="blog-single.html">Read more</a>
</div>
</div>
</div>
<!-- /blog -->
<!-- blog -->
<div class="col-md-4">
<div class="blog">
<div class="blog-img">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/blog2.jpg?11898970986288917917" alt="">
</div>
<div class="blog-content">
<ul class="blog-meta">
<li><i class="fa fa-user"></i>John doe</li>
<li><i class="fa fa-clock-o"></i>18 Oct</li>
<li><i class="fa fa-comments"></i>57</li>
</ul>
<h3>Molestie at elementum eu facilisis sed odio</h3>
<p>Nec feugiat nisl pretium fusce id velit ut tortor pretium. Nisl purus in mollis nunc sed. Nunc non blandit massa enim nec.</p>
<a href="blog-single.html">Read more</a>
</div>
</div>
</div>
<!-- /blog -->
<!-- blog -->
<div class="col-md-4">
<div class="blog">
<div class="blog-img">
<img class="img-responsive" src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/blog3.jpg?11898970986288917917" alt="">
</div>
<div class="blog-content">
<ul class="blog-meta">
<li><i class="fa fa-user"></i>John doe</li>
<li><i class="fa fa-clock-o"></i>18 Oct</li>
<li><i class="fa fa-comments"></i>57</li>
</ul>
<h3>Molestie at elementum eu facilisis sed odio</h3>
<p>Nec feugiat nisl pretium fusce id velit ut tortor pretium. Nisl purus in mollis nunc sed. Nunc non blandit massa enim nec.</p>
<a href="blog-single.html">Read more</a>
</div>
</div>
</div>
<!-- /blog -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Blog -->
<!-- Contact -->
<div id="contact" class="section md-padding">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<!-- Section-header -->
<div class="section-header text-center">
<h2 class="title">Get in touch</h2>
</div>
<!-- /Section-header -->
<!-- contact -->
<div class="col-sm-4">
<div class="contact">
<i class="fa fa-phone"></i>
<h3>Phone</h3>
<p>512-421-3940</p>
</div>
</div>
<!-- /contact -->
<!-- contact -->
<div class="col-sm-4">
<div class="contact">
<i class="fa fa-envelope"></i>
<h3>Email</h3>
<p>email@support.com</p>
</div>
</div>
<!-- /contact -->
<!-- contact -->
<div class="col-sm-4">
<div class="contact">
<i class="fa fa-map-marker"></i>
<h3>Address</h3>
<p>1739 Temp Address Drive</p>
</div>
</div>
<!-- /contact -->
<!-- contact form -->
<div class="col-md-8 col-md-offset-2">
<form class="contact-form">
<input type="text" class="input" placeholder="Name">
<input type="email" class="input" placeholder="Email">
<input type="text" class="input" placeholder="Subject">
<textarea class="input" placeholder="Message"></textarea>
<button class="main-btn">Send message</button>
</form>
</div>
<!-- /contact form -->
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</div>
<!-- /Contact -->
<!-- Footer -->
<footer id="footer" class="sm-padding bg-dark">
<!-- Container -->
<div class="container">
<!-- Row -->
<div class="row">
<div class="col-md-12">
<!-- footer logo -->
<div class="footer-logo">
<a href="index.html"><img src="https://cdn.shopify.com/s/files/1/2875/3800/t/2/assets/logo-alt1.png?11898970986288917917" alt="logo"></a>
</div>
<!-- /footer logo -->
<!-- footer follow -->
<ul class="footer-follow">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
</ul>
<!-- /footer follow -->
<!-- footer copyright -->
<div class="footer-copyright">
<p>Copyright © 2017. All Rights Reserved. Designed by <a href="https://colorlib.com" target="_blank">Colorlib</a></p>
</div>
<!-- /footer copyright -->
</div>
</div>
<!-- /Row -->
</div>
<!-- /Container -->
</footer>
<!-- /Footer -->
<!-- Back to top -->
<div id="back-to-top"></div>
<!-- /Back to top -->
<!-- jQuery Plugins -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
Thoughts?
User | RANK |
---|---|
135 | |
91 | |
77 | |
68 | |
43 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022