Web Page Source Code PDF

HTML (Hyper text mark up Language) Source code
<html>
<head>
<meta charset="UTF8">
<meta name="portview" content="width=device-width" , intial-
scale="1.0">
<title>My First Website</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-awesome/css/fontawesome.min.css"
media="all.min.css">
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swa
p" rel="stylesheet">
</head>
<body>
<section class="hero">
<h1>WONDERFULL AGENCY</h1>
<h3>Leading Web Solutions Agency </h3>
<h5> On Planet</h5>
</section>
<nav class="menu">
<ul>
<li><a href="">HOME</a> </li>
<li><a href="">ABOUT</a> </li>
<li><a href="">SERVICES</a> </li>
<li><a href="">PORTFOLIO</a> </li>
<li><a href="">CONTACT</a> </li>
</ul>
</nav>
<section class="services">
<h1>
SERVICES
</h1>
<div class="col-wraper">
<div class="services-col">
<img src="img/responsive.png" alt="">
<h3>Service Name</h3>
<p service-content>
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.
publishing software like Aldus PageMaker including versions of Lorem
Ipsum.
</p>
</div>
<img src="img/coding.png" alt="">
<p service-content>
Ipsum.
</p>
</div>
<img src="img/webdesign.png" alt="">
<p service-content>
Ipsum.
</p>
</div>
</div>
</section>
<section class="aboutus">
<h1>
ABOUT US
</h1>
<p aboutus-content>
typesetting industry. Lorem Ipsum has been the industry's<br> standard
galley of<br> type and scrambled it to make a type specimen book. It
has survived not only five centuries,<br> but also the leap into electronic
typesetting, remaining essentially unchanged. <br>It was popularised in
the 1960s with the release of Letraset sheets containing<br> Lorem
Ipsum passages, and more recently with desktop publishing
<br>software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<button class="about-btn">READ MORE>></button>
</section>
<section class="team"><center>
<h1>Our Team</h1>
<div class="team-wraper">
<div class="col-team">
<div class="tcol">
<img src="img/men1.png" alt=""><hr>
<h4>Mohsin Khan</h4>
<p>FOUNDER/CEO</p>
</div>
</div>
<div class="tcol">
<p>DESIGNER</p>
</div>
</div>
<div class="tcol">
<p>DEVELOPER</p>
</div>
</div>
</div>
</center>
</section>
<section class="contact"><br>
<div class="cta">
<div class="cta-col">
<br><br><h4>Email:info@email.com</h4>
</div>
<div class="cta">
<br><h4>Ph# 03164160262 </h4>
</div>
<div class="cta">
<h4>Fax# 03164160262</h4>
</div>
</div>
</section>
<main class="contactinfo">
<div class="contactinfo-col1">
<h3> Contact information</h3>
<br><br><br>
Email: abc@gmail.com<br>
Phone# 03164160262
</div>
<div class="contactinfo-col2">
<h2>Write your Message</h2><br>
<form action="" class="form">
<div class="form-col">
<label for="Name"> Your Name
<input type="text" class="fname">
</label>
</div>
<div class="form-col">
<label for="email"> Your Email
<input type="email" class="femail">
</label>
</div><br>
<label for="msg" class="label"> Message</label>
<textarea class="msg" id="" cols="30"
rows="10"></textarea>
<button class="sendbtn">Send</button>
</form>
</div>
</main>
<footer class="footer">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<p>Lorem Ipsum is simply dummy text of the printing and
galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</footer>
</body>
</html>
CSS (Cascading style Sheet) Source code
*
===================
GLOBAL STYLES
==================
*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
ffont-family: 'Orbitron', sans-serif;
}
/*
================
HERO SELECTION
================
*/
h1{ font-size: 3em;
h3{
font-size: 2em;
}
h5{
font-size: 1.5em;
}
.hero{
background: linear-gradient(to bottom right , springgreen , royalblue);
height: 100vh ;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
.menu{
width: 100% ;
background: #3291ad;
height: 40px;
}
.menu ul{
text-align: center
}
.menu ul li{
list-style: none;
display: inline-block;
.menu ul li a{
text-decoration: none;
display: inline-block;
color: white;
line-height: 40px;
padding: 0px 50px 0px 50px;
}
/*
================
SERVICE SECTION
================
*/
.services{
width: 100%;
background-color: whitesmoke;
padding-top: 100px;
padding-bottom: 100px;
text-align: center;
.col-wraper{
width: 80%;
margin: auto;
padding-top: 50px;
}
.services-col{
width: 33%;
float: left;
}
.services-col img {
width: 80px;
max-width: 100%;
.col-wraper::after{
clear:both;
display:table;
content: "";
}
/*
================
ABOUT US SECTION
================
*/
.aboutus{
padding-top: 100px;
text-align: center;
background-image: url(img/about%20bg.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
color: white;
}
.aboutus-content{
width: 80% ;
margin: auto;
background: rgba(0,0,0,0.5);
font-size: 1.2em;
margin-top:30px;
}
.about-btn{
background: rgba(0,0,0,0.1);
color: orange;
padding: 10px;
margin-top: 30px;
border: none;
outline: 1px solid orange;
cursor: pointer;
.about-btn:hover{
}
/*
================
ABOUT TEAM
================
*/
.team{
padding-top: 100px;
background-color: hsl(0,0%,95%);
width: 100%;
text-align: center;
}
.team-wraper{
width: 90%;
padding-top: 50px;
margin: 50px;
}
.col-team{
width: 33.33% ;
float: left;
}
.col-team img{
width: 80px;
max-width: 100px;
}
.tcol{
max-width: 200px;
max-height: 170px;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 1px 2px 4px 1px rgba(0.0.0.0.05);
padding: 10px;
}
.team-wraper::after{
clear: both;
content: "";
}
/*
=================
COntact
================
*/
.contact{
width: 100%;
.cta{
background-color:lightblue;
width: 100%;
padding: 10px 5px 10px 5px ;
text-align: center;
}
.cta-col{
width: 33.33%;
float:left;
.cta-col h3{
display: inline;
}
.cta::after{
content: "";
clear: both;
display: table;
}
/*
=================
COntact main
================
*/
.contactinfo{
width: 100%;
text-align: center;
}
.contactinfo::after{
content: "";
display: table;
clear: both;
}
.contactinfo-col1{
width: 35%;
float: left;
}
.contactinfo-col2{
width: 65%;
float: left;
padding-right: 10%;
}
/*
================
Form Style
================
*/
.form-col{
float: left;
width: 48%;
margin-right: 2%;
text-align: left;
}
.msg{
width: 100%;
height: 250px;
}
.fname , .femail{
width: 100%;
height: 35px;
padding: opx 5px opx 5px;
border: none;
outline: none;
}
.sendbtn{
background: linear-gradient(to bottom right , springgreen , royalblue);

border: none;
outline: 1px solid grey;
margin-top: 10px;
cursor: pointer;
}
/*
==============
Footer
==============
*/
.footer{
background-color: black;
color: whitesmoke;
width: 100%;
.footer::after{
clear: both;
display: table;
content: "";
}
.footer h2{
color: whitesmoke;
}
.footer-col{
width: 33.33%;
float: left;
}
/*
=================
CSS MEDIA QUERIES
=================
*/
@media screen and (max-width:500px){
services-col{
width: 100%;
padding-top: 100px;
}
.col-team{
width: 100%;
padding-top: 100px;
}
.cta-col{
width: 100%;
padding-top: 50px;
}
}

Web Page Source Code PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Page Source Code PDF

Uploaded by

Copyright:

Available Formats

HTML (Hyper text mark up Language) Source code

<br><h4>Ph# 03164160262 </h4>

background: linear-gradient(to bottom right , springgreen , royalblue);

@media screen and (max-width:500px){

You might also like