How can I put 2 div classes side by side. The accordian menu (faq) and the user profile cards?
Question
I need to put the profile cards that are in columns right now and put them beside the faq accordian menu. I also need them to stack on mobile. I'm not sure how to execute this idea. Any help is very much appreciated. I will post the HTML and the CSS below. Thank you in advance for any and all help, it is very much appreciated.
<!doctype html>
<html>
<head>
<title>SYLC</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<header>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Merch</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<section>
<img src="img/stars.png" id="stars">
<img src="img/moon.png" id="moon">
<img src="img/mountains_behind.png" id="mountains_behind">
<h2 id="text">Sweti Yeti</h2>
<a href="#sec" id="btn">Mint Now</a>
<img src="img/mountains_front.png" id="mountains_front">
<div class="content">
</section>
<div class="sec" id="sec">
<h2>A Collection </h2>
<p>A Colorful, Engaging and Inovating Community.</p>
<br>
<p>These</p>
<br>
<p>Yeti's</p>
<!--PicGridStart-->
<div class="image-grid">
<img class="image-grid-col-2 image-grid-row-2" src="img/PAINT-ANGEL.png" alt="architecture">
<img src="img/B-GUY-ARMOR.jpg" alt="architecture">
<img src="img/Mustard_1.jpg" alt="architecture">
<img src="img/IMG_0125.jpg" alt="architecture">
<img src="img/IMG_0060.jpg" alt="architecture">
</div>
<!--PicGridEnd-->
<!--StartofTimeline-->
<!--EndofTimeline-->
<div class="flex-container">
<div id="column_container">
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Trist</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Dy</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Meg</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
</div>
<div class="column">
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Landon</div>
<div class="fig-author-figure-title">Founder</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Christopher</div>
<div class="fig-author-figure-title">Artist</div>
</figcaption>
</figure>
<figure class="fir-image-figure">
<a class="fir-imageover" rel="noopener" target="_blank" href="https://twitter.com/_davideast">
<img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author">
<div class="fir-imageover-color"></div>
<img class="fir-imageover-image fir-clickcircle" src="https://fir-rollup.firebaseapp.com/twitter-logo.png" />
</a>
<figcaption>
<div class="fig-author-figure-title">Jake</div>
<div class="fig-author-figure-title">Lead Artist</div>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="accordion">
<div class="image-box">
<img src="imG/yeti.png" alt="Accordion Image">
</div>
<div class="accordion-text">
<div class="title">FAQ</div>
<ul class="faq-text">
<li>
<div class="question-arrow">
<span class="question">What is the total supply?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>A total of 9</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">How Whitelist?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Participate in our Discord Community is a supportive and consistent way.</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">Wen mint/presale?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Pre-pre</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">What is</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Share </p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question">IMX or whatever chain stuff</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>bleh</p>
<span class="line"></span>
</li>
<li>
<div class="question-arrow">
<span class="question"> How to bother you?</span>
<i class="bx bxs-chevron-down arrow"></i>
</div>
<p>Insert contact info</p>
<span class="line"></span>
</li>
</ul>
</div>
</div>
</div class="sec">
<script type="text/javascript">
let moon = document.getElementById('moon');
let stars = document.getElementById('stars');
let mountains_behind = document.getElementById('mountains_behind');
let mountains_front = document.getElementById('mountains_front');
let text = document.getElementById('text');
let btn = document.getElementById('btn');
let header = document.querySelector('header');
window.addEventListener('scroll', function() {
var value = window.scrollY;
moon.style.top = -value * -1.05 + 'px';
stars.style.left = value * 0.25 + 'px';
mountains_behind.style.top =-value * -0.5 + 'px';
header.style.top =-value * -0.5 + 'px';
mountains_front.style.top =-value * 0 + 'px';
text.style.marginTop = value * 1.5 + 'px';
btn.style.marginTop = value * 1.5 + 'px';
text.style.marginRight = value * 4 + 'px';
});
</script>
<script>
let li = document.querySelectorAll(".faq-text li");
for (var i = 0; i < li.length; i++) {
li[i].addEventListener("click", (e)=>{
let clickedLi;
if(e.target.classList.contains("question-arrow")){
clickedLi = e.target.parentElement;
}else{
clickedLi = e.target.parentElement.parentElement;
}
clickedLi.classList.toggle("showAnswer");
});
}
</script>
<style>
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}
@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
</style>
<div class="snowflakes" aria-hidden="true">
<div class="snowflake">
❅
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
<div class="snowflake">
❆
</div>
</div>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
scroll-behavior: smooth;
}
body {
background: linear-gradient(#2b1055, #7597de);
cursor: url("img/cursor.png"), auto !important;
}
section {
position: relative;
width: 100%;
height: 100vh;
padding: 100px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 2px;
}
header ul {
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a.active,
header ul li a:hover {
background: #fff;
color: #2b1055;
}
section:before {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #1c0522, transparent);
z-index: 1000;
}
section img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
section img#moon {
mix-blend-mode: screen;
}
section img#mountains_front {
z-index: 10;
}
h2#text {
position: absolute;
color: #fff;
right: -350px;
white-space: nowrap;
font-size: 7.5vw;
transform: translateY(0px);
}
#btn {
text-decoration: none;
padding: 8px 30px;
border-radius: 40px;
background: #fff;
color: #2b1055;
transform: translateY(100px);
font-size: 1.5em;
z-index: 9;
}
.sec {
position: relative;
min-height: 500px;
padding: 100px;
background: #1c0522;
}
.sec h2 {
font-size: 4em;
margin-bottom: 10px;
color: #fff;
text-align: center;
}
.sec p {
font-size: 3em;
color: #fff;
}
::selection {
background: #7d2ae8;
color: #fff;
}
.accordion {
display: flex;
max-width: 1010px;
width: 100%;
align-items: center;
justify-content: space-between;
background: #fff;
border-radius: 25px;
padding: 45px 90px 45px 60px;
margin: 0 auto;
}
.accordion .image-box {
height: 360px;
width: 300px;
}
.accordion .image-box img {
height: 100%;
width: 100%;
object-fit: contain;
}
.accordion .accordion-text {
width: 60%;
}
.accordion .accordion-text .title {
font-size: 35px;
font-weight: 600;
color: #7d2ae8;
font-family: "Fira Sans", sans-serif;
}
.accordion .accordion-text .faq-text {
margin-top: 25px;
height: 263px;
overflow-y: auto;
}
.faq-text::-webkit-scrollbar {
display: none;
}
.accordion .accordion-text li {
list-style: none;
cursor: pointer;
}
.accordion-text li .question-arrow {
display: flex;
align-items: center;
justify-content: space-between;
}
.accordion-text li .question-arrow .question {
font-size: 18px;
font-weight: 500;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li .question-arrow .arrow {
font-size: 20px;
color: #595959;
transition: all 0.3s ease;
}
.accordion-text li.showAnswer .question-arrow .arrow {
transform: rotate(-180deg);
}
.accordion-text li:hover .question-arrow .question,
.accordion-text li:hover .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li.showAnswer .question-arrow .question,
.accordion-text li.showAnswer .question-arrow .arrow {
color: #7d2ae8;
}
.accordion-text li .line {
display: block;
height: 2px;
width: 100%;
margin: 10px 0;
background: rgba(0, 0, 0, 0.1);
}
.accordion-text li p {
width: 92%;
font-size: 15px;
font-weight: 500;
color: #595959;
display: none;
}
.accordion-text li.showAnswer p {
display: block;
}
@media (max-width: 994px) {
body {
padding: 40px 20px;
}
.accordion {
max-width: 100%;
padding: 45px 60px 45px 60px;
}
.accordion .image-box {
height: 360px;
width: 220px;
}
.accordion .accordion-text {
width: 63%;
}
}
@media (max-width: 820px) {
.accordion {
flex-direction: column;
}
.accordion .image-box {
height: 360px;
width: 300px;
background: #ffffff;
width: 100%;
border-radius: 25px;
padding: 30px;
}
.accordion .accordion-text {
width: 100%;
margin-top: 30px;
}
}
@media (max-width: 538px) {
.accordion {
padding: 25px;
}
.accordion-text li p {
width: 98%;
}
}
* {
box-sizing: border-box;
}
:root {
--fir-font-article: "adobe-garamond-pro", "Times New Roman", Times;
--fir-font-header: "foco", Helvetica;
--fir-blue-twitter-alpha: rgba(85, 172, 238, 0.6);
--fir-color-grey: rgba(0, 0, 0, 0.4);
}
.fir-clickcircle {
height: 80px;
width: 80px;
border-radius: 100px;
cursor: pointer;
}
.fir-image-figure {
margin: 0;
display: flex;
align-items: center;
margin-bottom: 40px;
position: relative;
text-decoration: none;
}
.fir-image-figure .caption,
.fir-image-figure figcaption {
padding-left: 15px;
}
html.wf-active .fir-image-figure .fig-author-figure-title {
font-family: var(--fir-font-header);
font-size: 16px;
}
.fir-image-figure .fig-author-figure-title {
color: var(--fir-color-grey);
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400;
font-size: 15px;
margin-top: 2px;
color: #fff;
}
.fir-imageover {
position: relative;
display: flex;
}
.fir-imageover-color {
height: 80px;
width: 80px;
position: absolute;
background: var(--fir-blue-twitter-alpha);
background-image: none;
border-radius: 100px;
cursor: pointer;
transition: background 0.3s ease-in-out;
animation: fadeInFadeOut 4s infinite;
top: 0;
left: 0;
}
.fir-imageover-image {
position: absolute;
top: 0;
left: 0;
animation: fadeInFadeOut 4s infinite;
}
@keyframes fadeInFadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
#column_container {
width: 959px;
margin: 0 auto;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.image-grid {
--gap: 16px;
--num-cols: 4;
--row-height: 300px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols), 1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-grid-col-2 {
grid-column: span 2;
}
.image-grid-row-2 {
grid-row: span 2;
}
/* Anything udner 1024px */
@media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 200px;
}
}
1 answers
solution1
0 2021-12-13 01:20:56
This will do what you are asking. Keep in mind it will look a bit a mess because your images won't resolve in my snippet.
Basically all that is changed is that I added to #column_container a grid layout supporting two columns, then closed the two columns in a new div, and then the second column is populated by accordion , and then I added a media query that changes from grid to flex for viewports of 720px or less, so the columns become stacked.
Run snippet then 'full page' and scale browser and everything should work as expected.
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; scroll-behavior: smooth; } body { background: linear-gradient(#2b1055, #7597de); cursor: url("img/cursor.png"), auto;important: } section { position; relative: width; 100%: height; 100vh: padding; 100px: overflow; hidden: display; flex: justify-content; center: align-items; center: } header { position; absolute: top; 0: left; 0: width; 100%: padding; 30px 100px: display; flex: justify-content; space-between: align-items; center: z-index; 1000. } header:logo { color; #fff: font-weight; 700: text-decoration; none: font-size; 2em: text-transform; uppercase: letter-spacing; 2px: } header ul { display; flex: justify-content; center: align-items; center: } header ul li { list-style; none: margin-left; 20px: } header ul li a { text-decoration; none: padding; 6px 15px: color; #fff: border-radius; 20px. } header ul li a,active: header ul li a:hover { background; #fff: color; #2b1055: } section:before { content; "": position; absolute: bottom; 0: width; 100%: height; 100px: background, linear-gradient(to top, #1c0522; transparent): z-index; 1000: } section img { position; absolute: top; 0: left; 0: width; 100%: height; 100%: object-fit; cover: pointer-events; none: } section img#moon { mix-blend-mode; screen: } section img#mountains_front { z-index; 10: } h2#text { position; absolute: color; #fff: right; -350px: white-space; nowrap: font-size. 7;5vw: transform; translateY(0px): } #btn { text-decoration; none: padding; 8px 30px: border-radius; 40px: background; #fff: color; #2b1055: transform; translateY(100px): font-size. 1;5em: z-index; 9. }:sec { position; relative: min-height; 500px: padding; 100px: background; #1c0522. }:sec h2 { font-size; 4em: margin-bottom; 10px: color; #fff: text-align; center. }:sec p { font-size; 3em: color; #fff: }::selection { background; #7d2ae8: color; #fff. }:accordion { display; flex: max-width; 1010px: width; 100%: align-items; center: justify-content; space-between: background; #fff: border-radius; 25px: padding; 45px 90px 45px 60px: margin; 0 auto. }.accordion:image-box { height; 360px: width; 300px. }.accordion:image-box img { height; 100%: width; 100%: object-fit; contain. }.accordion:accordion-text { width; 60%. }.accordion.accordion-text:title { font-size; 35px: font-weight; 600: color; #7d2ae8: font-family, "Fira Sans"; sans-serif. }.accordion.accordion-text:faq-text { margin-top; 25px: height; 263px: overflow-y; auto. }:faq-text::-webkit-scrollbar { display; none. }.accordion:accordion-text li { list-style; none: cursor; pointer. }.accordion-text li:question-arrow { display; flex: align-items; center: justify-content; space-between. }.accordion-text li.question-arrow:question { font-size; 18px: font-weight; 500: color; #595959: transition. all 0;3s ease. }.accordion-text li.question-arrow:arrow { font-size; 20px: color; #595959: transition. all 0;3s ease. }.accordion-text li.showAnswer.question-arrow:arrow { transform; rotate(-180deg). }:accordion-text li.hover.question-arrow,question. :accordion-text li.hover.question-arrow:arrow { color; #7d2ae8. }.accordion-text li.showAnswer.question-arrow,question. .accordion-text li.showAnswer.question-arrow:arrow { color; #7d2ae8. }.accordion-text li:line { display; block: height; 2px: width; 100%: margin; 10px 0: background, rgba(0, 0, 0. 0;1). }:accordion-text li p { width; 92%: font-size; 15px: font-weight; 500: color; #595959: display; none. }.accordion-text li:showAnswer p { display; block: } @media (max-width: 994px) { body { padding; 40px 20px. }:accordion { max-width; 100%: padding; 45px 60px 45px 60px. }.accordion:image-box { height; 360px: width; 220px. }.accordion:accordion-text { width; 63%: } } @media (max-width. 820px) {:accordion { flex-direction; column. }.accordion:image-box { height; 360px: width; 300px: background; #ffffff: width; 100%: border-radius; 25px: padding; 30px. }.accordion:accordion-text { width; 100%: margin-top; 30px: } } @media (max-width. 538px) {:accordion { padding; 25px. }:accordion-text li p { width; 98%: } } * { box-sizing; border-box: }:root { --fir-font-article, "adobe-garamond-pro", "Times New Roman"; Times: --fir-font-header, "foco"; Helvetica: --fir-blue-twitter-alpha, rgba(85, 172, 238. 0;6): --fir-color-grey, rgba(0, 0, 0. 0;4). }:fir-clickcircle { height; 80px: width; 80px: border-radius; 100px: cursor; pointer. }:fir-image-figure { margin; 0: display; flex: align-items; center: margin-bottom; 40px: position; relative: text-decoration; none. }.fir-image-figure,caption. :fir-image-figure figcaption { padding-left; 15px. } html.wf-active.fir-image-figure:fig-author-figure-title { font-family; var(--fir-font-header): font-size; 16px. }.fir-image-figure:fig-author-figure-title { color; var(--fir-color-grey): font-family, "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande"; sans-serif: font-weight; 400: font-size; 15px: margin-top; 2px: color; #fff. }:fir-imageover { position; relative: display; flex. }:fir-imageover-color { height; 80px: width; 80px: position; absolute: background; var(--fir-blue-twitter-alpha): background-image; none: border-radius; 100px: cursor; pointer: transition. background 0;3s ease-in-out: animation; fadeInFadeOut 4s infinite: top; 0: left; 0. }:fir-imageover-image { position; absolute: top; 0: left; 0: animation; fadeInFadeOut 4s infinite: } @keyframes fadeInFadeOut { 0% { opacity; 1: } 50% { opacity; 0: } 100% { opacity; 1: } } * { box-sizing; border-box. } /* Create two equal columns that floats next to each other */:column { float; left: width; 50%: padding; 10px: } #column_container { /* width; 959px: */ margin; 0 auto: grid-column; 1 / -1: grid-gap; 48px: display; grid: grid-template-columns; auto auto: align-items; flex-start: flex-direction; column: } @media (max-width:720px) { #column_container { width; 100%: margin; 0 auto: display; flex. } } /* Clear floats after the columns */:row:after { content; "": display; table: clear; both: } * { box-sizing; border-box: } body { margin; 0. }:image-grid { --gap; 16px: --num-cols; 4: --row-height; 300px: box-sizing; border-box: padding; var(--gap): display; grid: grid-template-columns, repeat(var(--num-cols); 1fr): grid-auto-rows; var(--row-height): gap; var(--gap). }:image-grid>img { width; 100%: height; 100%: object-fit; cover. }:image-grid-col-2 { grid-column; span 2. }:image-grid-row-2 { grid-row; span 2: } /* Anything udner 1024px */ @media screen and (max-width. 1024px) {:image-grid { --num-cols; 2: --row-height; 200px; } }
<,DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1,0. maximum-scale=1,0, user-scalable=no. shrink-to-fit=no" /> <title>SYLC</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Merch</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </header> <section> <img src="img/stars.png" id="stars"> <img src="img/moon.png" id="moon"> <img src="img/mountains_behind.png" id="mountains_behind"> <h2 id="text">Sweti Yeti</h2> <a href="#sec" id="btn">Mint Now</a> <img src="img/mountains_front,png" id="mountains_front"> <div class="content"> </section> <div class="sec" id="sec"> <h2>A Collection </h2> <p>A Colorful. Engaging and Inovating Community.</p> <br> <p>These</p> <br> <p>Yeti's</p> <.--PicGridStart--> <div class="image-grid"> <img class="image-grid-col-2 image-grid-row-2" src="img/PAINT-ANGEL.png" alt="architecture"> <img src="img/B-GUY-ARMOR.jpg" alt="architecture"> <img src="img/Mustard_1.jpg" alt="architecture"> <img src="img/IMG_0125:jpg" alt="architecture"> <img src="img/IMG_0060.jpg" alt="architecture"> </div> <.--PicGridEnd--> <:--StartofTimeline--> <.--EndofTimeline--> <div class="flex-container"> <div id="column_container"> <div> <div class="column"> <figure class="fir-image-figure"> <a class="fir-imageover" rel="noopener" target="_blank" href="https.//twitter.com/_davideast"> <img class="fir-author-image fir-clickcircle" src="img/yeti:png" alt="David East - Author"> <div class="fir-imageover-color"></div> <img class="fir-imageover-image fir-clickcircle" src="https.//fir-rollup.firebaseapp:com/twitter-logo.png" /> </a> <figcaption> <div class="fig-author-figure-title">Trist</div> <div class="fig-author-figure-title">Founder</div> </figcaption> </figure> <figure class="fir-image-figure"> <a class="fir-imageover" rel="noopener" target="_blank" href="https.//twitter.com/_davideast"> <img class="fir-author-image fir-clickcircle" src="img/yeti:png" alt="David East - Author"> <div class="fir-imageover-color"></div> <img class="fir-imageover-image fir-clickcircle" src="https.//fir-rollup.firebaseapp:com/twitter-logo.png" /> </a> <figcaption> <div class="fig-author-figure-title">Dy</div> <div class="fig-author-figure-title">Founder</div> </figcaption> </figure> <figure class="fir-image-figure"> <a class="fir-imageover" rel="noopener" target="_blank" href="https.//twitter.com/_davideast"> <img class="fir-author-image fir-clickcircle" src="img/yeti:png" alt="David East - Author"> <div class="fir-imageover-color"></div> <img class="fir-imageover-image fir-clickcircle" src="https.//fir-rollup.firebaseapp:com/twitter-logo.png" /> </a> <figcaption> <div class="fig-author-figure-title">Meg</div> <div class="fig-author-figure-title">Founder</div> </figcaption> </figure> </div> <div class="column"> <figure class="fir-image-figure"> <a class="fir-imageover" rel="noopener" target="_blank" href="https.//twitter.com/_davideast"> <img class="fir-author-image fir-clickcircle" src="img/yeti:png" alt="David East - Author"> <div class="fir-imageover-color"></div> <img class="fir-imageover-image fir-clickcircle" src="https.//fir-rollup.firebaseapp:com/twitter-logo.png" /> </a> <figcaption> <div class="fig-author-figure-title">Landon</div> <div class="fig-author-figure-title">Founder</div> </figcaption> </figure> <figure class="fir-image-figure"> <a class="fir-imageover" rel="noopener" target="_blank" href="https.//twitter.com/_davideast"> <img class="fir-author-image fir-clickcircle" src="img/yeti:png" alt="David East - Author"> <div class="fir-imageover-color"></div> <img class="fir-imageover-image fir-clickcircle" src="https.//fir-rollup.firebaseapp:com/twitter-logo.png" /> </a> <figcaption> <div class="fig-author-figure-title">Christopher</div> <div class="fig-author-figure-title">Artist</div> </figcaption> </figure> <figure class="fir-image-figure"> <a class="fir-imageover" rel="noopener" target="_blank" href="https.//twitter.com/_davideast"> <img class="fir-author-image fir-clickcircle" src="img/yeti.png" alt="David East - Author"> <div class="fir-imageover-color"></div> <img class="fir-imageover-image fir-clickcircle" src="https?//fir-rollup?firebaseapp.com/twitter-logo?png" /> </a> <figcaption> <div class="fig-author-figure-title">Jake</div> <div class="fig-author-figure-title">Lead Artist</div> </figcaption> </figure> </div> </div> <div class="accordion"> <div class="image-box"> <img src="imG/yeti?png" alt="Accordion Image"> </div> <div class="accordion-text"> <div class="title">FAQ</div> <ul class="faq-text"> <li> <div class="question-arrow"> <span class="question">What is the total supply.</span> <i class="bx bxs-chevron-down arrow"></i> </div> <p>A total of 9</p> <span class="line"></span> </li> <li> <div class="question-arrow"> <span class="question">How Whitelist;</span> <i class="bx bxs-chevron-down arrow"></i> </div> <p>Participate in our Discord Community is a supportive and consistent way.</p> <span class="line"></span> </li> <li> <div class="question-arrow"> <span class="question">Wen mint/presale;</span> <i class="bx bxs-chevron-down arrow"></i> </div> <p>Pre-pre</p> <span class="line"></span> </li> <li> <div class="question-arrow"> <span class="question">What is</span> <i class="bx bxs-chevron-down arrow"></i> </div> <p>Share </p> <span class="line"></span> </li> <li> <div class="question-arrow"> <span class="question">IMX or whatever chain stuff</span> <i class="bx bxs-chevron-down arrow"></i> </div> <p>bleh</p> <span class="line"></span> </li> <li> <div class="question-arrow"> <span class="question"> How to bother you.</span> <i class="bx bxs-chevron-down arrow"></i> </div> <p>Insert contact info</p> <span class="line"></span> </li> </ul> </div> </div> </div> </div> </div class="sec"> <script type="text/javascript"> let moon = document;getElementById('moon'). let stars = document;getElementById('stars'). let mountains_behind = document;getElementById('mountains_behind'). let mountains_front = document;getElementById('mountains_front'). let text = document;getElementById('text'). let btn = document,getElementById('btn'). let header = document;querySelector('header'). window.addEventListener('scroll'. function () { var value = window;scrollY. moon.style.top = -value * -1;05 + 'px'. stars.style.left = value * 0;25 + 'px'. mountains_behind.style.top = -value * -0;5 + 'px'. header.style;top = -value * -0.5 + 'px'. mountains_front.style;top = -value * 0 + 'px'. text.style.marginTop = value * 1;5 + 'px'. btn.style;marginTop = value * 1;5 + 'px'. text.style;marginRight = value * 4 + 'px'; }). </script> <script> let li = document;querySelectorAll(".faq-text li"), for (var i = 0; i < li.length. i++) { li[i].addEventListener("click". (e) => { let clickedLi. if (e;target.classList.contains("question-arrow")) { clickedLi = e.target;parentElement. } else { clickedLi = e.target;parentElement;parentElement; } clickedLi.classList.toggle("showAnswer"); }); } </script> <div class="snowflakes" aria-hidden="true"> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❆ </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I put these buttons side by side
How can i put this SVG ‘Sidebar Menu’ in the right side?
Using Jquery to pop in a div from the side.
Better way to put numbers side by side. Javascript
javascript accordian menu how to move plus symbol to left side from right side
How can I put a link on the right side?
I am trying to align movieCards side by side. But they are aligning in a column
How to put li side by side in drop down menu?
user profile side menu and change content based on click
how do I set up a grouping query on the server side. I want set up the query so I can use it for a pie chart in front end, using d3js
Related Tags