I am building a portfolio site for a project and I'm struggling with putting elements of the page next to each other,
specifically, I want my header that reads "Client Sites" aligned next to the header reading "Computer science made creative"Here's my wireframe for what I'm going for. also any general tips on how to make the code look better in general is greatly appreciated let me know if you need to see the actual site
@font-face {
font-family: sourcecodepro;
src: url(fonts/static/SourceCodePro-Regular.ttf);
}
/*.flexbox-conatiner{
display: flex;
flex-direction: row;
}*/
body{
background: #11151C;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
}
h1{
font-family: sourcecodepro;
font-size: 25px;
font-weight: 10;
color: #FFFCFF;
margin: 15px;
}
h2 {
font-family: sourcecodepro;
font-size: 25px;
color: #FFFCFF;
}
h3 {
font-family: sourcecodepro;
font-size: 25px;
font-weight: bold;
color: #FFFCFF;
}
.scrollBox{
width: 150px;
height: 150px;
line-height: 3em;
overflow: scroll;
padding: 5px;
font-size: 25px;
font-weight: bold;
font-family: sourcecodepro;
color: #FFFCFF}
/* Add a black background color to the top navigation */
#textbackground{
border-radius: 15px;
background: rgba(212, 246, 178, 0.3);
border-width: 195px;
border-color: #FFFCFF;
padding: 1rem;
width: 600px;
}
p1 {
font-family: sourcecodepro;
font-size: 20px;
color: #FFFCFF;
}
p2{
font-family: sourcecodepro;
font-size: 20px;
color: #FFFCFF;
}
.clientsBox {
position: absolute;
top: 0;
left: 0;
background-color: #333;
opacity: 0.3;
padding: 20px;
color: #fff;
}
.clientsBox h1 {
font-family: sourcecodepro;
font-size: 25px;
font-weight: bold;
}
.topnav {
background-color: #333;
opacity: .3;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
@media (max-width: 600px) {
.flexbox-container {
flex-direction: column;
/* Change to column for smaller screens */
}
#textbackground {
width: 100%;
/* Adjust the width for smaller screens */
}
}
@media (max-width: 480px) {
h3 {
flex-wrap: wrap;
}
}
<!DOCTYPE html>
<html lang = 'en'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatable" content="IE-edge">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
</head>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<body>
<div class="CSmadeC">
<div id="h1" class="flexbox-container">
<h1>Computer Science Made Creative</h1>
</div>
<div id="textbackground">
<p1>
In a world where every website and app looks<br>
the same the goal should be to code creatively,<br>
you give me a vision and with software as my canvas,<br>
ill paint it for you.
</p1>
</div>
<h2>
About Me
</h2>
<div id="textbackground">
<p2>I am Remone carter, a computer science student in brooklyn.<br>
I started coding to allow myself to create, to build better things<br>
for myslef and the world, while only having a year of experince, I've inted<br>
with IT programs at schools and hospitals, took programing classes at BMCC,<br>
participated in the all star code summer intensive, and I am a current member of<br>
the google code next program</p2>
</div>
</div>
<div class="ClientSites">
<div>
<h3 >Clients Sites</h3>
</div>
<div id="textbackground" style="height:150px;
line-height:3em;
overflow:scroll;
padding:5px;
font-family: sourcecodepro;
font-size: 25px;
font-weight: bold;
color: #FFFCFF;">
Text TextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextText
TextTextTextTextText
</div>
</div4>
</div>
</body>
</html>
I tried Flexbox stuff but to be honest I'm not very good at it I tried regular CSS positioning but it made the heading text static and it didn't let the text that I would be putting under the heading be formatted with it I tried inline none of it worked maybe I'm just not doing it right
I just read your query.
You should have to change the HTMl structure first and close all the tags properly.
Put your header and "Client sites" code in a main-box div just like this one and use flex property for display: flex; justify-content: space-between; align-items-center;
Both header and client sites will show in front of each other.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatable" content="IE-edge">
<meta name="viewport" content="width=device-width, inital-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
<style>
body{
background: #11151C;
color: #fff;
}
.main-box {
display: flex;
justify-content: space-between;
align-items-center;
}
h1{
font-family: sourcecodepro;
font-size: 25px;
font-weight: 10;
color: #FFF;
}
.flexbox-container {
display: flex;
align-items: center;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="main-box">
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<p>Client Sites</p>
</div>
<div class="CSmadeC">
<div id="h1" class="flexbox-container">
<h1>Computer Science Made Creative</h1>
</div>
</div>
<div id="textbackground">
<p>
In a world where every website and app looks<br />
the same the goal should be to code creatively,<br />
you give me a vision and with software as my canvas,<br />
ill paint it for you.
</p>
</div>
</body>
</html>
And Please try to use some more HTML tags from w3 schools.