Scribd
Upload
5 views9 pages

Coding & Tech Lesson 24 Notes

The document outlines a project for a Diploma in Coding and Technology, focusing on developing a single-page application using HTML and CSS for an e-commerce grocery store. It includes lesson outcomes and provides the source code for the project, which features navigation, product categories, and a contact form. Additionally, it contains styling details for the web page elements to enhance user experience.

Uploaded by

captaincaservice0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views9 pages

Coding & Tech Lesson 24 Notes

The document outlines a project for a Diploma in Coding and Technology, focusing on developing a single-page application using HTML and CSS for an e-commerce grocery store. It includes lesson outcomes and provides the source code for the project, which features navigation, product categories, and a contact form. Additionally, it contains styling details for the web page elements to enhance user experience.

Uploaded by

captaincaservice0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Diploma in Coding and Technology

HTML and CSS


project
2

Contents

3 Lesson outcomes

3 Project source code

CODING & TECHNOLOGY


3

Lesson outcomes
In this lesson we’ll be gearing towards bringing everything together. This includes everything we
have covered in CSS and HTML. We’ll develop a single page application as part of this major
project and we’ll use animations, positioning, padding and margins – you name it! The goal is to
develop a basic front-end web page for an e-commerce grocery store. So put on you creativity
hats because this is going to be an exciting project!

Project source code


Index.html
<!DOCTYPE>
<html media="screen">

<head>

<title>Dash Groceries</title>

<link rel="stylesheet" href="css/stylesheet.css">


</head>

<body>
<header>

</header>
<div class="nav-wrapper">
<nav>
<ul class="nav-list">
<li class="nav-item"><a href="index.html">Home</a></li>
<li><a href="#">Log In</a></li>
<li><a href="#">Order Online</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
</div>

<div class="image-holder">
<img class="background-img" src="images/bg-image.jpg" width="100%">
<h1 id="caption-1">GROCERY SHOPPING DONE ONLINE</h1>

</div>

<h1 id="pop-cat">POPULAR CATEGORIES</h1>


<hr width="1300">
<section>

<div class="featured-wrapper">

<div class="product-container">
<p class="cat-text">Dairy Products</p>
<img src="images/dairy.png" alt="">

CODING & TECHNOLOGY


4

<div class="btn-container">
<button class="view-more-btn" type="button" name="button">VIEW
MORE</button>
</div>
</div>

<div class="product-container">
<p class="cat-text">Cold Meat</p>
<img src="images/cold-meat.png" alt="">
<div class="btn-container">
<button class="view-more-btn" type="button" name="button">VIEW
MORE</button>
</div>
</div>

<div class="product-container">
<p class="cat-text">Fruit and Veg</p>
<img src="images/fruit-veg.png" alt="">
<div class="btn-container">
<button class="view-more-btn" type="button" name="button">VIEW
MORE</button>
</div>
</div>

</div>

<div id="social-media-container" background-color="#00000">

<div id="facebook-icon-container">
<img src="images/icons/facebook-icon.png" alt="" width="">
</div>
<div id="twitter-icon-container">
<img src="images/icons/twitter-icon.png" alt="">
</div>
<div id="insta-icon-container">
<img src="images/icons/insta-icon.png" alt="">
</div>

</div>

<br>

<div class="form-container">
<div class="form-head-container">
<img src="images/email-icon.png" id="email-icon">
<p id="contact-us-label">Contact us</p>

</div>
<form action="action_page.php">

<label class="form-item" for="fname">First Name</label>


<input type="text" id="fname" name="firstname" placeholder="Your name..">
<br><br>
<label class="form-item" for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<br><br>

<label class="form-item" for="subject">Subject</label>

CODING & TECHNOLOGY


5

<textarea id="subject" name="subject" placeholder="How can we


help?"></textarea>
<br><br>
<input type="submit" value="Submit" id="submit-btn">

</form>
</div>

</body>

</html>

Style.css
/*My first Style Sheet*/
body {
margin: auto;
}

.div-header {}

.nav-wrapper {
background-color: #00b300;
padding: 5px;
width: 100%;
position: sticky;
top: 0;
z-index: 1;
}

.nav-list {
list-style: none;
padding: 0;
display: flex;
align-items: stretch;
justify-content: space-around;
width: 100%;
}

.nav-list li {
display: inline;
margin: 0px;
}

.nav-list li a {
color: white;
text-decoration: none;
padding: 22px;
}

.nav-list li a:hover {
background-color: darkorange;
}

.nav-list li a:active {
background-color: chartreuse;
}

CODING & TECHNOLOGY


6

.nav-list li a:visited {
background-color: darkviolet;
}

.nav-item {
color: aliceblue;
}

.form-container {
background-color: #323232;
width: 330px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: fixed;
bottom: -280;
right: 0;
transition: .5s;
}

.form-container:hover {
bottom: 0;
}

#email-icon {
width: 50px;
float: left;
}

.form-head-container {
background-color: #000000;
padding: 5px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
margin-bottom: 10px;
}

.form-item {
margin-left: 15px;
color: white;
padding-left: 8px;
}

#subject {
height: 100px;
width: 200px;
}

#contact-us-label {
color: white;
}

#submit-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 7px 12px;
margin: 9px 18px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
border-radius: 5px;

CODING & TECHNOLOGY


7

#submit-btn:hover {
background-color: darkorange;
}

.image-holder {
position: relative;
}

#background-img {
width: 100%;
}

#caption-1 {
position: absolute;
top: 40%;
left: 25%;
color: white;
font-size: 3vw;
animation-name: caption-fade;
animation-duration: 2s;
}

@keyframes caption-fade {
0% {
opacity: 0;
top: 0
}

100% {
opacity: 1;
top: 40%
}
}

.featured-wrapper {
position: relative;
display: flex;
overflow: auto;
justify-content: space-around;
}

#pop-cat {
text-align: center;
}

.product-container {
background-color: #4CAF50;
text-align: center;
max-width: 20%;
position: relative;
border-radius: 20px;
border-style: solid;
border-width: 2px;
margin-top: 8px;
animation-name: product-container-anim;
animation-duration: 2s;
border-color: #4CAF50;
}

CODING & TECHNOLOGY


8

@keyframes product-container-anim {
0% {
opacity: 0;
margin-top: 500px;
}

100% {
opacity: 1;
margin-top: 8px;
}
}

.product-container img {
max-width: 100%;
position: relative;
top: 36;
}

.cat-text {
font-size: 1.5vw;
font-weight: bold;
color: white;
margin-top: 10%;
margin-bottom: -2%;
}

.btn-container {
background-color: white;
position: relative;
top: 1;
padding: 7%;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}

.view-more-btn {
background-color: #4CAF50;
max-width: 100%;
border: none;
color: white;
padding: 7px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 9px 18px;
cursor: pointer;
border-radius: 5px;
}

.view-more-btn:hover {
background-color: darkorange;
}

#social-media-container {
background-color: black;
display: inline-block;
position: fixed;
right: 0;
bottom: 50%;
}

#facebook-icon-container {

CODING & TECHNOLOGY


9

background-color: #395598;
transition: .5s
}

#social-media-container:hover {
cursor: pointer;
}

#facebook-icon-container:hover {
padding-left: 20%;
}

#twitter-icon-container {
background-color: #1cb7eb;
transition: .5s
}

#twitter-icon-container:hover {
padding-left: 20%;
}

#insta-icon-container {
background-color: #eb4e6d;
transition: .5s
}

#insta-icon-container:hover {
padding-left: 20%;
}

CODING & TECHNOLOGY

You might also like