Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Planet Balkin</title>
</head>
<body>
<div class="navbar">
<div class="container flex">
<h1 class="logo">Planet Balkin</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="illustrations.html">Drawing</a></li>
<li><a href="pictures.html">Photos</a></li>
</ul>
</nav>
</div>
</div>
<section class="information">
<div class="info-grid">
<div class="info text">
<h1>About Me</h1>
<P>Hello, Welcome to my webpage. I am from Buffalo, Ny
and have a major in Digital Media arts from Canisius College.
I have experience with Adobe programs such as Illustrator, Photoshop,
After Effects, Premeir, amd Animate. I also have some experience with
3D Modeling. I am available for work with any content creation means.
I can do anything from setting up social media advertisements to taking
videos, fully editing them and adding special effects. Fell free to
explore this site to see my past work. Everything can be found in the
menu tab on the top right. I have included contact information, please
reach out with any inquires.
</P>
</div>
<div class="info-youtube">
<h2>Video Demo</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/1A_jDp-dBX4" title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</section>
</body>
</html>
illustrations.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Planet Balkin/ Illustrations</title>
</head>
<body>
<div class="navbar">
<div class="container flex">
<h1 class="logo">Illustrations</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="illustrations.html">Drawing</a></li>
<li><a href="pictures.html">Photos</a></li>
</ul>
</nav>
</div>
</div>
<div class="left-side">
<div style="text-align: left;">
<h1> Recents</h1>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h2> Image 2 </h2>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h3>Image 3</h3>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
</div>
</div>
<div class="right-side">
<div style="text-align: right;">
<h1> Recents</h1>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h2> Image 2 </h2>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h3>Image 3</h3>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
</div>
</div>
</body>
videos.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Planet Balkin/ Videos</title>
</head>
<body>
<div class="navbar">
<div class="container flex">
<h1 class="logo">Videos.</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="illustrations.html">Drawing</a></li>
<li><a href="pictures.html">Photos</a></li>
</ul>
</nav>
</div>
</div>
<div class="left-side">
<div style="text-align: left;">
<h1> Recents</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gyGsPlt06bo" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<h2> Video 2 </h2>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gyGsPlt06bo" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<h3>Image 3</h3>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gyGsPlt06bo" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="right-side">
<div style="text-align: right;">
<h1> Recents</h1>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gyGsPlt06bo" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<h2> Video 5 </h2>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gyGsPlt06bo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br>
<h3>Video 6</h3>
<br>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gyGsPlt06bo" title="YouTube video player" frameborder="0" allow="accelerometer;
autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
pictures.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Planet Balkin/ Pictures</title>
</head>
<body>
<div class="navbar">
<div class="container flex">
<h1 class="logo">Pictures</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="videos.html">Videos</a></li>
<li><a href="illustrations.html">Drawing</a></li>
<li><a href="pictures.html">Photos</a></li>
</ul>
</nav>
</div>
</div>
<div class="left-side">
<div style="text-align: left;">
<h1> Recents</h1>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h2> Image 2 </h2>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h3>Image 3</h3>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
</div>
</div>
<div class="right-side">
<div style="text-align: right;">
<h1> Recents</h1>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h2> Image 2 </h2>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
<br>
<h3>Image 3</h3>
<br>
<img class="drawings" src="../images/sketch1.jpg" alt="Image">
</div>
</div>
style.css
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
html {
background-image: url(../images/space1.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
*{
box-sizing: border-box;
padding: 0%;
margin: 0%;
}
body {
font-family: 'Inter', sans-serif;
color:black;
line-height: 1.0;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
h1, h2 {
font-weight: 300;
line-height: 1.2;
margin: 10px 0;
}
p {
margin: 10px 0;
}
img {
width: 100%;
}
.navbar {
background-color: green;
color: white;
}
.navbar ul {
display: flex;
}
.navbar a{
color: white;
padding: 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: 2px white solid;
}
.navbar .flex {
justify-content: space-between;
}
/* boxex */
.information{
max-width: 1100px;
margin: 0% auto;
overflow: auto;
padding: 0 40px;
}
.information .info-grid{
margin-left: auto;
margin-right: 0;
}
.information .info-youtube{
margin-right: auto;
margin-left: 0;
}
.information h1 {
font-size: 40px;
}
.information p {
margin: 20px 0;
background-color: lightskyblue;
color:black;
line-height: 2;
font-size: 15pt;
}
.information .grid{
grid-template-columns: 55% 45%;
gap: 30px;
}
/* UTILITIES */
.container {
max-width: 1100px;
margin: 0 auto;
overflow: auto;
padding: 0 40px;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
justify-content: center;
align-items: center;
height: 100%;
}
/* Illustrations */
.drawings {
width: 500px;
}
.left-side {
line-height: 2px;
margin-left: auto;
margin-right: 0;
padding: 150px;
}
.left-side h1,h2,h3{
color: white;
font-size: 25pt;
}
.right-side {
line-height: 2px;
margin-left: 0;
margin-right: auto;
padding: 150px;
}
.right-side h1,h2,h3{
color: white;
font-size: 25pt;
}
/* Photos */
/* Videos */