page3.html
<![CDATA[<span class="pln">
</span><span class="str"><html></span><span class="pln">
</span><span class="str"><head></span><span class="pln">
</span><span class="pun"><</span><span class="pln">link rel</span><span class="pun">=</span><span class="str">"stylesheet"</span><span class="pln"> href</span><span class="pun">=</span><span class="str">"style.css"</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">head</span><span class="pun">></span><span class="pln">
</span><span class="str"><body></span><span class="pln">
</span><span class="str"><center></span><span class="pln">
</span><span class="str"><p></span><span class="pln">
</span><span class="typ">Create</span><span class="pln"> </span><span class="typ">Style</span><span class="pln"> sheet to </span><span class="typ">set</span><span class="pln"> formatting </span><span class="kwd">for</span><span class="pln"> text tags and embed that style sheet on web pages created
</span><span class="kwd">for</span><span class="pln"> your site</span><span class="pun">.</span><span class="pln">
</span><span class="pun"></</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">center</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">header </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"header"</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">a href</span><span class="pun">=</span><span class="str">"#"</span><span class="pln"> </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"logo"</span><span class="pun">></span><span class="typ">Developer</span><span class="pun"></</span><span class="pln">a</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">nav </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"nav-items"</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">a href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">></span><span class="typ">Home</span><span class="pun"></</span><span class="pln">a</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">a href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">></span><span class="typ">About</span><span class="pun"></</span><span class="pln">a</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">a href</span><span class="pun">=</span><span class="str">"#"</span><span class="pun">></span><span class="typ">Contact</span><span class="pun"></</span><span class="pln">a</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">nav</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">header</span><span class="pun">></span><span class="pln">
</span><span class="str"><main></span><span class="pln">
</span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"intro"</span><span class="pun">></span><span class="pln">
</span><span class="str"><h1></span><span class="pln">A </span><span class="typ">Web</span><span class="pln"> </span><span class="typ">Developer</span><span class="pun"></</span><span class="pln">h1</span><span class="pun">></span><span class="pln">
</span><span class="str"><p></span><span class="pln">I am a web developer and I love to create websites</span><span class="pun">.</</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="str"><button></span><span class="typ">Learn</span><span class="pln"> </span><span class="typ">More</span><span class="pun"></</span><span class="pln">button</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"achievements"</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work"</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fas fa-atom"</span><span class="pun">></</span><span class="pln">i</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">p </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work-heading"</span><span class="pun">></span><span class="typ">Projects</span><span class="pun"></</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">p </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work-text"</span><span class="pun">></span><span class="pln">I have worked on many projects and I am very proud of them</span><span class="pun">.</span><span class="pln"> I am a very good developer and I am always looking </span><span class="kwd">for</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> projects</span><span class="pun">.</</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work"</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fas fa-skiing"</span><span class="pun">></</span><span class="pln">i</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">p </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work-heading"</span><span class="pun">></span><span class="typ">Skills</span><span class="pun"></</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">p </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work-text"</span><span class="pun">></span><span class="pln">I have a lot of skills and I am very good at them</span><span class="pun">.</span><span class="pln"> I am very good at programming and I am always looking </span><span class="kwd">for</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> skills</span><span class="pun">.</</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work"</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">i </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"fas fa-ethernet"</span><span class="pun">></</span><span class="pln">i</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">p </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work-heading"</span><span class="pun">></span><span class="typ">Network</span><span class="pun"></</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">p </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"work-text"</span><span class="pun">></span><span class="pln">I have a lot of network skills and I am very good at them</span><span class="pun">.</span><span class="pln"> I am very good at networking and I am always looking </span><span class="kwd">for</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> network skills</span><span class="pun">.</</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"about-me"</span><span class="pun">></span><span class="pln">
</span><span class="pun"><</span><span class="pln">div </span><span class="kwd">class</span><span class="pun">=</span><span class="str">"about-me-text"</span><span class="pun">></span><span class="pln">
</span><span class="str"><h2></span><span class="typ">About</span><span class="pln"> </span><span class="typ">Me</span><span class="pun"></</span><span class="pln">h2</span><span class="pun">></span><span class="pln">
</span><span class="str"><p></span><span class="pln">I am a web developer and I love to create websites</span><span class="pun">.</span><span class="pln"> I am a very good developer and I am always looking </span><span class="kwd">for</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> projects</span><span class="pun">.</span><span class="pln"> I am a very good developer and I am always looking </span><span class="kwd">for</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> projects</span><span class="pun">.</</span><span class="pln">p</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">div</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">main</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">body</span><span class="pun">></span><span class="pln">
</span><span class="pun"></</span><span class="pln">html</span><span class="pun">></span><span class="pln">
</span>]]>
style.css
body {
margin: 0;
box-sizing: border-box;
}
/* CSS for header */
.header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f5f5f5;
}
.header .logo {
font-size: 25px;
font-family: 'Sriracha', cursive;
color: #000;
text-decoration: none;
margin-left: 30px;
}
.nav-items {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #f5f5f5;
margin-right: 20px;
}
.nav-items a {
text-decoration: none;
color: #000;
padding: 35px 20px;
}
/* CSS for main section */
.intro {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 520px;
background:burlywood;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.intro h1 {
font-family: sans-serif;
font-size: 60px;
color: #fff;
font-weight: bold;
text-transform: uppercase;
margin: 0;
}
.intro p {
font-size: 20px;
color: #565657;
text-transform: uppercase;
margin: 20px 0;
}
.intro button {
background-color: #5edaf0;
color: #000;
padding: 10px 25px;
border: none;
border-radius: 5px;
font-size: 20px;
font-weight: bold;
cursor: pointer;
box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4)
}
.achievements {
display: flex;
justify-content: space-around;
align-items: center;
padding: 40px 80px;
}
.achievements .work {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
}
.achievements .work i {
width: fit-content;
font-size: 50px;
color: #333333;
border-radius: 50%;
border: 2px solid #333333;
padding: 12px;
}
.achievements .work .work-heading {
font-size: 20px;
color: #333333;
text-transform: uppercase;
margin: 10px 0;
}
.achievements .work .work-text {
font-size: 15px;
color: #585858;
margin: 10px 0;
}
.about-me {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 80px;
border-top: 2px solid #eeeeee;
}
<![CDATA[<span class="pln">
</span>]]>
RESULT WEBPAGE
Create Style sheet to set formatting for text tags and embed that style sheet on web pages created
for your site.
A Web Developer
I am a web developer and I love to create websites.
Learn More
Projects
I have worked on many projects and I am very proud of them. I am a very good developer and I am always looking for new projects.
Skills
I have a lot of skills and I am very good at them. I am very good at programming and I am always looking for new skills.
Network
I have a lot of network skills and I am very good at them. I am very good at networking and I am always looking for new network skills.
About Me
I am a web developer and I love to create websites. I am a very good developer and I am always looking for new projects. I am a very good developer and I am always looking for new projects.