I started doing web development about 3 days ago. I'm trying to learn as much as I can in 3 months, no frameworks or drag and drop tools.
My first website was an attempted remake of csszengarden.com, and yes, it looks much worse, but I've learned a lot.
This is what it looks like at 100% zoom.
http://prntscr.com/jocan3
This is what it looks like at 25% zoom.
http://prntscr.com/jocb3z
The image duplicates, and the text in the corner of the image does not.
How do I fix both of these?
My code is a bit messy (I think), so some tips on that would be appreciated on that too.
body {
margin: 0;
font-family: Verdana, sans-serif;
font-size: 100%;
}
h1 {
margin: 0;
}
p {
word-wrap: break-word;
width: 55%;
line-height: 1.8em;
margin: 0;
}
#endofheader2 {
margin-bottom: 4%;
}
.participation {
position: absolute;
margin-top: 64%;
color: black;
position: absolute;
margin-left: 10%;
}
.headbar {
opacity: 0.7;
color: white;
font-family: Bahnschrift, Verdana, sans-serif;
position: absolute;
width: 100%;
height: 32%;
background-color: black;
background-image: url(../img/garden8.jpg);
object-position: 50% 150%;
object-fit: none;
border-bottom: 1px solid rgba(173, 216, 230, 0.7);
}
.header-3 {
font-size: 28px;
margin-bottom: 0.7%;
}
.header-1 {
font-size: 28px;
margin-bottom: 0.7%;
}
#endofheader-1 {
margin-bottom: 2%;
}
.about {
margin-top: 40%;
color: black;
position: absolute;
margin-left: 10%;
}
.header-2 {
font-size: 28px;
margin-bottom: 0.7%;
}
.theroad {
margin-top: 25%;
color: black;
position: absolute;
margin-left: 10%;
}
.benefits {
margin-top: 84%;
color: black;
position: absolute;
margin-left: 10%;
}
.header-4 {
font-size: 28px;
margin-bottom: 0.7%;
}
#csszengarden {
font-size: 150%;
margin-left: 20%;
margin-top: 4%;
margin-bottom: 0;
}
#headbar h1 {
font-size: 3.2em;
text-transform: uppercase;
}
#beautyofcss {
margin-top: 0;
font-family: "Segoe Script", Verdana, sans-serif;
margin-left: 20%;
}
#nonlineargradient {
position: absolute;
width: 35%;
height: 600%;
background-color: rgba(65, 104, 37, 0.1);
margin-left: 66%;
}
.nonlineargradient-2 {
position: absolute;
width: 100%;
height: 70%;
background-color: rgba(110, 196, 176, 0.4);
margin-top: 60%;
}
.requirements {
margin-top: 98%;
color: black;
position: absolute;
margin-left: 10%;
}
.header-5 {
font-size: 28px;
margin-bottom: 0.7%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="headbar">
<h1 id="csszengarden">CSS ZEN GARDEN</h1>
<h2 id="beautyofcss">The Beauty of CSS Design</h2>
</div>
<div id="nonlineargradient"></div>
<div class="theroad">
<p class="header-1">THE ROAD TO ENLIGHTENMENT</p>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.</p>
<br>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WASP, and the major browser creators.</p>
<br>
<p id="endofheader-1">The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
<div class="about">
<p class="header-2">SO WHAT IS THIS ABOUT?</p>
<p>There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The
HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.</p>
<br>
<p id="endofheader-2">CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to
create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation">
<p class="header-3">PARTICIPATION</p>
<p>Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource
Guide for advanced tutorials and tips on working with CSS.</p>
<br>
<p>You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<br>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your CSS file to a web server under your control. Send us a link to an archive of that file and
all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits">
<p class="header-4">BENEFITS</p>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing CSS really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow,
and gallery of future techniques we can all look forward to.</p>
</div>
<div class="nonlineargradient-2"></div>
<div class="requirements">
<p class="header-5">REQUIREMENTS</p>
<p>Where possible, we would like to see mostly CSS 1 & 2 usage. CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge
tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.</p>
<br>
<p>Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these
days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android
browsers (run by over 90% of the population).</p>
<br>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related
design.
</p>
<br>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this
site so that others may learn from your work.</p>
</div>
</html>
use the background-repeat property on your headbar and set it to no-repeat
.headbar {
background-repeat: no-repeat;
}
Related
I'm trying to center my paragraphs, but having the worst time of trying to do it:
.centerLoginForm {
display: flex;
justify-content: center;
}
.mainContent {
position: relative;
color: white;
width: 60%;
padding: 1.5% 2.5% 0 2.5%;
margin-top: 5%;
background-color: black;
border-radius: 5% 5% 5% 5%;
}
.underHead,
.underHead p {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
.underHead {
width: 70%;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
<div class='centerLoginForm'>
<section class='mainContent'>
<h1>Welcome to the BYU Idaho Radio Intranet!</h1>
<div class='underHead'>
<p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
only with fewer connected computers.</p>
<p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>
<p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
</div>
</section>
</div>
As you can see, the text inside of the <p> tags is is following it's natural position, instead of following what I have in my class .underHead. I've tried text-align, content-align, justify-content, and I just can't figure out a way to center that content.
I think this is what you are looking to do:
.centerLoginForm {
display: flex;
justify-content: center;
}
.mainContent {
position: relative;
color: white;
width: 60%;
padding: 1.5% 2.5% 0 2.5%;
margin-top: 5%;
background-color: black;
border-radius: 5% 5% 5% 5%;
}
.underHead {
display: block;
margin: auto;
width: 70%;
text-align: center;
}
<div class='centerLoginForm'>
<section class='mainContent'>
<h1>Welcome to the BYU Idaho Radio Intranet!</h1>
<div class='underHead'>
<p>Computers and computer networks are a funny thing. We interact with them mostly through the internet, which is just a whole bunch of interconnected computers around the world. Well this is an <i>intranet</i>: a local network just like the internet,
only with fewer connected computers.</p>
<p>The purpose of this intranet is to guide through troubleshooting, monitoring critical systems, and station documentation. This site is easy to navigate and you should find all the things you are looking for just by following the navigation links.</p>
<p>This was built to be a living, breathing application. Some dude originally built this, but he welcomes support, ideas, and if somebody wanted to chip in on developing, he would love that too! So please, if you have ideas, thoughts, or skills, share
them! Engineering unfortunately is having fewer and fewer people enter into its field, and needs as many bright minds as it can take and you have a bright mind!</p>
</div>
</section>
</div>
I am trying to replicate this design http://www.csszengarden.com/217/ for practice purposes.
I've got almost everything right, except that the height of my body is larger than the content it contains.
this is the code
*{
list-style: none;
font-family: 'tablet-gothic-thin', sans-serif;
}*
div {
display: block;
}
html {
padding: 5%;
background-color: #daede2;
}
body {
margin: 0;
padding: 0;
background-color: #77c4d3;
display: block;
}
.page-wrapper {
margin: 0;
padding: 0;
height: auto;
box-sizing: border-box;
position: relative;
z-index: 2;
display: block;
}
.sidebar {
background: rgba(246,247,146,0.9);
position: absolute;
top: 120px;
right: 0px;
width: 30%;
padding: 1%;
z-index: 2;
display: block;
}
.preamble {
background: rgba(255, 255, 255,0.9);
position: relative;
width: 50%;
top: 100px;
left: -70px;
margin: 20px 0;
line-height: 25px;
padding-left: 120px;
padding-top: 40px;
padding-bottom: 40px;
padding-right: 40px;
}
.preamble h3 {
font-size: 40px;
margin-left: 0px;
margin-bottom: 20px;
font-weight: lighter;
}
.preamble p {
margin-top: 0;
padding: 1%;
font-family: sans-serif;
font-size: 17px;
line-height: 25px;
margin: 0.5%;
color: black;
font-weight: lighter;
}
header {
margin: 20px;
}
header h1 {
background-color: #ea2e49;
padding: 15px 15px;
text-align: center;
text-transform: uppercase;
width: 280.05px;
position: relative;
top: 50px;
left: 30px;
font-size: 30px;
font-family: 'tablet-gothic', sans-serif;
font-style: normal;
font-weight: 200;
color: white;
}
header h2 {
font-family: 'Coda Caption', sans-serif;
color: white;
letter-spacing: -7px;
font-size: 110px;
width: 700px;
line-height: 1;
position: relative;
top: 0px;
left: 30px;
}
.summary {
width: 50%;
position: relative;
}
.summary p {
position: relative;
left: 60px;
letter-spacing: 2px;
text-transform: uppercase;
color: white;
font-family: 'tablet-gothic', sans-serif;
font-size: 18px;
}
.summary p:last-child {
border-top: 1px solid #ea2e49;
margin-top: 20px;
padding-top: 25px;
}
.summary p:last-child a {
}
a {
text-decoration: none;
color: white;
border-bottom: 1px solid rgba(0,0,0,0.2);
transition: border-color 0.2s ease-in-out;
}
a:hover {
border-bottom: 1px solid #ea2e49;
}
.select {
font-size: 40px;
font-weight: lighter;
margin-top: 50px;
margin-left: 33px;
margin-bottom: 10px;
text-align: inherit;
}
.design-selection ul {
text-align: inherit;
margin-top: 5px;
margin-left: -5px;
padding-right: 30px;
}
.design-selection li {
font-size: 17px;
line-height: 35px;
color: rgba(0,0,0,0.2);
}
.design-selection li a {
color: black;
}
.archives {
font-size: 40px;
font-weight: lighter;
margin-top: 80px;
margin-left: 33px;
margin-bottom: 10px;
text-align: inherit;
}
.design-archives ul {
text-align: inherit;
margin-top: 5px;
margin-left: -5px;
padding-right: 30px;
}
.design-archives li {
font-size: 17px;
line-height: 35px;
color: rgba(0,0,0,0.2);
}
.design-archives li a {
color: black;
}
.resources {
font-size: 40px;
font-weight: lighter;
margin-top: 80px;
margin-left: 33px;
margin-bottom: 10px;
text-align: inherit;
}
.zen-resources ul {
text-align: inherit;
margin-top: 5px;
margin-left: -5px;
padding-right: 30px;
margin-bottom: 50px;
}
.zen-resources li {
font-size: 17px;
line-height: 35px;
color: rgba(0,0,0,0.2);
}
.zen-resources li a {
color: black;
}
.extra1 {
position: fixed;
z-index: 1;
width: 30%;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(51,55,69,0.9);
}
.main-supporting {
display: block;
position: relative;
padding: 1%;
}
.explanation {
display: block;
position: relative;
top: 253px;
left: 80px;
width: 39%;
padding: 1%;
}
.explanation h3 {
font-family: sans-serif;
font-weight: lighter;
color: white;
margin-left: 5px;
font-size: 30px;
}
.explanation p {
padding: 1%;
font-family: sans-serif;
font-size: 17px;
line-height: 25px;
margin: 0.5%;
color: white;
font-weight: lighter;
}
.participation {
display: block;
position: relative;
top: -265px;
left: 600px;
width: 35%;
padding: 5%;
background: rgba(234,46,73,0.9);
z-index: 3;
}
.participation p {
margin-top: 0;
padding: 1%;
color: white;
line-height: 25px;
font-family: sans-serif;
font-size: 17px;
}
.participation a:hover {
border-bottom: 1px solid white;
}
.participation h3 {
font-family: sans-serif;
font-size: 30px;
color: white;
margin left: 20px;
margin-bottom: 10px;
font-weight: lighter;
}
.benefits {
display: block;
position: relative;
width: 15%;
background: rgba(255,255,255,0.9);
padding: 5%;
top: -150px;
left: 78px;
}
.benefits p {
font-family: sans-serif;
line-height: 25px;
font-weight: lighter;
font-size: 17px;
}
.benefits h3 {
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
}
.requirements {
display: block;
background: rgba(255,255,255,0.9);
width: 59%;
position: relative;
top: -833px;
left: 381px;
padding: 2%;
}
.requirements p {
font-family: sans-serif;
line-height: 25px;
font-size: 17px;
}
.requirements p:first-child {
margin: 50px 50px 20px 50px;
}
.requirements p:nth-child(2) {
margin: 0px 50px 20px 50px;
}
.requirements p:nth-child(3) {
margin: 0px 50px 20px 50px;
}
.requirements p:nth-child(4) {
margin: 0px 50px 20px 50px;
}
.requirements p:nth-child(5) {
margin: 0px 50px 20px 50px;
padding-bottom: 3%;
}
.requirements p:nth-child(6) {
margin: 0px 50px 40px 50px;
padding-top: 5%;
border-top: 1px solid #ea2e49;
text-transform: uppercase;
}
.requirements h3 {
margin: 50px 50px 10px 50px;
font-family: sans-serif;
font-size: 25px;
font-weight: lighter;
}
.requirements a {
color: black;
}
footer {
position: relative;
display: block;
top: -834.5px;
left: 60px;
background: rgba(246,247,146,0.9);
width: 45%;
padding: 1.5%;
margin-bottom: 0px;
}
footer a {
color: black;
margin-left: 3%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Zen Garden: The Beauty of CSS Design</title>
<link rel="stylesheet" media="screen" href="style.css?v=8may2013">
<link rel="stylesheet" type="text/css" href="design.css">
<link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.csszengarden.com/zengarden.xml">
<link href="https://fonts.googleapis.com/css?family=Coda+Caption:800" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Dave Shea">
<meta name="description" content="A demonstration of what can be accomplished visually through CSS-based design.">
<meta name="robots" content="all">
<!--[if lt IE 9]>
<script src="script/html5shiv.js"></script>
<![endif]-->
</head>
<!--
View source is a feature, not a bug. Thanks for your curiosity and
interest in participating!
Here are the submission guidelines for the new and improved csszengarden.com:
- CSS3? Of course! Prefix for ALL browsers where necessary.
- go responsive; test your layout at multiple screen sizes.
- your browser testing baseline: IE9+, recent Chrome/Firefox/Safari, and iOS/Android
- Graceful degradation is acceptable, and in fact highly encouraged.
- use classes for styling. Don't use ids.
- web fonts are cool, just make sure you have a license to share the files. Hosted
services that are applied via the CSS file (ie. Google Fonts) will work fine, but
most that require custom HTML won't. TypeKit is supported, see the readme on this
page for usage instructions: https://github.com/mezzoblue/csszengarden.com/
And a few tips on building your CSS file:
- use :first-child, :last-child and :nth-child to get at non-classed elements
- use ::before and ::after to create pseudo-elements for extra styling
- use multiple background images to apply as many as you need to any element
- use the Kellum Method for image replacement, if still needed.
- don't rely on the extra divs at the bottom. Use ::before and ::after instead.
-->
<body id="css-zen-garden">
<div class="page-wrapper">
<section class="intro" id="zen-intro">
<header role="banner">
<h1>CSS Zen Garden</h1>
<h2>The Beauty of <abbr title="Cascading Style Sheets">CSS</abbr> Design</h2>
</header>
<div class="summary" id="zen-summary" role="article">
<p>A demonstration of what can be accomplished through <abbr title="Cascading Style Sheets">CSS</abbr>-based design. Select any style sheet from the list to load it into this page.</p>
<p>Download the example html file and css file</p>
</div>
<div class="preamble" id="zen-preamble" role="article">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible <abbr title="Document Object Model">DOM</abbr>s, broken <abbr title="Cascading Style Sheets">CSS</abbr> support, and abandoned browsers.</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the <abbr title="World Wide Web Consortium">W3C</abbr>, <abbr title="Web Standards Project">WaSP</abbr>, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
</section>
<div class="main supporting" id="zen-supporting" role="main">
<div class="explanation" id="zen-explanation" role="article">
<h3>So What is This About?</h3>
<p>There is a continuing need to show the power of <abbr title="Cascading Style Sheets">CSS</abbr>. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The <abbr title="HyperText Markup Language">HTML</abbr> remains the same, the only thing that has changed is the external <abbr title="Cascading Style Sheets">CSS</abbr> file. Yes, really.</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr> allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<p>You may modify the style sheet in any way you wish, but not the <abbr title="HyperText Markup Language">HTML</abbr>. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your <abbr title="Cascading Style Sheets">CSS</abbr> file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits" id="zen-benefits" role="article">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing <abbr title="Cascading Style Sheets">CSS</abbr> really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>
<div class="requirements" id="zen-requirements" role="article">
<h3>Requirements</h3>
<p>Where possible, we would like to see mostly <abbr title="Cascading Style Sheets, levels 1 and 2">CSS 1 & 2</abbr> usage. <abbr title="Cascading Style Sheets, levels 3 and 4">CSS 3 & 4</abbr> should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical <abbr title="Cascading Style Sheets">CSS</abbr> and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your <abbr title="Cascading Style Sheets">CSS</abbr> validates.</p>
<p>Luckily, designing this way shows how well various browsers have implemented <abbr title="Cascading Style Sheets">CSS</abbr> by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related design.</p>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your <abbr title="Cascading Style Sheets">CSS</abbr> under a Creative Commons license identical to the one on this site so that others may learn from your work.</p>
<p role="contentinfo">By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.</p>
</div>
<footer>
HTML
CSS
CC
A11y
GH
</footer>
</div>
<aside class="sidebar" role="complementary">
<div class="wrapper">
<div class="design-selection" id="design-selection">
<h3 class="select">Select a Design:</h3>
<nav role="navigation">
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li> <li>
Garments by Dan Mall
</li> <li>
Steel by Steffen Knoeller
</li> <li>
Apothecary by Trent Walton
</li> <li>
Screen Filler by Elliot Jay Stocks
</li> <li>
Fountain Kiss by Jeremy Carlson
</li> <li>
A Robot Named Jimmy by meltmedia
</li> <li>
Verde Moderna by Dave Shea
</li> </ul>
</nav>
</div>
<div class="design-archives" id="design-archives">
<h3 class="archives">Archives:</h3>
<nav role="navigation">
<ul>
<li class="next">
<a href="/214/page1">
Next Designs <span class="indicator">›</span>
</a>
</li>
<li class="viewall">
<a href="http://www.mezzoblue.com/zengarden/alldesigns/" title="View every submission to the Zen Garden.">
View All Designs </a>
</li>
</ul>
</nav>
</div>
<div class="zen-resources" id="zen-resources">
<h3 class="resources">Resources:</h3>
<ul>
<li class="view-css">
<a href="style.css" title="View the source CSS file of the currently-viewed design.">
View This Design’s <abbr title="Cascading Style Sheets">CSS</abbr> </a>
</li>
<li class="css-resources">
<a href="http://www.mezzoblue.com/zengarden/resources/" title="Links to great sites with information on using CSS.">
<abbr title="Cascading Style Sheets">CSS</abbr> Resources </a>
</li>
<li class="zen-faq">
<a href="http://www.mezzoblue.com/zengarden/faq/" title="A list of Frequently Asked Questions about the Zen Garden.">
<abbr title="Frequently Asked Questions">FAQ</abbr> </a>
</li>
<li class="zen-submit">
<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
Submit a Design </a>
</li>
<li class="zen-translations">
<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page.">
Translations </a>
</li>
</ul>
</div>
</div>
</aside>
</div>
<!--
These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
These days we have full ::before and ::after support, favour using those instead.
These only remain for historical design compatibility. They might go away one day.
-->
<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>
</body>
</html>
As you can see in the code snippet, there is extra space after the contents.
I need help with this.
Thank You.
There are postives and negatives when using relative position in this layout..
Look at the shot below
your div with id zen-requirements has been relative positioned in the layout and there is top: -833px;. take out this top and you will notice that the initial position of the div takes up that space you are trying to get rid of (not forgetting a little bit of padding somewhere).....
hmmmm....Sticking to this layout..I believe you will have to adjust the size of your div that has class page-wrapper (add an id to avoid other classes being affected)
Add these rules to id..
height: 3000px;
overflow:hidden
A Javascript approach to find computed position of last yellow footer relative to window top and auto adjust the window size might work...
I think it's because of the relative positioning of .requirements block.
See: position:relative leaves an empty space
If you add a fixed size to your container, it can fix the issue, but in general your design is different from the sample you shown. Try this:
#zen-supporting {
height: 1750px;
}
html{ padding: 5%} is the reason. It makes extra space in the bottom too.
You can set it as: html{padding: 5% 5% 0 5%}
Edit
If you, also, mean the extra space in blue color under the navigation contains, HTML, CSS, ... you may also adjust the padding of div.main:
div.main {
padding: 5% 5% 0 5%;
}
to be like the following screen shot:
I am attempting to create a business webpage with a two column design. I am trying to have an about us section on one side with some bullets underneath of it. It looks good in the browser in full window view, but when I resize the browser window, my text gets all jumbled and stacked over itself. I am using divs and a container, along with % to place things, but nothing I have tried is working. Any ideas?
Here is the html:
<div class = "aboutuscontainer">
<div class = "abouthead"><h2>About us:</h2></div>
<div class = "aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
<div class = "qualityhead"><h4>Quality:</h4></div>
<div class = "qualityinfo"><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
<br>
<div class = "valuehead"><h4>Value:</h4></div>
<div class = "valueinfo"><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div>
<br>
<div class = "servicehead"><h4>Service:</h4></div>
<div class = "serviceinfo"><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
</div>
And here is the css:
.aboutuscontainer {
position: relative;
top: 55px;
left: 0%;
border-right: dotted yellow 1px;
max-width: 51.5%;
height: 100%;
}
.abouthead {
position: absolute;
color: yellow;
}
.aboutinfo {
position: absolute;
color: white;
top: 90%;
left: 0px;
line-height: 1.5em;
}
.qualityhead {
position: absolute;
color: yellow;
top: 370%;
left: 2%;
}
.qualityinfo {
position: absolute;
color: white;
top: 370%;
left: 13%;
line-height: 1.5em;
}
.valuehead {
position: absolute;
color: yellow;
top: 570%;
left: 2%;
}
.valueinfo {
position: absolute;
color: white;
top: 570%;
left: 13%;
line-height: 1.5em;
}
.servicehead {
position: absolute;
color: yellow;
top: 790%;
left: 2%;
}
.serviceinfo {
position: absolute;
color: white;
top: 790%;
left: 13%;
line-height: 1.5em;
}
There was enough changes / suggestions that I thought it was worthwhile to create a fiddle for you: https://jsfiddle.net/aaenyenq/
Please note the major revisions to the code:
Rather than absolute, use relative positioning.
Rather than left / top, allow things to flow, and use some widths.
Get the desired left / right arrangement with a method such as display: inline-block or float: left (I tend to prefer display: inline-block).
Simplify the code. Eliminate unnecessary divs (such as around the h2 and h4 elements), and use container classes and more generic markup.
Removed <br> tags. You should never use them for spacing. Use margins / padding instead.
Simplified / revised HTML:
<div class = "aboutuscontainer">
<h2>About us:</h2>
<div class="aboutinfo"><p>Codes' Decoding is an independant web design company with the consumer's best interests in mind. Created in 2015, we strive to provide only the best in customer satisfaction and web reliability. Since our company is independant, we have the ability to interact directly with the client to offer them the most enjoyable experience possible.</p></div>
<div class="listitem">
<h4>Quality:</h4>
<div><p>Here at Codes' Decoding we offer only the highest quality in website design. If you aren't happy, you don't pay. We guarantee you'll love your new site, or your money back!</p></div>
</div>
<div class="listitem">
<h4>Value:</h4>
<div><p>When you work with Codes' Decoding you can be assured that you are receiving the best value on the market. Staying independant keeps us in control of our rates and allows us to keep them low for our valued customers.</p></div>
</div>
<div class="listitem">
<h4>Service:</h4>
<div><p>Our team at Codes' Decoding is 100% dedicated to making sure your experience is perfect. We are there to answer any questions that you may have and our knowledgable team will ensure you have a smooth experience.</p></div>
</div>
</div>
Simplified CSS:
.aboutuscontainer {
position: relative;
margin-top: 55px;
left: 0%;
border-right: dotted yellow 1px;
max-width: 51.5%;
height: 100%;
}
.aboutuscontainer h2 {
color: yellow;
}
.aboutinfo {
color: white;
line-height: 1.5em;
}
.listitem h4 {
display: inline-block;
vertical-align: top;
width: 20%;
color: yellow;
}
.listitem div {
display: inline-block;
vertical-align: top;
width: 78%;
color: white;
}
NOTE: IF you want different spacing for different sections, you can easily just add a class to the listitem div element, then address the different spacing like so:
(Assuming you added a class "service" - <div class="listitem service">):
.listitem.service h4 {
width: 25%;
}
.listitem.service div {
width: 73%;
}
Try not to use position absolute. I fixed some css for you here. I used float left, and % on the width.
https://jsfiddle.net/gefp9bnd/
.qualityhead {
color: yellow;
width: 30%;
float:left;
}
Hope that helps.
I'm just learning/practicing, so any help would be SUPER appreciated. Also, if you find other errors or inefficiencies while looking, I'd love to hear about it.
I have four layers.
.body
.main
.main-side
.sidebar
This is essentially what I'm trying to recreate , and everything is working fine other than the third layer, or in the case of the example, the navy blue bar extending vertical on the right side. I can get it to go to the second layer (right above the main background) or cover up everything (including the sidebar), but I can't get it between layer two and four (in the example, the light blue inner box and the smaller, yellow side box.) Thanks in advance!
Here is the HTML and the CSS.
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./style.css"/>
<title>CSS Zen Garden</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div class="main-side"></div>
<div class="main">
<h1 class="redbox">CSS Zen Garden</h1>
<h2>The Beauty of CSS Design</h2>
<div class="sub-heading">
<p class="top>">A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.</p>
<hr>
<p class="bottom">Download the example HTML file and CSS file
</div>
<div class="enlightenment">
<h3>The Road to Enlightenment</h3>
<p>Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers</p>
<p>We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.</p>
<p>The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.</p>
</div>
<div class="about">
<h3>So What is This About?</h3>
<p>There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.</p>
<p>CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be, once the reins are placed in the hands of those able to create beauty from structure. Designers and coders alike have contributed to the beauty of the web; we can always push it further.</p>
</div>
<div class="participation">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong CSS skills are necessary too, but the example files are commented well enough that even CSS novices can use them as starting points. Please see the CSS Resource Guide for advanced tutorials and tips on working with CSS.</p>
<p>You may modify the style sheet in any way you wish, but not the HTML. This may seem daunting at first if you’ve never worked this way before, but follow the listed links to learn more, and use the sample files as a guide.</p>
<p>Download the sample HTML and CSS to work on a copy locally. Once you have completed your masterpiece (and please, don’t submit half-finished work) upload your CSS file to a web server under your control. Send us a link to an archive of that file and all associated assets, and if we choose to use it we will download it and place it on our server.</p>
</div>
<div class="benefits">
<h3>Benefits</h3>
<p>Why participate? For recognition, inspiration, and a resource we can all refer to showing people how amazing CSS really can be. This site serves as equal parts inspiration for those working on the web today, learning tool for those who will be tomorrow, and gallery of future techniques we can all look forward to.</p>
</div>
<div class="sidebar">
<h3>Select a Design:</h3>
<ul>
<li>
Mid Century Modern by Andrew Lohman
</li>
<li>
Garments by Dan Mall
</li>
<li>
Steel by Steffen Knoeller
</li>
<li>
Apothecary by Trent Walton
</li>
<li>
Screen Filler by Elliot Jay Stocks
</li>
<li>
Fountain Kiss by Jeremy Carlson
</li>
<li>
A Robot Named Jimmy by meltmedia
</li>
<li>
Verde Moderna by Dave Shea
</li>
</ul>
<h3>Archives:</h3>
<ul>
<li>
Next Designs <span class="indicator">›</span>
</li>
<li>
View All Designs
</li>
</ul>
<h3>Resources:</h3>
<ul>
<li>
View This Design’s CSS
</li>
<li>
CSS Resources
</li>
<li>
FAQ
</li>
<li>
<a href="http://www.mezzoblue.com/zengarden/submit/" title="Send in your own CSS file.">
Submit a Design</a>
</li>
<li>
Translations
</li>
</ul>
</div>
<div class="requirements">
<h3>Requirements</h3>
<p>Where possible, we would like to see mostly CSS 1 & 2 usage. CSS 3 & 4 should be limited to widely-supported elements only, or strong fallbacks should be provided. The CSS Zen Garden is about functional, practical CSS and not the latest bleeding-edge tricks viewable by 2% of the browsing public. The only real requirement we have is that your CSS validates.</p>
<p>Luckily, designing this way shows how well various browsers have implemented CSS by now. When sticking to the guidelines you should see fairly consistent results across most modern browsers. Due to the sheer number of user agents on the web these days — especially when you factor in mobile — pixel-perfect layouts may not be possible across every platform. That’s okay, but do test in as many as you can. Your design should work in at least IE9+ and the latest Chrome, Firefox, iOS and Android browsers (run by over 90% of the population).</p>
<p>We ask that you submit original artwork. Please respect copyright laws. Please keep objectionable material to a minimum, and try to incorporate unique and interesting visual themes to your work. We’re well past the point of needing another garden-related design.</p>
<p>This is a learning exercise as well as a demonstration. You retain full copyright on your graphics (with limited exceptions, see submission guidelines), but we ask you release your CSS under a Creative Commons license identical to the one on this site so that others may learn from your work.</p>
<hr>
<div class="author">
<p>By Dave Shea. Bandwidth graciously donated by mediatemple. Now available: Zen Garden, the book.</p>
</author>
</div>
<footer>
HTML
CSS
CC
A11y
GH
</footer>
</div>
</body>
</html>
body {
font-family: 'Source Sans Pro';
line-height: 120%;
font-size: 16px;
font-weight: 400;
color: #333;
background: #daede2;
z-index: 1;
width: 90%;
vertical-align: center;
}
p {
font-size: 20px;
line-height: 140%;
padding-left: 50px;
}
h1 {
font-weight: 300;
text-transform: uppercase;
font-size: 30px;
color: white;
margin-bottom: -25px;
}
h2 {
font-weight: 900;
font-size: 130px;
line-height: 100%;
color: white;
letter-spacing: -.025em;
line-height: 1em;
width: 65%;
margin-left: 50px;
position: relative;
}
.sub-heading {
text-transform: uppercase;
width: 60%;
margin: 0 0 50px 14px;
position: relative;
color: white;
letter-spacing: .07em;
font-size: 18px;
}
h3 {
font-size: 30px;
font-weight: 400;
padding-left: 50px;
}
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 1020px;
height: 2000px;
top: -200px;
width: 30%;
z-index: 1;
}
.redbox {
background: #df3c56;
position: relative;
top: 50px;
left: 50px;
padding: 25px;
width: 224px;
text-align: center;
}
.enlightenment {
background: #f2f9fb;
padding: 50px 50px 50px 0;
width: 58%;
position: relative;
top: 40px;
margin-bottom: 150px;
}
.about {
color: white;
width: 45%;
margin-bottom: 100px;
margin-top: 250px;
}
.about h3 {
color: white;
}
.benefits {
background: #f2f9fb;
position: relative;
top: 225px;
float: left;
padding: 50px;
width: 25%;
left: 50px;
}
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: 0px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
.sidebar a, h3 {
color: #333;
}
.sidebar h3 {
font-weight: 400;
padding-left: 40px;
margin-bottom: -20px;
}
.sidebar ul {
list-style-type: none;
}
.participation {
background: #df3c56;
float: right;
width: 45%;
color: white;
position: relative;
top: -618px;
right: 80px;
padding-top: 50px;
}
.participation p {
padding: 0 50px 0 50px;
}
.participation h3 {
color: white;
}
.requirements {
background: #f2f9fb;
position: relative;
float: right;
top: -625px;
width: 57%;
padding: 50px;
}
.requirements a {
color: #333;
text-transform: uppercase;
}
.author {
text-transform: uppercase;
}
footer {
background: #e9f198;
position: relative;
top: 119px;
padding: 25px;
font-size: 22px;
word-spacing: 10px;
color: #333;
left: -440px;
width: 80%;
}
a {
text-decoration: none;
color: white;
border-bottom: solid 1px #999;
padding-bottom: 2px;
}
hr {
border: 0;
height: 0;
border-top: 1px solid #df3c56;
width: 93%;
margin: 50px 0 50px 50px;
}
All you need to do is move .main-side into .main so you can add the right z-index to it to make it overlap like the example you posted and adjust the values:
.main-side {
background: rgba(58,68,83, .8); //convert to rgba so you can fade the background like the example
position: absolute;
right: -150px; //update - change to right instead
height: 2400px; //update
top: -200px;
width: 30%;
z-index: 1;
}
I also converted some of your colors to rgba to give it that transparent look.
FIDDLE
I'm not quite sure what you're asking, but here's a few things that might help. First, to achieve what they are with the yellow menu, you should use something like this:
.sidebar {
background: #e9f198;
position: absolute;
top: 70px;
right: -100px;
width: 25%;
font-size: 18px;
line-height: 200%;
letter-spacing: -.01em;
padding-right: 40px;
z-index: 4;
}
You'll see that the sidebar is now placed more like theirs.
And with these two changes, does it get closer to what you're looking for?
.main {
background: #77c4d3;
position: relative;
top: 50px;
left: 50px;
z-index: 2;
height: 5000px;
}
.main-side {
background: #3a4453;
position: absolute;
left: 900px;
height: 2000px;
top: 70px;
width: 30%;
z-index: 1;
}
I've also made a JSFIDDLE, which you should always do in the future for questions like this!
I'm having an issue with my main menu bar on my website. Just to be clear i am referring to the menu bar on my website that has links such as "About" and "home". I want this menu bar to be in the centre (which it is on my computer which has a 15" screen). However when i look at my website on other computers some which have a a bigger screen, the menu bar is significantly off centre to the right or left and it looks a bit rubbish. How can i standardise the position of my menu bar so it is in the centre regardless of what internet browser or different screen size is being used?
Thanks
Ben
<!DOCTYPE html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="aboutme.css">
<title>It's all about me!</title>
</head>
<body>
<div id="content">
<header>
<div class="grow">
<ul>
<li>Home</li>
<li>About me</li>
<li>What I love</li>
</ul>
</div>
</header>
<h1>About Me</h1>
<img src="ben.jpg" id="ben">
<h2>The Beginning:</h2>
<div id="beginning">
<p>I absolutely love coding ever since I was young. I started finding the fascination with it when I started playing a game called "runescape". When I started playing in 2007, the "botting" community started to grow massively. As a full time gamer, I found this out within that community. During my subscription with the botting client "powerbot", I started to learn JAVA and played around with other people's code. Even though I never became an expert within that language, I managed to design simple scripts which allowed my character to level up on basic skills whilst I was alseep! I loved the problem solving! I absolutely loved the community and how everyone worked as a team. However, I soon grew out of it after Runescape's anti-botting software got too advanced and I decided to play normally!
</div>
<h3>SEO and Web Developing:</h3>
<div id="seo">
<p>After finishing my education, I decided not to study a degree as there wasn't anything that I felt suited me at that time. I preferred to take on more of an entrepreneurial career. I decided to join my friend's business "GR Syndicate". Over that following years, I learnt SEO and Web developing. The Web Developing purely consisted of only coding with HTML and CSS and the websites we created were used to sell cosmetic products off. During that time, I built upon my SEO skills and developed them to rank high in Google's SERPS.
</p>
</div>
<h4>The Present</h4>
<div id="present">
<p>After working in GR Syndicate and in customer service, coding was missing from my life. This is when I decided to practice my code by building a website about one of my other passions, dogs. This gave me the opportunity to really understand CSS3 and HTML5. Even though I find CSS3 hard as there are a lot of interactive elements involved, it is my favorite part of CSS. I absolutely love the animations I see on "CSS Deck" being created the whole time. This gave me the motivation to add a couple of CSS3 elements in this website, and in my other website, such as a hero that consisted of changing pictures. After learning about more code from producing the dog website, I realised how much I loved doing it. This is when I started looking at courses, and found General Assembly. I went to the open day and I was very impressed, and I hope you are too with this website! </p>
</div>
</body>
</html>
------------------------CSS in another file------------------------
body {
background-image: url(puppy.jpg);
}
h1 {
font-family: 'Lobster', cursive;
position: absolute;
left: 200px;
text-decoration: underline;
}
#content
{ font-family:'lobster', cursive;
position: absolute;
width: 500px;
font-size: 23px;
top: 80px;
left: 25px;
}
.grow {
position: absolute;
left: 550px;
top: 700px;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
ul {
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
li {
display: inline;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
.grow {
display: inline-block;
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
#box {
width: 485px;
height: 500px;
}
First of all remove position absolute from your element it is not nessesary to give always position:absolute to make a div center.
Then change the style as follows
#content {
font-family:'lobster', cursive;
width: 500px;
font-size: 23px;
margin:auto;
}
DEMO
UPDATED
ul{
list-style-type:none;
width:500px;
position:absolute;
bottom:0;
}
ul li{
display:inline-block;
}
ul li a{
display:block;
color:#000;
text-decoration:none;
}
DEMO
You can achieve what you want if you work out the right values for the positioning of your bar on the screen, however, it'd be difficult to mantain that positioning on different screen geometries. If you really want to position an element at the center-bottom of the screen, then this may help you (example fiddle here):
HTML:
<nav id="Navbar">
<ul id="Buttonbar">
<li>Link</li>
<li>Link #2</li>
</ul>
</nav>
CSS:
#Navbar {
display: block;
overflow: hidden;
width: 100%;
height: 64px;
position: absolute;
bottom: 15px;
}
#Buttonbar {
display: block;
overflow: hidden;
padding: 0px;
width: 400px;
height: 100%;
margin: 0px auto 0px auto;
background: grey;
}
#Buttonbar>li{
display: block;
float: left;
overflow: hidden;
list-style: none;
padding: 0px;
margin: 0px;
}
Notice that I've used the nav element as my holder, giving it a 100% width so it adjusts to any screen/window geometry and then I gave my ul an absolute size (and the background too) so it is always in the middle. Then I just set my nav to be at the botton, holding everything there. Hint: if you want the navbar to always be in the bottom, you can also use the fixed positioning attribute.
Here, I've edited your website to how I believe you want it: http://jsfiddle.net/ctwheels/3rqyk9fm/2/
HTML
<body>
<div id="content">
<h1>About Me</h1>
<h2>The Beginning:</h2>
<div id="beginning">
<p>I absolutely love coding ever since I was young. I started finding the fascination with it when I started playing a game called "runescape". When I started playing in 2007, the "botting" community started to grow massively. As a full time gamer, I found this out within that community. During my subscription with the botting client "powerbot", I started to learn JAVA and played around with other people's code. Even though I never became an expert within that language, I managed to design simple scripts which allowed my character to level up on basic skills whilst I was alseep! I loved the problem solving! I absolutely loved the community and how everyone worked as a team. However, I soon grew out of it after Runescape's anti-botting software got too advanced and I decided to play normally!</p>
</div>
<h3>SEO and Web Developing:</h3>
<div id="seo">
<p>After finishing my education, I decided not to study a degree as there wasn't anything that I felt suited me at that time. I preferred to take on more of an entrepreneurial career. I decided to join my friend's business "GR Syndicate". Over that following years, I learnt SEO and Web developing. The Web Developing purely consisted of only coding with HTML and CSS and the websites we created were used to sell cosmetic products off. During that time, I built upon my SEO skills and developed them to rank high in Google's SERPS.</p>
</div>
<h4>The Present</h4>
<div id="present">
<p>After working in GR Syndicate and in customer service, coding was missing from my life. This is when I decided to practice my code by building a website about one of my other passions, dogs. This gave me the opportunity to really understand CSS3 and HTML5. Even though I find CSS3 hard as there are a lot of interactive elements involved, it is my favorite part of CSS. I absolutely love the animations I see on "CSS Deck" being created the whole time. This gave me the motivation to add a couple of CSS3 elements in this website, and in my other website, such as a hero that consisted of changing pictures. After learning about more code from producing the dog website, I realised how much I loved doing it. This is when I started looking at courses, and found General Assembly. I went to the open day and I was very impressed, and I hope you are too with this website!</p>
</div>
</div>
<div id="mainMenu">
<div class="grow">
<ul>
<li>Home
</li>
<li>About me
</li>
<li>What I love
</li>
</ul>
</div>
</div>
</body>
CSS
body {
font-family:'Lobster', cursive;
color:black;
min-width:500px;
}
#content {
width: 500px;
font-size: 23px;
margin:auto;
position:relative;
}
#content>h1 {
text-align:center;
text-decoration: underline;
}
a {
color: black;
text-decoration: none;
font-weight: bold;
}
#mainMenu ul {
margin:0 auto;
padding: 10px;
background: #dcf3ff;
border-width: 6px;
border-style: solid;
border-color: white;
}
#mainMenu ul>li {
display: inline-block;
padding: 0px 15px 0px 15px;
border-right: 2px solid black;
border-left: 2px solid black;
}
#mainMenu {
left:0;
right:0;
position:absolute;
min-width:500px;
}
#mainMenu>.grow {
position:relative;
width:100%;
text-align:center;
}
.grow {
-webkit-transition-duration: 0.7s;
transition-duration: 0.7s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}