I attached an image here but I want to attach a video.
I tried but was not able to maintain the same width and length and the page getting disproportionate. All i want to attach is a mute video file from youtube or local in place the image with autoplay in the loop and no controls.
Here I have uploaded the HTML and CSS I have created to give a minimal reproducible example.
HTML
<!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>VRT</title>
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- custom css file link -->
<link rel="stylesheet" href="1home_style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<!-- custom js file link -->
<script src="js/script.js" defer></script>
</head>
<body>
<!-- home section starts -->
<section class="home" id="home">
<div class="content">
<span data-aos="fade-up" data-aos-delay="150">follow us</span>
<h3 data-aos="fade-up" data-aos-delay="300">To The City Of Joy</h3>
<p data-aos="fade-up" data-aos-delay="450">The possibilities for virtual reality are endless. Have you found your VR destiny? Virtual Reality trip, down a virtual rabbit hole. Jump in and explore, fully-immersed soul of kolkkata </p>
<a data-aos="fade-up" data-aos-delay="600" href="#" class="btn">book now</a>
</div>
</section>
<!-- home section ends -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
AOS.init({
duration: 800,
offset:150,
});
</script>
</body>
</html>
CSS
/*# sourceMappingURL=style.css.map */#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#100;300;400;500;600&display=swap");
* {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
text-transform: capitalize;
-webkit-transition: all .2s linear;
transition: all .2s linear;
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
}
html::-webkit-scrollbar {
width: 1rem;
}
html::-webkit-scrollbar-track {
background: #111;
}
html::-webkit-scrollbar-thumb {
background: #29d9d5;
border-radius: 5rem;
}
body {
background: #111;
overflow-x: hidden;
}
.home {
margin: 0 auto;
margin-top: 9rem;
width: 90%;
border-radius: 1rem;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(17, 17, 17, 0.7)), to(rgba(17, 17, 17, 0.7))), url(https://media.istockphoto.com/photos/wizard-falls-on-the-metolius-river-autumn-in-oregon-picture-id1282389397?b=1&k=20&m=1282389397&s=170667a&w=0&h=stKW8obWC5j7xyeFHikgDHsqoZQ0B4WJN_9MBGCxVQw=) no-repeat;
background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.7)), url(https://media.istockphoto.com/photos/wizard-falls-on-the-metolius-river-autumn-in-oregon-picture-id1282389397?b=1&k=20&m=1282389397&s=170667a&w=0&h=stKW8obWC5j7xyeFHikgDHsqoZQ0B4WJN_9MBGCxVQw=) no-repeat;
background-size: cover;
background-position: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
min-height: 80vh;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-bottom: 5rem;
}
.home .content {
text-align: center;
}
.home .content span {
font-weight: bolder;
color: transparent;
-webkit-text-stroke: 0.1rem #fff;
font-size: 4vw;
display: block;
}
.home .content h3 {
font-size: 6vw;
color: #fff;
}
.home .content p {
max-width: 60rem;
margin: 1rem auto;
font-size: 1.4rem;
color: #aaa;
line-height: 2;
}
/*# sourceMappingURL=style.css.map */
What you can do is add a locally stored video in the html file and add the attributes muted and autoplay in the video tag after this you can make its display: absolute and then set its top, bottom, left, right values to make it align as per your need and after it you can set z-index to -1 or a lower value. If you want to change its width and height you will loose your video quality, so I would prefer to just adjust the other elements or objects on the page because loosing your video quality would definitely decrease the user experience of the website.
Related
I am having a rough time with a strange problem related to background-color. Upon viewing the html file in a browser like chrome or firefox the background-color is not applying to the shop link(in the .header__shop selector). But when I inspect it and hover over the element, the background color suddenly appears in chrome and firefox.
HTML:
<!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
href="https://fonts.cdnfonts.com/css/helvetica-neue-9?styles=49034,49031,49033,49035,49032,49036,49038,49040,49042,49044,49037,49039,49041,49043,49045,49046"
rel="stylesheet"
crossorigin
/>
<link rel="stylesheet" href="style.css" />
<title>Assignment 4</title>
</head>
<body>
<header class="header">
<div class="header__top-ribbon">
<a href="#" class="header__logo margin-left-small margin-right-small"
><img src="./images/logo.png" alt="Motorolo logo"
/></a>
Explore
<a class="header__shop" href="#">Shop</a>
Customer Hub
</div>
</header>
</body>
</html>
CSS:
:root {
--header-active-background: #f2f2f2;
--header-link-color: #00000099;
--black: #000000;
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
html {
font-size: 62.5%;
}
header a:link,
header a:visited {
display: block;
height: 100%;
display: flex;
align-items: center;
text-decoration: none;
color: var(--header-link-color);
font-size: 1.2rem;
padding: 0 1.2rem;
letter-spacing: 0.03125rem;
}
header a:link {
transition: all 0.5s;
}
header a:hover {
color: rgba(0, 0, 0, 0.95);
}
/* UTILS */
.margin-left-small {
margin-left: 2rem !important;
}
.margin-right-small {
margin-right: 2rem !important;
}
/* header */
.header__logo img {
height: 45%;
}
.header {
position: fixed;
top: 0;
}
.header__top-ribbon {
height: 6.4rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header__shop {
background-color: var(--header-active-background);
font-weight: bold;
color: var(--black) !important;
}
.header__logo {
padding: 0 !important;
}
I have tried putting !important in
background-color: var(--header-active-background);
in the
.header__shop
selector and it didn't work. Tried taking screenshot and snipping tool but the taken screenshot shows up the background color even if it is not there as seen by eyes!
The background color showed up first time for me. Browsers cache pages and content (including CSS) and sometimes it helps to force refresh (Ctrl+Shift+R, or Ctrl+Click on refresh button) instead of normal refresh. Inspecting may have made the browser reload the files.
So I'm relatively new to Css and trying to learn it by doing some projects , I'm almost through with this one , but the thing that I'm not getting right is that the image is not taking up the same height as that of the left div , why is this so , even though I have set the height of left container to be 100% of the main container
I'm attaching the code for your reference
#import url(https://fonts.google.com/specimen/Fraunces);
#import url(https://fonts.google.com/specimen/Montserrat);
:root {
--Dark-cyan: hsl(158, 36%, 37%);
--Cream: hsl(30, 38%, 92%);
--Very-dark-blue: hsl(212, 21%, 14%);
--Dark-grayish-blue: hsl(228, 12%, 48%);
--White: hsl(0, 0%, 100%)
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 14px;
background-color: var(--Cream);
color: black;
}
.container {
background-color: var(--White);
width: 33%;
height: 33%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin: 4rem auto;
}
.left-side {
width: 50%;
background-size: cover;
background-position: center;
height: 100%;
overflow: hidden;
}
.left-side img {
width: 100%;
object-fit: cover;
}
.right-side {
width: 50%;
height: 100%;
padding: 2rem;
}
h5 {
font-family: "Montserrat", sans-serif;
font-weight: 500;
letter-spacing: 0.4rem;
color: var(--Dark-grayish-blue);
margin: 0 0 2em 0;
}
h1 {
font-family: "Fraunces", serif;
font-weight: 700;
letter-spacing: 0.07rem;
}
.content {
font-family: "Fraunces", serif;
font-weight: 500;
color: var(--Dark-grayish-blue);
margin: 1.75em 0;
line-height: 1.5;
}
.prices {
font-family: "Fraunces", serif;
display: inline;
margin: 0 0.5em;
}
.old-price {
text-decoration: line-through;
}
.new-price {
font-weight: 700;
color: var(--Dark-cyan);
}
.btn {
padding: 0.5em 1.8em;
background-color: var(--Dark-cyan);
color: var(--White);
width: 95%;
border: none;
border-radius: 5px;
cursor: pointer;
margin: 1.75em 0 0 0;
}
.btn:hover {
opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Frontend Mentor | Product preview card component</title>
</head>
<body>
<section class="main-body">
<div class="container">
<div class="left-side">
<img src="https://images.unsplash.com/photo-1611915387288-fd8d2f5f928b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8&w=1000&q=80">
</div>
<div class="right-side">
<h5>PERFUME</h5>
<h1>Gabrielle Essence Eau De Parfum</h1>
<p class="content">A floral, solar and voluptous interpretation composed bu oliver polge,Perfumer-Creator for the house of chanel</p>
<div class="price">
<h1 class="new-price prices">$149.99</h1>
<p class="old-price prices">$169.99</p>
</div>
<button class="btn">
<i class="fa fa-shopping-cart" style="font-size:16px"></i> Add To Cart
</button>
</div>
</section>
</body>
</html>
.left-side{
width: 50%;
background-size: cover;
background-position: center;
height: 100%;
overflow: hidden;
}
.left-side img{
width:100%;
object-fit: cover;
Only thing i can think of is that you have given it two different properties, try combining these in the same css stack
.container {
/* ... */
align-items: stretch; /* Add this line */
}
.left-side {
/* ... */
height: 100%; /* <- Remove this line */
/* Add these two lines: */
min-height: 100%;
background-image: url("images/image-product-mobile.jpg");
}
Also, remove the <img /> from the left-side div; now it's on the CSS (.left-side), so you can cover and center the background.
Demo:
https://jsfiddle.net/adqb1v8r/
I am looking to reproduce a style of site and I would like to do for the background like them that is to say alternate the design: printed circuit boards, dark gray backgrounds, printed circuit boards, dark gray fonts, but I do not see how to do in my case someone could help me please?
The site : https://hydra.bot/ (screen of what I want to reproduce : https://prnt.sc/13kmrkc)
I attach below my code:
<!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"> <!-- Socials -->
Social 1
Social 2
</div>
</nav>
</header>
</head>
<body>
<h1>The Perfect Discord Bot.</h1>
<h2>Poseidon is the only Discord bot you'll ever need!</h2>
</body>
</html>
* {
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%;
background-image: url(img/background.svg);
background-color: rgba(62,62,62, 1);
}
.topbar {
height: 80px;
background-color: #fff;
box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
display: flex;
align-items: center;
width: 100%; /* new */
}
.topbar nav {
display: flex;
width: 100%; /* new */
}
/* new class */
.middle {
margin: 0 auto;
}
/* end new */
.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;
}
I was thinking of creating a div containing my background in order to define a precise style in my css, but I never did that so I don't really know how to do it (How to do it the right way). For the moment I was trying in my css thanks to my body class but it's not famous. If someone has an idea I'm interested. I would like that it is responsive at most of course because I try to respect the responsive since the beginning of the creation of my site
Your initial idea of using DIVs is indeed correct.
HTML
<div class="circuit"> Some content for the first part of the page</div>
<div class="dark"> Some content for the second part of the page</div>
<div class="circuit"> Some content for the third part of the page</div>
CSS
.circuit {
background-image:url(URL_OF_THE_IMAGE);
}
.dark {
background-color:#HEXCODE;
}
I have made this website as a practice portfolio website for myself and my website is pushed to the left whenever its smaller than particular size. it used to be around 600px but I removed the whole code and rewrote the website again but I checked it at early phases and still suffers from this problem which I cant find the reason for it. so I stopped coding and came straight here for help.
please help me this is the third time I'm trying to build this website and still have this problem.
something else i noticed is that althoug i have scroll x hidden i still have this tiny scroll to left when resizing the website.enter image description here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: visible;
overflow-x: hidden;
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
color: rgb(218, 214, 214);
font-family: "Montserrat", sans-serif;
font-size: 1rem;
}
/*NAVBAR----------------------------------------------------------------------------------------*/
.navbar {
width: 100vw;
height: auto;
font-family: "Poppins", sans-serif;
font-weight: 500;
padding: 7px;
background-color: rgba(85, 85, 85, 0.116);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.icon-list {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
}
.icon-list li {
text-align: center;
margin: 0 15px;
}
.icon-list a {
text-decoration: none;
color: rgb(180, 148, 158);
}
.icon-list a:hover {
opacity: 0.7;
}
.images {
width: 40px;
height: 40px;
}
/*INFO---------------------------------------------------------------------------------*/
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px;
text-align: center;
}
.info p {
margin: 0 40px;
line-height: 20px;
}
.info h1 {
font-weight: 600;
color: rgb(177, 164, 164);
font-weight: 300;
margin-bottom: 5px;
}
.info h2 {
color: rgb(192, 184, 153);
font-weight: 400;
}
.info h3 {
color: crimson;
font-weight: 500;
margin-top: 30px;
margin-bottom: 10px;
}
.shadow {
width: 80vw;
background-color: rgba(34, 33, 33, 0.336);
padding: 10px;
border-radius: 10px;
margin: auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;500;700;900&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,300;0,600;0,700;0,800;1,300;1,400;1,500&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ashkan Naeimipoor</title>
</head>
<link rel="stylesheet" href="./main.css">
<body>
<nav class="navbar">
<ul class="icon-list">
<li><img class="images" src="./images/navbar/home.png" alt=""><br>HOME</li>
<li><img class="images" src="./images/navbar/resume.png" alt=""><br>GET RESUME</li>
<li><img class="images" src="./images/navbar/about.png" alt=""><br>ABOUT</li>
<li><img class="images" src="./images/navbar/contact-book.png" alt=""><br>CONTACT</li>
</ul>
</nav>
<div class="container">
<div class="info">
<div class="shadow">
<h1>Ashkan Naeimipoor</h1>
<h2>Front-End Developer</h2>
<h3>Objective</h3>
<p>As a Front-End Developer, to be responsible for
producing high quality solutions for company customers; bringing growing understanding of Modern HTML, JavaScript, and CSS, and passionate ability to learn and develope
while working in the team of experts under a
skillful and talented management.</p>
</div>
</div>
</div>
</body>
</html>
Check your .info class, you are using 100px on padding. That's too large in smaller screen. You can reduce it using media query.
I'll also suggest changing .info class into:
.info {
font-family: "Montserrat", sans-serif;
margin-bottom: 200px;
padding: 100px 0;
text-align: center;
max-width: 1060px;
margin: 0 auto;
}
Hello guys I'm having issue with my lil' page im working on :
(there's a codesandbox for this code, assuming it's more comfortable
https://codesandbox.io/s/recursing-shockley-m753n also added a picture so you'll have an idea of what i'm aiming for)
what i'm trying to do is to create a space between the items inside the sidebar-containers block.
Layout :
.container {
max-width: 100rem;
margin: 8rem auto;
box-shadow: var(--shadow-dark);
min-height: 90rem; //page lenght
}
.sidebar {
flex: 0 0 20%;
display: flex;
flex-direction: column;
background-color: rgba(219, 219, 219, 0.685);
}
.content {
display: flex;
}
.cv-view{
background-color: #fff;
height: 90rem;
flex:1 ;
}
base:
:root {
--color-primary: #eb2f64;
--color-primary-light: #FF3366;
--color-primary-dark: #BA265D;
--color-grey-light-1: #faf9f9;
--color-grey-light-2: #f4f2f2;
--color-grey-light-3: #f0eeee;
--color-grey-light-4: #ccc;
--color-grey-dark-1: #333;
--color-grey-dark-2: #777;
--color-grey-dark-3: #999;
--shadow-dark: 0 2rem 6rem rgba(0,0,0,.3);
--shadow-light: 0 2rem 5rem rgba(0,0,0,.06);
--line: 1px solid var(--color-grey-light-2);
}
* {
margin :0;
padding: 0;
font-size: 1.5rem;
}
html {
box-sizing: border-box;
font-size: 62.5%; // 1rem = 10px, 10px/16px = 62.5%
}
body {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--color-grey-dark-2);
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
}
components :
**.sidebar-containers {
flex-direction: column;
margin-top: 50px;
display: flex;
justify-content: space-between;
&__item{
display:flex;
flex-direction: column;
align-items: center;
border-bottom: solid 1px ;
padding: 5px;
list-style: none;
&__title {
font-weight: 400;
font-size: 2.5rem;
}
}
}**
Index.html :
<!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/css?family=Open+Sans:300,400,600" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
</head>
<body>
<div class="container">
<div class="content">
<div class="sidebar">
<div class="sidebar-containers">
<ul class="sidebar-containers__item">
<h1 class="sidebar-containers__item__title">Contact :</h1>
<li>Email : help#meplz.com</li>
<li>Phone : 555-5555</li>
<li>Address: Cluelessland</li>
</ul>
<ul class="sidebar-containers__item">
<h1 class="sidebar-containers__item__title">Education:</h1>
<li>Udemy</li>
<li>Udemy</li>
</ul>
<ul class="sidebar-containers__item">
<h1 class="sidebar-containers__item__title">Skills:</h1>
<li>Helpmestackover</li>
<li>Asking questions</li>
<li>Please</li>
</ul>
</div>
</div>
<main class="cv-view">
CV View
</main>
</div>
</div>
</body>
</html>
thanks in advance for any kind of help!
You neeed to set a height for .sidebar, otherwise it will just be as high as its contents require, causing space-between not to have any effect.
You need to add height to .sidebar-containers class according to your need e.g,
height:100%;
Or
height:100vh;
Or you can also give height in pixels, rems etc.