I am attempting to following along with a video in creating a full website project. Currently attempting to add animation into a header that's split into three and all under . For whatever reason, I am not able to replicate what he does in the video when it comes to covering the header with a background and applying the animation. When I write up the same code the header does not get fully blocked and my animation isn't the same as the one in the video.
What it should look like proper way the header should be covered
What it looks like when I code it: enter image description here
#import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght#200&display=swap');
* {
Padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
color: white;
font-family: 'IBM Plex Serif', serif;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Hero Section */
#hero {
background-image: url(./img/galaxy.jpeg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#hero::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: blue;
opacity: .2;
z-index: -1;
}
#hero h1 {
display: block;
width: fit-content;
font-size: 4rem;
position: relative;
color: white;
}
#hero span {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: red;
animation: text_reveal_box 1s ease;
}
#hero .cta {
display: inline-block;
padding: 10px 30px;
position: relative;
left: 55px;
align-items: center;
color: red;
background-color: transparent;
border: 2px solid red;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color, color;
}
#hero .cta:hover {
color: white;
background-color: red;
}
/* End Hero Section */
/*keyframes*/
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>FullSite</title>
<meta charset="UTF-8">
</head>
<body>
<!-- Start Hero Section -->
<section id="hero">
<div class="hero container">
<div>
<h1><span>Hello...</span></h1>
<h1><span>We are</span></h1>
<h1><span>J.P.Astronomics</span></h1>
Portfolio
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
<!--End Astronomical Goals-->
</body>
</html>
You have to remove the following css and ass some styles to achieve the design
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
#import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght#200&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
color: white;
font-family: "IBM Plex Serif", serif;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
}
/* Hero Section */
#hero {
background-image: url(./img/galaxy.jpeg);
background-size: cover;
background-position: top center;
position: relative;
z-index: 1;
}
#hero::after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: blue;
opacity: 0.2;
z-index: -1;
}
#hero h1 {
font-size: 4rem;
position: relative;
color: white;
}
.content-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
#hero span {
background-color: red;
color: red;
animation: text_reveal_box 1s ease;
}
#hero .cta {
display: inline-block;
padding: 10px 30px;
position: relative;
align-items: center;
color: red;
background-color: transparent;
border: 2px solid red;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
margin-top: 30px;
transition: 0.3s ease;
transition-property: background-color, color;
}
#hero .cta:hover {
color: white;
background-color: red;
}
/* End Hero Section */
/*keyframes*/
#keyframes text_reveal_box {
50% {
width: 100%;
left: 0;
}
100% {
width: 0;
left: 100%;
}
}
<section id="hero">
<div class="hero container">
<div class="heading-wrapper">
<h1><span>Hello...</span></h1>
<h1><span>J.P.Astronomics</span></h1>
<h1><span>We are</span></h1>
Portfolio
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
body {
background: rgb(123, 127, 153);
}
.container {
width: min(80%, 1200px);
margin: auto;
min-height: 100vh;
}
.hero {
border: 2px solid red;
display: grid;
place-items: center;
}
.hero-text {
border: 2px solid yellow;
display: inline-block;
line-height: 1;
margin: 5em auto;
}
span {
display: inline-block;
margin-right: auto;
position: relative;
font-size: clamp(1.5rem, 5vw + 10px, 3rem);
animation: reveal_anim 1s forwards;
}
span::before {
content: "";
position: absolute;
background-color: red;
display: block;
width: 100%;
height: 100%;
z-index: -1;
}
a {
text-decoration: none;
}
.cta {
display: inline-block;
margin-right: auto;
margin-top: 1em;
padding: 0.2em 0.5em;
font-size: clamp(1rem, 5vw, 2rem);
border: 2px solid blue;
animation: reveal_anim 1s forwards;
animation-delay: 500ms;
opacity: 0;
}
#keyframes reveal_anim {
0% {
transform: translateX(50%);
}
50% {
opacity: 0.5;
}
100% {
transform: translateX(0%);
opacity: 1;
}
}
<!-- Start Hero Section -->
<section id="hero">
<div class="hero container">
<div class="hero-text">
<h1><span>Hello...</span><br>
<span>We are</span><br>
<span>J.P.Astronomics</span>
</h1>
Portfolio
</div>
</div>
</section>
<!-- End Hero Section -->
<!-- Start Astronomical Goals-->
<section id="service">
<div class="service container">
<div class="serivce-top">
<h1 class="section-title">Astronomical Goals</h1>
</div>
</div>
</section>
<!--End Astronomical Goals-->
Sorry to have changed the HTML a bit.
Related
I'm trying to make a card with a title and description but when I set a background image on that image, my card title disappeared but not my description. It happens even if I do the same code for both of them.
I know I don't have to write here animation codes too but I really don't have any idea why this is happening.
Image:
z-index doesn't work I guess.
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
overflow: hidden;
position: relative;
color: white;
cursor: pointer;
}
.index_img {
width: 100%;
height: 100%;
z-index: -1;
}
.index_html {
background-image: url(web_image_html.jpeg);
background-position: center;
background-size: cover;
z-index: -1;
}
.index a {
color: #fff;
text-decoration: none;
}
.index_title {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 30px;
}
.index_description {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
font-family: 'Inter', sans-serif;
width: 100%;
font-size: 18px;
}
.index_title,
.index_description {
background-color: rgba(82, 81, 81, 0.56);
height: 80px;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.index_html:hover {
animation: index-animate 3s ease-in-out;
}
#keyframes index-animate {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
<div class="index">
<a href="">
<div class="index_img index_html"></div>
<h2 class="index_title">HTML</h2>
<p class="index_description">Lorem ipsum dolor sit amet.</p>
</a>
</div>
Remove overflow hidden from the below code
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
position: relative;
color: white;
cursor: pointer;
}
You're on the right track! But you're fumbling a little with the usage of display: flex; and position: absolute;. display: flex; should be used on the parent to see the result on the child(ren), you're using it directly on the children (.index_title and .index_description).
For trying to position 2 elements together with position: absolute; I'd recommend wrapping them together, so you only have to position 1 element!
.index {
width: 400px;
height: 400px;
background-color: white;
float: left;
margin-right: 30px;
border-radius: 10px;
overflow: hidden;
position: relative;
color: white;
cursor: pointer;
}
.index_img {
width: 100%;
height: 100%;
z-index: -1;
}
.index_html {
background: url(web_image_html.jpeg) red;
background-position: center;
background-size: cover;
z-index: -1;
}
.index a {
color: #fff;
text-decoration: none;
}
.index_content {
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(82, 81, 81, 0.56);
}
.index_title {
font-family: 'Roboto', sans-serif;
font-size: 30px;
color: #000;
}
.index_description {
font-family: 'Inter', sans-serif;
font-size: 18px;
}
.index_title,
.index_description {
width: 100%;
margin: 0;
text-align: center;
}
.index_html:hover {
animation: index-animate 3s ease-in-out;
}
#keyframes index-animate {
0% {
transform: scale(1);
}
100% {
transform: scale(1.3);
}
}
<div class="index">
<a href="">
<div class="index_img index_html"></div>
<div class="index_content">
<h2 class="index_title">HTML</h2>
<p class="index_description">Lorem ipsum dolor sit amet.</p>
</div>
</a>
</div>
This page is a grid container with some images as posts-list, header, and left menu:
JSFiddle1
When I hover over images two links: "comments" and "view posts" would appear. I want to use the CSS and when I click on either of these two it leads me to something like this:
JSFiddle
I wanted to use display: none; but I don't know where should I put it.
if I understand your question correctly, this is a possible solution to your problem.
function changeContainer(){
if($('.grid-container-before').css('visibility') === 'visible') {
$('.grid-container-before').css('visibility','hidden');
$('.grid-container-before').css('display','none');
$('.grid-container-after').css('visibility','visible');
$('.grid-container-after').css('display','grid');
}
}
body {
padding-top: 73px;
overflow-y: hidden;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* ------------ PAGE SCROLLBAR ------------ */
*::-webkit-scrollbar {
width: 2px;
}
*::-webkit-scrollbar-track {
background: white;
}
*::-webkit-scrollbar-thumb {
background-color: grey;
border-radius: 20px;
height: 2px;
}
/* ------------ navbar ------------ */
.header {
display: flex;
position: fixed;
background-color: white;
width: 100%;
justify-content: space-between;
z-index: 7;
font-family: Libre Franklin;
top: 0;
left: 0;
}
.header-flex-list {
display: flex;
margin-top: 10px;
justify-content: flex-end;
flex: 50%;
}
.header-list {
list-style: none;
display: flex;
}
.header-list a {
text-decoration: none;
color: #000;
font-size: 12px;
padding: 0px 20px 0px 20px;
}
.top-icon-container {
display: flex;
padding: 10px 50px;
flex-wrap: wrap;
}
.icon-column {
width: 10%;
border-radius: 50px;
}
.p-column {
width: 28%;
padding-left: 10px;
}
#top-bar-icon {
display: block;
max-width: 100%;
height: auto;
object-fit: cover;
border-radius: 50px;
border: 2px solid #73AD21;
}
/* ------------ LEFT MENU ------------ */
.container {
display: flex;
justify-content: space-between;
height: 100vh;
}
.left-menu {
width: 18%;
order: 1;
height: 100vh;
/* overflow-y: scroll; */
padding: 0px 0px 10px 45px;
}
.menu-list {
list-style: none;
line-height: 2.5rem;
/* display: flex;
flex-direction: column; */
margin-left: -25px;
}
.menu-list a {
text-decoration: none;
}
/* ------------ MAIN POSTS ------------ */
.main-posts {
width: 100%;
order: 2;
padding: 0px 20px 0px 20px;
overflow-y: auto;
text-align: center;
scrollbar-width: thin;
scrollbar-color: grey white;
}
/* ------------ MAIN POSTS LISTS ------------ */
.grid-container-before {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
grid-gap: 1rem;
width: 100%;
margin: 0 auto;
margin-bottom: 6rem;
visibility: visible;
}
.grid-container-after {
display: grid;
grid-template-columns: 80% 1fr;
grid-gap: 10px;
height: 300px;
visibility: hidden;
display:none;
}
.box {
background-color: #20262e;
color: #fff;
border-radius: 3px;
padding: 20px;
font-size: 14px;
}
.posts {
display: flex;
}
.img__wrap {
position: relative;
}
.posts-image {
height: 350px;
width: 100%;
object-fit: cover;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: white;
color: #000;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity 0.2s, visibility 0.2s;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.text a {
color: #000;
text-decoration: none;
padding-right: 20px;
}
[data-title]::after {
content: attr(data-title);
background-color: #000;
color: #fff;
font-size: 13px;
;
position: absolute;
padding: 10px;
bottom: -3.6em;
left: 50%;
white-space: nowrap;
box-shadow: 1px 1px 3px #222222;
opacity: 0;
border: 1px solid #111111;
z-index: 99999;
visibility: hidden;
}
[data-title]:hover::after {
opacity: 1;
transition: all 0.1s ease 0.5s;
visibility: visible;
}
[data-title] {
position: relative;
}
.img__wrap:hover .overlay {
visibility: visible;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<link href="//fonts.googleapis.com/css?family=Karla|Syne|Libre+Franklin|Bai+Jamjuree|Chakra+Petch|Gotu" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!------------ TOP MENU ------------>
<header id="header" class="header">
<div id="top-container" class="top-icon-container">
<div class="icon-column">
<img id="top-bar-icon" src="https://s4.uupload.ir/files/top-bar-icon_ensh.png" alt="my logo:)">
</div>
<div class="p-column">
<p>Name it what u want!</p>
</div>
</div>
<div class="header-flex-list">
<ul class="header-list">
<li>TERMS OF USE</li>
<li>HAVE A QUESTION</li>
<li>ABOUT ME</li>
</ul>
</div>
</header>
<body>
<div class="container">
<!------------ LEFT MENU ------------>
<nav id="menu" class="left-menu">
<p style="text-decoration: none; color: black;">Filter by:</p>
<ul class="menu-list">
<li><a>Popular pages</a></li>
<li><a>About pages</a></li>
<li><a>Character pages</a></li>
<li><a>Music pages</a></li>
</ul>
</nav>
<!------------ MAIN POSTS ------------>
<section id="main-content" class="main-posts">
<div class="grid-container-before">
<div class="img__wrap">
<img class="posts-image" src="https://www.webdevelopersnotes.com/wp-content/uploads/random-image-display-using-javascript-2.png" alt="project" />
<div class="overlay">
<div class="text">
<button href="#" data-title="comments" onclick="changeContainer()">
<i class="fa fa-comments fa-fw"></i>comment</button>
<button href="#" data-title="view post" onclick="changeContainer()">
<i class="fa fa-external-link fa-fw"></i></button>
</div>
</div>
</div>
</div>
<div class="grid-container-after">
<div class="box a">A</div>
<div class="box b">B</div>
</div>
</section>
</div>
</body>
I've been working on a website and got to the SVG part and it just won't show up. I can drag it to the top of the tab and it shows up there but not on the live server website. Here is the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GR Official Site</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="assets/images/favicon.png" />
</head>
<body>
<nav class="navbar">
<div class="navbar__container">
GR
<div class="navbar__toggle" id="mobile-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
<ul class="navbar__menu">
<li class="navbar__item">
Home
</li>
<li class="navbar__item">
Warships [IN DEVELOPMENT]
</li>
<li class="navbar__item">
Shop
</li>
<li class="navbar__item">
News
</li>
<li class="navbar__btn">
Sign Up
</li>
</ul>
</div>
</nav>
<!-- Main Section -->
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>Warships</h1>
<p>The worlds next battle royale game.</p>
<button class="main__btn">Learn More</a></button>
</div>
<div class="ws__img0--containter">
<img src="assets/images/GRLC.svg" alt="pic1" id="main__img">
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Here is the CSS.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Kumbh Sans', sans-serif;
}
.navbar {
background: #0024c7;
height: 80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top: 0;
z-index: 999;
}
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
margin: 0 auto;
padding: 0 50px;
}
#navbar__logo {
background-color: #28caf3;
background-image: linear-gradient(to top, #28caf3, #93e5f3, #ffffff);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
font-size: 2.3rem;
}
.fa-gem {
margin: 0.5rem;
}
.navbar__menu {
display: flex;
align-items: center;
list-style: none;
text-align: center;
}
.navbar__item {
height: 80px;
}
.navbar__links {
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0 1rem;
height: 100%;
}
.navbar__btn {
display: flex;
justify-content: center;
align-items: center;
padding: 0 1rem;
width: 100%;
}
.button {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
padding: 10px 20px;
height: 100%;
width: 50%;
border: none;
outline: none;
border-radius: 4px;
background: #08657c;
color: #ffffff;
}
.button:hover {
background: #1216ff;
transition: all 0.3s ease;
}
.navbar__links:hover {
color: #28caf3;
transition: all 0.3s ease;
}
#media screen and (max-width: 960px){
.navbar__container {
display: flex;
justify-content: space-between;
height: 80px;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0;
}
.navbar__menu {
display: grid;
grid-template-columns: auto;
margin: 0;
width: 100%;
position: absolute;
top: -1000px;
opacity: 0;
transition: all 0.5s ease;
height: 50vh;
z-index: -1;
background: #0024c7;
}
.navbar__menu.active {
background: #0024c7;
top: 100%;
opacity: 1;
transition: all 0.5s ease;
z-index: 99;
height: 50vh;
font-size: 1.6rem;
}
#navbar__logo {
padding-left: 25px;
}
.navbar__toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
transition: all 0.3s ease-in-out;
background: #ffffff;
}
.navbar__item {
width: 100%;
}
.navbar__links {
padding: 2rem;
width: 100%;
display: table;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
}
.navbar__btn {
padding-bottom: 2rem;
}
.button {
display: flex;
justify-content: center;
align-items: center;
width: 80%;
height: 80px;
margin: 0%;
}
.navbar__toggle .bar {
display: block;
cursor: pointer;
}
#mobile-menu.is-active .bar:nth-child(2) {
opacity: 0;
}
#mobile-menu.is-active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
#mobile-menu.is-active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}
/* Main Section.Styles */
.main {
background-color: #415dd6;
}
.main__container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
justify-self: center;
margin: 0 auto;
height: 90vh;
background-color: #415dd6;
z-index: 1;
width: 100%;
max-width: 1300px;
padding: 0 50px;
}
.main__container h2 {
background-color: #cccccc;
background-image: linear-gradient(to top, #cccccc, #eeeeee, #ffffff);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content h1 {
font-size: 4rem;
background-color: #cccccc;
background-image: linear-gradient(to top, #cccccc, #eeeeee, #ffffff);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
.main__content p {
margin-top: 1rem;
font-size: 2rem;
font-weight: 300;
color: #f4f4f8;
}
.main__btn {
font-size: 1rem;
background-image: linear-gradient(to right, #0453ff, #049bff);
padding: 14px 32px;
border: none;
border-radius: 4px;
color: #006eff;
margin-top: 2rem;
cursor: pointer;
position: relative;
transition: all 0.35s;
outline: none;
}
.main__btn a {
position: relative;
z-index: 2;
color: #cccccc;
text-decoration: none;
}
.main__btn:after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #0453ff;
transition: all 0.35s;
border-radius: 4px;
}
.main__btn:hover {
color: #ffffff;
}
.main__btn:hover:after {
width: 100%;
}
.ws__img0--container {
text-align: center;
}
#mobile__img {
height: 80%;
width: 80%;
}
Someone, please help me I know this is a lot of code but idc how long you take. I just need help.
Maybe because your page is not valid?
Error: The element a must not appear as a descendant of the button element.
From line 47, column 43; to line 47, column 67
ain__btn"><a href="/warships.html">Learn
Error: Stray end tag a.
From line 47, column 82; to line 47, column 85
n More</a></a></butt
I fixed it by turning the SVG into a PNG. I got this idea from a sensei at code ninjas.
I'm not knowing how to increase the height of vitaminpic, which is under container. I'm still new to development, and I know this seems like an amateur mistake. I tried everything I can but it's not working. I believe it has to do with with the fact that it is under the container. I'm trying to make a website that sells vitamins, still new to it but I'm still trying.
#import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
.background {
width: 100%;
height: 100vh;
background-color: #e0d1cb;
position: relative;
overflow: hidden;
z-index: 2;
}
.nav {
position: fixed;
top: 0;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #e0d1cb;
font-family: 'Syne Mono', monospace;
z-index: 3;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 30%;
font-family: 'Syne Mono', monospace;
}
.nav-links li {
list-style: none;
font-family: 'Syne Mono', monospac
}
.nav-links a {
color: rgb(0, 0, 0);
text-decoration: none;
letter-spacing: 2px;
font-weight: bold;
font-size: 14px;
font-family: 'Syne Mono', monospac
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3s ease;
}
#media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #e0d1cb;
display: flex;
flex-direction: column;
align-items: center;
width: 20%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}
#keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
#import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
.logo {
resize: both;
font-family: 'Syne Mono', monospace;
}
.link::after {
content: '';
display: block;
width: 0;
height: 2px;
background: #000000;
transition: width .3s;
}
.link:hover::after {
width: 100%;
transition: width .3s;
}
.header {
width: 100%;
background-color: rgba(0, 0, 0, 0.5)
}
.header ul {
text-align: center;
}
.header ul li {
list-style: none;
display: inline-block;
}
.header ul li a {
display: block;
text-decoration: none;
text-transform: uppercase;
color: white;
font-size: 100%;
letter-spacing: 2px;
font-weight: 600;
padding: 25px;
transition: width .3s;
}
.content {
color: #fbfcfd;
position: absolute;
top: 50%;
left: 8%;
transform: translateY(-50%);
z-index: 2;
}
.heading1 {
font-size: 300%;
margin-bottom: 10px 0 30px;
background: transparent;
position: relative;
animation: text 5s 1;
left: 120%;
}
#keyframes text {
0% {
color: transparent;
margin-bottom: -40px;
}
30% {
letter-spacing: 4px;
margin-bottom: -40px;
}
85% {
letter-spacing: 3px%;
margin-bottom: -40px;
}
}
.welcome {
font-size: 30px;
position: relative;
}
.container {
position: absolute;
height: 80%;
width: 30%;
background: #dfcac1;
top: 50%;
left: 35%;
transform: translate(-43%, -60%);
}
.container img {
size: ;
}
.vitaminpic {
width: 100%;
transform: translate(10%, 80%);
padding: 0 10;
}
<head>
<link rel="stylesheet" href="home.css">
</head>
<header class="site-header"></header>
<div class="background">
<div class="nav">
<h1 class="logo">Realvite</h1>
<ul class="nav-links">
<li>
<a href="#" class="link1">
<div class="link1">Home</div>
</a>
</li>
<li>Shop</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</div>
</nav>
<div class="container">
<img src="/images/capsule-1079838_1920.jpg" alt="" class="vitaminpic">
</div>
<p style="font-size: 1px;">قيل قديقال</p>
<div class="content">
<small class="welcome"></small>
<h1 class="heading1"></h1>
</div>
</div>
<script src="script.js"></script>
If I were you I would use Bootstrap columns, because not only are these easily configurable, but importing bootstrap also allows you to use a wide variety of HTML, CSS and Javascript libraries which are widely supported. Here's the link - https://getbootstrap.com
In the meantime though, I would recommend removing this:
.container img {
size: ;
}
and changing your container width to 50% to see if that works, because currently you've set your container to 30% width, whereas your image is larger than that, so it isn't fitting inside the container. If 50% doesn't work then try a few different values to try and get it to fit, but as mentioned I would recommend Bootstrap, then you can use "col-md-4" and set the background for that, would probably be much more convenient for you in the long run! :)
I want to make a circular background as shown in the photo:
desktop version
mobile version
However, I don't know how to make a correct structure in HTML and CSS. I'm starting from mobile and from there I want to expand to bigger sizes. My problem is I don't know how to make the circle responsive and to make it looks like on the picture, especially on the mobile version. I'm not sure if I should use the ::after for the circle but in my example I have the position absolute on the div so I really can't.
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 70vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
z-index: -1;
top: 0;
left: 0;
background-color: #387546;
border-radius: 0 0 0 60%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*# sourceMappingURL=main.css.map */
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#400;500;700;900&display=swap" rel="stylesheet">
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>
This is a simple solution. There're many others.
.wrapper {
width: 90%;
height: 400px;
overflow: hidden;
background: lightgreen;
box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.4);
}
nav {
width: 100%;
height: 60px;
background: #fff;
position: relative;
z-index: 20;
border-bottom: 1px solid black;
}
.background {
position: relative;
width: 100%;
height: 0;
right: 0;
}
.background > div {
position: absolute;
right: -50px;
top: -20px;
width: 400px;
height: 400px;
border-radius: 50%;
background: green;
}
<div class="wrapper">
<div class="background">
<div></div>
</div>
<nav>Menu</nav>
</div>
There are a number of ways to do this, and here's one. For brevity, only one breakpoint was added, and for mobile, it was assumed this was an intro screen with no scrolling content, so the background will adapt to the viewport size. You may want to add some adjustment to get it to the desired placement for each breakpoint:
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 90vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 300vw;
height: 300vw;
z-index: -1;
top: -170vw;
right: -160vw;
background-color: #387546;
border-radius: 50%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*Responsive Styles*/
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
.hero__container {
height: 70vh;
}
.hero__container::after {
width: 900px;
height: 900px;
z-index: -1;
top: 0;
top: -240px;
right: -120px;
}
}
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>
Similar to Karolaus Answer but i like to use view height more... I just removed the overflow from .hero__container and changed the following stylings (or added #media) to the original code... you can see how much view height you need for mobile (or how much width you consider it as a mobile device)...
.hero__container::after {
content: '';
position: absolute;
width: 100vh;
height: 100vh;
z-index: 0;
top: -20vh;
right: -20vh;
/* [![enter image description here][1]][1] */
background-color: #387546;
background-position: -200vh -200vh;
border-radius: 50%;
}
#media screen and (max-width: 420px){
.hero__container::after{
width:125vh;
height:125vh;
top: -50vh;
right: -50vh;
}
}
Link to Codepen
: https://codepen.io/vattevaii/pen/PobWZzX