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