For a few days I've been trying to create a footer that is consistent with the style of my site, which is itself in the process of being created but already has a defined style
I have an image to illustrate the footer "of my dreams" :p
And I would like to know how I can create it ? I thought of creating divs containing <p> and <a> the <p> for the titles and the <a> to contain the different links
Here is an image of what I would like to have on my site: https://prnt.sc/13kr8kt
Would anyone know how to explain me the right way? Because I tried but unfortunately impossible to succeed... I would like to understand my mistakes thanks in advance!
Here is my code :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62, 62, 62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35, 35, 35);
padding: 192px 16px;
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
}
.topbar nav a:hover,
.topbar nav a.active {
color: #000;
}
.header-logo {
cursor: pointer;
width: 25vh;
}
h1 {
text-align: center;
color: #fff;
}
.footer {
color: #fff;
background-color: rgb(9, 9, 9);
padding: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Support
</div>
<div class="right">
Social 1
Social 2
</div>
</nav>
</header>
</head>
<body>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="footer">
<footer>
Copyright
</footer>
</div>
</body>
</html>
Use a grid layout with flex on the logo element. using grid-layout you can express how wide you want the columns to be using grid-template-columns: then call the grid-area on each selector with in the grid parent. You may need to tweak a bit to your liking depending on what view ports you are going for.
Use flex on child items you wish to align in a row. Simple Ul/li for links...
/* for display purposes in this snippit only adding margin and padding
to your body may have a negatrive affect on your display in your browser */
body {
margin: 0;
padding: 0;
}
/**/
#footer {
position: relative;
font-family: sans-serif;
height: 20%;
background-color: black;
color: white;
display: grid;
grid-template-columns: 2fr 0.9fr 0.7fr 0.2fr 1.2fr;
grid-template-rows: 1.9fr 0.1fr;
grid-template-areas:
"logo product resource resource business"
"social social . design design";
}
li {
list-style: none;
padding-top: 2%;
font-size: .9em;
}
.flex {
display: flex;
}
#footer li a {
color: #065299;
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 60px;
height: 50px;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copy {
padding-top: .3rem;
font-size: .7em;
color: #7d8287;
}
.product {
grid-area: product;
}
.resource {
grid-area: resource;
}
.business {
grid-area: business;
}
.social {
grid-area: social;
padding-left: .3rem;
padding-bottom: .3rem;
font-size: .6em;
display: flex;
}
.design {
grid-area: design;
font-size: .6em;
text-align: right;
padding-right: .3rem;
padding-bottom: .3rem;
}
.icons {
width: 1rem;
height: 1rem;
padding-left: .3rem;
}
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="https://thumb9.shutterstock.com/image-photo/redirected-150nw-795281602.jpg">
<h4>My Company</h4>
</div>
<div class="copy">© Poseidon Bot 2012 - All Rights Reserved</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Articles</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with ❤ by <span style="color: #065299;">My Discord ID</span>
</div>
<div class="social">
<img class="icons" src="http://icons.iconarchive.com/icons/custom-icon-design/mono-general-3/128/twitter-icon.png">
<img class="icons" src="https://www.stackbuilders.com/assets/img/github-icon-hover.png">
<img class="icons" style="filter: invert(100%)" src="https://www.iconninja.com/files/625/765/244/social-media-stackoverflow-icon.png">
</div>
</div>
EDIT: note the circled items in the picture, they take up two different wide columns to make up their full width. Resource is 0.2 + 0.7 which = 0.9fr, where design is 0.2 + 1.2 which is = 1.4fr, furthermore this allow us to skew the bottom row column by starting its left side at the preceding column which is 0.2fr to the left of resources right side.
Related
I'm having trouble getting my grid to display the way i want and i can't see what i've done wrong. Please take a look at this for me.
It was displaying correctly when i was using background-image url() in css but i needed to use image tags because they need to be hyperlinks and i'm pretty sure this was the only way. When i use img tags the pictures were now displaying in their full size and i couldnt get them back to the right scale. and when i wrapped them in anchor tags they stopped displaying in the correct order.
Here's my code
* {
box-sizing: border-box;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
}
p {
margin: 0;
font-size: 1.8rem;
}
body {
margin: 0;
padding: 0;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
line-height: 1.5;
}
header {
display: flex;
width: 100%;
justify-content: space-between;
background-color: darkgrey;
padding-right: 5%;
}
header h1 {
background-color: blue;
padding: 1px;
min-width: 20%;
color: yellow;
}
nav {
display: flex;
text-decoration: underline darkblue;
width: 60%;
align-items: center;
justify-content: space-around;
}
nav li {
display: inline;
justify-content: flex-end;
padding-left: 8%;
color: yellow;
}
.heroBanner {
background-image: url("../images/02-hero-bg.jpg");
background-size: cover;
height: 200px;
position: relative;
}
#page-section {
width: 100%;
}
#title {
position: absolute;
bottom: 10%;
right: 10%;
background-color: blue;
color: yellow;
}
/* Put my about stuff here */
#about {
display: flex;
padding: 3%;
}
#about p {
align-items: stretch;
color: yellow;
}
#about-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#about-2 {
width: 80%;
padding-left: 3%;
background-image: url(/my-work/images/Portfolio-avatar.png);
background-size:contain;
background-position: center;
}
#work {
height: 1200px;
display: flex;
padding: 3%;
}
#work-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#work-2 {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
'one one'
'two three'
'four five'
}
.pics {
position: relative;
}
.pic-title {
position: absolute;
bottom: 15%;
background-color: blue;
color: yellow;
}
#big {
grid-area: one;
object-fit: contain;
margin: 10px;
border: solid 4px darkblue;
}
#pic1 {
grid-area: two;
object-fit: contain;
width: 25%;
margin: 10px;
border: solid 4px darkblue;
}
#pic2 {
grid-area: three;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic3 {
grid-area: four;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#pic4 {
grid-area: five;
object-fit: cover;
margin: 10px;
border: solid 4px darkblue;
}
#picture1, #picture2, #picture3, #picture4, #picture5 {
object-fit: cover;
}
#contact {
display: flex;
width: 100%;
display: flex;
padding: 3%;
}
#work-2 {
width: 75%;
}
#contact-1 {
width: 20%;
border-right: solid 8px darkblue;
}
#contact-2 {
width: 80%;
}
#contact-2 ul {
display: flex;
list-style: none;
display: flex;
text-decoration: underline darkblue;
width: 80%;
align-items: center;
justify-content: space-between;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lorenzo Francis-Walker // Junior Web Developer</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<!-- main logo / nav -->
<header>
<h1>Lorenzo Francis-Walker</h1>
<nav>
<li>About me</li>
<li>Work</li>
<li>Contact Me</li>
</nav>
</header>
<!-- hero banner -->
<section class="heroBanner">
<h2 id="title">Room4Renzo</h2>
</section>
<main class="page-wrapper">
<!-- about me -->
<section class="page-section" id="about">
<div id="about-1">
<h2>About Me</h2>
</div>
<div id="about-2">
<p>My love for computers comes from a fairly young age and is greater than my current experience. I was given an
old PC by a friend that soon stopped working. He had another one that worked but soon after giving that to me
, it too stopped working. I found a pdf of how to build computers for dummies on my phone and used what i had
learned to combine the two PC's parts into one case, and it worked. I had always been interested in technology
but this is where my love for understanding computers and how they work. Once you learn about different types
of hardware theres not many places to go. ie networking, coding, etc. fortunately for me, the depth of the
limited options are vast, so there is alot left for me to learn and I never want my journey to end.</p>
</div>
</section>
<!-- portfolio container -->
<section class="page-section" id="work">
<div id="work-1">
<h2>Work</h2>
</div>
<div id="work-2">
<a href="" target="_blank">
<div id="big" class="pics">
<img src="./images/02-run-buddy.jpg" id="picture1" alt="" class="grid-column-span-2">
<div class="pic-title">
<h2>Run Buddy</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic1" class="pics">
<img src="./images/02-portfolio-1.jpg" id="picture2" alt="">
<div class="pic-title">
<h2>LED Wall</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic2" class="pics">
<img src="./images/02-portfolio-2.jpg" id="picture3" alt="">
<div class="pic-title">
<h2>Calculator</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic3" class="pics">
<img src="./images/02-portfolio-3.jpg" id="picture4" alt="">
<div class="pic-title">
<h2>Pastel Puzzels</h2>
<p>Languages Used</p>
</div>
</div>
</a>
<a href="" target="_blank">
<div id="pic4" class="pics">
<img src="./images/02-portfolio-4.jpg" id="picture5" alt="">
<div class="pic-title">
<h2>Surf Report</h2>
<p>Languages Used</p>
</div>
</div>
</a>
</div>
</section>
<!-- contact -->
<section class="page-section contact" id="contact">
<div id="contact-1">
<h2>Contact Me</h2>
</div>
<div id="contact-2">
<ul>
<li>Email: Lorenzo.afw#gmail.com</li>
<li>Github: Room4Renzo </li>
</ul>
</div>
</section>
</main>
</body>
</html>
i tried manually resizing, using object-fit as i saw in another answer, i tried different amount of columns for the grid, same for the rows. i can;t find where my mistake is. appreciate any help. Thanks
I have this issue with my CSS where I have lots of content in my HTML but in my browser, in the responsive version it won't scroll anymore, in other words, it stops when there is more content to display. How can I prevent that from occurring? It's been happening for quite some time now. Here is my HTML and CSS code I will add the full code.
p.s. what I mean is that in the developer tools in chrome in order to view the website on different devices it stops in the about section it does not show my javascript skills.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto+Slab:wght#100&display=swap"
rel="stylesheet">
<title>Portfolio</title>
</head>
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 100px;
background-color: #111;
padding: 0 5px;
}
header .logo-link {
}
header .logo-link .logo-img {
width: 100px;
height: 100px;
}
header .box {
display: inline-block;
float: right;
}
header .box .line-1,
.line-2,
.line-3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
}
nav {
display: none;
position: absolute;
right: 0;
top: 100px;
width: 45%;
height: 40%;
background-color: #111;
padding-bottom: 20px;
}
nav .ul {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
nav .ul .li {
margin-top: 30px;
padding: 0 15px;
padding-bottom: 15px;
}
nav .ul li .li-a {
text-transform: capitalize;
color: #fff;
text-decoration: none;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page {
background-color: #111;
width: 100%;
height: 100vh;
}
.landing-page .title {
margin: 0 0 20px 2px;
color: #fff;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
}
.landing-page .name {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
padding-left: 15px;
}
.landing-page h3 {
font-size: 40px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
color: #fff;
margin: 10px 0 0;
padding-left: 15px;
padding-top: 20px;
}
.landing-page .mission {
color: #fff;
margin-top: 20 0 0px;
font-size: 18px;
padding-top: 20px;
line-height: 18px;
}
.landing-page .check-out {
border: 1px solid #fff;
color: #fff;
text-align: center;
padding-left: 15px;
padding-right: 15px;
width: 200px;
margin-left: 80px;
margin-top: 50px;
}
#about {
background-color: #111;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
}
#about .bar .skill,
p {
color: #fff;
font-size: 18px;
}
#about .bar {
width: 100%;
background-color: #ddd;
}
#about .bar .skill {
text-align: right;
padding-top: 10px;
}
#about .bar p {
text-align: left;
}
<body>
<header class="header">
<img src="img/logo.png" alt="" class="logo-img">
<div class="box">
<div class="line-1"></div>
<div class="line-2"></div>
<div class="line-3"></div>
</div>
</header>
<nav class="nav">
<ul class="ul">
<li class="li">About</li>
<li class="li">Projects</li>
<li class="li">Contact</li>
</ul>
</nav>
<section class="landing-page">
<h1 class="title">Hello world! My name is</h1>
<h2 class="name"> Jorge Artaza. </h2>
<h3>I am a Full Stack Developer</h3>
<p class="mission">My mission is to develop lightning fast website, apps, games, and software that are user friendly.</p>
<p class="check-out">Check out my <br> Portfolio <span>▼</span></p>
</section>
<section id="about">
<div class="img-about">
<img src="" alt="">
<h2>Who am I?</h2>
<p>I am a self taught developer. My interest started at a young age and started to create from that point onward. When I am not developing I am working out or relaxing.</p>
</div>
<p class="my-skills">My Skills</p>
<div class="bar">
<div class="skill ">
<p>HTML</p>
80%
</div>
</div>
<div class="bar">
<div class="skill">
<p>CSS</p>
80%
</div>
</div>
<div class="bar">
<div class="skill js">
<p>JavaScript</p>
70%
</div>
</div>
</section>
</body>
Here is the solution, you need to put that in the head, for the site adjust for mobile devices:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
If you want know more: Meta viewport - Mozilla
Also, i will recomend you make some changes on your code:
1 - Remove the heights 100vh and put a fix hight for you components, like 500px, 400px. Examples: height: 300px;;
2 - Your code is like a puzzle, put a background-color in your body, not in the components, if you want that the entire page has a black background-color;
3 - Put the sections inside of a main(father element), with that you can use the flex box for adjust your code;
4 - There is on Youtube some great videos about do a better header, i realy don't like this float:righ, because it can bring some problems for you code, like messing the positions of the others elements;
6 - Use the media queries for a better display on the mobile devices, as well - Media Queries | Media Queries - Mozilla
Exemple about the sections:
<main class="main">
<section></section>
<section></section>
</main>
I will recomend this video about the header, because is the only i have watched in english, but you can have an idea: Header video
I am using flexbox and the footer is outside of flexbox contents.
my issue is the footer is in the middle of flex items and is not setting on the bottom. I don't know what I did wrong. everything I've tried either hasn't worked so far.
any help will be apperiaciate.thanks
here is my full code : https://codepen.io/ROY1319/project/editor/ANyGyr
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #9bf6ff;
font-family: 'Oswald', sans-serif;
width: 100%;
}
#headerExperience {
line-height: 200px;
font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: khaki;
background-color: steelblue;
background-image: url("images/Experience\ background\ imagee.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
margin-bottom: 25px;
}
.container {
display: flex;
height: 100vh;
flex-direction: column;
gap: 25px;
align-items: center;
margin-bottom: 25px;
}
.century,
.LNA {
border: 2px solid black;
font-size: 16px;
background-color: #E5ECE9;
display: block;
}
.century,
.LNA {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1 0 15OPX
}
.headers,
.tasks {
display: block;
align-content: space-around;
}
/* nav and ul */
ul {
overflow: hidden;
display: inline-block;
/* how do I set the vertical spacing between the list items? */
}
li {
margin: 10px 0;
letter-spacing: 2px;
}
footer {
background-color: orangered;
padding: 0 1rem;
bottom: 0;
width: 100%;
height: 2.5rem;
}
footer .foot {
display: flex;
justify-content: space-between;
align-items: center;
color: red;
padding: 5em 0;
}
footer ul {
list-style: none;
margin: 0;
}
footer li {
display: inline-block;
padding: 0.75rem 1.25rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="experience.css" />
<title>Experience</title>
</head>
<body>
<!--Header-->
<div id="headerExperience">
<h1>Experience</h1>
</div>
<!--container-->
<div class="container">
<!-- Century-->
<div class="century">
<div class="media">
<img src="imag logo.png" alt="CenturyImage" />
<figcaption>Century Logo</figcaption>
</div>
<div class="headers">
<h2>ddddd</h2>
<h3>IT student Worker</h3>
<h4>Whie MN,2018</h4>
</div>
<div class="tasks">
<h5>TASKS</h5>
<ul>
<li>
1.Instructed users over the phone by describing what to look for and steps to take.
</li>
<li>
2.Adapted to change and learn new version of Microsoft quickly.
</li>
<li>
3.Assisted department staff with assigned tasks including technology equipment prep, filling, shredding.
</li>
<li>4.Created appropriate technical documents.</li>
</ul>
</div>
</div>
<!-- lNA-->
<div class="LNA">
<div class="media">
<img src="images/logo.jpg" alt="logo" />
<figcaption>LNA Logo</figcaption>
</div>
<div class="headers">
<h2>LNA</h2>
<h3>Digital Support Specialist</h3>
<h4>Minneapolis MN,2021-Present</h4>
</div>
<div class="tasks">
<h5>Tasks</h5>
<ul>
<li>1.Update and manage a simple program website.</li>
<li>2.Help participants access free and safe internet service.</li>
<li>
3.Encrypting hard drives of participants' laptops using bit Locker built-in window OS.
</li>
<li>
4.Distribute free laptops and tech accessories to participants.
</li>
<li>5.Lead small student groups practicing computer skills.</li>
</ul>
</div>
</div>
</div>
<footer> // footer started here
<div class="foot">
<div class="copyright">© A Team</div>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
<li>Experience</li>
<li>Achievemants</li>
<li>About</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
I created a footer that I would like to reproduce on my site, after many tests here is the best result obtained:
The image of the footer I would like to make : https://i.imgur.com/QpmoreU.png
How can I match the image on my site please? I have tried so many things that I don't even understand what I'm doing so if you have any explanations and help I'd be delighted...
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.topbar {
height: 80px;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar nav {
display: flex;
width: 100%;
}
.middle {
margin: 0 auto;
}
.topbar nav a {
color: #9F9F9F;
text-decoration: none;
font-weight: 500;
padding: 0 20px;
display: inline-block;
text-align: center;
font-size: 21px;
}
.topbar nav a:hover, .topbar nav a.active {
color: #94C8D0;
}
.header-logo {
padding: 0px 20px;
cursor: pointer;
width: 25vh;
}
.login {
display: flex;
justify-content: end;
flex-direction: row-reverse;
}
.login_btn {
margin: auto 25px auto;
background-color: #EEEEEE;
color: #3b3b3b;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.header_title {
text-align: center;
color: #ffffff;
font-family: 'Inter', sans-serif;
font-weight: 1000;
font-size: 72px;
word-spacing: 0px;
margin: 0px;
padding: 0px;
letter-spacing: normal;
line-height: 72px;
}
.header_second_title {
text-align: center;
color: #9F9F9F;
font-family: 'Inter';
font-size: 30px;
margin: 16px 0px 0px;
padding: 0px;
line-height: 36px;
font-weight: 500;
}
.container {
display: flex;
justify-content: center;
flex-direction: row;
}
.invite_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #1A9BB6;
color: #ffffff;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
.support_btn {
font-size: 24px;
font-family: 'Inter';
background-color: #EEEEEE;
color: #282828;
border: none;
text-align: center;
text-decoration: none;
padding: 15px 32px;
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr .6fr .6fr 1fr;
grid-template-areas: "logo product resources business"
"social . . design";
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 1em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<header class="topbar">
<img class="header-logo" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
<nav>
<div class="middle">
Invite
Commands
Documentation
Premium
Support
<div class="login">
Login<i class="fas fa-sign-in-alt"></i>
</div>
</div>
</nav>
</header>
<div class="circuit">
<h1 class="header_title">The Perfect <br>Discord Music Bot.</h1>
<h2 class="header_second_title">Poseidon is the only Discord bot you'll ever need!</h2>
<div class='container'>
Invite
Support
</div>
</div>
<div class="dark">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div class="circuit">
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</div>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
I just add a new class as .links and fix your Products Resources and Business you can check it, and change a little bit about right bottom edge text, give footer relative and text to absoulte right:0 bottom : 0 and make text smaller. Hope helps.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body, html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
.circuit {
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
padding: 192px 0 112px;
}
.dark {
background-color: rgb(35,35,35);
padding: 192px 0 192px;
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
h1 {
text-align: center;
color: #9F9F9F;
}
h2 {
text-align: center;
color: #9F9F9F;
}
#footer {
font-family: sans-serif;
display: flex;
height: 20%;
background-color: black;
color: white;
padding-top:3em;
position:relative;
justify-content:space-between;
}
li {
list-style: none;
padding-top: 8%;
font-size: .9em;
line-height: 1px;
}
.flex {
display: flex;
justify-content: end;
}
.links{
display:flex;
flex-direction:column;
justify-content:space-between;
height:50%;
}
#footer li a {
color: rgb(22,145,176);
text-decoration: none;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
padding-bottom:2rem;
width:40%;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.right-side{
width:60%;
display:flex;
}
.right-side div{
margin-right:2em;
}
.right-side div b{
display:inline-block;
padding-bottom:1em;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: 0.7em;
color: rgb(97,97,97);
}
.product {
grid-area: product;
font-size: 20px;
padding-top: .5rem;
}
.resources {
grid-area: resources;
font-size: 20px;
padding-top: .5rem;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
position:absolute;
bottom:0;
left:1em;
cursor: pointer;
}
.design {
grid-area: design;
position:absolute;
right:0;
bottom:0;
font-size: 1em;
text-align: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<div class="right-side">
<div>
<b>Product</b>
<ul class="links">
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
</div>
<div>
<b>Resources</b>
<ul class="links">
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
</div>
<div>
<b>Business</b>
<ul class="links">
<li>Contact</li>
</ul>
</div>
</div>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord ID</span></div> <!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
How about trying this one? I have kept the codes relevant to the footer part only.
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#400;700&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body,
html {
font-size: 16px;
color: rgba(0, 0, .87);
font-family: "Montserrat", sans serif;
line-height: 1.6;
margin: 0;
padding: 0;
font-weight: 500;
width: 100%;
}
#footer {
font-family: sans-serif;
display: grid;
height: 20%;
background-color: black;
color: white;
grid-template-rows: 1fr;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
grid-template-areas: "logo product resources business" "social . . design";
align-items: flex-start;
}
#footer ul {
margin-top: .5rem;
}
#footer ul li {
list-style: none;
padding-top: 5%;
font-size: 1rem;
line-height: 1px;
margin-top: 10px;
}
.flex {
display: flex;
justify-content: end;
}
#footer ul li a {
color: rgb(22, 145, 176);
text-decoration: none;
font-size: .7rem;
}
.logo {
display: flex;
flex-direction: column;
justify-content: flex-start;
grid-area: logo;
padding-left: 1rem;
padding-top: .5rem;
}
.img {
padding-top: .5rem;
width: 25vh;
cursor: pointer;
}
.logo h4 {
line-height: 1rem;
margin-left: 2rem;
}
.copyright {
padding-top: .3rem;
font-size: .65em;
color: rgb(97, 97, 97);
}
.product {
grid-area: product;
font-size: 20px;
}
.resources {
grid-area: resources;
font-size: 20px;
}
.business {
grid-area: business;
font-size: 20px;
}
.social {
grid-area: social;
padding-top: 1em;
padding-left: 1em;
cursor: pointer;
}
.design {
grid-area: design;
font-size: 1em;
text-align: right;
align-self: end;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Poseidon | The Perfect Discord Bot</title>
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
</head>
<body>
<div id="footer">
<div class="logo">
<div class="flex">
<img class="img" src="img/logo.svg" alt="Poseidon Logo" href="index.html">
</div>
<div class="copyright">© Poseidon Bot 2012 - All Rights Reserved.</div>
</div>
<ul class="product">
<li><b>Product</b></li>
<li>Invite</li>
<li>Commands</li>
<li>Premium</li>
</ul>
<ul class="resources">
<li><b>Resources</b></li>
<li>Docs</li>
<li>Provacy</li>
<li>Refunds</li>
</ul>
<ul class="business">
<li><b>Business</b></li>
<li>Contact</li>
</ul>
<div class="design">
designed with <span style="color: red;">❤</span> by <span style="color: #00e09d;">My Discord
ID</span></div>
<!-- Javascript clickable text // add js function -->
<div class="social">
<img src="https://img.icons8.com/material-sharp/24/ffffff/github.png" href="https://google.fr" />
<img src="https://img.icons8.com/material-sharp/24/ffffff/discord-logo.png" href="#" />
<img src="https://img.icons8.com/android/24/ffffff/twitter.png" href="#" />
</div>
</div>
</body>
</html>
Hope this solves your problem!
HTMl STARTS HERE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght#400;700&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<link rel="stylesheet" href="./css/main.css" />
<title>Fylo | light theme page</title>
</head>
<body>
<header id="header-home">
<div class="container">
<nav class="nav-bar">
<img src="./images/logo.svg" alt="" />
<div class="nav-list">
<ul>
<li>Features</li>
<li>Sing In</li>
<li>Team</li>
</ul>
</div>
</nav>
</div>
</header>
<section id="header-content">
<div class="container">
<div class="main">
<div class="header-content-1">
<h1 class="header-title">
All your files in one secure location accessible anywhere
</h1>
<p class="header-text">
Fylo stores your most important files in one secure location.
Access them wherever you need, share and collaborate with friends,
family, and co-workers.
</p>
<form action="" class="form">
<input
type="email"
name=""
id=""
placeholder="Enter your email"
class="input"
/>
<button class="btn-main">Get Started</button>
</form>
</div>
<div class="header-content-2">
<img src="./images/illustration-1.svg" alt="" />
</div>
</div>
</div>
</section>
<section id="productive">
<div class="container">
<div class="main-2">
<div class="main-context">
<h2 class="header">Stay Productive wherever you are</h2>
<p class="text-1">
Never let location be an issue whn accessing your files. Fylo has
you covered for all your file storage needs
</p>
<p class="text-2">
Securely share your files and folders with friends, family and
colleaues for live collaboration. No email attachment required
</p>
<a href="#" class="link"
>See how fylo works <img src="./images/icon-arrow.svg" alt=""
/></a>
<div class="card">
<img src="./images/icon-quotes.svg" alt="" />
<p class="card-text">
Fylo has improved our team productivity by an rder of magnitude.
Since making the switch our team has become a well-oiled
collaboration machine
</p>
<div class="avatar-info">
<img src="./images/avatar-testimonial.jpg" alt="" />
<div class="avatar-name">
<h4>Kyle Burton</h4>
<p>Founder& & CEO, Huddle</p>
</div>
</div>
</div>
</div>
<div class="image-container">
<img src="./images/illustration-2.svg" alt="" class="image-two" />
</div>
</div>
</div>`
</section>
</body>
</html>
CSS STARTS HERE
#import "variables";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
// color: #fff;
font-family: "Open sans", sans-serif;
line-height: 1.6;
}
a {
color: $links;
text-decoration: none;
}
// img {
// max-width: %;
// }
ul {
list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.6;
font-family: "Raleway", sans-serif;
color: $footer;
// text-align: center;
// margin: 10px 0;
}
p {
line-height: 1.6;
font-family: "Raleway", sans-serif;
font-size: 0.95rem;
// text-align: center;
// margin: 10px 0;
// color: ;
}
#import "utilities";
#header-home {
grid-area: header;
// display: grid;
.nav-bar {
display: grid;
grid-template-columns: 1fr 2fr;
// margin-top: 50px;
padding: 2rem 1.5rem;
position: sticky;
// justify-content: space-between;
ul {
display: grid;
grid-template-columns: repeat(3, auto);
justify-content: end;
align-items: center;
height: 100%;
margin: 0;
li {
padding: 0 10px;
a {
font-size: 0.9rem;
text-transform: uppercase;
margin-right: 0.75rem;
border-bottom: 2px transparent solid;
padding: 2px 0;
transition: border-color 0.2s;
color: black;
&:hover {
border-color: $footer;
}
&.current {
border-color: $footer;
}
&:last-of-type {
margin-right: 0;
}
}
}
}
img {
max-width: 60%;
}
}
}
#header-content {
margin-top: 90px;
grid-area: section;
// height: 100vh;
.main {
display: grid;
grid-template-columns: 1fr 1fr;
.header-content-1 {
// justify-content: center;
// width: 200px;
grid-column: 1/2;
grid-row: 1/4;
.header-title {
align-self: flex-end;
font-size: 3rem;
// grid-column: 1/2;
}
.header-text {
grid-column: 1/2;
grid-row: 2/3;
// width: 80%;
margin-top: 20px;
// padding: 0 40px;
}
.form {
margin-top: 20px;
grid-column: 1/2;
grid-row: 2/3;
.input {
width: 300px;
padding: 15px;
border-radius: 4px;
border: 1px solid $bg-2;
&:focus {
outline: none;
}
}
}
}
.header-content-2 {
img {
grid-column: 2/3;
grid-row: 1/3;
max-width: 80%;
justify-self: center;
// margin-top: -10%;
align-self: center;
}
}
}
}
#productive {
// margin-top: 200px;
// // background-color: $bg-2;
// position: relative;
background-image: url(../dist/images/logo.svg);
background-color: hsl(240, 75%, 98%);
margin-top: 100px;
// position: relative;
padding: 50px 0;
// grid-area: section;
}
Image background on the #productive section. i have tried a number of things and it is not responding.
You will probably need to specify the background width and position. Here is an example:
div {
width: 100px;
height: 100px;
background-image: url(https://images7.memedroid.com/images/UPLOADED891/5c39cdc9b5921.jpeg);
background-size: 100px;
background-position: center;
}
<div>
</div>