I've recently tried my hand at coding a website for the first time in quite a while. It took me some doing, but I got everything working the way I want. The site is live, it works well (to my satisfaction, at least) on mobile devices and desktops alike.
However, I can't help but feel that the code is a bit on the bloated side, particularly the CSS. This jsfiddle is a stripped down version of the main page of the site, which has a responsive layout, as you can see. But the means I used to achieve it seem rather hacky, and certainly not as typographically attractive as I'd like. Below is the pared down HTML. Nav and header have been excluded owing to low relevance to the issue:
<body>
<main>
<section>
<h2>Editing</h2>
<span>that amplifies. Your voice matters; good editing is its megaphone, helping your message ring loud and clear. From quick and efficient proofreadings to comprehensive revision, from novels to theses, I've got you covered. </span>
</br>
</br> <a href="services.html#editing"><span>Learn More</span></a>
</section>
<section>
<h2>Writing</h2>
<span>with character. Why not put my years slaving over a hot keyboard to work, so you can focus on what you do best? Whether it's to spec or an open-ended commission, you can expect short turn-arounds and a product of the highest quality.</span>
</br>
</br> <a href="services.html#writing"><span>Learn More</span></a>
</section>
<section>
<h2>Mentoring</h2>
<span>tailored to your needs. I teach writing through a modular curriculum that evolves with my clients. Whether your goals lay in novels, scripts, nonfiction, scientific research or even internal memoranda, I can help you reach the next level.</span>
</br>
</br> <a href="services.html#mentoring"><span>Learn More</span></a>
</section>
<section>
<h2>Consulting</h2>
<span>rooted in experience. Inspiration has struck, and now comes the hard part: fleshing out details. No need to worry about where to begin; with one-on-one creative consultation, I'll help you build a natural, productive brainstorming style.</span>
</br>
</br> <a href="services.html#consulting"><span>Learn More</span></a>
</section>
</br>
</main>
<div></div>
<header> <a name="about"></a>
<h1 class="cntr">About Me</h1>
<h2>I'm guessing you're not here to find out what my favorite food is. No, you came here to find out if I'm qualified. Good call, by the way.</h2>
</header>
<p>I've been writing for as long as I can remember. In 2008, while working on my degree at Harvard University, I began offering my services as a freelance editor and writing instructor. I served as curriculum director for Bermuda's Building Blocks Academy shortly thereafter, and went on to amass experience with a wide range of clients in the years that followed. I served as the founding poetry editor of Peripheral Surveys in 2011, the same year in which I completed my Bachelor's of Creative Writing and Literature.</p>
</br>
<p>I've worked with a diverse clientele: from middle-schoolers to professional researchers, from five continents; and in fields as diverse as medicine, robotics, artificial intelligence, marketing, screenwriting, municipal government, law, and fitness. My main ambition is to write and make music for a living. I have too many hobbies, but I can safely say that cricket is <strong>not</strong> one of them. I mean, come on. Seriously?</p>
</br>
<p>If you think I'm a good fit for your needs, feel free to <a href="mailto:[email protected]">e-mail me</a>!</p>
</br>
<footer> <a href="index.html">Home</a>
<a href="services.html">Services</a>
<a name="about">About</a>
<a href="mailto:[email protected]">Contact</a>
</br> <span>All material © Lander M. Kerbey, 2014</span>
</footer>
</body>
And the CSS, which I'm including in its entirety because I suspect the bloat is widespread.
@import url(http://fonts.googleapis.com/css?family=Signika:600);
@import url(http://fonts.googleapis.com/css?family=Quattrocento+Sans);
. {
font-size:16px;
margin:0;
}
body {
color:#35525c;
background-image:url(bckgrnd.png);
font-family:'Quattrocento Sans';
margin:0;
}
a {
text-decoration:none;
color:#35525c;
}
nav > a {
vertical-align:-3rem;
margin-right:.5rem;
}
h1, h2 {
font-family:'Signika';
}
h1 {
font-size:1.5rem;
}
h2 {
font-size:1.25rem;
}
h3 {
font-size:1.125rem;
}
header, section, p {
max-width:24rem;
margin:0 auto 0 auto;
}
section > h2, h3 {
display:inline-block;
margin-bottom:0;
}
section > a {
display:inline-block;
width:100%;
text-align:center;
font-family:'Signika';
font-size:1.125rem;
color:#b5dba8;
}
a > span {
display:inline-block;
height:1.5rem;
width:8rem;
background:#35525c;
border:solid 1px;
border-radius:.5rem;
}
em {
display:inline-block;
width:100%;
font-size:1.125rem;
text-align:center;
}
footer {
padding-top:1rem;
text-align:center;
background-image:url(trgtpttrnweb.png);
height:4.5rem;
}
footer > a {
font-family:'Signika';
margin:.5rem;
line-height:2rem;
}
.cntr {
width:100%;
text-align:center;
}
div {
height:12rem;
background-image:url(trgtpttrnweb.png);
box-shadow:0px 2px 2px 0px;
}
section > p {
margin:0 0 1rem 0;
}
.type {
font-size:1.5rem;
}
@media screen and (min-width:600px) and (max-width:960px) {
main {
width:90%;
margin:0 0 2rem 7.5%;
}
section {
display:inline-block;
width:45%;
margin:0 1.5rem 1rem 0;
vertical-align:top;
}
}
@media screen and (min-width:600px) {
header {
max-width:34rem;
}
header > h1 {
font-size:2rem;
}
header > h2 {
font-size:1.5rem;
}
h3 {
display:inline;
}
}
@media screen and (min-width:768px) {
.logo {
width:16.66%;
left:1.5rem;
}
}
@media screen and (min-width:880px) {
nav, main, footer, p {
font-size:18px;
}
@media screen and (min-width:961px) {
main {
width:90%;
margin:0 0 2rem 7.5%;
}
section {
display:inline-block;
width:21.5%;
margin:0 1.5rem 1rem 0;
vertical-align:top;
}
}
Any help would be most appreciated.
