Give us some feedback, any feedback, we just want feedback!

Your name:

Your email:

Your feedback:

 

Guitar Website Design Concept

Project Description:

Website concept/redesign created for a travel guitar company.

Created: 10 Years ago

Last edited: 8 Years ago

Branch Project

Project name:

Project description:

 

Guitar Website Design Concept
Branch Project
HTML <body>
1
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
2
 
3
<div class="hwrapper">
4
  <div class="header">
5
    <div class="logo">
6
      Lapstick<br />
7
      <small>the ultimate travel guitar</small>
8
    </div>
9
    <div class="nav">
10
      <ul>
11
        <li><a href="#">The Lapstick</a></li>
12
        <li><a href="#">About</a></li>
13
        <li><a href="#">Contact</a></li>
14
        <li><a href="#" style="background-color:#3592dd; padding:9px 20px; color:#FFF;">Buy!</a></li>
15
      </ul>
16
    </div>
17
    <div class="clear"></div>
18
  </div>
19
</div>
20
 
21
<div class="hero">
22
  <div class="cwrapper">
23
    <div class="content" style="padding:0;">
24
      <div class="splash">
25
        <p>The Lapstick travel guitar is a short scale electric guitar that is compact enough to fit into the pocket of an overcoat.</p>
26
        <p style="background-color:#333; opacity:0.6; display:inline; padding:15px 25px; position:relative; top:25px;">Follow us on <a href="#"><i class="fa fa-facebook-square"></i></a> and <a href="#"><i class="fa fa-youtube-square"></i></a></p>
27
      </div>
28
    </div>
29
  </div>
30
</div>
31
 
32
<div class="cwrapper">
33
  <div class="content">
34
    <h2>The LAPSTICK Travel Guitar</h2>
35
    <div>
36
      <img src="http://drive.google.com/uc?export=view&id=0B78Vh0lLDxxJMHdjb21DUHJvdXc" style="width:50%; float:left;" />
37
      <div style="width:50%; float:right; font-size:1.2em;">
38
        <h2 style="background:#333; color:#FFF; padding:25px;">Standard Lapstick</h2>
39
        <p>Natural mahogany body, chrome plated hardware and rosewood fingerboard</p>
40
        <p>The standard Lapstick is equipped with an onboard preamp, 9 volt battery, a direct output and a headphone output with 3 channels:</p>
41
        <p>Clean - Distortion - Overdrive</p>
42
        <p>It comes with a strap, gig bag, headphone jack and Allen keys for adjustment. A Lapstick uses normal ball end electric guitar strings.</p>
43
        <p style="font-size:1.2em;">USD $745 (excluding shipping) <a href="#" style="background-color:#3592dd; padding:7px 20px; color:#FFF; margin-left:20px;">Buy now!</a></p>
44
      </div>
45
      <div class="clear"></div>
46
        <p>
47
          <img src="http://members.jcom.home.ne.jp/guitarlesson/products/guitar_lapstick.jpg" style="height:150px;" />
48
          <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kei-oka/20080809/20080809151053.jpg" style="height:150px;" />
49
          <img src="http://zurlocker.typepad.com/photos/uncategorized/2007/07/21/lapstick.jpg" style="height:150px;" />
50
          <img src="http://4.bp.blogspot.com/-fOd6nCnTHEI/TZQfdax80_I/AAAAAAAAAHc/iEDXM-VdyLg/s1600/4_LapStickBack.JPG" style="height:150px;" />
51
        </p>
52
 
53
      <div class="clear"></div>
54
 
55
      <img src="http://www.lapstick.com/img/travel-guitar-custom6.gif" style="width:50%; float:right;" />
56
      <div style="width:50%; float:left;">
57
        <h2 style="background:#333; color:#FFF; padding:25px;">Customize!</h2>
58
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
59
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
60
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
61
      </div>
62
      <div class="clear"></div>
63
        <p>
64
          <img src="http://members.jcom.home.ne.jp/guitarlesson/products/guitar_lapstick.jpg" style="height:150px;" />
65
          <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kei-oka/20080809/20080809151053.jpg" style="height:150px;" />
66
          <img src="http://zurlocker.typepad.com/photos/uncategorized/2007/07/21/lapstick.jpg" style="height:150px;" />
67
          <img src="http://4.bp.blogspot.com/-fOd6nCnTHEI/TZQfdax80_I/AAAAAAAAAHc/iEDXM-VdyLg/s1600/4_LapStickBack.JPG" style="height:150px;" />
68
          <img src="http://zurlocker.typepad.com/photos/uncategorized/2007/07/21/lapstick.jpg" style="height:150px;" />
69
          <img src="http://4.bp.blogspot.com/-fOd6nCnTHEI/TZQfdax80_I/AAAAAAAAAHc/iEDXM-VdyLg/s1600/4_LapStickBack.JPG" style="height:150px;" />
70
          <img src="http://members.jcom.home.ne.jp/guitarlesson/products/guitar_lapstick.jpg" style="height:150px;" />
71
          <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/k/kei-oka/20080809/20080809151053.jpg" style="height:150px;" />
