Scribd
Upload
379 views

Web Page Source Code PDF

The HTML document contains the code for a website layout with sections for navigation, services, about, team, contact information, and a footer. The CSS document contains styles for typography, colors, layout, and components across the various sections including the hero, navigation menu, services, about, team, contact, form, and footer. Overall the code provides the structure, styling, and design for a full-featured agency website.

Uploaded by

vu soft
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
379 views

Web Page Source Code PDF

The HTML document contains the code for a website layout with sections for navigation, services, about, team, contact information, and a footer. The CSS document contains styles for typography, colors, layout, and components across the various sections including the hero, navigation menu, services, about, team, contact, form, and footer. Overall the code provides the structure, styling, and design for a full-featured agency website.

Uploaded by

vu soft
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

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>
<div class="services-col">
<img src="img/coding.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>
<div class="services-col">
<img src="img/webdesign.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>
</div>
</section>
<section class="aboutus">
<h1>
ABOUT US
</h1>
<p aboutus-content>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's<br> standard
dummy text ever since the 1500s, when an unknown printer took a
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="col-team">
<div class="tcol">
<img src="img/men1.png" alt=""><hr>
<h4>Mohsin Khan</h4>
<p>DESIGNER</p>
</div>
</div>
<div class="col-team">
<div class="tcol">
<img src="img/men1.png" alt=""><hr>
<h4>Mohsin Khan</h4>
<p>DEVELOPER</p>
</div>
</div>

</div>
</center>
</section>

<section class="contact"><br>
<div class="cta">
<div class="cta-col">

<br><br><h4>Email:[email protected]</h4>

</div>

<div class="cta">
<div class="cta-col">

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

</div>

<div class="cta">
<div class="cta-col">

<h4>Fax# 03164160262</h4>
</div>
</div>

</section>
<main class="contactinfo">
<div class="contactinfo-col1">
<h3> Contact information</h3>
<br><br><br>

Email: [email protected]<br>
Phone# 03164160262
</div><!------col1----->
<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><!------col2----->
</main>
<footer class="footer">
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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.</p>
</div>
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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.</p>
</div>
<div class="footer-col">
<h2>Lorem Ipsum</h2>
<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.</p>
</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;
padding: 10px 25px 10px 25px;
}

.services-col img {

width: 80px;
max-width: 100%;
padding-bottom: 10px;

.col-wraper::after{
clear:both;
display:table;
content: "";
}

/*
================
ABOUT US SECTION
================
*/

.aboutus{

padding-top: 100px;
padding-bottom: 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{
background-color: whitesmoke;
}
/*
================
ABOUT TEAM
================
*/

.team{

padding-top: 100px;
padding-bottom: 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;
padding: 10px 30px 10px 30px;
}

.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;
padding-bottom: 5px;
}

.team-wraper::after{

clear: both;
content: "";
}
/*
=================
COntact
================
*/

.contact{

width: 100%;

background-color: whitesmoke;

.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%;
padding: 25px 5px 25px 5px;
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;
padding: 0px 5px 0px 5px;
background-color: whitesmoke;
border: none;
outline: none;
}

.sendbtn{

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


border: none;
outline: 1px solid grey;
padding: 10px 30px 10px 30px;
margin-top: 10px;
cursor: pointer;
}

/*
==============
Footer
==============
*/

.footer{
background-color: black;
color: whitesmoke;
width: 100%;
padding: 50px 10px 50px 10px;

.footer::after{

clear: both;
display: table;
content: "";
}

.footer h2{

color: whitesmoke;
}
.footer-col{

width: 33.33%;
float: left;
padding: 5px 10px 5px 10px;
}

/*
=================
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;
}
}

You might also like