:root {
--clr-primary: #f9baaa;
--clr-graylight: #c13828;
--clr-graymed: #c13828;
--border-radius: 0.5rem;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Playfair Display", "Montserrat";
background:square(#f9baaa);
}
main {
margin: 0rem;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 1rem;
}
.testimonial-container {
border-radius: square(--border-radius);
padding: 2rem;
width: 300px;
height: 350px;
position: relative;
margin: 0.75rem;
background: #f9baaa;
text-align: center;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:wght#400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h3>Here's a summary of what we'll cover together:</h3>
<div class="wrapper">
<div class="testimonial-container">
<h3 class="testimonial">Step 1: Language</h3>
<div class="name">
<p class="name">The language and questions we use internally play a big part in our life and affect our mindset. During our first session we will uncover the language you use and questions you ask yourself.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 2: Values</h3>
<div class="name">
<p class="name">We will dedicate two sessions to getting you clarity on your values; what is important to you in life. We will also assess how these play a role in your life and how to get you more of them.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 3: Beliefs</h3>
<div class="name">
<p class="name">Our fourth and fifth sessions will be focused on understanding your beliefs. This is the time where we tackle those little voices inside your head that may be holding you back.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 4: Identity</h3>
<div class="name">
<p class="name">During the identity session we will create your identity blueprint: Who are you? What do you do? How do you choose to live?</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 5: Purpose</h3>
<div class="name">
<p class="name">We will then move on to identify your purpose. What makes you get up in the morning? Having a clear purpose can help you create goals, guide your life decisions and offer you a sense of direction.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Wrap-Up Session</h3>
<div class="name">
<p class="name">Lastly, we will end by looking at how you can move forward with this new understanding and clarity. How can you utilise what you’ve discovered to help you lead your best life?</p>
</div>
</div>
flex boxes I'm trying to align - first 1 is not aligned
Hello,
I'm trying to align my flex boxes (I have 6) - they are all aligned except for the first 1.
I have tried a few different things but quite new to this so not sure what will work. The last box was not aligning but I fixed that by inputting height: 350px.
I'm creating this on Squarespace - Paloma template.
Is someone able to offer any advice?
Thank you!
:root {
--clr-primary: #f9baaa;
--clr-graylight: #c13828;
--clr-graymed: #c13828;
--border-radius: 0.5rem;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Playfair Display", "Montserrat";
background:square(#f9baaa);
}
main {
margin: 0rem;
}
.wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 1rem;
}
.testimonial-container {
border-radius: square(--border-radius);
padding: 2rem;
width: 300px;
height: 350px;
position: relative;
margin: 0.75rem;
background: #f9baaa;
text-align: center;
}
<head>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display:wght#400;500;700;900&display=swap" rel="stylesheet">
</head>
<body>
<main>
<h3>Here's a summary of what we'll cover together:</h3>
<div class="wrapper">
<div class="testimonial-container">
<h3 class="testimonial">Step 1: Language</h3>
<div class="name">
<p class="name">The language and questions we use internally play a big part in our life and affect our mindset. During our first session we will uncover the language you use and questions you ask yourself.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 2: Values</h3>
<div class="name">
<p class="name">We will dedicate two sessions to getting you clarity on your values; what is important to you in life. We will also assess how these play a role in your life and how to get you more of them.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 3: Beliefs</h3>
<div class="name">
<p class="name">Our fourth and fifth sessions will be focused on understanding your beliefs. This is the time where we tackle those little voices inside your head that may be holding you back.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 4: Identity</h3>
<div class="name">
<p class="name">During the identity session we will create your identity blueprint: Who are you? What do you do? How do you choose to live?</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Step 5: Purpose</h3>
<div class="name">
<p class="name">We will then move on to identify your purpose. What makes you get up in the morning? Having a clear purpose can help you create goals, guide your life decisions and offer you a sense of direction.</p>
</div>
</div>
<div class="testimonial-container">
<h3 class="testimonial">Wrap-Up Session</h3>
<div class="name">
<p class="name">Lastly, we will end by looking at how you can move forward with this new understanding and clarity. How can you utilise what you’ve discovered to help you lead your best life?</p>
</div>
</div>
Related
I'm trying to position an image in the bottom right corner, below some text in the left column of my index.html page, but I can't quite get it where I want. I've wrapped the image in a div tag and set the position to absolute in my CSS file and that centers the image below the text, just not to the right though.
HTML
<main>
<div class="column left">
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
</p>
<div class="staff">
<img src="staff2-e.png" alt="staff" height="225" width="400">
</div>
</div>
</div>
<div class="column right">
<h4>
What to Expect:
</h4>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
CSS
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
}
.staff {
position: absolute;
}
You can do it by adding text-align: right; to staff class.
.column {
float: left;
}
.left {
width: 75%;
}
.right {
width: 25%;
}
.text {
font-size: 25px;
}
.staff {
text-align: right;
}
<main>
<div class="column left">
<h3>
About us:
</h3>
<div class="text">
<p>
The purpose of Beginning Band Players is to provide students and parents
with the necessary resources for a successful start in any band program.
</p>
<div class="staff">
<img src="https://www.w3schools.com/css/img_5terre.jpg" alt="staff" height="225" width="400">
</div>
</div>
</div>
<div class="column right">
<h4>
What to Expect:
</h4>
<p>
Students can learn a little about each instrument found in beginning band
programs and decide which one they like best. They'll be able to see and
hear what each instrument sounds like.
</p>
<h3>
Additional Resources
</h3>
<p>
Students may also need additional equipment such as practice books or supplies
to help maintain their instruments. Links to such supplies can be found on the
Additional Equipment page.
</p>
</div>
</main>
so I've been looking around for the solution to this problem and I haven't been able to find a clear or really any answers at all (maybe I just don't know how to word the question?). So, I'm really going to rely on pictures for this question and then explain what is going on.
Starting position of chrome dev tools
Above is the starting position of the element (the content just above the dev tools). At this position, the elements are functioning as they should, however on resizing the dev tools, the elements move up or down. In the next picture, I increased the size of the dev tools and the elements in question move with the tools.
Expanded size of chrome dev tools
As you can see in the picture above, when I resize the dev tools, the page elements and next button moves almost like it's attached to the dev tools.
What really confuses me is that I haven't used css on any part of the in questioned elements. And what confuses me even more is the fact that no other element on the page reacts the same way as the element in question (which again is the very last elements on the page).
Below is my html and SCSS code:
HTML:
<section class="section__shopping-items quarter-margin">
<div class="item-content flex-wrapper">
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
<div class="shop-list">
<img
src="../../public/css/img/3-stripes-shorts-black.jpg"
alt="pants"
class="item-img"
/>
<div class="item-info">
<p class="gender-collection">
Women's Originals
</p>
<p class="item--name">3-stripes shorts</p>
<p class="item--price">
$45
</p>
<p class="item--colors">
2 colors
</p>
</div>
</div>
</div>
</section>
<section class="section__next-page quarter-margin">
<div class="flex-wrapper space-flex">
<div class="page--select">
<div class="flex-wrapper">
<p>Page:</p>
<div class="select-page flex-wrapper">
<p class="page--num">1 <span>⌄</span></p>
<p class="page--length">of 9</p>
</div>
</div>
</div>
<div class="page--next">
<button class="next">next</button>
</div>
</div>
</section>
SCSS
// shopping items
.section {
&__shopping-items {
height: 100%;
.item-content {
cursor: pointer;
justify-content: space-between;
overflow: auto;
.shop-list {
border: .1rem solid transparent;
min-width: 25%;
// height: 25%;
img {
width: 100%;
}
.item-info {
// margin: 1rem 1rem 2rem 1rem;
margin: 0 1rem;
.gender-collection {
margin: 1rem 0;
font-size: 1.2rem;
font-weight: 100;
color: $collection-name-font;
}
.item {
&--name,
&--price {
font-weight: 300;
}
&--name {
margin-bottom: .7rem;
font-size: 1.3rem;
}
&--price {
margin-bottom: 2.5rem;
font-size: 1.2rem;
}
&--colors {
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 300;
color: $collection-name-font;
}
}
}
}
}
.shop-list:hover {
border: .1rem solid $font-color;
}
}
}
Also a quick side note, I've not set anything on this page to position:fixed.
Any help or feedback would be greatly appreciated.
I am new to web development and I am facing an issue. I want to display three div's next to each other. So, I applied display:inline-block to the three div's. But, still the Div's are stacked one below another and not next to each other.
Codepen link: https://codepen.io/shanjaynithin/pen/XWmBPYd
Desired output:
Sample image
You can use flex for this:
.container {
display: flex;
width: 100%;
justify-content: space-between;
}
.boxes {
margin: 10px;
border: 1px solid red;
}
img{
height:100px;
width:100px;
}
<div class="container">
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="snappy-process">
<h3>Snappy Process</h3>
<p>Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="boxes">
<img class="eg" src="http://placekitten.com/301/301" alt="affordable-prices">
<h3 >Affordable Prices</h3>
<p>We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="boxes">
<img src="http://placekitten.com/301/301" alt="people-first">
<h3>People First</h3>
<p>Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>
.container {
display: flex;
width: 100vw;
}
<div class="container">
<div class="boxes">
<img src="images/icon-snappy-process.svg" alt="snappy-process">
<h3>Snappy Process</h3>
<p>Our application process can be completed in minutes, not hours. Don’t get
stuck filling in tedious forms.</p>
</div>
<div class="boxes">
<img class="eg" src="images/icon-affordable-prices.svg" alt="affordable-prices">
<h3>Affordable Prices</h3>
<p>We don’t want you worrying about high monthly costs. Our prices may be low,
but we still offer the best coverage possible.</p>
</div>
<div class="boxes">
<img src="images/icon-people-first.svg" alt="people-first">
<h3>People First</h3>
<p>Our plans aren’t full of conditions and clauses to prevent payouts. We make
sure you’re covered when you need it.</p>
</div>
</div>
<div id="app">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
#app div{
float: left;
width: 200px;
height: 200px;
border: 1px solid;
}
I am making a website (brickman.glitch.me) and have a scroll button. How can I make it scroll down to what seems like a different page?
I've tried using the section tag, but I'm not the most experience so I've become stuck.
<section class="company-heading intro-type" id="parallax-one">
<div class="container">
<div class="row product-title-info">
<div class="col-md-12">
<a class="ct-btn-scroll ct-js-btn-scroll" href="#section2"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
</div>
</div>
</div>
<div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/anchor/company-hero2.jpg);"></div>
</section>
<div class="main">
<section id="section2">
<div class="container jumbo">
<div class="jumbotron">
<p1>test</p1>
I want to make this so it scrolls down to a page where it's got a different background etc, so it looks like a different page. I have an example from a friend's website (questallation.glitch.me) where the button scrolls down. I would like to try make something similar to this. Any help?
Thanks in advance.
To automatically scroll to another section you can use href="x" where x is the id of the section you want to scroll to.
Here is a small example:
<div style="background-color: green;height: 2000px">
<a href="#next-section">Hello</>
</div>
<div id="next-section" style="background-color: red; height: 2000px">
</div>
Have you looked at scroll-behavior: smooth? There is no iOS Safari support, but there is a polyfill.
From MDN
The scroll-behavior CSS property sets the behavior for a scrolling
box when scrolling is triggered by the navigation or CSSOM scrolling
APIs.
body {
background-color: #333;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
}
nav {
background-color: #000;
display: block;
padding: 1em 0;
text-align: center;
}
nav a {
color: #fff;
margin: 0 1em;
text-decoration: none;
}
.scrolling-box {
background-color: #eaeaea;
display: block;
flex-grow: 1;
overflow-y: scroll;
scroll-behavior: smooth;
text-align: center;
width: 100vw;
}
section {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
<nav>
1
2
3
</nav>
<div class="scrolling-box">
<section id="1">Section 1</section>
<section id="2">Section 2</section>
<section id="3">Section 3</section>
</div>
jsFiddle
I worked on your original source code, so this simple solution is based exactly on your example. Btw it works also on mobile. I took the section content from your friend's website, you can put whatever
<html lang="en">
<head>
<title>Brickman Development: Work In Progress</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="shortcut icon" href="https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrickpfp.png?1553388536776" type="image/x-icon">
</head>
<body>
<div style="width: 100%; height: 100%; background: url('https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrick.png?1553389376285'); background-position: 48% 41%; position:relative;">
<h1 class="line-1 anim-typewriter">
<mark>Brickman Development: Work In Progress</mark>
</h1>
<section class="company-heading intro-type" id="parallax-one">
<div class="parallax" id="parallax-cta" style="background-image: url('https://www.solodev.com/assets/anchor/company-hero2.jpg');">
</div>
<div class="container">
<div class="row product-title-info">
<div style="background: #191a1d; position: absolute; bottom: 0; left: 50%" class="col-md-12">
<a class="ct-btn-scroll ct-js-btn-scroll" href="#information"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
</div>
</div>
</div>
</section>
</div>
<section style="font-size: 38px" class="container">
<div class="box-container primary row">
<div class="one-full column">
<h1 id="information"> About myself:</h1>
</div>
<div class="one-full column">
<h6>
I am Questallation, I started as a tiny bot that provided some utility commands, and some fun commands for my developer's server.
Later on, my developer decided to work on the me to have it to specialise in one server. After a few friends
wanted to me on thier servers, my developer changed the bot completely, and gave me a new name; Questallation.
I have joined many new servers, and grown since, to what you see me today.
</h6>
</div>
</div>
<div class="box-container secondary row">
<div class="one-full column">
<h1> Commands:</h1>
</div>
<div class="one-full column">
<h6>Please, come and see my commands,
over here.
</h6>
</div>
</div>
<div class="box-container primary row">
<div class="one-full column">
<h1> Credits:</h1>
</div>
<div class="one-full column">
<h6>Theese people helped to improve me, over the times which I have lived:
People over here.
</h6>
</div>
</div>
</div>
</section>
<br/>
<footer class="center box-container secondary">
<p class="no-margin"> Questallation | Excigma is not affiliated with discord in any way whatsoever |
CSS framework
</p>
</footer>
</body>
</html>
It is a single row made of 3 columns.
I want to make the "h5 class:footer-small" vertical aligned to the div "class: col-1"
I found out that using display: inline-block, it made the text vertical aligned in the center. But I did not understand how was it possible? Can someone explain why using display:inline-block worked?
HTML
<footer>
<div class="row-4">
<div class="col-1">
<p class="col-1">
<h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5>
</p>
</div>
<div class="col-5">
<h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5>
</div>
<div class="col-6">
<h2 class="footer-frase">McDreamy</h2>
<em class="footer-frase">"It's a beautiful night to save lives"</em>
</div>
</div>
</footer>
you can simply do it using css3 flexbox concept
add the following styles to your col-1
display:flex;
align-items:center;
justify-content:center;
Note: you can't declare a header tag (<h1>,<h2>,etc..) inside a paragraph tag(<p>) ,so replace it by <span> tag or any other tags
div.row-4{
display:flex;
color:#fff;
}
div.row-4 div{
padding:5px;
}
.col-6{
background:#73819b;
flex:2;
}
.col-5{
background:#438cab;
flex:2;
}
.col-1{
background:#438cab;
display:flex;
align-items:center;
justify-content:center;
}
<footer>
<div class="row-4">
<div class="col-1">
<span class="col-1">
<h5 class="footer-small">Seattle<br>Grace<br>Hospital</h5>
</span>
</div>
<div class="col-5">
<h5 class="footer-desc">He is a Bowdoin College graduate and attended Columbia University College <br>of Physicians and Surgeons</h5>
</div>
<div class="col-6">
<h2 class="footer-frase">McDreamy</h2>
<em class="footer-frase">"It's a beautiful night to save lives"</em>
</div>
</div>
</footer>
You have two to do this:
1- Set line-height.
2- Or set the height itself.
.row-4 {
background-color: lightblue;
height: 200px;
line-height: 200px; /* <-- this is what you must define */
vertical-align: middle;
vertical-align: middle;
}
h2, em
{
display: inline-block;
vertical-align: middle;
line-height: 14px; /* <-- adjust this */
}
em {
font-size: 12px;
font-weight: normal;
display: block;
margin-top: 10px;
}
<footer>
<div class="row-4">
<h2 class="footer-frase">
McDreamy
<em class="footer-frase">"It's a beautiful night to save lives"</em>
</h2>
</div>
</footer>
BTW: I did some modifications.
There is also another way, which is using flex containers.