I'm currently working on a final assignment for my class, which involves creating a basic webpage to learn about using local storage. However, I am encountering some challenges at an early stage of the process since I am still quite new to this. I have been utilizing fixed divs for the main structure of the webpage and now I am unsure how to add more content. I attempted to use the 'inherent position' but it resulted in everything going wrong.
the code: https://codepen.io/ipanonima/pen/WNbNeJm
Here is the HTML body:
<body>
<div class="main">
<div class="main-bar">
<div class="main-bar-container">
<div class="main-bar--logo">
<img src="./public/logo.png">
</div>
<div class="main-bar--info-container">
<div class="main-bar--info-container--buttons">
<div class="main-bar--info-container--buttons--b"><p>Button</p></div>
<div class="main-bar--info-container--buttons--b"><p>Button</p></div>
<div class="main-bar--info-container--buttons--b"><p>Button</p></div>
</div>
<div class="main-bar--info-container--login">
<div class="main-bar--info-container--login--b"><p>Login</p></div>
</div>
</div>
</div>
</div>
<div class="example-section">
<div class="example-section--pictures" id="ex1">
<div class="example-section--pictures-pic"><img src="./public/canada-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">Canada</div></div>
</div>
<div class="example-section--pictures" id="ex2">
<div class="example-section--pictures-pic"><img src="./public/mexico-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">Mexico</div></div>
</div>
<div class="example-section--pictures" id="ex3">
<div class="example-section--pictures-pic"><img src="./public/eu-example.jpg"></div>
<div class="example-section--pictures--overlay"><div class="overlay--text">USA</div></div>
</div>
</div>
<div class="banner-session"></div>
</div>
</body>
Below is my CSS (which has become quite lengthy)
*{
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
}
input{
border: none;
border-bottom: 2px solid #74b5fa;
background-color: rgba(250, 167, 116, 0);
}
.box-session{
box-sizing: content-box;
position: relative;
etc...
Thank you for your patience!