I would like to create a curved/flowing line with CSS, having circles on it with text associated with them. I tried to find it on here, searched Google and even asked ChatGPT but the idea seams to either be pretty unique or people who have figured it out haven't shared it (yet).
To give you a visual representation of what I am trying to achieve, here is a screenshot from the design:
I have tried creating a line using border-radius, but instead of giving me a curved line like in the design, it gave me a box with round edges:
/* Make sure to include the Font Awesome CSS */
#import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
.timeline-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.timeline {
position: relative;
width: 100%;
height: 50px;
background-color: #ccc;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.circle {
position: absolute;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
text-align: center;
}
.circle i {
font-size: 8px;
color: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle .text {
display: none;
}
.circle:nth-of-type(1) {
left: 25%;
}
.circle:nth-of-type(2) {
left: 50%;
}
.circle:nth-of-type(3) {
left: 75%;
}
/* Responsive styles */
#media (min-width: 768px) {
.circle {
width: 20px;
height: 20px;
}
.circle i {
font-size: 16px;
}
.circle .text {
display: block;
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, 0);
width: 80%;
text-align: center;
}
}
<div class="timeline-container">
<div class="timeline">
<div class="circle">
<i class="fas fa-check"></i>
<div class="text">
<h3>Heading 1</h3>
<p>Text 1</p>
</div>
</div>
<div class="circle">
<i class="fas fa-check"></i>
<div class="text">
<h3>Heading 2</h3>
<p>Text 2</p>
</div>
</div>
<div class="circle">
<i class="fas fa-check"></i>
<div class="text">
<h3>Heading 3</h3>
<p>Text 3</p>
</div>
</div>
<div class="circle">
<i class="fas fa-check"></i>
<div class="text">
<h3>Heading 4</h3>
<p>Text 4</p>
</div>
</div>
</div>
</div>
I have some knowledge of both CSS3 as well as modern Javascript (ES6), but making such a line has had me scratching my head for over 3 days now.
One catch of this is; it has to be responsive, preferably with the line curving 'over' itself and continuing in opposite direction, with space for the text.
Related
I have 4 boxes, (which will later be 9), in which I want there to be a total of 3 on screen at all times, excluding mobile. The remainder who are not on screen will be moved to the right end of the box line, but be unseen. I have looked around for a method to accomplish this via HTML & CSS and have found none. Is there a way to do this with HTML, CSS, or JS?
.bioSlider {
position: relative;
display: flex;
justify-content: center;
overflow: hidden;
}
.box {
position: relative;
display: inline-block;
width: 390px;
padding: 10px;
}
.slideImage {
position: relative;
height: 300px;
}
.slideImage img {
object-fit: cover;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #000000;
opacity: 0;
transition: 0.6s ease-in-out;
}
.quoteText {
position: absolute;
text-align: left;
font-style: italic;
word-break: break-all;
padding: 30px;
top: 30px;
color: #e5e5e5;
opacity: 0;
transition: 0.6s ease-in-out;
}
.detailBox {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 100%;
padding: 9px;
background-color: #e8e8e8;
}
.slideImage:hover .overlay {
opacity: 50%;
}
.slideImage:hover .quoteText {
opacity: 100%;
}
<div>
<!-- Cadet Slider -->
<ul class='bioSlider'>
<li class='cadetOne'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Red_Card.png' alt=''>
<div class='overlay'> </div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion CDR <br> LTC Chase Hinson</h3>
</div>
</div>
</div>
</li>
<li class='cadetTwo'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Yellow_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion XO <br> MAJ Grayson Akins</h3>
</div>
</div>
</div>
</li>
<li class='cadetThree'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Blue_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion NCO <br> CSM Janecia Bass</h3>
</div>
</div>
</div>
</li>
<li class='cadetFour'>
<div class='box'>
<div class='slideImage'>
<img src='/Images/Green_Card.png' alt=''>
<div class='overlay'></div>
<div class='bodyTextContainer'>
<p class='quoteText'>"Poopoopeepee"</p>
</div>
</div>
<div class='detailBox'>
<div class='subHeaderTextContainer'>
<h3 class='subHeaderText_1'>Battalion S1 <br> CPT Lauren Newton</h3>
</div>
</div>
</div>
</li>
</ul>
</div>
I am really new in web development. So I really need some guides, tips and tricks on how to do coding. So here's the details...
After I fill up my Yes and No checkboxes forms on each steps of a multi form steps, I want to have a grade on each steps. for example Leadership Development has a 12 Yes and 8 No and the system will calculate it's percentage from
(This is the pie chart) & (This is the accordion)
0 to 49% Your leadership skills will need to be improved for your business to at least
survive.
50% to 70% You have middling leadership skills that could probably be sufficient for your
business to survive.
70% to 100% You have very good leadership skills to help your organization grow.
How to show it's pie chart with percentage inside of it and beside the pie is an accordion which will also give details from the ratings.
Please I really need help on this one.
Here's the progress bar I made for an example
<style>
#output .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
font-size: 35px;
margin-top: 152px;
}
#output .active, .accordion:hover {
background-color: #ccc;
}
#output .panel {
padding: 0 18px;
background-color: #abaaaa;
max-height: 0;
color: black;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
#output .accordion:after {
content: '\002B';
color: #d02a3e;
font-weight: bold;
float: right;
margin-left: 5px;
}
#output .active:after {
content: "\2212";
}
.progress-pie-chart {
width: 128px;
height: 128px;
border-radius: 50%;
background-color: #ececec;
position: relative;
}
.progress-pie-chart.gt-50 {
background-color: orange;
}
.progress-pie-chart.red .ppc-progress-fill {
background: red;
}
.progress-pie-chart.red span {
color: red;
}
.progress-pie-chart.orange .ppc-progress-fill {
background: orange;
}
.progress-pie-chart.orange span {
color: orange;
}
.progress-pie-chart.green.gt-50,
.progress-pie-chart.green .ppc-progress-fill {
background: green;
}
.progress-pie-chart.green span {
color: green;
}
.ppc-progress {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 128px, 128px, 64px);
}
.ppc-progress .ppc-progress-fill {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 64px);
top: calc(50% - 64px);
width: 128px;
height: 128px;
clip: rect(0, 64px, 128px, 0);
transform: rotate(60deg);
}
.gt-50 .ppc-progress {
clip: rect(0, 64px, 128px, 0);
}
.gt-50 .ppc-progress .ppc-progress-fill {
clip: rect(0, 128px, 128px, 64px);
background: #E5E5E5;
}
.ppc-percents {
content: "";
position: absolute;
border-radius: 50%;
left: calc(50% - 111.30435px/2);
top: calc(50% - 111.30435px/2);
width: 111.30435px;
height: 111.30435px;
background: #fff;
text-align: center;
display: table;
}
.ppc-percents span {
display: block;
font-size: 18px;
}
.ppc-percents span cite {
font-size: 35px;
}
.pcc-percents-wrapper {
display: table-cell;
vertical-align: middle;
}
.progress-pie-chart {
margin: 0 auto 0;
margin-top: 115px;
}
</style>
<div class="row">
<div class="col-lg-6">
<div class="progress-pie-chart" data-percent="24">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="60">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
<div class="progress-pie-chart" data-percent="95">
<div class="ppc-progress">
<div class="ppc-progress-fill"></div>
</div>
<div class="ppc-percents">
<div class="pcc-percents-wrapper"><span>%</span></div>
</div>
</div>
</div>
<div class="col-lg-6 pt-4 pt-lg-0 align-items-stretch">
<button class="accordion">Leadership Development System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Marketing System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Financial System</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
An issue has been created when min-width:768px the image and text content alignment break down!
Basically, I want to keep image and text at a time, one after another in mobile layout, and one image and related text should be aligned horizontally one after another in tablet layout, but its breakdown! The desktop layout is Okay !
Here is the code
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
float: left;
position: relative;
padding-bottom: 100%;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
I would rethink the structure, since your 8 boxes are basically 4 boxes with 2 parts in each of them. Then you can control the sequence with float left/right, like this:
.sq-about-main {
margin-bottom: 80px;
}
.s-about-col-areas {
display: block;
margin: 10% auto;
overflow: hidden;
}
.s-about-col-areas:after {
content: "";
clear: both;
display: block;
}
.s-about-col {
width: 100%;
position: relative;
padding-bottom: 100%;
}
.floatleft .s-about-col {
float:left;
}
.floatright .s-about-col {
float:right;
}
#media (min-width: 768px) {
.s-about-col {
width: calc(100% / 2);
padding-bottom: calc(100% / 2);
}
}
#media (min-width: 1200px) {
.s-about-col {
width: calc(100% / 4);
float: left;
position: relative;
padding-bottom: calc(100% / 4);
}
}
.s-about-col .s-about-col-content {
width: calc(100%);
height: calc(100%);
/*margin: 8px;*/
/*padding: 16px;*/
position: absolute;
border-radius: 2px;
background-color: #ffffff;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);*/
}
.image-col .s-about-col-content img {
width: 100%;
height: 100%;
object-fit: cover;
-o-object-fit: cover;
}
.s-about-col-content i {
position: absolute;
left: 45px;
bottom: 45px;
font-size: 20px;
line-height: 20px;
color: #646464;
border: 1px solid #646464;
padding: 10px;
cursor: pointer;
}
.text-col {
display: table;
}
.text-col .text-col-content {
padding: 30% 45px 45px 45px;
height: 100%;
display: table-cell;
text-align: left;
vertical-align: middle;
}
.text-col .text-col-content h2 {
font-family: "Helvetica-Bold", sans-serif;
}
.text-col .text-col-content p {
font-family: "Roboto", sans-serif;
font-size: 20px;
color: #656565;
}
.text-col .text-col-content.l-arrow::before {
content: "";
position: absolute;
top: 50%;
left: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 25px solid #ffffff;
z-index: 2;
}
.text-col .text-col-content.r-arrow::before {
content: "";
position: absolute;
top: 50%;
right: -25px;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid #ffffff;
z-index: 2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="sq-about-main">
<div class="container-fluid px-5-percent">
<div class="s-about-col-areas">
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/3U2Fd7P.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Who We are</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatleft">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img src="https://i.imgur.com/jXTai9N.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content l-arrow">
<h2>Mission & Vision</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
<div class="s-about-col-areas">
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="" src="https://i.imgur.com/pZdZJvq.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Philosophy</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
<div class="element floatright">
<div class="s-about-col image-col">
<div class="s-about-col-content">
<img class="m-0" src="https://i.imgur.com/tJVEprD.jpg" alt="">
</div>
</div>
<div class="s-about-col text-col">
<div class="s-about-col-content text-col-content r-arrow">
<h2>Achievements</h2>
<p>We strive to go above and beyond for our clients, fostering a relationship built on trust, confidence
</p>
<i class="el-icon-plus"></i>
</div>
</div>
</div>
</div>
</div>
</div>
Please put this code in your CSS.
#media (max-width: 767px) {
.s-about-col{padding-bottom: 0;}
.s-about-col .s-about-col-content{position: relative;}
}
I have a div on left and right of the page. Currently the div on the right is being hidden.
I'm trying to use jQuery to fadeout the div that is currently being displayed and replace it by fading in the hidden div.
What am I doing wrong? I followed the example on this similar question.
It should happen when you click the About link in the code snippet:
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255, 80, 70, 1) !important;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255, 80, 70, 1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float: left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255, 80, 70, 1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float: left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top: 2.5%;
}
.feed-show {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
Here is a codepen
Many thanks!
I have maded some modifications to your code:
I have changed position:absolute to keep hidden #feed-show with display:none
I have changed inside click function fadeIn to be executed when fadeOut is finish to avoid strange moving effect
$(document).ready(function(){
$("#feed-show").fadeOut(0);
$("a").on('click', function() {
$(".feed").fadeOut(1000,function(){
$("#feed-show").fadeIn(1000);
});
});
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
#feed-show{
display:none;
}
#feed-show p{
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="container">
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK. C-oC aims to contribute to the
necessary exaltation of talented artists within the various
ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
OCULT TEXT
Creatives of Colour (C-oC) is an independent directory
that provides you with up to date information on
current, and future work of creatives of colour
being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
</div>
You have some problems on your code.
First, your feed-show div is inside your feed div. So if you fadeOut() your feed div, everything inside will be hidden.
And second, in your CSS you have absolute position and top and left properties set for your feed-show, so even if you fadeIn() that element, you're not gonna be able to see it.
I've made a couple of changes on your code, so you can see how one div is fade out and the other one is fade in.
Cheers!
$("a").on('click', function() {
$("#feed-show").fadeIn();
$(".feed").fadeOut();
});
a {
color: rgba(255,80,70,1) !important ;
text-decoration: none;
}
.nav a {
font-size: 13px;
color: rgba(255,80,70,1);
text-decoration: none;
font-weight: bold;
}
/* Content ---------------------*/
/* nav */
.nav {
position: fixed;
float:left;
width: 96%;
left: 2%;
margin-left: -2px;
border-bottom: 2px solid rgba(255,80,70,1);
padding-bottom: 18px;
background: white;
z-index: 999;
top: 0px;
padding-top: 18px;
}
.c1 {
max-width: 24%;
}
.column {
position: relative;
float:left;
padding-right: 1%;
width: 585px;
}
/* feed */
.feed {
width: 96%;
left: 2%;
margin-top: 75px;
padding-left: 2px;
}
.c2 {
max-width: 49%;
}
.feed-item {
position: relative;
width: 100%;
height: auto;
padding-bottom: 25px;
padding-top:2.5%;
}
.feed-show {
display: none;
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<div class="column c1">
About
</div>
</div>
<div id="feed" class="feed" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK. C-oC aims to contribute to the necessary exaltation of talented artists
within the various ethnic minorities within the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
<!-- Show on click -->
<div id="feed-show" class="feed-show" style="margin-top: 54px;">
<div class="column c2">
<p>
Creatives of Colour (C-oC) is an independent directory that provides you with up to date information on current, and future work of creatives of colour being showcased in the UK.
</p>
<p>
Find out more about Creatives of Colour..
</p>
</div>
</div>
I am building a parallax site and have problems making two divs in a section become absolutely perfectly aligned while still maintaining its responsive nature.
Unfortunately when the window size is changed the two elements do not behave as intended. I have included a image illustrating what i am trying to achieve. The yellow lines indicate the control i am looking for. The text THIS IS should be perfectly inline with the orange text on the horizontal axis, while edge of SO AWESOME should be vertically aligned with the orange text.
How do i achieve this?
Fiddle: https://jsfiddle.net/76z982zn/2/
CSS
body,
html {
height: 100%;
background-color: black;
}
section {
height: 100%;
position: relative;
}
section > div {
position: absolute;
}
* {
padding: 0;
margin: 0;
}
.header_container__1 {
font-size: 2vw;
line-height: 2vw;
color: orange;
top: 42vh;
left: 35vw;
}
.header_container__2 {
text-align: right;
font-size: 10vw;
line-height: 10vw;
color: red;
top: 50vh;
right: 0;
transform: translate(0%, -50%);
}
HTML
<section>
<div class="header_container__1">
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
</div>
<div class="header_container__2">
<p>THIS IS</p>
<p>SO AWESOME</p>
</div>
</section>
Not much to say, just a combination of several css alignment attributes:
body {
width:100%;
height: 100vh;
margin: 0px;
background: black;
}
#supercontainer {
position: absolute;
top: 50%;
right: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#container {
display: inline-block;
position: relative;
}
#a1 {
display: inline-block;
font-size: 0;
color: tomato;
margin-right: 0px;
margin-left: auto;
position: relative;
text-align: right;
margin: 0px;
font-size: 4em !important;
vertical-align: top;
line-height: 0.8em;
}
#a1::first-line {
line-height:1em;
}
#a2 {
position: absolute;
top: 0;
left: 0;
font-size: 0.7em;
line-height: 2px;
font-weight: bold;
color: gold;
vertical-align: baseline;
}
#a2::first-line {
line-height: 0px;
}
<div id=supercontainer>
<div id=container>
<div id=a1>THIS IS<br>SO AWESOME</div>
<div id=a2>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
</div>
</div>
</div>
As a quick fix, remove the transform from header_container__2 and set the two containers' top attributes to be equal. Fiddle
Edit - Aligned at 50%
body,
html {
height: 100%;
background-color: black;
}
section {
height: 100%;
position: relative;
}
section > div {
position: absolute;
}
* {
padding: 0;
margin: 0;
}
.header_container__1 {
display: inline-block;
float: left;
font-size: 2vw;
line-height: 2vw;
color: orange;
}
.header_container__2 {
text-align: right;
font-size: 10vw;
line-height: 10vw;
color: red;
top: 50vh;
right: 0;
transform: translate(0%, -50%);
}
<section>
<div class="header_container__2">
<div class="header_container__1">
<p>This is some text i want perfectly</p>
<p>This is some text i want perfectly</p>
<p>This is some text i want perfectly</p>
<p>This is some text i want perfectly</p>
</div>
THIS IS
<p>SO AWESOME</p>
</div>
</section>