I want the four social media images to be at the top, but I want to replace the bottom: 60px;on the .social with something else. Because if you go on other smaller screen devices it goes off the screen, other words 60px up (not responsive).
This fiddle might make it easier to understand.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.row {
display: flex;
z-index: 2;
justify-content: center;
}
.social {
position: relative;
z-index: 2;
height: 15px;
width: 15px;
bottom: 60px;
}
#header {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
<div class="row">
<div>
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
</body>
</html>
Ideally if you want the images to be on top (above) the image, you'd structure your HTML as such, by moving the .social elements above your independent <img> tag.
From here you can work from the top instead of from the bottom.
However, note that instead of top, you'll want to use margin-top. Otherwise you'll have giant click-zones well outside of the child <img /> tags.
I've swapped to this in my example (note you may need to adjust the margin-top value):
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.row {
display: flex;
z-index: 2;
justify-content: center;
}
.social {
position: relative;
z-index: 2;
height: 15px;
width: 15px;
margin-top: 30px;
}
#header {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row">
<div>
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div>
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
</body>
</html>
Related
I am building a very simple web page with the purpose of using it later for javascript.
It is an image with a button that will perform functions later, however, as soon as I was able to center my background, it overlaps the content and does not let me see it or interact with it.
* {
box-sizing: border-box;
}
.bg {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src="https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src="https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/2000/0000FF/808080" style="width: 150px">
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
The idea is of course to be able to visualize all the content.
As a side note, the image that I am using to make the button (container) is in png so that it does not stain my background
This is because you have set the position property on .bg to be fixed. Once you do that the div gets fixed on the top left corner and takes the topmost position on the stack order of elements and hence hiding other elements.
Kindly make the following changes to the code and it should work.
* {
box-sizing: border-box;
}
.bg {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index:-1;
}
h1 {
text-align: center;
}
.logo {
padding-top: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding-top: 100px;
display: flex;
justify-content: center;
align-items: center;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title>Keyless Car</title>
</head>
<body>
<div class="bg">
<img src= "https://via.placeholder.com/2000/0000FF/808080">
</div>
<div class="logo">
<img src= "https://via.placeholder.com/150/000000/808080">
</div>
<div class="container">
<img src="https://via.placeholder.com/150/0000CC/808080" style= "width: 150px" >
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I am trying to build a personal site, and just started with some HTML and CSS. The problem is when I resize the browser window, the mountain image chain position and the clouds shift their position, any ideas on how to fix this? Also I am new to stack so sorry if the way I am asking question is incorrect.enter image description here
body {
margin: 0;
text-align: center;
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img src="img/mountain.png" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
You should use max-width:100% for your image.
body {
margin: 0;
text-align: center;
}
.bottom-img {
max-width:100%; /* you should use */
}
h1 {
margin-top: 0;
}
.web {
text-decoration: underline;
}
.top-container {
background-color: #ccf2f4;
position: relative;
padding-top: 100px;
min-width: 100%;
}
.middle-container {
background-color: red;
height: 200px;
width: 200px;
}
.bottom-container {
background-color: blue;
height: 200px;
width: 200px;
}
.bottom-cloud {
position: absolute;
left: 300px;
bottom: 300px;
}
.top-cloud {
position: absolute;
right: 300px;
top: 50px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prajwal Timsina</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="top-container">
<img class="top-cloud" src="img/cloud.png" alt="top-cloud">
<h1>I am Prajwal.</h1>
<p>a aspiring <span class="web">web</span> developer.</p>
<img class="bottom-cloud" src="img/cloud.png" alt="bottom-cloud">
<img class="bottom-img" src="https://siber.boun.edu.tr/sites/cyber.boun.edu.tr/files/sample6.jpg" alt="mountain">
</div>
<div class="middle-container">
</div>
<div class="bottom-container">
</div>
</body>
</html>
I know the title is vague. I do not know how to better formulate the title as I do not know the name of the design style.
What is the name of this design "style" and how do I achieve the effect with css and html?
I tried to recreate the design with HTML and css. here is the code
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
}
#left-bottom {
left: 0;
bottom: 0;
transform: translate(-0.5vw);
}
#right {
right: 0;
top: 0;
bottom: 0;
transform: translate(10vw);
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
border: 1vh solid lime;
}
.logo {
max-width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
width: 80vw;
height: inherit;
}
.links {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<ul>
<li>
Kontakt
</li>
<li>
Produkter
</li>
<li>
om oss
</li>
</ul>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
Whenever I zoom the absolute position background pieces shifts like this.
What is the best way to achieve this design and what is the name of the style?
* {
margin: 0;
padding: 0;
box-sizing: 0;
}
/*BG*/
main,
.container {
height: 100vh;
width: 100vw;
}
body {
overflow: hidden;
}
#left-top,
#left-bottom,
#right {
position: absolute;
z-index: -10;
}
#left-top {
left: 0;
top: 0;
width: 20vw;
}
#left-bottom {
left: 0;
bottom: 0;
height: 50vh;
}
#right {
right: 0;
top: 0;
bottom: 0;
height: 100vh;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: 100vh;
max-width: 100vw;
}
.logo {
max-width: 70vw;
display: flex;
justify-content: center;
align-items: center;
}
.logo img {
top: 45vh;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 100%;
height: inherit;
z-index: -10;
}
.links {
margin: 51vh auto auto 7vw;
width: 110vw;
display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 1vw;
grid-row-gap: 1vw;
}
.link-text {
width: 100%;
text-align: center;
}
.link-text a {
text-decoration: none;
color: #777;
font-size: 1.25vw;
font-family: helvetica;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body>
<main>
<div class="container">
<img id="left-top" src="https://picoolio.net/images/2020/06/10/Path-52825c75a57b036c8.png" alt="" />
<img id="left-bottom" src="https://picoolio.net/images/2020/06/10/Path-486011727790f3e3d.png" alt="" />
<img id="right" src="https://i.ibb.co/WPqF1dV/Component-4-1.png" alt="" />
<div class="logo">
<img src="https://picoolio.net/images/2020/06/10/Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" alt="Trondersopp_LOGO_B1ac81c93ec7cb89e0.png" border="0" />
</div>
<div class="links">
<div class="link-text">Kontakt</div>
<div class="link-text">Produkter</div>
<div class="link-text">om oss</div>
</div>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
In the above code I have changed the images dimensions and links in <div> tag to achieve that design... You can directly copy and paste the code for your work as I think this is what you wanted to see on the screen.
Explanation
1- I first added vw and vh dimensions to you images which made them responsive according to the viewport...
2- secondly I specified a z-index to your logo image and positioned it according to your need by the help of left and top after specifying absolute position.
3- Thirdly I used css grid layout for links, but it is not essential as you can use other methods also. link for info on cs grids
4- I styled few things with css (mainly the link section) which you can go through in your code...
The above was just a brief overview.
I wanted to center the social media images and bunch them together. I figured I can move it over to the right by using right: 100px;, but it won't stay relative to page size. If I scale my page to mobile size, it doesn't stay centered as the header does.
This fiddle might make it easier to understand.
Set the display property on "row" to flex and use "justify-content" to position the elements in center horizontally. You can remove relative positioning on the ".social" elements.
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background: url(https://i.ibb.co/VH659W4/background.jpg) no-repeat center center fixed;
background-size: cover;
}
.column {
z-index: 100;
}
.row {
display: flex;
z-index: 100;
justify-content: center;
}
.social {
display: block;
margin-left: auto;
margin-right: auto;
width: 36px;
z-index: 100;
}
#header {
position: absolute;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
z-index: 99;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
DJ JUMO
</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="row">
<div class="column">
<img class="social" src="https://i.ibb.co/N7dFXZ4/instagram.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/s3VrxZJ/twitter.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/prCyYw3/snapchat.png">
</div>
<div class="column">
<img class="social" src="https://i.ibb.co/5Y77Bcm/facebook.png">
</div>
</div>
<img id="header" src="https://i.ibb.co/gdHS8by/header.png" alt="logo">
</body>
</html>
I am trying to make a homepage divided into two halves. The page should look like this page - two images should be responsive, they should cover full screen without white spaces on sides, images should be clickable. And I would appreciate if it could be written just in HTML and CSS without JavaScripts.
Everything I have got now is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="body">
<div id="production" class="column half">
<h1>production</h1>
</div>
<div id="label" class="column last">
<h1>label</h1>
</div>
</div>
</body>
</html>
and css
.body { overflow: hidden; margin: 0; width: 100%; height: 100%;}
.column { float: left; }
.half { height: 100%; width: 50%; }
.last { height: 100%; float: none; width: auto; }
#production { background-image:url(bgprod.jpg); }
#label { background-image:url(bglabel.jpg); }
Thanks for any help.
I sketched up something quickly that you can use. This meets your requirements given that the images are proportional to the screen size.
The html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="col-half">
<img class="responsive-image" src="test.jpg" />
</div>
<div class="col-half">
<img class="responsive-image" src="test.jpg" />
</div>
</div>
</body>
</html>
And the css:
html, body {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
.container {
width: 100%;
height: 100%;
}
.col-half {
margin: 0;
padding: 0;
float: left;
max-width: 50%;
height: 100%;
}
.responsive-image {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}