Website Development

In this project, the initial goals were to be a designer, nd the existing problems with the old website, and then to modify it into a better version through brainstorming, visual consideration, and human interaction. Eorts emphasised creativity and inspiration when the work transitioned to web developing. The website project was required to deliver a high-quality experience. Web development is a complex eld in and of itself; it was necessary to invest time and eort into learning markup languages to become competent. HTML Challenges included margins, padding spaces, inserting images and other elements, and CSS templates.
Usually when code is written, attention must be paid to small details such as semicolons and brackets, because otherwise mistakes result in major functionality problems. Thus, one should examine one small section at a time before moving forward to the next stage to limit mistakes. Yet, it is fairly common to create content that one has never learned before, and thus, being able to search for the answer to solve a problem plays an essential role with respect to programming. Tutorials and answers can be procured conveniently through the Internet. The self-teaching of necessary information was a major lesson of this project.

i = 0;

											/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*My code starts from here*/
* {
    text-decoration: none;
}
body {margin: auto; padding: 0; overflow-x: hidden;
    background-color: #f3f3f3; /*#354e05*/
}
header p {
    background-image: url(IMGS/PC/BG_Banner.jpg);
    background-color:#3E3E3E;
    height: 40px;
    text-indent: -99999px;
    background-size: 3000px;
    background-repeat: no-repeat;
}
header h1 {
    background-color:#3E3E3E;
    width: 100%;
    height: 2px;
    display: inline-block;
    border-top: 2px solid #f3f3f3;
    text-indent: -99999px;
}
body header section {
    background-color: #f3f3f3;
    max-width: 700px;
    position: relative;
    left: 600px;
}
header .header-brand {
    background-image: url(IMGS/FoodLtdLogo.png);
    background-size: 140px;
    background-repeat: no-repeat;
    display: inline-block;
    text-indent: -99999px;
    position: relative;
    top: 50px;
    margin: 0;
    height: 80px;
    width: 400px;
}
.form-box {
    position: relative;
    top: -20px;
    margin-left: 250px;
    height: 100px;
    width: 300px;
}
input [type=text] {
    padding: 7px;
    border: none;
    font-size: 12px;
}
button {
    float: right;
    background: #CE2C2C;
    color: #f3f3f3;
    border-radius: 0;
    cursor: pointer;
    float: left;
    margin-left: 300px;
    margin-top: -22px;
    width: 150px;
    height: 22px;
    padding: 5px;
    border: none;
    font-size: 12px;
}
/*main menu*/
nav {
    background-color: #f3f3f3;
    margin: 0;
    padding: 0;
    list-style:none;
    text-align: center;
    position: absolute;
    left: 600px;
    top: 180px;
}
nav ul li {
    background-color: #f3f3f3;
    float: left;
    width: 175px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
}
nav ul li a {
    text-decoration: none;
    color:#1C1C1C;
    font-size: 22px;
    display: block;
}
nav ul li a:hover {
    text-decoration: underline;
}
nav ul li ul li {
    display: none;
}
nav ul li ul li a { cursor: pointer;
    font-size: 10px;
}
nav ul li:hover ul li {
    display: block;
}
/*greyline*/
main {
    margin: auto;
    padding: 0;
    background-color: #f3f3f3;
    max-width: 700px;
    height: 75vh;
} 
main .g01 {
    background-color: #8E8E8E;
    width: 706px;
    height: 2px;
    text-indent: -99999px;
    margin-bottom: 2px;
    position: absolute;
    top: 240px;
    left: 598px;
}
main .g02 {
    background-color: #8E8E8E;
    width: 706px;
    height: 2px;
    text-indent: -99999px;
    border-bottom: 5px solid #8E8E8E;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 246px;
    left: 598px;
}
main .g03 {
    background-color: #E1E1E1;
    width: 706px;
    height: 2px;
    text-indent: -99999px;
    border-bottom: 10px solid #E1E1E1;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 250px;
    left: 598px;
}
/*section-What's New area*/
main section h1 {
    padding: 0px;
    margin: 0px;
    width: 150px;
    color: #CE2C2C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    top: 80px;
    left: 0px;
}
main section ul {
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin: auto;
    margin-bottom: 30px;
    position: relative;
    top: 100px;
}
main section .p1 {
    background-image: url(IMGS/PC/HP_raspberry_PC.jpg);
    background-size: 240px;
    background-repeat: no-repeat;
    border: 10px solid #8E8E8E;
    text-indent: -99999px;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 150px;
    height: 150px;
    position: relative;
    left: 40px;
}
main section .p2 {
    background-image: url(IMGS/PC/AS_Bakery02.jpg);
    background-size: 240px;
    background-repeat: no-repeat;
    border: 10px solid #8E8E8E;
    text-indent: -99999px;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 150px;
    height: 150px;
    position: relative;
    left: 100px;
}
main section .p3 {
    background-image: url(IMGS/PC/AS_Bakery06.jpg);
    background-size: 240px;
    background-repeat: no-repeat;
    border: 10px solid #8E8E8E;
    text-indent: -99999px;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 150px;
    height: 150px;
    position: relative;
    left: 160px;
}
/*dot selection*/
main .dot-selection {
    padding: 0px;
    margin: auto;
    display: inline-block;
    display: flex;
    flex-direction: row;
}
/*picture-selection*/
main .dot-selection ul div {
    background-color: #f3f3f3;
    text-indent: -99999px;
    margin: 5px 10px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1px solid #707070;
}
main .dot-selection ul div:hover {
    background-color: #707070;
}
/*greyline part2*/
main .g04 {
    background-color: #8E8E8E;
    width: 706px;
    height: 2px;
    text-indent: -99999px;
    margin-bottom: 2px;
    position: absolute;
    top: 600px;
    left: 598px;
}
main .g05 {
    background-color: #8E8E8E;
    width: 706px;
    height: 2px;
    text-indent: -99999px;
    border-bottom: 5px solid #8E8E8E;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 606px;
    left: 598px;
}
main .g06 {
    background-color: #E1E1E1;
    width: 706px;
    height: 2px;
    text-indent: -99999px;
    border-bottom: 10px solid #E1E1E1;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 610px;
    left: 598px;
}
/*floating sections-Left*/
main .left-bottom {
    float: left;
    max-width: 350px;
    height: 300px;
    margin: 0;
    padding: 0;
    position: relative;
    top: 112px;
}
main .left-bottom h1 {
    padding: 0px;
    margin: 0px;
    width: 150px;
    color: #CE2C2C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    top: 40px;
}
main .left-bottom h2 {
    padding: 0px;
    margin: 0px;
    width: 150px;
    color: #3E3E3E;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    top: 50px;
}
main .left-bottom h3 {
    background-image: url(IMGS/PC/AugustFlyer.png);
    background-size: 120px;
    background-repeat: no-repeat;
    border: 10px solid #8E8E8E;
    text-indent: -99999px;
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 110px;
    height: 150px;
    position: relative;
    top: 60px;
    left: 0px;
}
main .left-bottom p {
    color: #3E3E3E;
    margin: 0;
    padding: 10px;
    width: 180px;
    height: 120px;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 16px;
    float: right;
    position: relative;
    top: 70px;
    left: -10px;
}
main .left-bottom h4 {
    color: #2C97CE;
    margin: 0;
    width: 180px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 14px;
    float: right;
    position: relative;
    top: 50px;
    left: -20px;
}
/*floating sections-Right*/
main .right-bottom {
    float: right;
    max-width: 350px;
    height: 300px;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    position: relative;
    top: 112px;
}
main .right-bottom h1 {
    padding: 0px;
    margin-bottom: 5px;
    width: 150px;
    color: #CE2C2C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    top: 40px;
    left: 60px;
}
main .right-bottom p {
    background-color: #707070;
    padding: 0;
    margin: 5px 0;
    margin-right: 150px;
    height: 1px;
    width: 280px;
    font-family: Arial, Helvetica, sans-serif;
    text-indent: -99999px;
    position: relative;
    top: 40px;
    left: 60px;
}
main .right-bottom div {
    padding: 0 0 0 15px;
    margin: 5px;
    width: 280px;
    color: #2C97CE;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    position: relative;
    top: 40px;
    left: 60px;
}
main .right-bottom h2 {
    padding: 0;
    margin: 20px 0;
    width: 250px;
    color: #2C97CE;
    font-family: Trebuchet MS ;
    font-size: 14px;
    position: relative;
    top: 40px;
    left: 60px;
}
/*footer*/
footer {margin: auto; padding: 0;
    background-image: url(IMGS/PC/BG_Banner.jpg);
    background-size: 3000px;
    background-repeat: no-repeat;
    clear: both;
    width: 100%;
    height: 27vh;
}
footer .footerline {
    border-bottom: 3px solid #8E8E8E;
    margin: 0;
    padding: 0;
    text-indent: -9999px;
    position: relative;
    top: -22px;
}
footer ul {
    margin: 0;
    position: relative;
    top: 10px;
    left: 610px;
}
footer ul li {
    color: #f3f3f3;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    list-style: none;
    line-height: 1.8;
}
footer .Q {
    position: relative;
    margin-right: 18px;
}
footer .DL {
    position: relative;
    margin-right: 18px;
}
footer .LS {
    position: relative;
    margin-right: 18px;
}
footer .fill-info {
    position: relative;
}
footer input[type=text]{
    position: relative;
    top: 10px;
    background-color: #f3f3f3;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 350px;
    height: 20px;
}
footer div .zipcode-bar {
    margin: 0;
    padding: 0;
    position: relative;
}
footer input[type=zipcode]{
    box-sizing: border-box;
    width: 100px;
    height: 20px;
    position: relative;
    top: 5px;
    left: 340px;
}
footer div button {
    width: 140px;
    height: 20px;
    position: relative;
    top: 10px;
    left: 250px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: bolder;
}
footer .copyright {
    color: #f3f3f3;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: lighter;
    margin: 0;
    padding: 0;
    width: 300px;
    height: 100px;
    position: relative;
    top: -15px;
    left: 700px;
}
footer .copyright h2 {
    width: 18px;
    height: 18px;
    border: 1px solid #f3f3f3;
    border-radius: 50%;
    margin: 0px;
    padding: 1px;
    font-size: 15px;
    text-align: center;  
}
footer .copyright h3 {
    position: relative;
    top: -15px;
    left: 30px;
    font-size: 10px;
}