We will using HTML and CSS only these two we will make it fun.
Hello Friends, Today we will learn how to create a full one page website, In this blog we will learn how to make a full one page website including various pages like About us, Contact us, Services, Footer Section Team Members Details only using HTML and CSS. For this only basic Knowledge of HTML and CSS is enough for this. So let's start Coding for how to be make a website in HTML and CSS.
Hey friends, today in this blog you'll learn how to create a website using HTML & CSS Only. In the earlier blog, I have shared How to create Navigation Menu Bar with Search Box in HTML and CSS and now it's time to create a how to create a website in HTML and CSS. So here is the code and my work. Hope you are gonna love this and share with your friends too.
Step 1) Open a any code Editor in any Devices
Step 2) Create a file and save it index.html with .html extension
Step 3) Paste these code on index.html file and save it (ctrl+s)
Add this Code in index.html Page
1: <!DOCTYPE html>
2: <html lang="en">
3: <head>
4: <meta charset="utf-8">
5: <title>How To Create a Website Using HTML and CSS</title>
6: <link rel="stylesheet" type="text/css" href="css/style.css">
7: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
8: <meta name="viewport" content="width=device-width, initial-scale=1.0">
9: </head>
10: <body>
11: <nav class="navigation">
12: <div class="logo">
13: e-codec
14: </div>
15: <ul class="nav-list">
16: <li>
17: <a href="#" id="active">home</a>
18: </li>
19: <li>
20: <a href="#">services</a>
21: </li>
22: <li>
23: <a href="#">about</a>
24: </li>
25: <li>
26: <a href="#">contact</a>
27: </li>
28: <li>
29: <a href="#">blog</a>
30: </li>
31: </ul>
32: <div class="search-box">
33: <input type="text" class="search-text" placeholder="Search">
34: <button class="btn">
35: <i class="fa fa-search"></i>
36: </button>
37: </div>
38: </nav>
39: <section class="hero-img">
40: <img src="image/images.jpeg" alt="heroimg" width="100%">
41: <div class="content">
42: <p class="text-animation">can i help you ?</p>
43: <p>web developer and web design</p><br>
44: <a href="#" class="hbtn">contact us</a>
45: <a href="#" class="hbtn2">about us</a>
46: </div>
47: </section>
48: <br>
49: <section class="our-services">
50: <div class="title">
51: Our Services
52: </div>
53: <br>
54: <div class="services">
55: <div class="box">
56: <img src="image/a.png" alt="wd"><br><br>
57: <div
58: id="content">
59: <label>web design</label><br><br>
60: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
61: </div>
62: </div>
63: <div class="box">
64: <img src="image/a.png" alt="wd"><br><br>
65: <div
66: id="content">
67: <label>web developer</label><br><br>
68: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
69: </div>
70: </div>
71: <div class="box">
72: <img src="image/a.png" alt="wd"><br><br>
73: <div
74: id="content">
75: <label>degital marketing</label><br><br>
76: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
77: </div>
78: </div>
79: <div class="box">
80: <img src="image/a.png" alt="wd"><br><br>
81: <div
82: id="content">
83: <label>web support</label><br><br>
84: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
85: </div>
86: </div>
87: </div>
88: <br>
89: </section>
90: <br>
91: <div class="title">About us</div>
92: <br>
93: <div class="about-us">
94: <div class="pro-img">
95: <img src="image/images (2).jpeg" alt="pro">
96: </div>
97: <div class="bio-data">
98: <label>Lorem Ipsum</label>
99: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Pag</p>
100: <br>
101: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Pag</p>
102: </div>
103: </div>
104: <br>
105: <div class="about-us">
106: <div class="bio-data">
107: <label>Lorem Ipsum</label>
108: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Pag</p>
109: <br>
110: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus Pag</p>
111: </div>
112: <div class="pro-img">
113: <img src="image/images (2).jpeg" alt="pro">
114: </div>
115: </div>
116: <br>
117: <div class="title">our team</div>
118: <br>
119: <section class="our-team">
120: <div class="team-members">
121: <div class="team-img">
122: <img src="image/images (2).jpeg" alt="" width="260px">
123: </div>
124: <div class="desc">
125: <label>Lorem Ipsum</label><br>
126: <label>CEO</label>
127: </div>
128: </div>
129: <div class="team-members">
130: <div class="team-img">
131: <img src="image/images (2).jpeg" alt="" width="260px">
132: </div>
133: <div class="desc">
134: <label>Lorem Ipsum</label><br>
135: <label>CEO</label>
136: </div>
137: </div>
138: <div class="team-members">
139: <div class="team-img">
140: <img src="image/images (2).jpeg" alt="" width="260px">
141: </div>
142: <div class="desc">
143: <label>Lorem Ipsum</label><br>
144: <label>CEO</label>
145: </div>
146: </div>
147: <div class="team-members">
148: <div class="team-img">
149: <img src="image/images (2).jpeg" alt="" width="260px">
150: </div>
151: <div class="desc">
152: <label>Lorem Ipsum</label><br>
153: <label>CEO</label>
154: </div>
155: </div>
156: </section>
157: <br>
158: <div class="title">contact us</div>
159: <br>
160: <section class="contact-us">
161: <form class="form-control">
162: <input type="text" placeholder="Full Name">
163: <input type="email" placeholder="Email">
164: <input type="text" placeholder="Mobile Number">
165: <textarea placeholder="Message"></textarea>
166: <input type="submit" value="submit" id="c-btn">
167: </form>
168: </section>
169: <br><br>
170: <section class="our-services">
171: <div class="title">
172: blog
173: </div>
174: <br>
175: <div class="services">
176: <div class="box">
177: <img src="image/a.png" alt="wd"><br><br>
178: <div
179: id="content">
180: <label>web design</label><br><br>
181: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
182: </div>
183: </div>
184: <div class="box">
185: <img src="image/a.png" alt="wd"><br><br>
186: <div
187: id="content">
188: <label>web design</label><br><br>
189: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
190: </div>
191: </div>
192: <div class="box">
193: <img src="image/a.png" alt="wd"><br><br>
194: <div
195: id="content">
196: <label>web developer</label><br><br>
197: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
198: </div>
199: </div>
200: <div class="box">
201: <img src="image/a.png" alt="wd"><br><br>
202: <div
203: id="content">
204: <label>degital marketing</label><br><br>
205: <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
206: </div>
207: </div>
208: </div>
209: </section>
210: <br>
211: <section class="footer">
212: <div class="link-services">
213: <label>our services</label>
214: <ul>
215: <li>
216: <a href="#">web design</a>
217: </li>
218: <li>
219: <a href="#">web developer</a>
220: </li>
221: <li>
222: <a href="#">web seo</a>
223: </li>
224: <li>
225: <a href="#">digital marketing</a>
226: </li>
227: <li>
228: <a href="#">web support</a>
229: </li>
230: <li>
231: <a href="#">graphics design</a>
232: </li>
233: </ul>
234: </div>
235: <div class="social-icon">
236: <label>social links</label>
237: <ul>
238: <li>
239: <a href="#">
240: <i class="fa fa-facebook"></i>
241: </a>
242: </li>
243: <li>
244: <a href="#">
245: <i class="fa fa-instagram"></i>
246: </a>
247: </li>
248: <li>
249: <a href="#">
250: <i class="fa fa-youtube"></i>
251: </a>
252: </li>
253: <li>
254: <a href="#">
255: <i class="fa fa-twitter"></i>
256: </a>
257: </li>
258: <li>
259: <a href="#">
260: <i class="fa fa-pinterest"></i>
261: </a>
262: </li>
263: </ul>
264: </div>
265: <div class="address">
266: <label class="flogo">e-codec</label><br>
267: <label>
268: <i class="fa fa-phone"></i> +91 45324 65434
269: </label><br>
270: <label>
271: <i class="fa fa-envelope" aria-hidden="true"></i> support@domain.com
272: </label><br>
273: <label>
274: <i class="fa fa-map-marker" aria-hidden="true"></i> Shingapore 45S First Floor.
275: </label>
276: </div>
277: </section>
278: <div class="copy">
279: <p>© Copy 2021 E-CODEC | All Right Reserve</p>
280: </div>
281: </body>
282: </html>
*<link rel="stylesheet" type="text/css" href="css/style.css"> This Code be must be added without these code stylesheet code not run.
Step 4) Again create a file name it style.css with .css extension
Step 5) Paste These Code on style.css Page and save it.
Add this Code in style.css Page
1: * {
2: padding: 0;
3: margin: 0;
4: box-sizzing: border-box;
5: }
6: body {
7: font-family: 'verdana',sans-sarif;
8: background-color: #fff;
9: }
10: .navigation {
11: width: 100%;
12: display: flex;
13: justify-content: space-between;
14: align-items: center;
15: flex-wrap: wrap;
16: height: 80px;
17: background-color: #008080;
18: box-shadow: 0px 0px 5px 1px gray;
19: }
20: .logo {
21: font-size: 30px;
22: color: #FFFFFF;
23: font-weight: bold;
24: padding: 5px 30px;
25: text-transform: uppercase;
26: }
27: .nav-list {
28: list-tyle: none;
29: }
30: .nav-list li {
31: display: inline-block;
32: margin: 0 16px;
33: }
34: .nav-list li a:hover,
35: #active {
36: border-bottom: 2px solid #fff;
37: }
38: .nav-list li a {
39: text-decoration: none;
40: font-size: 15px;
41: text-transform: uppercase;
42: color: #E0FFFF;
43: padding-bottom: 6px;
44: }
45: .search-text {
46: width: 300px;
47: padding: 12px 6px;
48: outline: none;
49: border: none;
50: border-radius: 20px;
51: }
52: .btn {
53: padding: 9px 10px;
54: outline: none;
55: cursor: pointer;
56: border: none;
57: border-radius: 20px;
58: transform: translateX(-42px);
59: background-color: #008080;
60: color: #fff;
61: cursor: pointer;
62: }
63: .hero-img img {
64: opacity: 0.5;
65: height: 550px;
66: }
67: .hero-img {
68: background-color: #000;
69: }
70: .content {
71: width: 100%;
72: text-align: center;
73: position: absolute;
74: top: 50%;
75: left: 50%;
76: text-transform: uppercase;
77: font-size: 25px;
78: font-weight: bold;
79: transform: translate(-50%, -50%);
80: color: white;
81: }
82: .content p {
83: padding: 10px;
84: }
85: .hbtn,
86: .hbtn2 {
87: text-decoration: none;
88: font-size: 16px;
89: background-color: #008080;
90: padding: 15px 50px;
91: color: #fff;
92: letter-spacing: 1.5px;
93: }
94: .text-animation {
95: animation-name: raw;
96: animation-duration: 4s;
97: animation-iteration-count: infinite;
98: }
99: @keyframes raw {
100: from {
101: opacity: 0;
102: }
103: to {
104: opacity: 1;
105: }
106: }
107: .title {
108: font-size: 22px;
109: font-weight: bold;
110: text-align: center;
111: margin-top: 10px;
112: text-transform: uppercase;
113: color: #000;
114: text-decoration: underline;
115: animation-name: title;
116: animation-duration: 4s;
117: animation-iteration-count: infinite;
118: }
119: @keyframes title{
120: from {
121: opacity: 0;
122: }
123: to {
124: opacity: 1;
125: }
126: }
127: .services {
128: display: flex;
129: flex-wrap: wrap;
130: justify-content: space-around;
131: text-align: center;
132: align-items: center;
133: }
134: .services .box img {
135: width: 150px;
136: }
137: .services .box {
138: border: 2px solid white;
139: padding: 25px 10px;
140: background-color: rgba(0, 0, 255, 0.5);
141: color: #fff;
142: height: 300px;
143: width: 300px;
144: }
145: #content label,
146: .about-us label,
147: .desc label {
148: font-size: 16px;
149: text-transform: uppercase;
150: font-weight: bold;
151: }
152: #content p,
153: .about-us p {
154: text-align: justify;
155: font-size: 15px;
156: }
157: .about-us {
158: width: 80%;
159: display: flex;
160: flex-wrap: wrap;
161: justify-content: center;
162: align-items: center;
163: margin: auto;
164: }
165: .about-us .pro-img {
166: padding: 0px 15px;
167: }
168: .bio-data{
169: width: 70%;
170: }
171: .about-us .pro-img img {
172: width: 260px;
173: }
174: .our-team {
175: width: 100%;
176: display: flex;
177: flex-wrap: wrap;
178: justify-content: space-around;
179: }
180: .team-img {
181: position: relative;
182: }
183: .team-members {
184: text-align: center;
185: border: 2px solid #008080;
186: padding: 15px;
187: }
188: .contact-us {
189: width: 100%;
190: background-color: #008080;
191: padding: 40px 0px;
192: }
193: .contact-us .form-control {
194: background: #fff;
195: height: 500px;
196: width: 50%;
197: margin: auto;
198: text-align: center;
199: align-items: center;
200: }
201: .form-control input,
202: textarea {
203: width: 80%;
204: border: 1px solid #000;
205: background: none;
206: margin-top: 30px;
207: height: 45px;
208: outline: none;
209: padding-left: 10px;
210: border-radius: 24px;
211: }
212: .form-control textarea {
213: height: 100px;
214: }
215: #c-btn {
216: padding-left: 0px;
217: width: 50%;
218: height: 50px;
219: background: linear-gradient(155deg, #008080 10%, red 90%);
220: color: #fff;
221: text-transform: uppercase;
222: font-size: 18px;
223: cursor: pointer;
224: border: none;
225: border-radius: 50px;
226: }
227: #c-btn:hover{
228: color: #000;
229: background: linear-gradient(155deg, #fff 10%, #008080 90%);
230: }
231: .footer {
232: width: 100%;
233: display: flex;
234: flex-wrap: wrap;
235: justify-content: space-around;
236: background: rgba(0, 0, 0, 0.9);
237: padding: 25px 0px;
238: color: #fff;
239: }
240: .footer a {
241: color: #fff;
242: }
243: .link-services,
244: .social-icon {
245: text-transform: uppercase;
246: text-align: center;
247: }
248: .link-services ul,
249: .social-icon ul {
250: list-style: none;
251: }
252: .social-icon ul li {
253: display: inline-block;
254: }
255: .link-services ul li {
256: margin-top: 10px;
257: }
258: .social-icon label,
259: .link-services label {
260: font-size: 18px;
261: text-decoration: underline;
262: padding: 10px 2px;
263: }
264: .social-icon ul li {
265: margin: 20px 10px;
266: }
267: .link-services ul li a {
268: text-decoration: none;
269: text-transform: uppercase;
270: padding: 5px;
271: font-size: 12px;
272: }
273: .flogo {
274: font-size: 27px !important;
275: font-weight: bold;
276: text-transform: uppercase;
277: }
278: .address label{
279: font-size: 12px;
280: }
281: .address label i {
282: margin-top: 10px;
283: }
284: .copy{
285: padding: 12px 0px;
286: text-align: center;
287: font-size: 16px;
288: color: #000;
289: }
Step 6) Now Copy File Path and pate it any browser.
Step 7) See magic.....😊
Thank you...........
0 Comments