72
        </p>
73
    </div>
74
    <div class="clear"></div>
75
  </div>
76
 
77
  <div class="content">
78
    <h2>REVIEWS</h2>
79
    <div class="list">
80
      <p>Lapstick Travel Guitar<br /><small>Review by zanymagic</small></p>
81
    </div>
82
    <div class="list">
83
      <p>Lapguitar for playing on the Road<br /><small>By Joost van Klaveren</small></p>
84
    </div>
85
    <div class="clear"></div>
86
    <div class="list">
87
      <p>Lapstick Travel Guitar<br /><small>Review by zanymagic</small></p>
88
    </div>
89
    <div class="list">
90
      <p>Lapguitar for playing on the Road<br /><small>By Joost van Klaveren</small></p>
91
    </div>
92
    <div class="clear"></div>
93
  </div>
94
</div>
95
 
96
<div class="cwrapper alt">
97
  <div class="content">
98
    <p style="text-align:center;">The Lapstick travel guitar is a short scale electric guitar that is compact enough to fit into the pocket of an overcoat. It has a scale length 3/4 of a normal electric guitar and can be tuned a minor third (G) to a fifth (B) higher than normal. It is equipped with a battery-powered preamp which allows the use of headphones for situations that require silent, private practice time.<br /><br />Follow us on <a href="#"><i class="fa fa-facebook-square"></i> Facebook</a> and <a href="#"><i class="fa fa-youtube-square"></i> Youtube</a>.</p>
99
  </div>
100
</div>
101
 
102
<div class="fwrapper">
103
  <div class="footer">
104
    <p>
105
      <a href="#">Lapstick.com</a> © 2014 all rights reserved.<br />
106
      <small><a style="text-decoration:none; font-style:italic; font-family:Georgia; color:#83838f; font-size:0.8em;" href="http://www.onnix.net" target="_blank" title="Seattle Digital Marketing, SEO and Web Design"><i class="fa fa-heart-o"></i> Onnix, Digital Media</a></small>
107
    </p>
108
  </div>
109
</div>
 
CSS <style>
1
@import url(http://fonts.googleapis.com/css?family=Lora);
2
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
3
@import url(http://fonts.googleapis.com/css?family=Lato:300);
4
 
5
* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;} /* So 100% means 100% */
6
body {font:18px 'Lato', sans-serif; color:#FFF; margin:0; background:#222;}
7
a {text-decoration:none; color:#3dcc9e;}
8
a:hover {color:#3592dd;}
9
.clear {clear:both;}
10
 
11
.hero {background:transparent url('http://drive.google.com/uc?export=view&id=0B78Vh0lLDxxJTm1Rd0hrNUsyNlU') no-repeat top center; width:100%; min-height:500px;}
12
  .hero .splash {color:#FFF; font-size:2em; text-align:right; position:absolute; top:140px;}
13
    .hero .splash p {border-bottom:1px solid #AAA; margin:0; padding:25px 0; color:#FFF;}
14
    .hero .splash p:last-child {border-bottom:none; font-size:0.8em; color:#FFF;}
15
    .hero .splash a {color:#3592dd; font-size:1.2em; vertical-align:middle;}
16
      .hero .splash a:hover {color:#3dcc9e;}
17
.hwrapper {}
18
.hwrapper .header {margin:0 auto; max-width:1024px; line-height:50px; height:50px;}
19
.hwrapper .header .logo {font-size:3em; float:left; line-height:0.4em; margin-top:12px; color:#EEE}
20
  .hwrapper .header .logo small {font-size:0.3em; color:#FFF; font-style:italic; margin-left:15px;}
21
.hwrapper .header .nav {float:right;}
22
.hwrapper .header .nav ul {margin:0;}
23
.hwrapper .header .nav ul li {display:inline-block; margin-left:75px;}
24
.hwrapper .header .nav ul li a {color:#CCC; font-size:1.5em;}
25
  .hwrapper .header .nav ul li a:hover, .hwrapper .header .nav ul li:first-child a {color:#3dcc9e;}
26
 
27
.cwrapper {background-color:#FAFAFA; color:#111;}
28
  .cwrapper.alt {background-color:#FFF;}
29
  .cwrapper .content {position:relative; margin:0 auto; padding:25px; max-width:1200px;}
30
  .cwrapper h2 {color:#DDD; font-family:'Lato', sans-serif; padding:25px; margin:0; font-size:2em; text-align:center; background-color:#222;}
31
  .cwrapper .content p {}
32
.cwrapper p {padding:0 25px;}
33
 
34
.list {margin:50px;}
35
  .list img {width:100px; float:left;}
36
  .list p {margin:0; width:45%; font-size:1.8em; float:left; margin-left:25px; text-align:center;}
37
  .list p small {font-size:0.6em; color:#AAA; line-height:1em; display:inline-block;}
38
.fwrapper {background-color:#353535; color:#FFF;}
39
  .fwrapper .footer {text-align:center; padding:10px;}
 
JS <script> (jQuery supported)
1