Skip to main content

[HTML TEMPLATES PT2] How to make an info page with HTML,CSS, and a custom font




1: Go open your text editor i.e(notepad++) and create an HTML file.


"HTML CODE"


<html> 
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
</style>
<link rel="stylesheet" href="css3.css"> 
</head>
<body style ="background-color: orange;"> 
<title> WIRED 2 TECH! FACTS</title>
<h2>WIRED 2 TECH! FACTS</h2>
<p2> www.wired2tech.org</p2>
<h3>_______________</h3>
<h1> LEARN TO CODE FOR THE WORKFORCE</h1>
<p1> WITH WIRED2TECH.ORG</P1>
</body>
</html>



2: Create a CSS file.


"CSS CODE"



h1{
color:gold;
-webkit-text-fill-color:gold;
-webkit-text-stroke-width:4px;
-webkit-text-stroke-color:black;
font-family: 'Press Start 2P', cursive;
}

 h2{
color:green;
-webkit-text-fill-color:green;
-webkit-text-stroke-width:4px;
-webkit-text-stroke-color:black;
font-family: 'Press Start 2P', cursive;
}

 p2{
color:gold;
-webkit-text-fill-color:black;
-webkit-text-stroke-width:1px;
-webkit-text-stroke-color:blue;
font-family: 'Press Start 2P', cursive;
}

 p1{
color:gold;
-webkit-text-fill-color:gray;
-webkit-text-stroke-width:2px;
-webkit-text-stroke-color:black;
font-family: 'Press Start 2P', cursive;
}
body{
border-style: solid;
    border-width: 20px;
border-color: black;
text-align:center;
color;black;
background:black;
padding:60px;
font-family: 'Press Start 2P', cursive;
font-size:62px;
margin-top:83px;

}

 "NOTICE THE FONT USED IN THIS PROJECT (Press Start 2P)WAS OBTAINED FROM (Google Fonts) AND IS LICENSED UNDER THE (OPEN FONT LICENSE) 



Comments

Post a Comment

Popular posts from this blog

HOW TO MAKE ARTIFICIAL INTELLIGENCE WITH NOTEPAD++

OK so when you hear artificial intelligence you automatically think a super high-tech robot; well today i'm gonna show just how simple artificial intelligence actually is. STEP 1: open notepad++ and copy the following code. fname=inputbox ("komichiwa") fname=inputbox ("i am ASUNA") fname=inputbox ("whats your name") fname=inputbox ("thats a good name") fname=inputbox ("do you like anime or manga?") fname=inputbox ("thats cool") fname=inputbox ("pi=3.14") fname=inputbox ("4*8=?") fname=inputbox ("32") fname=inputbox ("what is the capital of RUSSIA") fname=inputbox ("MOSCOW") fname=inputbox ("what is BERLIN") fname=inputbox ("the capital of GERMANY") fname=inputbox (" i^5=?") fname=inputbox ("i") fname=inputbox ("what is your favorite anime?") fname=inputbox ("cool!!") fname=inputbox ("what is your
2 comments
Read more

How to make cool HTML animations

today we"ll be doing html animations. although animation is considered quite difficult its actually fairly simple. And as always just copy the code and if you have any issues or concerns just comment and we"ll get right back to you. image as background AWESOME!! AWESOME!! AWESOME!! AWESOME!! ALWAYS LEARN AT WIRED2TECH!! ALWAYS LEARN AT WIRED2TECH!! ALWAYS LEARN AT WIRED2TECH!! ALWAYS LEARN AT WIRED2TECH!! check out wired2tech where youll always learn something new and usefull:) AWESOME!! AWESOME!! AWESOME!! <!DOCTYPE html> <html> <head> <title>image as background</title>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee behavior="alternate">AWESOME!!</marquee>  <marquee beh
Post a Comment
Read more

[HTML TEMPLATES PT1] How to make a profile page with HTML,CSS, and a custom font

1: Go open your text editor i.e(notepad++) and create an HTML file. "HTML CODE" <html>  <head> <img src="https://mir-s3-cdn-cf.behance.net/user/276/383b3538402329.5a299a259d23f.jpg"> <width =800 lenghth=500> <style> @import url('https://fonts.googleapis.com/css?family=Cutive+Mono'); </style> <link rel="stylesheet" href="css6.css">  </head> <body style ="background-color: white;">  <title> STAFF</title> <h2>WIRED 2 TECH! STAFF</h2> <p2> www.wired2tech.org</p2> <h3>_______________</h3> <h1> OUR OWNER & FOUNDER</h1> <p1> MOHAMMED IBRAHIM MIRZA BEIG</P1> </body> </html> 2: Create a CSS file. "CSS CODE" h1{ color:gold; -webkit-text-fill-color:gold; -webkit-text-stroke-width:4px; -webkit-text-stroke-color:black; font-family: 'Cutive Mono
Post a Comment
Read more