On my home page I have a full width background image, however, my content won't display below it. Rather, it is displaying over top of the background image. Can anyone help me make my content display below my background image?
This is my html code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: absolute;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
</body>
</html>
Make it a real background image (in the CSS rule, not in an image tag), remove the absolute position for that DIV and give it 100% height:
html,
body {
margin: 0;
height: 100%;
}
.homepage-backgroundimage {
background: url(http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg) center, center;
background-size: cover;
height: 100%;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
<div class="homepage-backgroundimage"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
Put position:relative instead of position:absolute
Here is the code:
<html>
<title>PLR.com Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.homepage-backgroundimage {
z-index: -1;
position: relative;
background-size: cover;
left:0; right:0; top:0;
margin-left: auto;
margin-right: auto;
display: block;
}
.flexcontainer-bodyarea {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 1000px;
height: 500px;
background-color: #bbb;
}
.flexitem-50ptextarea {
width: 480px;
height: 200px;
margin: 10px;
background-color: #fff;
}
body {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: #bbb;
}
</style>
<body>
<div class="homepage-backgroundimage"><img src="http://pianolessonresource.com/wp-content/uploads/2017/09/Untitled-1.jpg"></div>
<div class="flexcontainer-bodyarea">
<div class="flexitem-50ptextarea">This is one text area</div>
<div class="flexitem-50ptextarea">This is two text area</div>
</div>
Related
I am sure this is really easy but I am facing issue the image is overflowing the card-box section
Wanted to achieve similar to this
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product</title>
</head>
<body>
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
tried to change height and width of container, tried changing display of image class to block but no change is shown in output
My output:
enter image description here
Expecting
enter image description here
I'm not sure flex is the best answer to do that. Personally I would prefer grid.
Display grid for the card, position left and right (image, details) inside.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body {
background-color: hsl(30, 38%, 92%);
}
.container {
display: flex;
justify-content: center;
position: relative;
z-index: -1;
border: 1px solid black;
}
.product {
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image {
grid-area: 1 / 1 / 2 / 2;
height: 100%;
width: auto;
}
.details {
grid-area: 1 / 2 / 2 / 3;
}
img {
max-width: 100%;
height: 100%;
border-radius: 1.5em 0 0 1.5em;
}
<div class="container">
<section class="card-box">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
This may be a way to solve it: just add style="overflow:hidden;" to your code. Or you can try to use "border-radius:20px;" to hide it.
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", "sans-serif";
}
body{
background-color: hsl(30, 38%, 92%);
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
z-index: -1;
border: 1px solid black;
}
.product{
display: flex;
max-width: 700px;
/* justify-content: center;
align-items: center; */
}
.card-box {
margin: 1em 2em;
max-width: 400px;
background-color: white;
border-radius: 1.5em;
border: 1px solid green;
}
.image{
height: 100vh;
width: 50vw;
background-color: aqua;
}
img{
max-width: 100%;
height:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product</title>
</head>
<body>
<div class="container">
<section class="card-box" style="overflow:hidden;">
<section class="image">
<img src="https://codehelp-product-card.netlify.app/images/mug.jpg" alt="" class="cofee-mug">
</section>
<section class="details">
<p>coffee mug</p>
</section>
</section>
</div>
</body>
</html>
heres my project and i've been having a hard time trying to figure out the reason why this div "leftCardapio", whenever its zoomed in, the elements inside of it increase their height and width.
i have no ideia what this may be, can someone please gimme a hand?
appreciate the help.
here is my full projecttt
/* Variables */
:root {
--Gray: #323a3a;
--DarkBlue: #123B79;
--LightBlue: #18A5A7;
--LightGray: #D9D9D9;
--White: white;
}
html,
body {
margin: 0 auto;
user-select: none;
background-color: black;
font-family: 'Arial';
/* overflow: hidden; */
}
/* Order:
Bottom,
Left,
Top,
Content,
Container
*/
/* Container DIV*/
.container {
display: flex;
justify-content: center;
margin: 0 auto;
width: 100vw;
height: 100vh;
}
.content {
text-align: center;
background-color: gray;
position: absolute;
right: 0;
width: 100%;
height: 100%;
}
#img_Content {
height: 97%;
width: 100%;
object-fit: cover;
}
/* Bottom DIV */
.bottom {
display: flex;
flex-direction: column;
position: absolute;
background-color: black;
bottom: 0;
margin-left: 0%;
width: 100%;
height: 10%;
}
/* LEFT DIV */
.left {
display: flex;
flex-direction: column;
column-gap: 10px;
background-color: var(--Gray);
position: absolute;
left: 0;
width: 10%;
height: 100%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa {
display: flex;
flex-direction: column;
padding-top: 10%;
display: inline-block;
vertical-align: middle;
text-align: center;
overflow: hidden;
cursor: pointer;
flex: 1;
}
.itemDestaque {
margin-top: 33%;
}
.itemDestaque,
.itemCardapio,
.itemBebidas,
.itemReservar_mesa span {
font-weight: 550;
overflow: hidden;
color: white;
}
.itemCardapio:hover,
.itemDestaque:hover,
.itemBebidas:hover,
.itemReservar_mesa:hover {
box-shadow: 5px 20px 20px rgba(0, 0, 0, 0.5);
background-color: var(--LightBlue);
}
#destaqueIMG,
#cardapioIMG,
#bebidasIMG,
#reservar_mesaIMG {
height: 80%;
width: 40%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#bebidasIMG {
width: 30%;
}
/* LEFT CARDAPIO DIV */
.leftCardapio {
display: none;
}
.itemCardapio:hover>.leftCardapio {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemPratos,
.itemSaladas,
.itemSopas,
.itemSobremesas,
.itemMolhos,
.itemPorcoes {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemPratos:hover,
.itemSaladas:hover,
.itemSopas:hover,
.itemSobremesas:hover,
.itemMolhos:hover,
.itemPorcoes:hover {
background-color: var(--DarkBlue);
}
/* LEFT BEBIDAS DIV */
.leftBebidas {
display: none;
}
.itemBebidas:hover>.leftBebidas {
display: flex;
flex-direction: column;
background-color: white;
text-align: center;
position: absolute;
left: 0;
top: 0;
margin-left: 100%;
width: 250px;
height: 100%;
}
.itemBebida1 {
height: 80px;
width: 100%;
background-color: lightgray;
border-bottom: 3px solid white;
}
.itemBebida1:hover {
background-color: var(--DarkBlue);
}
/* TOP DIV */
/* Top Box 1 = Logo Recanto
Top Box 2 = Mesa
Top Box 3 = Pesquisa
Top Box 4 = Conta
Top Box 5 = Pedidos */
.top {
display: flex;
flex-direction: row;
background-color: #123B79;
position: absolute;
top: 0;
width: 100%;
height: 7%;
}
.topBox1 {
display: flex;
flex-direction: row;
flex: 8;
}
.topBox2,
.topBox3,
.topBox4,
.topBox5 {
text-align: center;
cursor: pointer;
flex: 1;
}
.topBox2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
background-color: #ffffff;
}
.topBox3,
.topBox4,
.topBox5 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
border-right: 1px solid #2fa9ab;
background-color: var(--LightBlue);
}
.topBox2:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #dadada;
}
.topBox3:hover,
.topBox4:hover,
.topBox5:hover {
transform: scale(1.0);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: #4eb9bb;
border-right: none;
}
.imgTopBox1 {
display: flex;
justify-content: center;
align-items: center;
width: 19%;
height: 100%;
}
#logoRecanto {
max-width: 100%;
max-height: 90%;
}
#mesaIMG,
#pesquisarIMG,
#contaIMG,
#pedidosIMG {
width: 20%;
max-height: 100%;
display: inline-block;
vertical-align: middle;
object-fit: contain;
overflow: hidden;
}
#mesaIMG {
filter: invert(0%) sepia(9%) saturate(0%) hue-rotate(130deg) brightness(0%) contrast(0%);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./imgs/HMSC_Catavento.png">
<link rel="stylesheet" href="css/style.css">
<title>Restaurante Recanto </title>
</head>
<body>
<div class="container">
<div class="content">
<img src="./imgs/Prato_Content_5.png-" id="img_Content">
</div>
<div class="bottom"></div>
<div class="left">
<div class="itemDestaque">
<img src="./imgs/Destaque.png" id="destaqueIMG">
<br><span> DESTAQUE</span>
</div>
<div class="itemCardapio" id="itemCardapio">
<img src="./imgs/Cardapio2.png" id="cardapioIMG">
<br><span> CARDÁPIO </span>
<div class="leftCardapio">
<div class="itemPratos"></div>
<div class="itemSaladas"></div>
<div class="itemSopas"></div>
<div class="itemSobremesas"></div>
<div class="itemMolhos"></div>
<div class="itemPorcoes"></div>
</div>
</div>
<div class="itemBebidas">
<img src="./imgs/Bebidas.png" id="bebidasIMG">
<br><span> BEBIDAS </span>
<div class="leftBebidas">
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
<div class="itemBebida1"></div>
</div>
</div>
<div class="itemReservar_mesa">
<img src="./imgs/Mesa.png" id="reservar_mesaIMG">
<br><span> RESERVAR MESA </span>
</div>
</div>
<div class="top">
<div class="topBox1">
<div class="imgTopBox1">
<img src="./imgs/LogoRecanto.png" id="logoRecanto">
</div>
</div>
<div class="topBox2">
<img src="./imgs/Mesa.png" id="mesaIMG">
</div>
<div class="topBox3">
<img src="./imgs/Pesquisar.png" id="pesquisarIMG">
</div>
<div class="topBox4">
<img src="./imgs/Conta.png" id="contaIMG">
</div>
<div class="topBox5">
<img src="./imgs/Pedidos.png" id="pedidosIMG">
</div>
</div>
</div>
<!-- <script src="./scripts/changeImg.js"></script> -->
</body>
</html>
Your sub-menu elements increase in height when you zoom because that's the expected behavior of the zoom. Try zooming on any site or even here on stack-overflow.
When you zoom in browser what happens is that your visible area dimensions decrease. For example lets say your page is 1000px wide, when you zoom in to 200% it's now 500px wide, but these 500px are stretched to 1000px on your monitor.
On your site everything except sub-menu has % width and height. So if element width is 10% on 1000px screen it's 100px. If you zoom to 200% it's 10% of 500px, so 50px. Visually it stays the same size. Now when you have fixed dimensions on element like you have on your sub-menu, 80px is still 80px no matter how much you zoom in. On 500px screen of course 80px element will take more space then on 1000px screen.
Note the 80px height
I am trying to create some boxes and for some reason cannot get them to move anywhere. I am newer to HTML/CSS and not sure what I am doing wrong. I am trying to make the background a video and figure out how to put my boxes on top. For some reason they appear only at the bottom but wont move with anything I put in CSS. Obviously I am not doing something right. I am trying to use a video as my background and would like to know also if I am going about this the right way even? To my understanding you cannot set a video as the background directly in CSS? Thanks for the help.
/* font-family: 'Sedgwick Ave'; */
#import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');
/* font-family: 'Bebas Neue' */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* font-family: 'Nunito' */
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#200&display=swap');
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
max-width: 100%;
/* border:1px solid red; */
}
/*General Styles*/
html,body {
font-size: 62.5%;
/* background-image: url('/images/home-page-bg-black.jpg'); */
width: 100%;
height: 100%;
}
.container {
height: 100%;
width: 100%;
}
nav {
position: relative;
height: 100vh;
text-align: center;
display: flex;
justify-content: space-evenly;
}
nav a{
text-decoration: none;
font-size: 2.2em;
color: white;
margin-top: 2%;
font-family: 'Bebas Neue';
}
.boxes{
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
.box{
background-color: red;
position: relative;
width: 10%;
height: 80px;
display: flex;
align-content: center;
}
.box h4{
text-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<div id=".container">
<video autoplay muted loop poster id="myVideo">
<source src="/images/Cyberpunk1-1 (2021_04_28 20_59_30 UTC).mp4" type="video/mp4">
</video>
<nav>
Home
About
Projects
Contact
</nav>
<div class ="boxes">
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
</div>
</div>
</body>
</html>
Is this what you are looking for?
Changes:
Correct class name to <div class="container">
In CSS for .boxes added
position: absolute;
top: 0;
left: 0;
In CSS for .box added some internal spaces
padding: 10em;
/* font-family: 'Sedgwick Ave'; */
#import url('https://fonts.googleapis.com/css2?family=Sedgwick+Ave&display=swap');
/* font-family: 'Bebas Neue' */
#import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');
/* font-family: 'Nunito' */
#import url('https://fonts.googleapis.com/css2?family=Nunito:wght#200&display=swap');
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
max-width: 100%;
/* border:1px solid red; */
}
/*General Styles*/
html,body {
font-size: 62.5%;
/* background-image: url('/images/home-page-bg-black.jpg'); */
width: 100%;
height: 100%;
}
.container {
height: 100%;
width: 100%;
}
nav {
position: relative;
height: 100vh;
text-align: center;
display: flex;
justify-content: space-evenly;
}
nav a{
text-decoration: none;
font-size: 2.2em;
color: white;
margin-top: 2%;
font-family: 'Bebas Neue';
}
.boxes{
display: flex;
position: absolute;
top: 0;
left: 0;
justify-content: space-evenly;
flex-wrap: wrap;
}
.box{
background-color: red;
position: relative;
width: 10%;
height: 80px;
display: flex;
align-content: center;
padding: 10em;
}
.box h4{
text-align: top;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<link rel="stylesheet" href="styles/index.css">
</head>
<body>
<div class="container">
<video autoplay muted loop poster id="myVideo">
<source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>
<nav>
Home
About
Projects
Contact
</nav>
<div class ="boxes">
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
<div class="box"> <h4>TEXT HERE</h4></div>
</div>
</div>
</body>
</html>
I want to make 3 column layout with flex box. The goal is to make first and last div widths dynamic. But the 2nd div max-width is static.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
min-height: 100% !important;
height: 100%;
}
body{
margin: 0;
background-color: #ddd;
display: flex;
justify-content: space-between;
}
.left , .center, .right{
height: 100%;
}
.left{
width: auto;
background-color: antiquewhite;
}
.center{
display: flex;
min-height: 100vh;
flex-direction: column;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right{
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</body>
</html>
Now I am getting the center max width is constant that I expected. But left & right div's not appear always. I want to make right & left div appear with dynamic width that based on browser window size.
Update - current layout:
Expected layout:
How can I make it work?
Here you go.
Just apply flex:1 to all of the divs but flex: 1 0 100%; to the center div so it defaults to as wide as it can before hitting the max-width you wanted.
html,
body {
min-height: 100% !important;
height: 100%;
}
body {
margin: 0;
background-color: #ddd;
display: flex;
}
.left,
.center,
.right {
flex: 1;
height: 100%;
}
.left {
width: auto;
background-color: red
}
.center {
display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1 0 100%;
width: 100%;
max-width: 1200px;
background-color: green;
}
.right {
width: auto;
background-color: blue;
}
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
does this help?
.flex-container {
display: flex;
justify-content: space-between;
background-color: DodgerBlue;
}
.flex-container > .side {
background-color: green;
width: 100%;
}
.flex-container > .center {
background-color: #f1f1f1;
color: green;
max-width: : 100%;
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div class="side"></div>
<div class="center">
this will expand as your content grows
</div>
<div class="side"></div>
</div>
</body>
</html>
I want to center my text inside the flex items horizontally and vertically. I've looked around everywhere and tried a lot of things but so far nothing seems to work...
Could I nest another flexbox-container inside the existing one?
html, body {
height: 100%;
margin: 0;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.page1 {
flex-grow: 1;
min-height: 100%;
background: lightblue;
}
#text1 {
font-size: 160%;
color: white;
font-family: roboto, sans-serif;
}
.page2 {
flex-grow: 1;
min-height: 100%;
background: cyan;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
<div class="flex-container">
<div class="page1">
<p id="text1">blabla bla blablabla.</p>
</div>
<div class="page2"></div>
<div class="page3"></div>
</div>
Yes, make the flex-items also flex-containers as seen below. I also added margin: auto to #text1 to center it.
html, body {
height: 100%;
margin: 0;
}
.flex-container {
height: 100%;
display: flex;
flex-direction: column;
}
.page1 {
display: flex;
flex-direction: column;
flex-grow: 1;
min-height: 100%;
background: lightblue;
}
#text1 {
margin: auto;
font-size: 160%;
color: white;
font-family: roboto, sans-serif;
}
.page2 {
flex-grow: 1;
min-height: 100%;
background: cyan;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
.page3 {
flex-grow: 1;
min-height: 100%;
background: lightgreen;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Portfolio </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex-container">
<div class="page1">
<p id="text1"> blabla bla blablabla. </p>
</div>
<div class="page2">
</div>
<div class="page3">
</div>
</div>
</body>
</html>