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.
Related
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>
Please help to remove a gap below the slanted div on a mobile version. Look at the image below what i've got and what i need.
Image of a gap on a mobile device
Test page: http://stupen.design/slanted/slanted.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Slanted test</title>
<style>
body {
margin: 0;
padding: 0;
-ms-overflow-style: none;
}
body::-webkit-scrollbar {
display: none;
}
.title {
font-size: 12vh;
margin-top: 10%;
margin-left: 10%;
position: absolute;
z-index: 10;
}
.section1 {
height: 100vh;
background-color: red;
}
.section2 {
height: 100vh;
background-color: blue;
}
.section3 {
height: 100vh;
background-color: green;
}
.slanted {
height: 100%;
width: 100%;
background-color: white;
transform: skew(0deg, -9deg);
transform-origin: 0% 100%;
position: absolute;
z-index: 5;
}
</style>
</head>
<body>
<div class="section1">
<h1 class="title">First slide</h1>
</div>
<div class="section2">
<h1 class="title">Second slide</h1>
<div class="slanted">
</div>
</div>
<div class="section3">
<h1 class="title">Third slide</h1>
</div>
</body>
</html>
Done! Me stupid. Just change .slanted's height percents to vh.
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>
Here's the code:
JsFiddle
HTML:
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="../test.css">
<title>Test title</title>
</head>
<body>
<nav id="user-nav">
<div id="logo-container">
<img src="img/logo.svg" alt="Loading logo">
<p>This is a site</p>
</div>
<div id="form-container">
<i id="search-icon"></i>
<input type="text" name="search" id="form-search" autocomplete="off" placeholder="Quick search...">
</div>
<div class="links">
Home
Services
About
</div>
<div class="profile-link">
Profile name
<div class="drop-menu">
Switch
Log out
</div>
</div>
</nav>
</body>
</html>
and CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: chocolate;
}
#user-nav {
display: flex;
height: 62px;
position: fixed;
background-color: #333;
width: 100%;
border-bottom: 2px solid #fff;
}
#logo-container img {
width: 96px;
height: 60px;
}
#logo-container {
display: flex;
flex-grow: 2;
}
.profile-link {
flex-grow: 1;
text-align: center;
display: flex;
flex-direction: column;
position: relative;
border-left: 1px solid #fff;
height: 100%;
}
.drop-menu {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
background: #333;
border-left: 1px solid #fff;
width: 100%;
}
I removed all extra css from other elements in navbar because i thought it was affecting the last divs but it didn't affect the misalignment. I tried different display properties for the div that holds profile name even using list instead of div for drop-down-menu, i always get this offset of 1px. I am styling the navbar using flex because i want to make it more responsive, i am not sure is this somehow affecting the issue.
I'm new here in Stack Overflow and I have a problem with flexbox.
I want to use a <main> and <footer> with display: flex; where each row of main has 2 columns with height: 100% of the browser and footer has 2 rows, first with 3 columns and the second only one column, both with height: auto;
But when I do this my footer overlaps <main> because its height is 100%, but I need it for the 100% of the children. Am I clear?
#font-face {
font-family: "Open Sans";
src: url(../fonts/OpenSans-Regular.ttf);
}
#font-face {
font-family: "Time Burner";
src: url(../fonts/TimeBurner-Regular.ttf);
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-family: "Open Sans";
scroll-behavior: smooth;
}
main {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.flex {
height: 100%;
flex-basis: 50%;
box-sizing: border-box;
padding: 20px;
}
.home {
background-attachment: fixed;
background-image: url("../img/bg.jpg");
background-position: 50%;
background-size: cover;
}
.flex:nth-child(even) {
border: 5px solid blue;
}
.flex:nth-child(odd) {
border: 5px solid red;
}
.arrow {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%);
width: 200px;
height: 50px;
background-color: gray;
text-align: center;
}
footer {
position: relative;
width: 100%;
display: flex;
flex-wrap: wrap;
}
.footer {
flex-basis: 100%;
height: auto;
}
.thumb {
position: fixed;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gray;
right: 20px;
bottom: 20px;
}
#media (max-width: 768px) {
.flex {
flex-basis: 100%;
}
.arrow {
bottom: -100%;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- ¿Qué hacés en mi código? ¿Te gustó algo?
Bueno, como sea, que tengas una linda visita :) -->
<meta charset="UTF-8">
<title>OnePage</title>
<meta name="theme-color" content="#34a853" />
<meta name="viewport" content="width=device-width" />
<meta name="mobile-web-app-capable" content="yes" />
<link rel="icon" href="img/favicon.png" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7/dist/css/bootstrap.css" />
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<main>
<section class="flex home" id="inicio">
1 - Izquierda
</section>
<section class="flex home">
2 - Derecha
</section>
<a class="arrow" href="#3">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
</a>
<section class="flex" id="3">
3 - Izquierda
</section>
<section class="flex">
4 - Derecha
</section>
</main>
<footer>
<section class="flex footer">
5 - Footer
</section>
</footer>
<a class="thumb" href="#inicio">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
</a>
</body>
</html>
Here is my solution for you layout.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<style>
main,
footer {
display: flex;
flex-wrap: wrap;
}
.main-item {
flex:0 1 50%;
height: 100vh;
background-color: tomato;
}
.footer-item {
flex: 1;
background-color: lightsalmon;
}
.footer-item:last-child {
flex: 0 0 100vw;
background-color: blue;
}
</style>
<body>
<main>
<div class="main-item">m1</div>
<div class="main-item">m2</div>
<div class="main-item">m3</div>
<div class="main-item">m4</div>
</main>
<footer>
<div class="footer-item">f1</div>
<div class="footer-item">f2</div>
<div class="footer-item">f3</div>
<div class="footer-item">f4</div>
</footer>
</body>
</html>
Thanks(Gracias), T04435.
Put min-height:100% on body
Remove height:100% from body