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>
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
hi guys i'm a bit newbie in web dev and i'm trying to build my portfolio website as training project, i structured it in desktop mode and when i begun using media-queries for responsiveness i encountered some problems, in a few words i have the mobile breakpoint at max-width 860px that works only if i resize the window of the browser manually and not if i use chrome's developer-tools to view it in mobile mode, i'll leave here the code and the link to the website if you want to view it on mobile
http://mandowebdev.ddns.net/portfolio/
#import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Knewave&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#500;800&display=swap");
:root {
--background: #3e3e3e;
--primary: #ffed00;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
}
html {
width: 100vw;
height: 100vh;
font-size: 16px;
background-color: var(--background);
color: var(--primary);
}
body {
display: flex;
flex-direction: column;
justify-content: center;
width: 90%;
margin: auto;
}
nav {
width: 75%;
display: grid;
grid-template-columns: 1fr 3fr;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
.nav-logo {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
margin-right: 4.25rem;
margin-top: 1rem;
}
.nav-ul {
display: flex;
list-style-type: none;
}
.nav-li {
font-family: "Poppins", sans-serif;
font-weight: 800;
margin-right: 3.125rem;
}
.nav-links {
text-decoration: none;
color: var(--primary);
}
hr {
border: 2px solid #707070;
}
.landing {
width: 80%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-image: url(img/grid.svg);
background-repeat: no-repeat;
background-size: cover;
margin-left: auto;
margin-right: auto;
margin-top: 8rem;
margin-bottom: 14.7rem;
padding: 3rem;
}
.landing-logo {
font-family: "Luckiest Guy", cursive;
font-size: 7.25rem;
}
.landing-logo-subtitle {
font-family: "Knewave", cursive;
font-size: 4.19rem;
}
.stack {
margin: auto;
margin-top: 8rem;
display: flex;
grid-template-columns: 1fr 1fr;
grid-column-gap: 12.25rem;
}
.stack-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 2.5rem;
margin-bottom: 8rem;
margin-left: 7.5rem;
}
.stack article {
align-items: center;
}
.cloud {
border: 5px solid var(--primary);
border-radius: 4rem;
display: flex;
justify-content: space-around;
margin-left: 4rem;
}
.stack-icons {
margin: 5rem 1.5rem 5rem 1.5rem;
min-width: 2rem;
}
.projects {
margin-top: 25rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.projects-h1 {
font-family: "Luckiest Guy", cursive;
font-size: 3rem;
}
.project {
padding-bottom: 10rem;
padding-top: 10rem;
display: grid;
grid-column-gap: 8rem;
grid-template-columns: 1fr 1fr;
align-items: center;
border-bottom: 2px solid var(--primary);
font-family: "Poppins", sans-serif;
line-height: 2rem;
}
#plant {
direction: rtl;
}
#plant p {
direction: ltr;
}
#media (max-width: 860px){
.project{
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
}
#media screen and (max-width: 1230px) {
.stack {
flex-direction: column;
}
.cloud {
margin-bottom: 15rem;
}
}
#media screen and (max-width: 1600px) {
html {
font-size: 14px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>Portfolio</title>
</head>
<body>
<nav class="navbar">
<p class="nav-logo">Mando.</p>
<ul class="nav-ul">
<li class="nav-li">HOME</li>
<li class="nav-li">DEV-STACK</li>
<li class="nav-li">MY PROJECTS</li>
<li class="nav-li">CONTACT</li>
</ul>
</nav>
<hr id="nav_hr" />
<section class="landing">
<div class="landing-text">
<p class="landing-logo">Mando.</p>
<p class="landing-logo-subtitle">Full Stack Web Dev</p>
</div>
<img class="memoji" src="img/memoji_img.svg" alt="#" />
</section>
<section class="stack">
<article class="front-end">
<h1 class="stack-h1">My Front-end Stack</h1>
<div class="cloud">
<img class="stack-icons" src="img/front-end/js.svg" alt="#" />
<img class="stack-icons" src="img/front-end/html.svg" alt="#" />
<img class="stack-icons" src="img/front-end/css-3.svg" alt="#" />
</div>
</article>
<article>
<h1 class="stack-h1">My Back-end Stack</h1>
<div class="cloud">
<img class="stack-icons" src="img/back-end/js.svg" alt="#" />
<img class="stack-icons" src="img/back-end/django.svg" alt="#" />
<img class="stack-icons" src="img/back-end/python.svg" alt="#" />
</div>
</article>
</section>
<section class="projects">
<h1 class="projects-h1">My Learning Projects</h1>
<article class="project">
<img class="project-img" src="img/projects/python_guide.svg" alt="" />
<p class="projects-p">
A brief introduction to my favorite. Programming language: Python
</p>
</article>
<article class="project" id="plant">
<img class="project-img" src="img/projects/not_a_plant.svg" alt="" />
<p class="projects-p">
A product page design that includes images and a sample video <br />
for the product with a contact form at the end
</p>
</article>
<article class="project">
<img class="project-img" src="img/projects/apple.svg" alt="" />
<p class="projects-p">
My first html and css project: a little roadmap of Steve Jobs life
from 1974 to 2011
</p>
</article>
</section>
<section class="projects">
<h1 class="projects-h1">Javascript Projects</h1>
<article class="project">
<img class="project-img" src="img/projects/generative_art.svg" alt="" />
<p class="projects-p">
My generative art project made in javascript, with this you can tweak
<br />
some parameters to create your own generative frame
</p>
</article>
</section>
</body>
</html>
As it's working when you decrease the viewport size but not on the browser's emulator I suspect you are missing the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
See MDN for an explanation.
Add screen and in the max-width: 860px media query.
I'm trying to recreate FreeCodeCamp's Product Landing Page as a personal project.
For the content below the Get Started button and above the video, I used a grid to try to align them properly. However, I'm having trouble aligning the text (the heads and paragraphs) vertically in their rows. How may I go about doing this? They seem to be sitting at the "bottom" of their rows.
HTML code:
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</body>
</html>
According to my experience, If we want to align items(vertically or horizontally) in a grid we can use flex property inside that child element. The following example will help to get an idea.
To vertically align:
align-items:{position}
To horizontally align:
justify-content:{position}
body{
color: #ffff;
}
.content{
display: grid;
grid-gap: 10px;
max-width: 960px;
margin: auto;
text-align: center;
font-weight: bold;
font-size: 50px;
font-family: sans-serif;
grid-template-columns: repeat(3,1fr);
grid-auto-rows:200px;
}
.content div{
background: gray;
padding: 30px;
}
.content div:nth-child(even){
background: green;
}
.one{
display:flex;
align-items: start;
justify-content: start;
}
.two{
display:flex;
align-items: center;
justify-content: center;
}
.three{
display:flex;
align-items: end;
justify-content: end;
}
.four{
display:flex;
align-items: start;
justify-content: center;
}
.five{
display:flex;
align-items: end;
justify-content: center;
}
.six{
display:flex;
align-items: start;
justify-content: end;
}
<html>
<body>
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
</html>
What I did was I made the div surrounding the h1 and p tags into a flexbox
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
And that seemed to work. It was really as simple as that.
body {
font-family: Lato, sans-serif;
background-color: #ececec;
}
h1 {
margin-bottom: 0;
}
p {
margin-top: 0;
}
#top {
margin-top: 100px;
}
#top h1 {
font-size: 1.5em;
font-weight: 600;
margin-bottom: 0;
}
#nav-bar {
position: fixed;
width: 100%;
height: 80px;
background-color: #ececec;
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
}
#header-img {
height: 35px;
left: 0;
margin-left: 20px;
}
#top {
text-align: center;
}
#navbar li {
display: inline;
right: 0;
}
#navlinks {
display: flex;
list-style-type: none;
}
#navlinks li {
padding: 5px;
text-align: center;
margin-right: 50px;
}
#submit {
width: 150px;
height: 30px;
margin-top: 15px;
font-weight: 900;
font-size: 1em;
background-color: #f3c807;
border: none;
}
#submit:hover {
background-color: orange;
transition: background-color 1s;
cursor: pointer;
}
#email {
height: 23px;
padding-left: 7px;
width: 275px;
}
i.fa, i.fas {
color: rgb(255, 136, 0);
text-align: center;
}
#grid {
display: grid;
grid-template-columns: 100px auto;
grid-template-rows: 50px 50px 50px;
grid-column-gap: 50px;
grid-row-gap: 80px;
margin-left: 50px;
align-content: center;
margin-top: 100px;
}
.icon {
text-align: center;
}
.middlecontent h1 {
font-size: 1.5em;
margin-bottom: 0;
}
.middlecontent p {
margin-top: 0;
}
.middlecontent {
display: flex;
justify-content: center;
flex-direction: column;
}
<!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="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght#0,100;0,300;0,400;1,100;1,300&display=swap" rel="stylesheet">
<link href="./css/landingpagestyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/2b4114baf6.js" crossorigin="anonymous"></script>
<title>Original Trombones</title>
</head>
<body>
<header id="header">
<nav id="nav-bar">
<!-- Picture logo in header -->
<img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Original Trombones">
<ul id="navlinks">
<li>
Features
</li>
<li>
How It Works
</li>
<li>
Pricing
</li>
</ul>
</nav>
</header>
<main>
<div id="top">
<h1>Handcrafted, home-made masterpieces</h1>
<br>
<form id="form" action="https://www.freecodecamp.com/email-submit">
<label for="email"></label>
<input type="email" name="email" id="email" placeholder="Enter your email address">
<br>
<input type="submit" id="submit" value="GET STARTED">
</form>
</div>
<div id="middle">
<div id="grid">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="middlecontent">
<h1>
Premium Materials
</h1>
<p>
Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="middlecontent">
<h1>
Fast Shipping
</h1>
<p>
We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.
</p>
</div>
<div class="icon">
<i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
</div>
<div class="middlecontent">
<h1>
Quality Assurance
</h1>
<p>
For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.
</p>
</div>
</div>
</div>
</main>
</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!
I am using media queries and breakpoints to make my webpage responsive. I have 3 images with figcaptions. Everything is fine when the three images are in separate columns. However, for the mobile layout, everything is in the same column. In safari, the mobile layout experiences the following problem: the image overlaps the figcaption. This issue does not occur in firefox or chrome. Unfortunately, since I have no idea what is causing this issue, I don't know how to condense the code and still reproduce the bug. I am using css grid to layout my page (some elements are themselves grids as well). Thank you so much.
Screenshots of Part of Page:
Chrome: (working)
Screenshot
Safari (not working)
Screenshot
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Name</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="header">
<h1 class="header-logo">D</h1>
<div class="header-text">
<h1 class="header-name">Name</h1>
<h2 class="header-title">Title</h2>
</div>
</header>
<img class="large-image" src="images/code.jpg">
<main class="main">
<h2 class="featured-work">Featured Work</h2>
<figure class="project-1">
<img src="images/project-1.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 1</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-2">
<img src="images/project-2.jpg">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 2</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
<figure class="project-3">
<img src="images/project-3.png">
<figcaption class="caption">
<div>
<h2 class="caption-header">Project 3</h2>
<a class="caption-link" href=#>Project Link</a>
</div>
</figcaption>
</figure>
</main>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', sans-serif;
color: #7d97ad;
font-style: normal;
overflow-x: hidden;
}
img, embed, object, video {
max-width: 100%;
}
.caption-header {
margin: 0;
color: #2d3c49;
font-size: 35px;
font-weight: 600;
}
a {
color:#337ab7;
text-decoration:none;
}
a:hover, a:focus {
color:#23527c;
text-decoration:underline;
}
a:focus {
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
.caption {
text-align: center;
}
.header-logo {
margin: 0;
color: #42c5f4;
font-size: 60px;
font-weight: bold;
text-align: center;
grid-area: hdlg;
}
.header-text {
text-align: center;
grid-area: hdtxt;
}
.header-name {
margin: 0;
font-size: 40px;
font-weight: 100;}
.header-title {
margin: 0;
font-weight: normal;
}
.featured-work {
font-weight: normal;
margin: 0;
grid-area: ftwk;
}
.project-1 {
margin: 0;
grid-area: prjone;
}
.project-1 img {
width: 100%;
}
.project-2 {
margin: 0;
grid-area: prjtwo;
}
.project-2 img {
width: 100%;
}
.project-3 {
margin: 0;
grid-area: prjthree;
}
.project-3 img {
width: 100%;
}
.header {
grid-area: header;
display: grid;
border-bottom: 3px solid #7d97ad;
grid-template-areas:
"hdlg"
"hdtxt";
}
.large-image {
width: 100%;
margin: 0;
padding: 0;
grid-area: limg;
}
.main {
grid-gap: 20px;
grid-area: main;
display: grid;
grid-template-areas:
"ftwk"
"prjone"
"prjtwo"
"prjthree";
}
.container {
display: grid;
grid-gap: 20px;
grid-template-areas:
"header"
"limg"
"main";
}
#media screen and (min-width: 600px) {
.header {
grid-template-columns: 90px 1fr;
grid-template-areas:
"hdlg hdtxt";
}
.header-logo {
text-align: left;
}
.header-text {
text-align: right;
}
.main {
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"ftwk ftwk ftwk"
"prjone prjtwo prjthree";
}
}
#media screen and (min-width: 800px) {
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
}