HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="1.page.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
</head>
<body>
<div class="center">
<div class="page">
<h1>HTML AND CSS</h1>
<p>
For a professional or intermediate developer - Install any text editor IDE, such as WebMatrix, Visual Studio. I have also heard a lot about Notepad++ try them out. WebMatrix and the Visual Studio Express edition are entirely free products by Microsoft and provide a wide variety of features for editing and creating HTML documents and styling then using CSS. Validation is also a feature!
<br>
WebMatrix and Visual Studio will also provide a support for any server-side or client-side programming too, if you want any of these supports in future for web development.
<br>
HTML and CSS can be rendered in a browser without any fancy engine requirement like other programming languages as Java or C#. It is just a markup language. It will run in any browser, written in any software (Visual Studio or Notepad; simple one) but the type of file must be .html or .htm.
<br>
For best documents and resources you should visit, either Microsoft Developer Network portal - to learn web development in Internet Explorer- or you can visit Mozilla Developer Network - for all of the modern browsers - to learn HTML, CSS and JavaScript coding. Test them in your environment.
<br>
If you are just a beginner, you need to simplify things as much as possible. So I think you'll be comfortable using an editor like Sublime Text (It's "winrar free") or Atom (free). When you acquire some skills and get comfortable with coding, I highly recommend you to switch over an IDE like PhpStorm/WebStorm.
</p>
</div>
</div>
</body>
</html>
CSS CODE:
body{
padding: 0;
margin: 0;
font-family: verdana;
background-color: #ccc
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.page{
width: 400px;
height: 600px;
padding: 30px;
background-color: #fff;
border-left: 20px solid #ff2929;
transform: rotate(-45deg) skewX(10deg) scale(.8);
box-shadow: -50px 50px 50px rgba(0,0,0,.5);
}
.page p{
margin: 0;
padding: 0;
text-align: justify;
font-size: 14px;
}
.page h1{
margin: 0 0 20px 0;
padding: 0;
text-align: center;
font-size: 25px;
color: #9e9e9e;
}
.page:before{
content:"";
width: 30px;
height: 100%;
background-color: #8a0e0e;
position: absolute;
top: 0;
left: 0;
transform: skewY(-45deg) translate(-50px,-36px);
}
.page:after{
content:"";
width: 104.5%;
height: 30px;
background-color: #ccc;
position: absolute;
bottom: 0;
left: 0;
transform: skewX(-45deg) translate(-5px,30px);
}
TrueCodes 
Leave a comment