How To Create A Website Using HTML and Upload To The Internet
Learn how to make a website using HTML and upload to the internet. How to upload your HTML website to the internet. Easy way to learn HTML for beginners. You will easily make this website by following my Youtube video tutorial. I also provide you HTML and CSS which helps you to understand this Tutorial.
How To Create A Website Using HTML and Upload To The Internet
- 00:00 - 01:57 min : Intro
- 01:57 - 52:00 min: Create A Website Using HTML and Upload To The Internet
This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.
<html> <head> <meta charset="utf-8"> <meta content="IE-edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, intial-scale=1.0" name="viewport"> <title>Side Login and Registration Form Bar</title> <!--style-----> <style> body{ font-family:poppins; } </style> </head> <body> </body> </html>
Responsive Website HTML
You can easily make A Website Using HTML and Upload To The Internet by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make A Website Using HTML and Upload To The Internet. So I recommended you watch the Video Tutorial that how can I make this Only using HTML and CSS. This website is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my video tutorial on how I make this Website. you can use this on your website without any copyright.
➤Website HTML Code have given below.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE-edge"> <meta name="viewport" content="width=device-width, intial-scale=1.0"> <!--title--------------------------------------------> <title>DOG Club - Dog's Website Design</title> <!--stylesheet---------------------------------------> <link rel="stylesheet" type="text/css" href="css/style.css"/> <!--fav-icon-----------------------------------------> <link rel="shortcut icon" href="images/fav-icon.png"/> <!--poppins-font-------------------------------------> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="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" rel="stylesheet"> <!--using-font-awesome-------------------------------> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> </head> <body> <section id="main"> <!--navigation-bar-------------------> <nav class="navigation"> <!--logo-------> <a class="logo" href="index.html"> <img alt="Dog Clubs" src="images/logo.png"> </a> <!--menu-------> <ul class="menu"> <li><a class="nav-services" href="#services"> <i class="fas fa-shipping-fast"></i>Services</a> </li> <li><a class="nav-contact" href="#contact"> <i class="far fa-paper-plane"></i>Contact</a> </li> </ul> </nav> <!--main-text-----------------------------------------> <div class="main-text"> <h1> Taking care of dogs as if they were our own. </h1> <p>Each employee always has the safety and care of the pup in mind. Contact CDog Club to shedule your services today!</p> <div class="main-btns"> <a class="service-btn" href="#services"> Our Services <i class="fas fa-chevron-right"></i> </a> <a class="about-btn" href="#about">About Us <i class="fas fa-chevron-right"></i> </a> </div> </div> </section> <!--Pet-Company--logos-----------> <section class="pet-logo-container"> <a class="pet-logo" href="pubg mobile.html"> <img alt="" src="images/logo-1.png"> </a> <a class="pet-logo" href="lols.html"> <img alt="" src="images/logo-2.png"> </a> <a class="pet-logo" href="cod warzone.html"> <img alt="" src="images/logo-3.png"> </a> <a class="pet-logo" href="csgo.html"> <img alt="pet logo" src="images/logo-4.png"> </a> <a class="pet-logo" href="roe.html"> <img alt="pet logo" src="images/logo-5.png"> </a> <a class="pet-logo" href="roe.html"> <img alt="pet logo" src="images/logo-6.png"> </a> <a class="pet-logo" href="roe.html"> <img alt="pet logo" src="images/logo-7.png"> </a> </section> <!--ABOUT-------------------------------> <section id="about"> <!--about-text----------------> <div class="about-text"> <span>About us</span> <h2>The dogs lives for the day,the hour,even the moment.</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi qui atque nam molestias odit ipsa tempore, liber.</p> <br/> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio doloribus tenetur ducimus numquam voluptates minus molestiae assumenda.</p> <div class="about-btns"> <a class="service-btn" href="#services">Our Services <i class="fas fa-chevron-right"></i></a> <a class="contact-btn" href="#contact">Contact Us <i class="fas fa-chevron-right"></i></a> </div> </div> <!--about-img-----------------> <div class="about-img"> <img alt="about images" src="images/dog-1.png"> </div> </section> <!--Services---------------> <section id="services"> <!--heading-----------------------------> <div class="services-heading"> <span>Services</span> <strong>What's Intresting about dog's</strong> </div> <div class="services-container"> <!--box-1-------> <div class="service-box"> <i class="fas fa-paw"></i> <strong>Jealousy in the air!</strong> <p>At different stage of your life, you have a unique set of concerns, & we understand you. We provide professional advice.</p> </div> <!--box-2-------> <div class="service-box"> <i class="fas fa-home"></i> <strong>Running in circles</strong> <p>At different stage of your life, you have a unique set of concerns, & we understand you. We provide professional advice</p> </div> <!--box-3-------> <div class="service-box"> <i class="fas fa-dog"></i> <strong>The most popular breed in the US</strong> <p>At different stage of your life, you have a unique set of concerns, & we understand you. We provide professional advice</p> </div> <!--box-4-------> <div class="service-box"> <i class="fas fa-medal"></i> <strong>Superdog!</strong> <p>At different stage of your life, you have a unique set of concerns, & we understand you. We provide professional advice</p> </div> <!--box-5-------> <div class="service-box"> <i class="fas fa-trophy"></i> <strong>The Oldest dog ever</strong> <p>At different stage of your life, you have a unique set of concerns, & we understand you. We provide professional advice</p> </div> <!--box-6-------> <div class="service-box"> <i class="fas fa-heartbeat"></i> <strong>Lower your blood pressure</strong> <p>At different stage of your life, you have a unique set of concerns, & we understand you. We provide professional advice</p> </div> </div> </section> <!--ABOUT-------------------------------> <section id="about-2"> <!--about-text----------------> <div class="about-text"> <span>Services</span> <h2>Dog's are not our whole life, but they make our lives whole.</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nisi qui atque nam molestias odit ipsa tempore, liber.</p> <br/> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Odio doloribus tenetur ducimus numquam voluptates minus molestiae assumenda.</p> <div class="about-btns"> <a class="service-btn" href="#about">About Us <i class="fas fa-chevron-right"></i></a> <a class="contact-btn" href="#contact">Contact Us <i class="fas fa-chevron-right"></i></a> </div> </div> <!--about-img-----------------> <div class="about-img"> <img alt="about images" src="images/dog-2.png"> </div> </section> <section id="contact"> <div class="contact-box-container"> <!--contact-box-1---> <div class="contact-box"> <strong>Address</strong> <p>123 SUMMERWIND LN, LEWIS CENTER, OE 45678<br/><b>Phone:</b> <span>+(012) 123 4567</span><br/><b>Email:</b> <span>Example@gmail.com</span></p> </div> <!--contact-box-2---> <div class="contact-box"> <strong>Available</strong> <p>MON - WED (<span>09:00 AM - 08:00 PM</span>)<br/>THU - FIR (<span>09:00 AM - 08:00 PM</span>)<br/>SAT - SUN (<span>09:00 AM - 08:00 PM</span>)</p> </div> </div> </section> <footer> <span>Copyright 2020 - GoingToInternet</span> </footer> </body> </html>
➤Website CSS Code is have given below.
*{
margin: 0px;
padding: 0px;
font-family: poppins;
scroll-behavior: smooth;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
::selection{
background-color: #134c5f;
color: #ffffff;
}
/*--main------------------------------*/
#main{
width:100%;
min-height: 83vh;
background-image: url(../images/bg.jpg);
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
position: relative;
}
nav{
display: flex;
justify-content: space-between;
padding: 20px 5%;
}
.logo{
height: 70px;
}
.logo img{
height: 100%;
object-fit: contain;
object-position: center;
}
.menu{
display: flex;
justify-content: center;
align-items: center;
}
.menu li a{
margin: 0px 5px;
font-size: 0.8rem;
letter-spacing: 1px;
}
.menu li a i{
margin-right: 5px;
}
.nav-contact,
.nav-services{
padding: 13px 25px;
}
.nav-services{
background-color: #ffffff;
color: #0f0e0f;
font-weight: 500;
box-shadow: 2px 2px 30px rgba(0,0,0,0.10);
}
.nav-contact{
background-color: #124c5f;
color: #ffffff ;
font-weight: 400;
box-shadow: 2px 2px 30px rgba(0,0,0,0.20);
}
.nav-contact:hover{
background-color: #116a88;
transition: all ease 0.3s;
}
/*---main-text---------*/
.main-text{
position: absolute;
top: 60%;
left: 10%;
transform: translate(-10%,-60%);
width:400px;
}
.main-text h1{
font-size: 3rem;
font-weight: 700;
line-height: 50px;
color: #252525;
letter-spacing: 1px;
}
.main-text p{
font-size: 0.9rem;
color: #3a3a3a;
margin-top: 10px;
}
.main-btns{
display: flex;
align-items: center;
margin-top: 20px;
}
.main-btns a{
width:170px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
margin: 5px;
font-size: 0.9rem;
letter-spacing: 1px;
border-radius: 4px;
}
.service-btn i{
color: #ffffff;
margin-left: 5px;
}
.service-btn{
background-color: #124c5f;
color: #ffffff;
}
.about-btn{
color: #181518;
background-color: #b7e2d8;
font-weight: 500;
}
.about-btn i{
color: #201c1c;
margin-left: 5px;
}
.service-btn:hover{
background-color: #116a88;
transition: all ease 0.3s;
}
.about-btn:hover{
background-color: #d0f5ec;
transition: all ease 0.3s;
}
/*-------logos--------------*/
.pet-logo{
height: 40px;
display: flex;
margin: 20px 40px;
}
.pet-logo-container{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 30px;
}
.pet-logo img{
height: 100%;
object-position: center;
object-fit: contain;
filter: grayscale(1);
opacity: 0.4;
}
.pet-logo:hover img{
filter: grayscale(0) ;
opacity: 1;
transition: all ease 0.3s;
}
/*---about-----------------*/
#about,
#about-2{
display: flex;
justify-content:space-around;
align-items: center;
background-image: url(../images/all\ bg.png);
background-position: center;
background-size: 1000px;
background-repeat: no-repeat;
}
.about-img{
width:400px;
height: 500px;
}
.about-img img{
width:100%;
height: 100%;
object-position: center;
object-fit: contain;
}
.about-text{
width:500px;
display: flex;
flex-direction: column;
justify-content: center;
}
.about-text span{
text-transform: uppercase;
color: #134c5f;
letter-spacing: 1px;
font-weight: 500;
font-size: 0.9rem;
}
.about-text h2{
font-size: 2.3rem;
color: #1c1d20;
line-height: 45px;
margin: 10px 0px;
}
.about-text p{
color: #535353;
}
.about-btns{
display: flex;
align-items: center;
margin-top: 10px;
}
.about-btns a{
width:170px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
font-size: 0.9rem;
letter-spacing: 1px;
border-radius: 4px;
}
.contact-btn{
color: #201c1c;
font-weight: 500;
}
.contact-btn i{
margin-left: 5px;
}
/*services-------------------*/
#services{
display:flex;
justify-content:center;
flex-direction:column;
align-items:center;
padding:50px 0px;
}
.services-heading{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.services-heading span{
color: #1d6c86;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 500;
}
.services-heading strong{
color:#2E2E2E;
font-size:2rem;
letter-spacing:0px;
letter-spacing: 1px;
font-weight:700;}
.services-container{
width: 90%;
display: grid;
grid-template-columns:1fr 1fr 1fr ; /*3 columns*/
grid-template-rows: auto auto; /*2 rows*/
margin:50px 0px 20px 0px;}
.service-box{
display:flex;
flex-direction:column;
justify-content:center;
margin:20px;}
.service-box i {
font-size:2.1rem;
margin-bottom: 10px;
}
.service-box p{
color: #5f5f5f;
font-size: 0.9rem;
}
.service-box strong{
font-size:1rem;
font-weight:600;
color:#221d2c;}
.fa-paw{
color: #65979a;
}
.fa-home{
color: #e0a166;
}
.fa-dog{
color: #53a5bb;
}
.fa-medal{
color: #af35a0;
}
.fa-trophy{
color: #7db155;
}
.fa-heartbeat{
color:#5fa79a;
}
/*-----about-2-------------*/
#about-2{
flex-direction: row-reverse;
}
/*--contact------------------*/
.contact-box-container{
display: flex;
justify-content: center;
align-items: center;
margin: 0px 0px 30px 0px;
}
.contact-box{
background-color: #ffffff;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 10px;
border: 1px solid #e2e2e2;
}
.contact-box strong{
color:#2c2c2c;
font-size: 1.3rem;
}
.contact-box p{
color: #5c5c5c;
font-weight: 400;
margin: 10px;
text-align: center;
}
.contact-box p span{
color: #059bce;
}
/*---footer----*/
footer{
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
background-color: #f4fafa;
color: #222222;
font-size: 0.9rem;
border-top: 1px solid rgba(0,0,0,0.05);
}
/*---making-website-responsive-----------------------------*/
@media(max-width:1200px){
.services-container{
width:100%;
}
}
@media(max-width:1150px){
#main{
background-position: left bottom;
}
}
@media(max-width:1000px){
.main-text{
left: 20%;
transform: translate(-20%,-60%);
}
#about,
#about-2{
flex-direction: column-reverse;
}
.about-text{
width:90%
}
.services-container{
width:95%;
}
.services-container{
width: 95%;
grid-template-columns:1fr 1fr; /*2 columns*/
grid-template-rows: auto auto auto; /*3 rows*/
}
#contact{
margin-top: 40px;
}
}
@media (max-width:780px) {
.contact-box-container{
flex-wrap: wrap;
}
.contact-box{
width: 100%;
text-align: center;
}
}
@media(max-width:700px){
.services-container{
width: 100%;
grid-template-columns:1fr; /*4 columns*/
grid-template-rows: auto auto auto; /*2 rows*/
}
.services-heading strong{
font-size: 1.4rem;
text-align: center;
}
}
@media(max-width:650px){
.main-text{
width: 70%;
left: 20%;
transform: translate(-20%,-60%);
}
}
@media(max-width:600px){
#main{
min-height: auto;
background-position: left bottom;
background-size: 1400px;
}
.main-text{
width: 70%;
position: static;
display: flex;
flex-direction: column;
align-items: center;
margin:20px auto;
transform: translate(0,0);
}
.about-img{
width:70%;
height: auto;
margin: 20px;
}
}
@media(max-width:460px){
.nav-services{
display: none;
}
.main-text{
width: 80%;
}
.main-btns{
flex-direction: column;
width: 100%;
}
.main-btns a{
width: 100%;
margin: 10px 0px;
}
.main-text h1,
.about-text h2{
font-size: 2rem;
line-height: 40px;
}
.services-heading{
width: 90%;
}
.services-heading strong{
font-size: 1.3rem;
text-align: center;
}
}
@media(max-width:400px){
.about-btns{
flex-direction: column;
}
.about-btns a{
width: 100%;
margin: 10px 0px;
}
}
Quality site, top notch design! I learnt a lot and it also gave me ideas to improve the UI
ReplyDeleteNo se puede extraer las imagenes
ReplyDeleteThe Ultimate Solo Titanium Razor (PAL + RAZOR)
ReplyDeleteIf titanium blade you enjoy a shave, then this is titanium hair trimmer as seen on tv the ultimate guide titanium properties to using an black titanium rings effective longshot. In titanium trimmer essence, an effective razor is a