Making a website using HTML and CSS can seem like a daunting task, but with some basic knowledge and a bit of practice, you can create a beautiful and responsive website design in no time. In this step-by-step guide, I will take you through the process of designing a full responsive single page website.
Step 1: Plan and Sketch Your Design
Before starting your project, take some time to plan and sketch your design on paper. This will help you to visualize your ideas and organize your thoughts. Determine the layout, color scheme, typography, and other design elements you want to incorporate into your website.
Step 2: Create Your HTML Document
To create your HTML document, open a plain text editor such as Notepad or Sublime Text. Write your HTML code starting with the doctype declaration and then adding the HTML tags, including the head and body tags. Make sure to include the necessary meta tags, such as the viewport tag, to make your website responsive.
Step 3: Add CSS Styles
To add CSS styles to your website, create a separate CSS file and link it to your HTML document using the link tag. Write your CSS code to apply the design elements you planned earlier. Use classes and IDs to target specific elements and style them accordingly.
Step 4: Design Your Website Layout
Use CSS to design your website layout by using the box model to create blocks of content, positioning elements with the float and position properties, and using media queries to make your website responsive.
Step 5: Add Content and Media
Once you have your layout designed, add your content and media to your website. Use HTML to add headings, paragraphs, images, and other elements. Use CSS to style these elements to match your design.
Step 6: Test and Optimize Your Website
Test your website on different browsers and devices to ensure that it is fully responsive and functioning properly. Optimize your website by compressing images, minifying CSS and JavaScript files, and reducing the number of HTTP requests.
By following these steps, you can create a full responsive single page website using HTML and CSS. With practice, you can continue to improve your design skills and create even more complex and dynamic websites.
HTML CODE
<div class="main" id="home">
<nav class="header" id="header">
<div class="logo">
<h1>Food</h1>
</div>
<div class="link" id="links">
<a href="#home">home</a>
<a href="#about">about</a>
<a href="#service">services</a>
<a href="#blog">blog</a>
<a href="#contact" class="aa">contact</a>
</div>
<div class="icon">
<ion-icon name="menu-outline" id="menu-btn" onclick="openmenu()"></ion-icon>
<ion-icon name="close-outline" id="close" onclick="closemenu()"></ion-icon>
</div>
</nav>
<div class="header_content">
<center>
<img src="logo1.png">
<br>
<ion-icon name="chevron-down-outline"></ion-icon>
</center>
</div>
</div>
<!-- ==================Our Food section start================ -->
<section class="content" id="service">
<div class="text_content">
<h1>Our Food</h1>
<!-- <center><hr></center> -->
<hr>
<p><i>Our food roots are colourful, global and eclectic with a gourmet, playful edge.
We get inspired by flavours and ingredients from all four corners of the world and
put our signature "wild" twist to them. Our aim is to provide a little vision on how
food could be if we just imagined so!</i></p>
</div>
<div class="img">
<img src="image1.jpeg" alt="">
</div>
</section>
<!-- ====================Our Food section ent================ -->
<!-- ====================organic section start================ -->
<section class="content">
<div class="text_content">
<h1>organic</h1>
<!-- <center><hr></center> -->
<hr>
<p><i>Our food roots are colourful, global and eclectic with a gourmet, playful edge.
We get inspired by flavours and ingredients from all four corners of the world and
put our signature "wild" twist to them. Our aim is to provide a little vision on how
food could be if we just imagined so!</i></p>
</div>
<div class="img">
<img src="image2.jpeg" alt="">
</div>
</section>
<!-- ==================organic section ent================ -->
<!-- =================Our Food section start================ -->
<section class="content">
<div class="text_content">
<h1>Our Food</h1>
<!-- <center><hr></center> -->
<hr>
<p><i>Our food roots are colourful, global and eclectic with a gourmet, playful edge.
We get inspired by flavours and ingredients from all four corners of the world and
put our signature "wild" twist to them. Our aim is to provide a little vision on how
food could be if we just imagined so!</i></p>
</div>
<div class="img">
<img src="image3.jpeg" alt="">
</div>
</section>
<!-- ====================Our Food section ent================ -->
<!-- ======================================================== -->
<section class="content">
<img src="image4.jpeg">
</section>
<!-- ======================================================== -->
<!-- ==================footer section start========================== -->
<section class="footer">
<div class="footer_logo">
<img src="logo2.png">
</div>
<div class="footer_icons" id="contact">
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="logo-youtube"></ion-icon>
</div>
</section>
<!-- ======================footer section end========================== -->
<!-- javascript file -->
<script>
let menu = document.getElementById('links')
let open = document.getElementById('menu-btn')
let close = document.getElementById('close')
function openmenu() {
menu.style.left = "0";
open.style.display = "none";
close.style.display = "inline-block"
}
function closemenu() {
menu.style.left = "100%";
open.style.display = "inline-block";
close.style.display = "none";
}
var scrollTrigger = 600;
let nav = document.getElementById('header');
</script>
<script type="text/javascript">
var scrollTrigger = 600;
let nava = document.getElementById('header');
let mybutton = document.getElementById("myBtn");
let heading3 = document.getElementById("head");
window.onscroll = function () {
// We add pageYOffset for compatibility with IE.
if (window.scrollY >= scrollTrigger) {
nava.style.background = "#eee";
nava.style.zIndex = "999999";
nava.style.boxShadow = "0px 0px 10px black";
mybutton.style.display = "block";
heading3.style.color = "black";
} else {
nava.style.background = "none";
nava.style.zIndex = "999999";
nava.style.boxShadow = "none";
mybutton.style.display = "none";
}
};
</script>
CSS CODE
@import url('https://fonts.googleapis.com/css2?
family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
:root {
--main-color: #e00b4c;
--main-color2: #ffffff;
--font-color: rgb(12, 11, 11);
}
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
transition: .3s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
body {
background: #eee;
}
.main {
width: 100%;
height: 100vh;
background-image: url(background.jpeg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0%;
animation: change 10s infinite ease-in-out;
z-index: -1;
}
.header {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 7rem;
position: fixed;
top: 0;
right: 0;
left: 0;
}
.header .logo h1 {
font-size: 40px;
padding: 15px 0;
}
.header .link {
position: relative;
left: 270px;
z-index: 99999;
}
.header .link a {
font-size: 18px;
margin-right: 60px;
color: black;
}
.header .link a:hover {
color: var(--main-color);
}
#menu-btn,
#close {
display: none;
}
.icon ion-icon {
font-size: 40px;
color: var(--main-color);
margin-left: 10px;
cursor: pointer;
}
.header_content {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.header_content ion-icon {
font-size: 60px;
color: var(--main-color);
margin-top: 100px;
}
/* ================================================ */
.content {
width: 100%;
height: auto;
display: flex;
align-items: center;
justify-content: center;
background-color: #eee;
padding: 50px 100px;
}
.text_content {
width: 40%;
height: 100%;
text-align: left;
}
.img {
width: 60%;
height: 100%;
overflow: hidden;
}
.img img {
width: 100%;
height: 110%;
}
.text_content h1 {
font-size: 40px;
padding: 20px 0;
}
.text_content hr {
width: 20%;
height: 5px;
background: var(--main-color);
}
.text_content p {
font-size: 18px;
font-weight: 300;
padding: 30px 30px 0 0;
}
/* ===================================================== */
.footer {
width: 100%;
height: 150px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 7%;
border-bottom: 5px solid var(--main-color);
}
.footer img {
width: 200px;
height: 50px;
}
.footer .footer_icons ion-icon {
font-size: 35px;
padding: 10px;
border-radius: 10px;
margin-right: 10px;
}
.footer .footer_icons ion-icon:hover {
background: var(--main-color);
color: #eee;
cursor: pointer;
}
/*=========================MEDIA QURRY STATR========================== */
@media only screen and (max-width: 991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
section {
padding: 2rem;
}
.header .logo {
position: relative;
left: 7%;
}
.header .link {
position: relative;
left: 16%;
}
.content {
padding: 0;
margin: 0;
}
.text_content {
text-align: center;
padding: 0 30px;
}
.text_content hr {
margin: auto;
}
}
@media only screen and (max-width: 768px) {
#menu-btn {
display: inline-block;
background: var(--black);
}
#close {
background: var(--black);
}
#header .link {
position: absolute;
top: 100%;
left: -100%;
width: 100%;
height: 100vh;
background: rgba(238, 238, 238, 0.5);
padding: 2rem;
transition: .5s;
z-index: 999999;
}
#header .link a {
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 20px;
text-align: center;
z-index: 9999999;
}
#header .link a:hover {
background: rgba(0, 0, 0, 0.5);
color: #eee;
}
.content {
display: block;
padding: 0;
margin: 0;
text-align: center;
}
.text_content {
width: 100%;
padding: 100px 50px;
}
.img {
width: 100%;
}
.image4 {
width: 100%;
height: auto;
}
}
@media only screen and (max-width: 691px) {
.footer {
height: auto;
display: block;
padding: 30px;
}
.footer .footer_logo {
margin: auto;
padding: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.footer .footer_logo img {
margin: auto;
}
.footer .footer_icons {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
padding: 0 10%;
}
}
Comments
Post a Comment