Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials.
Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.
You can also visit my GitHub where I upload all the code I have.
In this tutorial topic "Build A Responsive Website Using HTML, CSS, and JavaScript Animation", we will learn how to create it following these simple easy steps. From the header navigation to the footer element, we will dissolve all of them here.
Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments.
Get Source Code.
If interested in watching the video before running the code below, you can click the play button to get started.
Code Begins
- First, create a folder with any name you like. Then, make the necessary files inside it.
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
- Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
HTML
<header>
<div class="container">
<nav>
<a href="" class="logo">
<img src="./img/logo.png" alt="" />
<span>Coffee Shop</span>
</a>
<button id="navBtn"><img src="./img/bar.png" alt="" /></button>
<ul>
<div class="overlay"></div>
<li><a href="#">Home</a></li>
<li><a href="#about-section">About</a></li>
<li><a href="#menu-section">Menu</a></li>
<li><a href="#testimonal-section">Testimonals</a></li>
<li><a href="#gallery-section">Gallery</a></li>
<li><a href="#contact-section">Contact</a></li>
<button id="closeNav"><img src="./img/close.png" alt="" /></button>
</ul>
</nav>
</div>
</header>
<div>
<div class="container">
<div class="hero">
<div>
<span>☕ Daily Dose of Inspiration</span>
<h1>Make your day great with our special coffee!</h1>
<p>
Welcome to our coffee paradise, we craft coffee that warms your
heart and fuels your dreams. Start your journey today.
</p>
<div>
<button>Order Now</button>
<button>Contact Us</button>
</div>
</div>
<div>
<img src="./img/hero.png" alt="" />
</div>
</div>
</div>
</div>
<section id="about-section">
<div class="container">
<div class="about">
<img src="./img/about.jpg" alt="" />
<div class="texts title">
<h2>About Us</h2>
<p>
We are a passionate team dedicated to delivering exceptional
coffee to our clients. Our mission is to combine innovation,
quality, and reliability to create solutions that inspire and make
a difference. We believe in putting people first, fostering
creativity, and building lasting relationships. Thank you for
being a part of our journey!
</p>
<div class="icons">
<a href="#"><img src="./img/facebook.png" alt="" /></a>
<a href="#"><img src="./img/instagram.png" alt="" /></a>
<a href="#"><img src="./img/x.png" alt="" /></a>
</div>
</div>
</div>
</div>
</section>
<section id="menu-section">
<div class="container">
<div class="menu title">
<h2>Our Menu</h2>
<div class="menus">
<div>
<img src="./img/1.png" alt="" />
<div>
<h3>Cappuccino</h3>
<p>Made with Espresso, Steamed milk and Milk foam</p>
</div>
</div>
<div>
<img src="./img/2.png" alt="" />
<div>
<h3>Latte</h3>
<p>
Made with Espresso, Steamed milk and a small amount of milk
foam
</p>
</div>
</div>
<div>
<img src="./img/3.png" alt="" />
<div>
<h3>Black Coffee</h3>
<p>Made with Freshly ground coffee beans and Hot water</p>
</div>
</div>
<div>
<img src="./img/4.png" alt="" />
<div>
<h3>Sandwich (Plant Based)</h3>
<p>
Made with tomato relish, tofu turmeric egg alternative and a
slice of coconut oil.
</p>
</div>
</div>
<div>
<img src="./img/5.png" alt="" />
<div>
<h3>Sausage Sandwich</h3>
<p>Pork sausages served in a classic buttered soft roll.</p>
</div>
</div>
<div>
<img src="./img/6.png" alt="" />
<div>
<h3>Smoked Bacon Roll</h3>
<p>Hickory smoked bacon in a white roll.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="testimonal-section">
<div class="container">
<div class="testimonal title">
<h2>Testimonals</h2>
<div class="testimonals">
<div class="testimonal-slide">
<div class="slide">
<img src="./img/user1.jpg" alt="" />
<h4>Jack Smith</h4>
<p>
"Loved the French roast. Perfectly balanced and rich. Will
order again!"
</p>
</div>
<div class="slide">
<img src="./img/user2.jpg" alt="" />
<h4>Jack Smith</h4>
<p>
"Loved the French roast. Perfectly balanced and rich. Will
order again!"
</p>
</div>
<div class="slide">
<img src="./img/user3.jpg" alt="" />
<h4>Jack Smith</h4>
<p>
"Loved the French roast. Perfectly balanced and rich. Will
order again!"
</p>
</div>
<div class="slide">
<img src="./img/user4.jpg" alt="" />
<h4>Jack Smith</h4>
<p>
"Loved the French roast. Perfectly balanced and rich. Will
order again!"
</p>
</div>
</div>
</div>
<div class="btns">
<button id="btn-left"><img src="./img/left.png" alt="" /></button>
<button id="btn-right"><img src="./img/right.png" alt="" /></button>
</div>
</div>
</div>
</section>
<section id="gallery-section">
<div class="container">
<div class="gallery title">
<h2>Gallery</h2>
<div class="galleries">
<div>
<img src="./img/pic1.jpg" alt="" />
</div>
<div>
<img src="./img/pic2.jpg" alt="" />
</div>
<div>
<img src="./img/pic3.jpg" alt="" />
</div>
<div>
<img src="./img/pic4.jpg" alt="" />
</div>
<div>
<img src="./img/pic5.jpg" alt="" />
</div>
<div>
<img src="./img/pic6.jpg" alt="" />
</div>
</div>
</div>
</div>
</section>
<section id="contact-section">
<div class="container">
<div class="contact title">
<h2>Contact</h2>
<div class="contact-info">
<div class="contact-text">
<div>
<img src="./img/address.png" alt="" />
<span>No 7 Westmorland Road, E17 8JA</span>
</div>
<div>
<img src="./img/mail.png" alt="" />
<span>info@coffeeshopwebsite.com</span>
</div>
<div>
<img src="./img/phone.png" alt="" />
<span>(123) 457-98909</span>
</div>
<div>
<img src="./img/clock.png" alt="" />
<span>Monday - Friday: 9:00 AM - 5:00 PM</span>
</div>
<div>
<img src="./img/clock.png" alt="" />
<span>Saturday: 10:00 AM - 3:00 PM</span>
</div>
<div>
<img src="./img/clock.png" alt="" />
<span>Sunday: Closed</span>
</div>
<div>
<img src="./img/website.png" alt="" />
<span>www.coffeshopwebsite.com</span>
</div>
</div>
<div class="contact-form">
<form>
<input type="text" placeholder="Your name" required />
<input type="email" placeholder="Your email" required />
<textarea
rows="5"
placeholder="Your message"
required
></textarea>
<button>Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="footer-info">
<p>@ 2024 Coffee Shop</p>
<div class="icons">
<a href="#"><img src="./img/facebook.png" alt="" /></a>
<a href="#"><img src="./img/instagram.png" alt="" /></a>
<a href="#"><img src="./img/x.png" alt="" /></a>
</div>
<div>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
Add the following CSS codes to your style.css file to make your website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website.
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: #f5e0c3;
color: #3e2723;
}
body::-webkit-scrollbar {
display: none;
}
.container {
width: 90%;
margin: 0 auto;
}
/* Header Section */
header {
position: fixed;
z-index: 100;
width: 100%;
padding: 20px 0;
transition: all 0.1s ease;
}
header.token {
background: #9e0802;
color: #fff;
}
header.token .logo {
color: #fff;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
color: #3e2723;
}
.logo img {
width: 70px;
}
.logo span {
font-weight: 600;
font-size: 1.5em;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
nav button {
padding: 10px 15px;
cursor: pointer;
border: none;
border-radius: 3px;
background: #3e2723;
display: none;
}
nav button img {
width: 25px;
}
nav ul button {
position: absolute;
top: 10px;
right: 0;
background: transparent;
}
nav ul li {
list-style: none;
display: inline;
margin: 0 20px;
}
nav ul li a {
text-decoration: none;
color: #3e2723;
padding: 5px 15px;
border-radius: 50px;
transition: all 0.5s ease;
}
nav ul li a:hover {
background: #9e0802;
color: #fff;
}
nav.token ul li a {
color: #fff;
}
nav.token ul li a:hover {
background: #3e2723;
}
/* Hero Section */
.hero {
height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.hero > div span {
font-family: monospace;
font-size: 2.5em;
color: #9e0802;
font-weight: 600;
}
.hero > div:first-child {
position: relative;
top: 50px;
}
.hero > div h1 {
margin-top: 20px;
margin-bottom: 35px;
font-size: 2.7em;
line-height: 1.3em;
}
.hero > div p {
margin-bottom: 35px;
}
.hero > div button {
padding: 10px 20px;
border: none;
border-radius: 70px;
cursor: pointer;
margin-right: 15px;
transition: all 0.5s ease;
}
.hero > div button:first-child {
background: #9e0802;
color: #fff;
}
.hero > div button:last-child {
border: 1px solid #3e2723;
background: transparent;
color: #3e2723;
}
.hero img {
width: 800px;
}
.hero > div button:first-child:hover {
background: transparent;
border: 1px solid #3e2723;
color: #3e2723;
}
.hero > div button:last-child:hover {
background: #9e0802;
border: none;
color: #fff;
}
section {
padding: 50px 0;
padding-bottom: 100px;
scroll-margin-top: 90px;
}
/* About Section */
#about-section {
background: #fff;
}
.about {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 2em;
padding-bottom: 4em;
}
.about > img {
width: 350px;
height: 350px;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.title {
text-align: center;
}
.title h2 {
font-size: 2.4em;
position: relative;
width: 200px;
margin: 0 auto;
margin-bottom: 50px;
}
.title h2::before {
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -10px;
width: 50%;
height: 5px;
background-color: #ffc107;
border-radius: 50px;
}
.about .texts p {
max-width: 600px;
line-height: 2em;
margin-bottom: 30px;
}
.icons a {
margin: 0 10px;
}
.icons a img {
transition: all 0.5s ease;
}
.icons a:hover img {
transform: translateY(-10px);
}
/* Menu Section */
#menu-section {
background: #3e2723;
color: #fff;
}
.menus {
display: grid;
grid-template-columns: repeat(3, 1fr);
place-items: center;
gap: 2em;
}
.menus > div img {
width: 300px;
/* width: 200px; */
object-fit: cover;
object-position: center;
}
.menus > div > div p {
width: 100%;
max-width: 300px;
margin: 10px auto;
text-align: center;
}
/* Testimonal Section */
#testimonal-section {
background: #fff;
}
.testimonals {
width: 80%;
margin: 0 auto;
display: block;
margin-top: 100px;
overflow: hidden;
}
.testimonal-slide {
display: flex;
transition: all 0.5s ease-in-out;
}
.testimonals .slide {
min-width: 100%;
}
.testimonals .slide img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: center;
border-radius: 50%;
}
.testimonals .slide h4 {
margin: 20px 0;
}
.testimonals .slide p {
max-width: 500px;
text-align: center;
margin: 0 auto;
}
.btns {
margin-top: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
}
.btns button {
background: #3e2723;
border: none;
cursor: pointer;
padding: 10px;
border-radius: 4px;
display: flex;
}
/* Gallery Section */
.galleries {
display: flex;
justify-content: center;
/* align-items: center; */
flex-wrap: wrap;
gap: 2em;
}
.galleries > div {
max-width: 400px;
width: 100%;
height: 250px;
overflow: hidden;
border-radius: 10px;
}
.galleries > div img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: 0.5s ease;
}
.galleries > div:hover img {
transform: scale(1.2);
}
/* Contact Section */
#contact-section {
background: #fff;
/* padding: 150px 0; */
}
.contact-info {
display: flex;
justify-content: space-between;
align-items: center;
}
.contact-text > div {
display: flex;
align-items: center;
gap: 0.5em;
margin: 20px 0;
}
.contact-text > div img {
width: 20px;
}
.contact-form form input,
textarea {
width: 100%;
border: 1px solid gray;
outline: none;
padding: 10px 10px;
margin: 10px 0;
border-radius: 5px;
color: #3e2723;
}
.contact-form form input:focus,
textarea:focus {
border-color: #f5e0c3;
}
.contact-form form button {
float: left;
padding: 10px 25px;
border: none;
background: #9e0802;
color: #fff;
border-radius: 20px;
cursor: pointer;
}
/* Footer Section */
footer {
background: #212121;
color: #fafafa;
}
.footer-info {
display: flex;
align-items: center;
justify-content: space-between;
padding: 25px 0;
}
.footer-info a {
text-decoration: none;
color: #fafafa;
margin-right: 10px;
}
/* Media Quries */
@media (max-width: 1140px) {
nav ul li {
margin: 0 10px;
}
.hero img {
width: 500px;
}
/* About Section */
.about .texts p {
max-width: 500px;
}
/* Menu Section */
.menus > div img {
width: 200px;
}
/* Contact Section */
.contact-form {
width: 100%;
}
.contact-info {
flex-direction: column-reverse;
justify-content: start;
align-items: start;
gap: 3em;
}
}
@media (max-width: 950px) {
/* .container {
width: 95%;
} */
nav ul {
position: fixed;
left: -999px;
top: 0;
bottom: 0;
width: 80%;
background: #3e2723;
transition: all 0.5s ease;
}
nav ul li {
text-align: center;
display: block;
margin: 40px 0;
padding: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
nav ul li a {
color: #fff;
}
nav button {
display: flex;
justify-content: center;
align-items: center;
}
nav ul.token {
left: 0;
}
nav ul .overlay {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: -1;
}
/* Hero Section */
.hero {
flex-direction: column-reverse;
justify-content: center;
}
.hero img {
max-width: 300px;
width: 100%;
}
.hero > div:first-child {
top: 0;
text-align: center;
}
.hero > div span {
font-size: 2em;
}
.hero > div h1 {
margin: 10px 0;
font-size: 2.3em;
}
/* About Section */
.about {
flex-direction: column-reverse;
justify-content: center;
gap: 3em;
}
.about .texts p {
max-width: 100%;
}
.about > img {
max-width: 250px;
max-height: 250px;
}
/* Menu Section */
.menus {
grid-template-columns: repeat(2, 1fr);
}
/* Gallaries Section */
.galleries > div {
max-width: 350px;
}
}
@media (max-width: 767px) {
/* Menu Section */
.menus {
grid-template-columns: repeat(1, 1fr);
}
.menus > div img {
max-width: 300px;
width: 100%;
}
/* Testimonal Section */
.testimonals {
width: 100%;
}
/* Gallaries Section */
.galleries > div {
height: 200px;
}
/* Footer Section */
.footer-info {
flex-direction: column;
justify-content: center;
gap: 1em;
}
}
JAVASCRIPT
Finally add the following script code to your script.css file to add functionality to your website
const header = document.querySelector("header");
const nav = document.querySelector("nav");
window.addEventListener("scroll", (e) => {
if (window.scrollY > 200) {
header.classList.add("token");
nav.classList.add("token");
} else {
header.classList.remove("token");
nav.classList.remove("token");
}
});
let currentIndex = 0;
const testimonalContainer = document.querySelector(".testimonal-slide");
const slides = document.querySelectorAll(".slide");
const btnLeft = document.getElementById("btn-left");
const btnRight = document.getElementById("btn-right");
// Function to update active slide
const updateSlider = (index) => {
slides.forEach((slide) => slide.classList.remove("active"));
slides[index].classList.add("active");
testimonalContainer.style.transform = `translateX(-${index * 100}%)`;
};
// Handle arrow clicks
btnLeft.addEventListener("click", () => {
currentIndex = (currentIndex - 1 + slides.length) % slides.length;
updateSlider(currentIndex);
});
btnRight.addEventListener("click", () => {
currentIndex = (currentIndex + 1) % slides.length;
updateSlider(currentIndex);
});
const navBtn = document.getElementById("navBtn");
const navUl = nav.querySelector("ul");
const closeNav = navUl.querySelector("button");
//Handles Open Nav Button Clicks
navBtn.addEventListener("click", (e) => {
navUl.classList.add("token");
});
//Handles Close Nav Button Click
closeNav.addEventListener("click", (e) => {
navUl.classList.remove("token");
});
//Close Nav When Any Navigation Link is Clicked
const li = navUl.querySelectorAll("li");
li.forEach((e) =>
e.addEventListener("click", (e) => {
closeNav.click();
})
);
Conclusion and Final word
Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can "Create A Responsive Coffee Shop Website | HTML, CSS & JavaScript". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.
Happy Coding Journey 🚀
0 Comments
We are happy to hear from you.