Anybody know why my code only displays properly in Chrome, and not in Firefox or ie. The main problem is with the " Roman style columns ". I'm a stoopid noob so please answer as simply as possible. Is there a way to resolve this by adding vendor prefixes ? Stack overflow is now telling me to add more details, before I can ask this question. So the more details is, that after 5 months of hard work trying to learn how to code. I am ready to quit, If I can not solve this problem. I hope it is ok to use the word "problem" here, because I already learned that it is not allowed in the title of a question.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main3.css">
<title>Chemas Website</title>
</head>
<body>
<header class= "mh-container">
<div class= "h-container">
<h1>José María Penabad B.</h1>
<h2 id="Abo">Abogado</h2>
<h2 id="Att">Attorney at Law</h2>
<h2 id="San">San Jose, Costa Rica</h2>
<h2 id="email">jpenabad#racsa.co.cr</h2>
<div id="scales1">
<img src="imagesC/scales1.png" alt="scales of justice" height="140" width="140">
</div>
<div id="scales2">
<img src="imagesC/scales2.png" alt="scales of justice" height="140" width="140">
</div>
<div id="flag1">
<img class="f1radius" src="imagesC/flag1.png" alt="flag" height="40" width="70">
</div>
<div id="flag2">
<img class="f2radius" src="imagesC/flag2.png" alt="flag" height="40" width="70">
</div>
</div><!--close h-container-->
</header>
<!--Roman Columns-->
<div class="content">
<div id="col_topleft">
<img src="imagesC/col_topleft.png" alt="column" height="420" width="60">
</div>
<div id="col_topright">
<img src="imagesC/col_topright.png" alt="column" height="420" width="60">
</div>
<div id="col_bottleft">
<img src="imagesC/col_bottleft.png" alt="column" height="596" width="60">
</div>
<div id="col_bottright">
<img src="imagesC/col_bottright.png" alt="column" height="596" width="60">
</div>
<div id="scroll1">
<img src="imagesC/scroll1.png" alt="scroll" height="80" width="700">
</div>
<div id="scroll2">
<img class="radius" src="imagesC/scroll2.png" alt="scroll" height="80" width="385">
</div>
<h3 class=toph3>Please Allow Me To Introduce Myself.</br>I'm a man of wealth and taste !</h3>
<p class="p1and2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, inventore, natus obcaecati debitis facilis quos ipsum libero quidem voluptatum tenetur laboriosam perspiciatis! Unde optio aliquid cum alias similique nobis cupiditate.
Temporibus, itaque, nobis, quaerat omnis amet ipsam provident sed ea incidunt minus consectetur corporis. Aliquam, excepturi ipsum similique ad tenetur quas labore ipsam cupiditate dolorem odit inventore laborum ea. Ut!
</p>
<p class="p1and2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, et saepe. Exercitationem, perferendis, nemo quo itaque unde vel consectetur est sequi recusandae eum cum assumenda non sapiente excepturi quas odio.
Sit, alias, ea quibusdam adipisci aperiam officia a aliquam dolorum id culpa animi distinctio nisi voluptates repellat vel? Debitis, praesentium recusandae iusto a quis ducimus libero voluptates porro aperiam earum.
</p>
<h3 class=both3>Beinvenido !</h3>
<p class="p3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
</p>
<p class="p4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
</p>
</div><!--close content div-->
<div>
<footer>
<p class="ftr"><strong>Copyright 2017 © All Rights Reserved</strong></p>
<div>
<img src="imagesC/ALMA.png" alt="ALMA" height="22" width="220" class="center"/>
</div>
</footer>
</div>
</body>
</html>
*{margin:0 ;
padding: 0;
}
.mh-container{max-width: 100%;
height: 250px;
margin: 0 auto;
/* border: 2px solid red;*/
background: #fff;
background: radial-gradient(#000000,#2a2a2a,#565656,#828282,#a7a7a7,#d7d7d7);
}
h1 {text-align: center;
color:#c8e1e1;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
padding-top: 20px;
}
#Abo {text-align: center;
color: #c8e1e1;
padding-top: 0px;
}
#Att {text-align: center;
padding-top: 5px;
color: #c8e1e1;
}
#San {text-align: center;
padding-top: 5px;
color: #c8e1e1;
}
#email {text-align: center;
padding-top: 5px;
color: #c8e1e1;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
#scales1 {position: absolute;
top: 25px;
left: 120px;
border: 3px solid red;
height: 140px;
border-radius: 70px;
}
#scales2 {position: absolute;
top: 25px;
right: 120px;
border: 3px solid red;
height: 140px;
border-radius: 70px;
}
#flag1 {position: absolute;
top:0px;
}
#flag2 {position: absolute;
top:0px;
right:0px;
}
.f1radius {border-bottom-right-radius: 6px;}
.f2radius {border-bottom-left-radius: 6px;}
body {background: linear-gradient(#000000,#2A2A2A,#565656,#828282,#A7A7A7);
}
#scroll1 {position: absolute;
top: 250px;
left: 190px;
}
#scroll2 {position: absolute;
top: 1183px;
left: 350px;
}
.radius{border-top-left-radius: 8px;
border-top-right-radius: 8px;}
/*Roman Columns*/
#col_topleft {position: absolute;
top: 250px;
left: 25px;
}
#col_topright {position: absolute;
top: 250px;
right: 25px;
}
#col_bottleft {position: absolute;
top: 670px;
left: 25px;
}
#col_bottright {position: absolute;
top: 670px;
right: 25px;
}
.toph3 {text-align: center;
padding-top: 200px;
color: #c8e1e1 ;
font-family: sans-serif;}
.both3 {text-align: center;
padding-top: 60px;
color: #c8e1e1;
font-family: sans-serif;}
p{margin-left: 150px;
margin-right: 150px;
margin-top: 60px;
text-indent:20px;
font-family: sans-serif;
}
.p1and2 {color: #c8e1e1;}
.p3 {color: #c8e1e1;}
.p4 {color: #c8e1e1;
margin-bottom: 80px;}
footer {width: 100%;
min-height: 80px;
background-color: black
}
.ftr {text-align: center;
padding: 20px;
color: #c8e1e1;
}
img.center{display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
so I moved your code inside the style tags and changed some the image files because I obviously cant see the ones that you were referencing.
Code is below, as is screenshots from chrome, ie and firefox.
All seem to be behaving the same in regards to to the columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main3.css">
<title>Chemas Website</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.mh-container {
max-width: 100%;
height: 250px;
margin: 0 auto;
/* border: 2px solid red;*/
background: #fff;
background: radial-gradient(#000000,#2a2a2a,#565656,#828282,#a7a7a7,#d7d7d7);
}
h1 {
text-align: center;
color: #c8e1e1;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
padding-top: 20px;
}
#Abo {
text-align: center;
color: #c8e1e1;
padding-top: 0px;
}
#Att {
text-align: center;
padding-top: 5px;
color: #c8e1e1;
}
#San {
text-align: center;
padding-top: 5px;
color: #c8e1e1;
}
#email {
text-align: center;
padding-top: 5px;
color: #c8e1e1;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#scales1 {
position: absolute;
top: 25px;
left: 120px;
border: 3px solid red;
height: 140px;
border-radius: 70px;
}
#scales2 {
position: absolute;
top: 25px;
right: 120px;
border: 3px solid red;
height: 140px;
border-radius: 70px;
}
#flag1 {
position: absolute;
top: 0px;
}
#flag2 {
position: absolute;
top: 0px;
right: 0px;
}
.f1radius {
border-bottom-right-radius: 6px;
}
.f2radius {
border-bottom-left-radius: 6px;
}
body {
background: linear-gradient(#000000,#2A2A2A,#565656,#828282,#A7A7A7);
}
#scroll1 {
position: absolute;
top: 250px;
left: 190px;
}
#scroll2 {
position: absolute;
top: 1183px;
left: 350px;
}
.radius {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/*Roman Columns*/
#col_topleft {
position: absolute;
top: 250px;
left: 25px;
}
#col_topright {
position: absolute;
top: 250px;
right: 25px;
}
#col_bottleft {
position: absolute;
top: 670px;
left: 25px;
}
#col_bottright {
position: absolute;
top: 670px;
right: 25px;
}
.toph3 {
text-align: center;
padding-top: 200px;
color: #c8e1e1;
font-family: sans-serif;
}
.both3 {
text-align: center;
padding-top: 60px;
color: #c8e1e1;
font-family: sans-serif;
}
p {
margin-left: 150px;
margin-right: 150px;
margin-top: 60px;
text-indent: 20px;
font-family: sans-serif;
}
.p1and2 {
color: #c8e1e1;
}
.p3 {
color: #c8e1e1;
}
.p4 {
color: #c8e1e1;
margin-bottom: 80px;
}
footer {
width: 100%;
min-height: 80px;
background-color: black;
}
.ftr {
text-align: center;
padding: 20px;
color: #c8e1e1;
}
img.center {
display: block;
margin-left: auto;
margin-right: auto;
padding: 10px;
}
</style>
</head>
<body>
<header class="mh-container">
<div class="h-container">
<h1>José María Penabad B.</h1>
<h2 id="Abo">Abogado</h2>
<h2 id="Att">Attorney at Law</h2>
<h2 id="San">San Jose, Costa Rica</h2>
<h2 id="email">jpenabad#racsa.co.cr</h2>
<div id="scales1">
<img src="imagesC/scales1.png" alt="scales of justice" height="140" width="140">
</div>
<div id="scales2">
<img src="imagesC/scales2.png" alt="scales of justice" height="140" width="140">
</div>
<div id="flag1">
<img class="f1radius" src="imagesC/flag1.png" alt="flag" height="40" width="70">
</div>
<div id="flag2">
<img class="f2radius" src="imagesC/flag2.png" alt="flag" height="40" width="70">
</div>
</div><!--close h-container-->
</header>
<!--Roman Columns-->
<div class="content">
<div id="col_topleft">
<img src="column.jpg" alt="column" height="420" width="60">
</div>
<div id="col_topright">
<img src="column.jpg" alt="column" height="420" width="60">
</div>
<div id="col_bottleft">
<img src="column.jpg" alt="column" height="596" width="60">
</div>
<div id="col_bottright">
<img src="column.jpg" alt="column" height="596" width="60">
</div>
<div id="scroll1">
<img src="imagesC/scroll1.png" alt="scroll" height="80" width="700">
</div>
<div id="scroll2">
<img class="radius" src="imagesC/scroll2.png" alt="scroll" height="80" width="385">
</div>
<h3 class=toph3>Please Allow Me To Introduce Myself.</br>I'm a man of wealth and taste !</h3>
<p class="p1and2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, inventore, natus obcaecati debitis facilis quos ipsum libero quidem voluptatum tenetur laboriosam perspiciatis! Unde optio aliquid cum alias similique nobis cupiditate.
Temporibus, itaque, nobis, quaerat omnis amet ipsam provident sed ea incidunt minus consectetur corporis. Aliquam, excepturi ipsum similique ad tenetur quas labore ipsam cupiditate dolorem odit inventore laborum ea. Ut!
</p>
<p class="p1and2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, et saepe. Exercitationem, perferendis, nemo quo itaque unde vel consectetur est sequi recusandae eum cum assumenda non sapiente excepturi quas odio.
Sit, alias, ea quibusdam adipisci aperiam officia a aliquam dolorum id culpa animi distinctio nisi voluptates repellat vel? Debitis, praesentium recusandae iusto a quis ducimus libero voluptates porro aperiam earum.
</p>
<h3 class=both3>Beinvenido !</h3>
<p class="p3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
</p>
<p class="p4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, et dolorem cumque odit maxime unde sapiente nesciunt in quo vitae temporibus consequuntur voluptas dolor ipsum repellendus alias nam quia at?
Ratione, at, sed, quisquam, repellat reiciendis laudantium consequatur molestiae adipisci vero tempora ab saepe iste doloribus ad earum rem mollitia quidem soluta laborum magni! Excepturi enim qui odio ut rerum.
</p>
</div><!--close content div-->
<div>
<footer>
<p class="ftr"><strong>Copyright 2017 © All Rights Reserved</strong></p>
<div>
<img src="imagesC/ALMA.png" alt="ALMA" height="22" width="220" class="center" />
</div>
</footer>
</div>
</body>
</html>
Chrome
Firefox
IE
Related
I am trying to build a portfolio website using Django. I have created a template with the following HTML code:
However, on minimizing the browser, I notice that it aligns to the left perfectly.
.div-title{
font-size: 40px;
}
.experience-container{
min-height: 100px;
height: fit-content;
width: 300px;
margin-left: 50px;
padding: 10px;
transition: all 0.5s;
border-radius: 10px;
margin-bottom: 10px;
margin-top: 10px;
box-shadow: 0px 5px rgb(162, 162, 163);
}
.experience-container:hover{
box-shadow: 0px 5px 30px rgb(255, 0, 0);
}
.experience-div{
margin: auto;
}
.project-container{
min-height: 100px;
height: fit-content;
width: 300px;
margin-left: 50px;
padding: 10px;
/* border: 1px solid rgb(63, 61, 61); */
transition: all 0.5s;
border-radius: 10px;
vertical-align: top;
margin-bottom: 40px;
margin-top: 50px;
}
.project-container:hover{
box-shadow: 0px 0px 20px orange;
}
.project-div{
padding-left: 10px;
margin-top: 10px;
padding-top: 0px;
height: fit-content;
min-height: 760px;
}
.image-for-project-container{
margin-top: 40px;
margin-bottom: 100px;
}
<div id="Project" class="bg-white fnt-white brdr project-div ">
<div class="float-left image-for-project-container brdr">
<img src="{% static './Images/manworking.webp' %}" alt="manworking" height="700px">
</div>
{% for project in project_details %}
<div class=" project-container inline-block brdr">
<h2 class="text-center fnt-black head-portfolio">
{{project.project_name}}
</h2>
<br>
<br>
<p class="margin-auto txt-portfolio roboto hover-orange fnt-black">
{{project.project_details}}
</p>
<br>
Read More
</div>
{% endfor %}
</div>
<div class="bg-black fnt-white experience-div block brdr">
<h1 class="brdr block div-title roboto fnt-orange roboto">
Education
</h2>
<div class="experience-container inline-block bg-gray">
<h2 class="text-center fnt-black head-portfolio">
Lorem, ipsum.
</h2>
<br>
<br>
<p class="margin-auto txt-portfolio roboto fnt-black">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vero nemo dolore sit perferendis qui ad hic, expedita, magnam ipsam est eligendi nulla, ipsum quasi fuga?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi corrupti asperiores voluptatem sit fugiat saepe doloribus suscipit rerum eum. Nulla molestiae quasi sint libero voluptate qui repellat quis eos ratione itaque! Aut deserunt labore excepturi corporis hic nostrum voluptates vero beatae facilis non amet quaerat aliquam iste eveniet natus, voluptatem aperiam veritatis, expedita incidunt quis sunt eaque saepe est totam.
</p>
<br>
Read More
</div>
</div>
I do believe these are the relevant CSS which could make a difference, but if any more is required please do let me know. Thanks!
Additionally, please do explain why your solution is required and what I have done wrong if you can. :)
For reference, I have attached an Image:
I am having some troubles in CSS. My .content-zona will not show up on the page, it has a lower selector than the nav (for some reason that i can't figure out) and the nav will just overwrite whatever the .content-zona has in CSS. Im very new to this, I hope my question wasn't very confusing. Thank you whoever tried to help a newbie!
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.site-nav li li a:hover
/* Kraj Padajuceg menija */
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>
Nothing is overwritten on your selector, you have a dangling selector before .content-zona and CSS can't recover himself after that error until it reaches a close curly bracket so all .content-zona styles are ruined
Remove these two lines from your CSS code or add curly brackets to end of that selector to fix it
Either Like This
.site-nav li li a:hover{}
Or
html {
background-color: #b4cc79;
}
body {
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 87%;
}
img {
max-width: 100%;
height: auto;
}
/* Banner Overlay */
.image-banner {
position: relative;
}
.image-banner img {
display: block;
}
.banner-description {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
background-color: rgba(0, 0, 0, .65);
padding: 15px 20px;
}
.container {
width: 940px;
background-color: #fff;
margin-right: auto;
margin-left: auto;
padding-left: 40px;
padding-right: 40px;
box-sizing: border-box;
}
header {
padding-top: 20px;
color: #000;
border-bottom: 3px solid #a2c14e;
}
header h1 {
margin: 0;
font-size: 165%;
font-weight: normal;
}
header p {
margin: 0;
}
/* Site Navigation */
.site-nav {
margin-top: 20px;
}
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav li {
list-style: none;
float: left;
margin-right: 5px;
}
.site-nav a {
color: black;
display: block;
text-decoration: none;
padding: 10px 20px;
border: 3px solid #a2c14e;
border-bottom: none;
}
.site-nav li:hover>a,
.site-nav a:hover {
background-color: #ecefbc;
}
/* Site Nav padajuci meni */
.site-nav li ul {
z-index: 9999;
position: absolute;
display: block;
background-color: #f9f1ce;
box-shadow: 7px 7px 7px -7px rgba(0, 0, 0, .6);
left: -9999px;
}
.site-nav li:hover ul {
left: auto;
}
.site-nav li li {
float: none;
margin-right: 0;
}
.content-zona {
border-top: 3px solid #a2c14e;
border-bottom: 3px solid #a2c14e;
}
.main-area {
width: 66%;
float: left;
padding-right: 40px;
box-sizing: border-box;
}
.side-area {
width: 34%;
float: left;
background-color: #f9f1ce;
padding: 20px 40px;
box-sizing: border-box;
font-size: 85%;
}
footer {
text-align: center;
font-size: 85%;
color: black;
padding-top: 20px;
padding-bottom: 20px;
}
.fix {
clear: both;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
<div class="container">
<header>
<h1>Website Simoneta</h1>
<p>Ovo je paragraf u header</p>
<nav class="site-nav">
<ul class="group">
<li>Pocetna stranica</li>
<li>Kontakt</li>
<li>O meni
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Kako do mene</li>
</ul>
</nav>
</header>
<div class="content-zona group">
<div class="main-area">
<h2>Ovo je prvi naslov</h2>
<p>Ovo je glavni sadrzaj tj main-area. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non inventore explicabo quis, quam quisquam laborum sint dicta id aliquid! Neque aperiam quidem aliquid modi quod, optio reprehenderit quisquam ut nisi.
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non itaque at velit? Cupiditate saepe tempora architecto atque officia laudantium quisquam eos ducimus accusantium vero, earum impedit natus sit amet magni! Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Facere deserunt sed animi, repellat a pariatur quisquam! Mollitia soluta harum ipsa explicabo est voluptatem veritatis impedit, incidunt optio consequatur inventore eligendi. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Omnis praesentium dolorum alias, laboriosam eum nihil, eveniet eaque, corrupti harum tempora minima a similique fugiat unde deleniti velit sequi necessitatibus id?</p>
<div class="image-banner">
<img src="ptica.jpg">
<div class="banner-description">
<p>This is a bird.Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores eligendi dicta tempore ab ullam? Quas nobis tempora placeat? Ex fugiat esse placeat fugit modi nostrum ut aliquam labore exercitationem maxime!</p>
</div>
</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perferendis maxime est numquam sit corrupti cupiditate cum ducimus qui, excepturi explicabo, aliquid reprehenderit necessitatibus, enim deleniti voluptas in mollitia totam fugit! Lorem ipsum
dolor sit amet consectetur adipisicing elit. Eius, debitis. Eius inventore sunt sapiente atque veniam ducimus eaque culpa alias porro optio nulla, provident laboriosam, iure commodi dolorum nobis tempora.</p>
</div>
<aside class="side-area">Ovo je sidebar. Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum dolores unde, adipisci accusamus nostrum vitae quo labore numquam, quaerat blanditiis tempore sequi porro dolor. Facilis esse fugiat quia totam culpa. Lorem ipsum dolor
sit amet consectetur adipisicing elit. Assumenda, aperiam impedit enim vel asperiores beatae fugiat amet. Fugiat, nulla. Eaque totam reiciendis blanditiis cum nisi hic nobis ex tenetur facere.</aside>
</div>
<footer>© Ovo je futer 2022.</footer>
</div>
I made an accordion menu using HTML and CSS but I am facing an issue:
I am able to close the menus with the '-' button, but one will always remain open.
How do I make it so I can close all questions if I need too (and also if I choose to open two questions, or even all three at the same time)?
Thank you.
.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link:focus {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.accordion-item:target .faq-answer {
max-height: 20rem;
}
.accordion-item:target .accordion-link .accordion-icon-add {
display: none;
}
.accordion-item:target .accordion-link .accordion-icon-remove {
display: block;
}
<section class="wizard-faq-section">
<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>
There are many things over.
First, you have not used js and expecting more from css
I have made it work by using JavaScript and toggle of classes, of active/clicked item
Snippet:
document.querySelectorAll(".accordion-link").forEach(function(item) {
item.onclick = function() {
if (!(document.querySelector(".accordion-link.clicked") == null) && !(document.querySelector(".accordion-link.clicked") == item)) {
document.querySelector(".accordion-link.clicked").classList.toggle("clicked");
}
document.activeElement.classList.toggle("clicked");
};
});
.wizard-faq-section {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: "Montserrat", sans-serif;
}
.faq-container {
width: 100%;
margin: 0 auto;
max-width: 30em;
}
.accordion-link {
font-size: 0.875rem;
font-weight: 600;
border: 1px solid #f3f4f6;
border-radius: 4px;
margin-bottom: 0.9em;
padding: 0.5em 0 0.5em 2em;
text-decoration: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-link.clicked {
background-color: #f3f4f6;
}
.accordion-link:hover {
color: #1468a0;
}
.accordion-link span {
color: #6366f1;
padding: .5rem;
}
.accordion-icon-remove {
display: none;
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 650ms;
}
.faq-answer::before {
content: "";
position: absolute;
width: .6rem;
height: 90%;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.faq-answer p {
font-size: 0.875rem;
padding-left: 2em;
color: #6b7280
}
.clicked+.faq-answer {
max-height: 20rem;
}
.clicked .accordion-icon-add {
display: none;
}
.clicked .accordion-icon-remove {
display: block;
}
<section class="wizard-faq-section">
<div class="faq-container">
<div class="faq-accordion">
<div class="accordion-item" id="faq-item-1">
<a class="accordion-link" href="#faq-item-1">
Q1
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsa corrupti magni praesentium velit quo eum unde, accusamus dolorum cum eligendi!</p>
</div>
</div>
<div class="accordion-item" id="faq-item-2">
<a class="accordion-link" href="#faq-item-2">
Q2
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cupiditate cum laborum voluptates mollitia suscipit dicta ut temporibus. Nostrum provident dolorem, voluptatem sunt veniam maxime animi. Quisquam sit repudiandae reiciendis illo iusto
nostrum harum, eius laudantium quidem et saepe provident doloremque blanditiis magni tenetur nulla autem eum, nemo veritatis? Itaque.</p>
</div>
</div>
<div class="accordion-item" id="faq-item-3">
<a class="accordion-link" href="#faq-item-3">
Q3
<span class="accordion-icon-add">+</span>
<span class="accordion-icon-remove">-</span>
</a>
<div class="faq-answer">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure quis, pariatur nesciunt quaerat alias aspernatur laudantium eaque sapiente veritatis nobis reiciendis adipisci, beatae aliquam dicta illum consectetur, reprehenderit quisquam non
ad eum laboriosam illo eligendi ipsam quia. Hic, commodi eum!</p>
</div>
</div>
</div>
</div>
</section>
I have found an awesome HTML and CSS stacked card article in CSS-tricks. In that demo there is no image, but I want to add an image on the right side of the card in the below code, attached an image for reference. I have tried with all my knowledge but I couldn't make it look like in the image I have attached. Could anyone please help me?
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
<div class="wrapper">
<div class="card1">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>
I made two DIV elements .image and .left (You will find them at the bottom of CSS) that position the content and the photo
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1,
.card2,
.card3,
.card4,
.card5,
.card6,
.card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1 {
background-color: #CAC5F5;
}
.card2 {
background-color: #C0FFD6
}
.card3 {
background-color: #FCF4B0
}
.card4 {
background-color: #FFB1B0
}
.card5 {
background-color: #8AC9FF
}
.classname {
background-color: #44c767;
text-indent: 0;
display: inline-block;
color: #ffffff;
font-size: 15px;
font-style: normal;
height: 50px;
line-height: 50px;
width: 140px;
text-decoration: none;
text-align: center;
}
.classname:hover {
background-color: #5cbf2a;
}
.classname:active {
position: relative;
top: 1px;
}
.left {
position: relative;
margin-right: 50%;
}
.image {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 50%;
overflow: hidden;
border-radius: 0 10px 10px 0;
}
<div class="wrapper">
<div class="card1">
<div class="left">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
Know More
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card2">
<div class="left">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card3">
<div class="left">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card4">
<div class="left">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
<div class="card5">
<div class="left">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus
commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum
laborum
ad a sequi!</p>
</div>
<div class="image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/06/fairy-tales-luminance-fashion-photography_by_54ka.jpg">
</div>
</div>
</div>
.wrapper {
margin-top: 100px;
padding-top: 150px;
padding-bottom: 1000px;
max-width: 700px;
margin: 0 auto;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.card1, .card2, .card3, .card4, .card5, .card6, .card7 {
top: 30px;
position: sticky;
border: 1px solid #ccc;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
background-color: white;
color: #333;
padding: 40px;
border-radius: 10px;
margin-bottom: 20px;
height: 380px;
}
.card1:nth-child(1n) {
top: 20px;
}
.card2:nth-child(2n) {
top: 40px;
}
.card3:nth-child(3n) {
top: 60px;
}
.card4:nth-child(4n) {
top: 80px;
}
.card5:nth-child(5n) {
top: 100px;
}
.card6:nth-child(6n) {
top: 120px;
}
.card7:nth-child(7n) {
top: 140px;
}
.card:nth-child(8n) {
top: 160px;
}
.card1{
background-color: #CAC5F5;
}
.card2{
background-color: #C0FFD6
}
.card3{
background-color: #FCF4B0
}
.card4{
background-color: #FFB1B0
}
.card5{
background-color: #8AC9FF
}
.classname {
background-color:#44c767;
text-indent:0;
display:inline-block;
color:#ffffff;
font-size:15px;
font-style:normal;
height:50px;
line-height:50px;
width:140px;
text-decoration:none;
text-align:center;
}.classname:hover {
background-color:#5cbf2a;
}.classname:active {
position:relative;
top:1px;
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="wrapper">
<div class="card1">
<div class="column">
<h2><span>Project #1</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
Know More
</div>
<div class="column">
<img src="http://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293_960_720.jpg" alt="Girl in a jacket" width="250" height="300">
</div>
</div>
<div class="card2">
<h2><span>Project #2</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card3">
<h2><span>Project #3</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card4">
<h2><span>Project #4</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
<div class="card5">
<h2><span>Project #5</span>Title of the Project</h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Harum, perspiciatis blanditiis accusamus commodi consectetur id tempora rem iure eligendi quos eos et autem ratione exercitationem earum laborum ad a sequi!</p>
</div>
</div>
Please check the Snipped just added code to divide div in 2 columns
Maybe utilize flex and some align-items to attain the centering effect.
.image-box-wrap
{ background-color: Black;
padding: 20px;
}
.image-box
{ background-color: White;
display: flex;
justify-content: space-between;
}
.image-box > *
{ display: flex;
flex-direction: column;
justify-content: center;
}
.image-box .text
{ flex: 1 1 0%;
box-sizing: border-box;
padding: 1em;
align-items: flex-start;
}
.image-box .text a
{ background-color: Orange;
padding: 10px;
color: White;
text-decoration: none;
}
.image-box .image
{ background-color: Teal;
width: 40%;
height: 240px;
}
.image-box .image img
{ display: block;
width: 100%;
}
<div class="image-box-wrap">
<div class="image-box">
<div class="text">
<h2>Card One</h2>
<p>Text goes here... (if you have a bunch of text, you'll attain the sticky positioning where the image follows along with the text that you had in your example as the page scrolls down)</p>
Button
</div>
<div class="image">
IMG tag goes here
</div>
</div>
</div>
I'm having some trouble putting a blue box on the right side of one of my information boxes. As you can see in the 1st box, no matter what size of the screen, the blue box is always on the edge, but in the 2nd box, the blue box changes placement depending on the size of the screen. Let me know if you need any more information. I'm new to coding, so any help would be good. Thanks.
#font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'),
url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'),
url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'),
url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'),
url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{
margin:0px;
padding:0px;
border:0px;
}
.topnav {
background-color: rgb(84,104,217);
overflow: hidden;
font-family: 'futuralight';
font-weight:900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left:2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom:6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.bigcomser{
text-align:center;
font-size: 80px;
}
.bodycs{
background-color: #EEF0FC;
height:8000px;
}
.comser{
font-family: 'tekoregular';
padding-top:42px;
font-family: 'playfair_displayregular';
font-weight:900;
}
.abtcomser{
padding-top: 48px;
padding-bottom: 28px;
font-size: 20px;
position: relative;
left:10%;
width:80%;
}
.s4s{
position: relative;
left:10%;
margin-top:60px;
height:350px;
width:80%;
background-color: white;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.s4simage{
width:38.3%;
position: absolute;
right:0%;
padding-top:10px;
padding-right:10px;
}
.s4stitle{
position: relative;
left:4%;
padding-top:30px;
color:rgb(84,104,217);
font-weight:900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
}
.s4stitle::before {
content: '';
background-color: rgb(84,104,217);
width:12px;
height: 100%;
position:absolute;
left: -4%;
top: 30px; /* = padding-top of parent */
}
.s4slink{
text-decoration:none;
color:rgb(84,104,217);
}
.titles4s{
padding-top:2px;
font-size:22px;
padding-left:4%;
font-family: 'futuralight';
font-weight:300;
}
.s4sparagraph{
width:55%;
position: relative;
left:4%;
font-size:17px;
top:60px;
font-family: 'futuralight';
}
#s4slink2{
text-decoration:none;
color:rgb(84,104,217);
position: relative;
left:4%;
top:90px;
font-family: 'futuralight';
font-size:18px;
}
.adaptennis{
position: relative;
left:10%;
margin-top:60px;
height:350px;
width:80%;
background-color: white;
box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.adaptenimage{
width:38.3%;
position: absolute;
left:0%;
padding-top:10px;
padding-left:10px;
}
.adapten{
position: absolute;
right:4%;
padding-top:30px;
color:rgb(84,104,217);
font-weight:900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
}
.adapten::before {
content: '';
background-color: rgb(84,104,217);
width:12px;
height: 100%;
position:absolute;
right: -46px;
top: 30px; /* = padding-top of parent */
}
.titleadap{
position: absolute;
right:4%;
padding-top:71px;
font-size:22px;
padding-left:4%;
font-family: 'futuralight';
font-weight:300;
}
.adappar{
width:55%;
position: absolute;
right:4%;
font-size:17px;
padding-top:150px;
font-family: 'futuralight';
}
#media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
#media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
#media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" />
<title>Community Service</title>
</head>
<body class='bodycs'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="link" href="#Projects">Projects</a>
<a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
</header>
<div class='bigcomser'>
<p class='comser'>
Community Service
</p>
</div>
<div class='abtcomser'>
<p>Lorem, ipsum dolor sit amet consectetur adipisici
ng elit. Dicta, libero! Recusandae provident est quam quisquam.
Sequi itaque suscipit tempore corrupti officia maxime
nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor
em Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov
ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est
distinctio commodi quod aut numquam temporibus?
</p>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
</p>
<p class='titles4s'>
Member
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero.
</p>
<a id = 's4slink2' href="https://www.solve4success.org" target="_blank">solve4success.org</a>
</div>
<div class='adaptennis'>
<img class='adaptenimage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='adapten'>
Adaptive Tennis
</p>
<p class='titleadap'>
Engineer
</p>
<p class='adappar'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci vitae iste, aut tenetur natu
s tempora error voluptates, beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi, expedita modi? Obcaecati!
</p>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://binaryheart.org" target="_blank">BH</a>
</p>
<p class='titles4s'>
Member
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero.
</p>
<a id = 's4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
<div class='adaptennis'>
<img class='adaptenimage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='adapten'>
<a class='s4slink' href="https://ntfoodtaxi.wordpress.com" target="_blank">Food Taxi</a>
</p>
<p class='titleadap'>
Engineer
</p>
<p class='adappar'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Adipisci vitae iste, aut tenetur natu
s tempora error voluptates, beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi, expedita modi? Obcaecati!
</p>
<a id = 's4slink2' href="https://ntfoodtaxi.wordpress.com" target="_blank">ntfoodtaxi.wordpress.com</a>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://binaryheart.org" target="_blank">Binary Heart</a>
</p>
<p class='titles4s'>
Greater Chicago Food Packing
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu
r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re
pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver
itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet
consectetur, adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll
itia dicta error aliquam aliquid aperiam est repellat iure vitae
bum exercitationem nihil, accusam
us libero.
</p>
<a id = 's4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
</body>
</html>
You can set right to 0 in the pseudo element and apply padding to p element.
#font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.bigcomser {
text-align: center;
font-size: 80px;
}
.bodycs {
background-color: #EEF0FC;
height: 8000px;
}
.comser {
font-family: 'tekoregular';
padding-top: 42px;
font-family: 'playfair_displayregular';
font-weight: 900;
}
.abtcomser {
padding-top: 48px;
padding-bottom: 28px;
font-size: 20px;
position: relative;
left: 10%;
width: 80%;
}
.s4s {
position: relative;
left: 10%;
margin-top: 60px;
height: 350px;
width: 80%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.s4simage {
width: 38.3%;
position: absolute;
right: 0%;
padding-top: 10px;
padding-right: 10px;
}
.s4stitle {
position: relative;
left: 4%;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
}
.s4stitle::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
left: -4%;
top: 30px;
/* = padding-top of parent */
}
.s4slink {
text-decoration: none;
color: rgb(84, 104, 217);
}
.titles4s {
padding-top: 2px;
font-size: 22px;
padding-left: 4%;
font-family: 'futuralight';
font-weight: 300;
}
.s4sparagraph {
width: 55%;
position: relative;
left: 4%;
font-size: 17px;
top: 60px;
font-family: 'futuralight';
}
#s4slink2 {
text-decoration: none;
color: rgb(84, 104, 217);
position: relative;
left: 4%;
top: 90px;
font-family: 'futuralight';
font-size: 18px;
}
.adaptennis {
position: relative;
left: 10%;
margin-top: 60px;
height: 350px;
width: 80%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 5px;
}
.adaptenimage {
width: 38.3%;
position: absolute;
left: 0%;
padding-top: 10px;
padding-left: 10px;
}
.adapten {
position: absolute;
/* Change to 0*/
right: 0;
padding-top: 30px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
/* Add padding here*/
padding-right: 46px;
}
.adapten::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
/* Change to 0*/
right: 0;
top: 30px;
/* = padding-top of parent */
}
.titleadap {
position: absolute;
right: 4%;
padding-top: 71px;
font-size: 22px;
padding-left: 4%;
font-family: 'futuralight';
font-weight: 300;
}
.adappar {
width: 55%;
position: absolute;
right: 4%;
font-size: 17px;
padding-top: 150px;
font-family: 'futuralight';
}
#media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
#media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
#media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../CSS/stylecomser.css" />
<title>Community Service</title>
</head>
<body class='bodycs'>
<header class="topnav" id="topnav">
<a class="link" href="../index.html">Home</a>
<a class="link" href="#Academics">Academics</a>
<a class="link" href="#Projects">Projects</a>
<a class="active-menu" href="../Pages/communityservice.html">Community Service</a>
</header>
<div class='bigcomser'>
<p class='comser'>
Community Service
</p>
</div>
<div class='abtcomser'>
<p>Lorem, ipsum dolor sit amet consectetur adipisici ng elit. Dicta, libero! Recusandae provident est quam quisquam. Sequi itaque suscipit tempore corrupti officia maxime nihil consequatur perspiciatis repellat placeat sed, voluptatum vitae.lor em Lorem
ipsum dolor sit amet consectetur adipisicing elit. Porro similique, prov ident libero laudantium amet odit unde dolor eaque earum qui impedit possimus natus est distinctio commodi quod aut numquam temporibus?
</p>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://www.solve4success.org" target="_blank">Solve 4 Success</a>
</p>
<p class='titles4s'>
Member
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero.
</p>
<a id='s4slink2' href="https://www.solve4success.org" target="_blank">solve4success.org</a>
</div>
<div class='adaptennis'>
<img class='adaptenimage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='adapten'>
Adaptive Tennis
</p>
<p class='titleadap'>
Engineer
</p>
<p class='adappar'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Adipisci vitae iste, aut tenetur natu s tempora error voluptates, beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi, expedita modi? Obcaecati!
</p>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://binaryheart.org" target="_blank">BH</a>
</p>
<p class='titles4s'>
Member
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero.
</p>
<a id='s4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
<div class='adaptennis'>
<img class='adaptenimage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='adapten'>
<a class='s4slink' href="https://ntfoodtaxi.wordpress.com" target="_blank">Food Taxi</a>
</p>
<p class='titleadap'>
Engineer
</p>
<p class='adappar'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Adipisci vitae iste, aut tenetur natu s tempora error voluptates, beatae obcaecati ducimus commodi et a repellat sequi ullam eligendi, expedita modi? Obcaecati!
</p>
<a id='s4slink2' href="https://ntfoodtaxi.wordpress.com" target="_blank">ntfoodtaxi.wordpress.com</a>
</div>
<div class='s4s'>
<img class='s4simage' src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="Missing File">
<p class='s4stitle'>
<a class='s4slink' href="https://binaryheart.org" target="_blank">Binary Heart</a>
</p>
<p class='titles4s'>
Greater Chicago Food Packing
</p>
<p class='s4sparagraph'>
Lorem ipsum dolor sit amet consectetu r adipisicing elit. Eaque minus ab doloribus nulla quidem esse re pellat, asperiores ex vero minima saepe. Est officia accusamus odio et ver itatis placeat sapiente laudantium?Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Nesciunt blanditiis alias officiis ducimus tenetur, ipsa moll itia dicta error aliquam aliquid aperiam est repellat iure vitae bum exercitationem nihil, accusam us libero.
</p>
<a id='s4slink2' href="https://binaryheart.org" target="_blank">binaryheart.org</a>
</div>
</body>
</html>