body { background-color: #a1a1a1; color: black; font-family: Days One; font-size: 15px; } @font-face { font-family: Modern; src: url(modern_sans_serif_7.ttf); } @font-face { font-family: Sans; src: url(Elevation.ttf); } /* Header */ .top { background-color: #3c3c3c; height: 90px; border-radius:8px; margin: 10px; } .modhead ul { height: 41.5px; top: -15px; left: 0px; background-color: #292929; background-image: url(Azviolabslogo.png); background-repeat: no-repeat; position: fixed; width: 100%; padding-left: 275px; padding-top: 23.5px; word-spacing: 20px; } .modhead ul li { display: inline-block; position: relative; } .modhead ul li a{ position: relative; font-size: 40px; font-family: Modern; text-decoration: none; color: #cecece; } .modhead ul li a:hover{ color: #eeeeee; } /* Navbar */ .navbar ul { position: relative; top: 50%; word-spacing: 30px; padding: 5px; list-style-type: none; text-align: center; background-color: #3c3c3c; margin: 10px; height: 55px; border-radius: 8px; } .navbar ul li { display: inline-block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .navbar ul li a{ position: relative; top: 50%; font-size: 30px; text-decoration: none; padding: 1px; background-color: #3c3c3c; color: #ffffff; } .navbar ul li a:hover{ background-color: #ffffff; color: #3c3c3c; padding: 2px 1px; border-radius: 4px; } /* Main */ .main { background-color: #dfdfdf; margin-top: 10px; margin-left: 275px; margin-right: 10px; margin-bottom: 10px; padding: 20px; border-radius: 8px; } .mainfull { background-color: #dfdfdf; margin: 10px; border-radius: 8px; padding: 20px; } /* Headings */ h1 { font-size: 70px; color: white; margin: 0px; text-align: center; } h2 { font-size: 115%; margin: 4px; } h1.close { line-height: 60%; } li { list-style-type: none; text-align: left; } /*buttons*/ .button { background-color: #a1a1a1; margin: 10px; color: #cecece; margin: 10px; border-radius: 8px; height: 30px; border: none; padding: 5px; font-family: Sans; } .button:hover { color: #eeeeee; margin: 10px; height: 30px; } /* Left Side Bar */ .sideleft { background-color: #dfdfdf; margin-top: 0px; margin-left: 10px; margin-right: 5px; margin-bottom: 10px; padding: 10px; border-radius: 8px; float: left; width: 230px; } /* Footer */ .footer { background-color: #3c3c3c; margin: 10px; height: 60px; clear: both; text-align: center; padding: 15px; font-size: 90%; border-radius: 8px; color: white; } .modfoot { height: 41.5px; left: -10px; bottom: -10px; background-color: #292929; background-image: url(Azviolabslogo.png); background-repeat: no-repeat; width: 100%; padding-left: 275px; padding-top: 23.5px; word-spacing: 20px; } /* sidenav bar*/ .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #fff; } .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } /* Loading Bar */ #MyProgress { margin: 10px; position: relative; height: 30px; width: 98%; background-color: #a1a1a1; border: solid 5px #1a1a1a; border-radius: 10px; } #MyBar { position: absolute; width: 0%; height: 100%; background-color: #26b645; border-radius: 8px; } #label { text-align: center; line-height: 30px; color: #1a1a1a; } /*Images*/ img { position: fixed; left: 250px; top: 287.5px; } /*Scrollbar*/ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background-color: #dfdfdf; } ::-webkit-scrollbar-thumb { background-color: #3c3c3c; border-radius: 25px; } /*Anchor*/ a { line-height: 50%; } Azvio Labs

Azvio Labs

A bit about me

I am a secondary school (high school) student that will be studying Computer Science next year. Currently, in ICT, we are programming a game using Visual Studio. This got me hooked on coding and made me want to do more things to do with programming. My friend, who also has a website, showed me Neocities and helped me learn. I also have a YouTube channel so check that out as well! It is called Azvio if you were wondering. I post mainly Commentaries and stuff like that, I am really small so if you subscribe I will be very grateful.

My friend's Website (his website is AMAZING)

What is this page about?

I am new to HTML and CSS and all other website programming languages and would like to learn about them and become better at making websites from scratch, So I have made this site to test different things I have learned. I will try to add some new stuff every week and will hopefully make this a really good website with lots of cool things to do!

What languages have I used for this website?

So far I have only used two languages and these are the two main ones in creating websites. They are HTML and CSS. To make a website look really good and nice you will definitely need CSS because it is what styles the website. Between all the content panels, there is a space. That is used with the margin property. Without CSS, that would be much harder. CSS stands for Cascading Style Sheets. HTML is the standard language for making websites. HTML stands for Hyper Text Markup Language.

Want to learn for yourself?

If you want to learn a bit about making websites but have no knowledge of HTML or any other language. You need to learn some code and how to do stuff, obviously. There are some really good websites that I use all the time and if you want to check them out for yourself, click the links below!

If you prefer a video to learn, here is a playlist which I used to make this website. Make sure to subscribe to the uploader!

EJ Media's Playlist