Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:

I am trying to get these video to sit side by side. How can i structure them in that way? Do I need to add something in my html (class wise) or CSS code?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<title class="project-file"></title>
</head>
<body>
	<!--START NAV-->
<nav id="navbar" class="nav fixed-top">
			<a href="#welcome-section">About</a>
			<a href="#projects">Work</a>
			<a href="#contact">Contact</a>
</nav>
<!--END NAV-->
<!--START WELCOME SECTION-->
<section id="welcome-section" class="welcome-section">
	<h1>ENZO RARRI</h1>
	<p>MUSIC PRODUCER & RECORDING ENGINEER</p>
</section>
<!--END OF WELCOME SECTION-->
<!--START PROJECTS SECTION-->
<section id="projects" class="projects-title">
	<h2 projects-section-header>My Projects</h2>
	<div class="grid-container">
		<a class="project-tile" href="#projects" target="_blank"></a>
			<p class="project-title">Birthday</p>
			<iframe  src="https://www.youtube.com/embed/is-zY0ea7Dk?si=_1NlT_FTpg4TQ5Km" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
		
		</div>
		<div class="grid-container">
		<a class="project-tile" href="#projects" ></a>
			<p class="project-title">Lost N U</p>
			<iframe src="https://www.youtube.com/embed/v7V0h2Rf7cc?si=Vx4k92wZUHNkrgz4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>		
	</div>

	</div>
		<div class="grid-container">
		<a class="project-tile" href="#projects" ></a>
			<p class="project-title">Find A Way</p>
			<iframe src="https://www.youtube.com/embed/RfjSgqguGVM?si=LbK9y9y-Orp8F0Av" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>	
	</div>
</section>
<!--End OF PROJECTS SECTIONS-->
<!--START CONTACT SECTION-->
<section id="contact" class="contact">
	<div class="conact-section"></div>
	<div class="conact-links"></div>
</section>
<!--END OF CONTACT SECTIONS-->
</body>
</html>
/* file: styles.css */
:root {
	--background-color: black;
	--text-color: gold;
}

.body {
	background-color: var(--background-color);
	height: 5000px;
	padding-top: 56px;
	color: var(--text-color);
}

.nav {
  display: space-between;
  position: fixed;
  top: 0;
  left: 540px;
  width: 100%;
  background: var();
  z-index: 10;
}

.grid-container {
  column-gap: 20px;
  
}

iframe {
  aspect-ratio: 16/9;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

since this is a layout question, it would be great if you put your code in a place like Github Pages or codepen.io so we can see it live and interact with it.

Without seeing it: you can consider using a flex layout to put two things side by side with a gap in the middle as needed.

1 Like

ok. I’ve never used github before so I’ll have to watch a few videos on how to use it. But I think I figured it out but now my issues my titles. Getting them to be under the video or above them.

Thanks.

you can also copy the code to codepen.io (that should be fast enough)

Ok. I will do that. Thank you.

1 Like

Hello @jamesbond !

I found this link that provides steps on placing two youtube videos side by side using html and css.

Wishing you good progress on your coding journey. :slightly_smiling_face:

1 Like

Thanks But I figured this out after hours of trial and error lol. I will look at this though. Much Appreciated!! :raised_hands:

1 Like

Good going! Keep up the good progress! :slightly_smiling_face: