Skip to content
Snippets Groups Projects
Commit 45a9bef7 authored by arezou's avatar arezou
Browse files

Updated .gitignore to exclude node_modules

parent 928b1a2c
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 905 additions and 0 deletions
test)/.gitignore 0 → 100644
+ 1
− 0
View file @ 45a9bef7
node_modules/
test)/a.html 0 → 100644
+ 71
− 0
View file @ 45a9bef7
<style>
.menu{
padding-left: 20px;
padding-bottom: 10px;
a{
display: block;
text-decoration: none;
}
}
.research a {
display: block;
text-decoration: none;
padding-left: 30px;
padding-bottom: 5px;
cursor: pointer;
}
.menu2 ,.menu3{
padding-left: 20px;
padding-bottom: 10px;
padding-top: 10px;
}
.menu2 a,.menu3 a {
text-decoration: none;
}
</style>
<body>
<div class="menu">
<a href="#">reserch group</a>
</div>
<div class="research">
<a href="" target="_blank" >team andrews:information visualisation</a>
<a href=""></a>
<a href="">team andrews:information visualisation</a>
<a href="">team andrews:information visualisation</a>
<a href="">team andrews:information visualisation</a>
<a href="">team andrews:information visualisation</a>
<a href="">team andrews:information visualisation</a>
<a href="">team andrews:information visualisation</a>
<a href="">team andrews:information visualisation</a>
</div>
<div class="menu2">
<a href="#">publication</a>
</div>
<div class="menu3">
<a href="#">project</a>
<a href="super-science-team.tugraz.at/tuit/" target="_blank"></a>
<a href="super-science-team.tugraz.at/tuit/" target="_blank"></a>
</div>
</body>
<a href super-science-team.tugraz.at/tuit/
Das aktuelle Workshopangebot finden Sie unter
<p class="has-normal-font-size"><br><strong>Kontakt:</strong> <br>Maria Muhr <br>Büro für Gleichstellung und Frauenförderung <br>Tel.: +43 664 887 831 81<br>E-Mail: <a href="mailto:angelika.droisner@tugraz.at" target="_blank" rel="noreferrer noopener">angelika.droisner@tugraz.at</a></p>
</div>
<p><strong>Das aktuelle Workshopangebot finden Sie unter: <a href="https://super-science-team.tugraz.at/tuit/" target="_blank"> super-science-team.tugraz.at/tuit/</a></strog></p>
<p class="has-normal-font-size"><br><strong>Kontakt:</strong> <br>Maria Muhr <br>Tel.: +43 316 873 32663<br>E-Mail: <a href="mailto:tuit.workshops@tugraz.at" target="_blank" rel="noreferrer noopener">tuit.workshops@tugraz.at</a></p>
</div>
</div>
test)/ad.html 0 → 100644
+ 42
− 0
View file @ 45a9bef7
<style>
.products{
width: 90%;
height: 200px;
background-color: black;
display: grid;
grid-template-columns:repeat(3,auto);
grid-template-rows: 1fr;
margin: 50px auto;
column-gap: 10px;
.left{
display: grid;
grid-template-columns: repeat(2,auto);
grid-template-rows: 1fr;
background-color: aqua;
column-gap: 5px;
.item {
background-color: cadetblue;
}
}
.mitte{
background-color: blue;
}
.right{
background-color: brown;
}
}
</style>
<body>
<div class="products">
<div class="left">
<di class="item"></di>
<di class="item"></di>
</div>
<div class="mitte"></div>
<div class="right"></div>
</div>
</body>
\ No newline at end of file
test)/btn.html 0 → 100644
+ 69
− 0
View file @ 45a9bef7
<style>
label[for=show]
{
display: block;
width: 100px;
height: 30px;
background-color: #2b2b2b;
margin: 20px;
color: whitesmoke;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
text-align: center;
line-height: 30px;
text-transform: capitalize;
font-weight: bold;
cursor: pointer;
}
.modal {
width: 100%;
height: 100px;
background-color: #2b2b2baa;
position: absolute;
left: -100%;/*chon pedaresh dom -100% barmigardad aghab*/
top: 0;
transition: 300ms;
}
#show:checked ~ .modal {
left: 0;
}
label[for=close]
{
display: block;
width: 35px;
height: 35px;
background-color: #961616;
margin: 20px;
color: whitesmoke;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 12px;
text-align: center;
line-height: 30px;
text-transform: capitalize;
font-weight: bold;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
#close:checked ~ .modal {
left: -100%;
}
#close , #show {
display: none;
} <!-- display bolock kardim va 2 ta radio buttom az safeh hazf shod -->
</style>
<body>
<label for="show">show</label>
<input type="radio" name="modal" id="show"> <!-- name ha yeki mishavad ke vaghti button zadim biayad vaghti x zadim bere-->
<input type="radio" name="modal" id="close">
<div class="modal">
<label for="close">&times;</label> <!-- times alamat x omad baray bastan safhe-->
</div>
</body>
\ No newline at end of file
test)/buttom.html 0 → 100644
+ 44
− 0
View file @ 45a9bef7
<style>
body {
display: flex;
justify-content: center;/* Centers horizontally */
/* Centers vertically */
height: 100vh; /* Full viewport height */
margin: 0;
padding: 0;
column-gap: 5px;
}
.btn{
width: 100px;
height: 50px;
background-color: rgb(239, 235, 232);
line-height: 50px;
text-align: center;
margin: 50px auto;
border: none;
cursor: pointer;
a{
display: block;
text-decoration: none;
color: rgb(245, 245, 245);
line-height: 50px;
text-transform: capitalize;
}
}
</style>
<body>
<a href="#">
<button class="btn">Mitarbeitende </button>
</a>
<a href="#">
<button class="btn">Mitarbeitende </button>
</a>
<a href="#">
<button class="btn">Mitarbeitende </button>
</a>
</body>
\ No newline at end of file
test)/css/main.css 0 → 100644
+ 127
− 0
View file @ 45a9bef7
header{
width: 100%;
height: 170px;
background-color: black;
overflow: hidden;
}
.slider{
width: 50%;
height: 400px;
background-color: aqua;
display: flex;
justify-content: left;
align-items: ;
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
}
}
}
a {
display: block;
width: 70px;
height: 30px;
background-image: url('../img/img1.webp');
margin: 50px auto;
color: whitesmoke;
transition: 300ms;
font-size: 12px;
text-align: center;
text-transform: capitalize;
line-height:30px ;
cursor: pointer;
user-select: none;
background-color: #e4154b;
&:active{
transform: scaleX(0.9) scaleY(0.9);
background-color: aquamarine;
}
}
.swiper {
width: 100%;
height: 100%;
background: #000;
}
.swiper-slide {
font-size: 18px;
color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 60px;
}
.parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide .title {
font-size: 41px;
font-weight: 300;
background-color: #e47c15;
}
.swiper-slide .subtitle {
font-size: 21px;
}
.swiper-slide .text {
font-size: 14px;
max-width: 400px;
line-height: 1.3;
}
.topic_slider {
display: flex;
overflow: hidden;
width: 100%;
max-width: 800px;
margin: auto;
position: relative;
}
.module_topic_slider .slide {
min-width: 100%;
transition: transform 0.5s ease-in-out;
}
img {
width: 100%;
height: auto;
display: block;
}
test)/css/script.js 0 → 100644
+ 12
− 0
View file @ 45a9bef7
document.addEventListener("DOMContentLoaded", () => {
const slider = document.querySelector(".topic_slider");
let index = 0;
setInterval(() => {
index++;
if (index >= slider.children.length) {
index = 0;
}
slider.style.transform = `translateX(-${index * 100}%)`;
}, 3000);
});
test)/grid.html 0 → 100644
+ 70
− 0
View file @ 45a9bef7
<style>
.product {
width: 70%;
height: 600px;
background-color: black;
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 1fr;
margin: 50px auto;
column-gap: 5px;
}
.left {
background-color: aqua;
border-radius: 25px;
}
.right {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 5px;
background-color: gray;
padding: 10px;
}
.item {
background-color: blue;
padding: 15px;
img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
h1{
color: aqua;
text-align: center;
font: 14px;
}
h2{
color: aqua;
text-align: center;
font-size: 14px;
}
}
</style>
<body>
<div class="product">
<div class="left">Left Section</div>
<div class="right">
<div class="item">
<img src="./img/img1.webp" alt="">
<h1>hello</h1>
<h2>dfrtgzhjklumu@g.com</h2>
</div>
<div class="item">Top Right</div>
<div class="item">Bottom Left</div>
<div class="item">Bottom Right</div>
</div>
</div>
</body>
\ No newline at end of file
test)/img/img1.webp 0 → 100644
+ 0
− 0
View file @ 45a9bef7
test)/img/img1.webp

381 KiB

test)/index.html 0 → 100644
+ 197
− 0
View file @ 45a9bef7
<!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="./node_modules/swiper/swiper-bundle.min.css">
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<header>
<div class="header">
</div></header>
<a href="#" class="svg">
<svg shape-rendering="geometricPrecision" class="ext-menu-breadcrumb-home-icon" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" version="1.1" xml:space="preserve" height="36.997" width="35.969" enable-background="new 0 0 595.28 841.89" y="0px" x="0px" viewBox="0 0 35.969 36.997451"><polyline style="stroke:#000;stroke-linecap:square;stroke-width:6;fill:none" points="282.72 437.28 282.72 414.77 297.71 406.69 312.69 414.77 312.69 437.28" transform="translate(-279.72 -403.28)"></polyline></svg>
</a>
.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, nulla aut unde voluptatibus dolores iure architecto mollitia praesentium, hic sequi officia cumque et rem, accusantium in? Veritatis consectetur tenetur necessitatibus
</div>
<!--<div class="slider">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./img/img1.webp" alt="">
</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>-->
<div class="fullslider">
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper">
<div class="parallax-bg" style="
background-image: url(./img/img1.webp);
" data-swiper-parallax="-23%"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 1</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">slide2</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 3
<img src="https://swiperjs.com/demos/images/nature-8.jpg" />
</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
<script src="./node_modules/swiper/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
var swiper = new Swiper(".mySwiper", {
speed: 600,
parallax: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
<a class="button" href="https://www.tugraz.at">click </a>
<style>
.wrapper {
max-width: 1000px;
margin: 0 auto;
}
.section-title {
color: #0f75b3;
font-size: 28px;
font-weight: bold;
text-align: center;
margin-bottom: 30px;
}
p {
font-size: 16px;
margin-bottom: 15px;
text-align: justify;
}
.styled-list {
margin-top: 20px;
padding-left: 40px;
list-style-type: disc;
}
.styled-list li {
font-size: 18px;
font-weight: bold;
color: #0f75b3;
margin-bottom: 10px;
}
</style>
<div class="wrapper">
<div class="section-title">The institute consists of the following research groups:</div>
<p>Chemical Engineering has a long history at TU Graz and dates back to 1948, while CEET was established in 2011.</p>
<p>Here at CEET, our research is dedicated to the intensification of existing chemical processes to make them more efficient and environmentally friendly, as well as to the development of alternative process routes to combat climate change and pollution.</p>
<p>As an engineering science primarily concerned with the transformation of molecules into usable products, valuable materials or energy, chemical engineering enables the harnessing of research advances in energy, food, medicine, water, and manufacturing for the benefit of society. Chemical engineering has enabled the industrialization and prosperity of our society through cost-effective production of materials and chemicals and large-scale energy conversion. However, this development has also had unintended massive impacts on our environment through the longevity of products, such as plastics, or waste gases from energy conversion.</p>
<p>Research activities range from knowledge-oriented basic research to industry-oriented application-oriented research. Experimental investigations in the laboratory and pilot plant are complemented by modelling and process simulation.</p>
<p>In this way CEET contributes to the decarbonisation of value chains through the development of innovative technologies and equipment, the intelligent selection of process steps and the optimisation of process unit operations. It is active in three main research areas:</p>
<ul class="styled-list">
<li>Chemical Engineering</li>
<li>Electrochemical Engineering</li>
<li>Thermal Process Engineering</li>
</ul>
</div>
</body>
</html>
test)/package-lock.json 0 → 100644
+ 63
− 0
View file @ 45a9bef7
{
"name": "test)",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "test)",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.3.3",
"swiper": "^11.2.5"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/bootstrap": {
"version": "5.3.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.3.tgz",
"integrity": "sha512-8HLCdWgyoMguSO9o+aH+iuZ+aht+mzW0u3HIMzVu7Srrpv7EBBxTnrFlSCskwdY1+EOFQSm7uMJhNQHkdPcmjg==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.8"
}
},
"node_modules/swiper": {
"version": "11.2.5",
"resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.5.tgz",
"integrity": "sha512-nG0kbIyBfeE2BPFt9nPUX03qUBF75o6+enzjIT/DfCmbh8ORlwhc4eZz1+4H/yseAgb3H+OoEYzmb64i0tYNnQ==",
"funding": [
{
"type": "patreon",
"url": "https://www.patreon.com/swiperjs"
},
{
"type": "open_collective",
"url": "http://opencollective.com/swiper"
}
],
"engines": {
"node": ">= 4.7.0"
}
}
}
}
test)/package.json 0 → 100644
+ 16
− 0
View file @ 45a9bef7
{
"name": "test)",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"bootstrap": "^5.3.3",
"swiper": "^11.2.5"
}
}
test)/slider.html 0 → 100644
+ 135
− 0
View file @ 45a9bef7
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
.swiper {
width: 100%;
height: 50vh;
background: #000;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.swiper-slide {
font-size: 18px;
color: #e7dbdb;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 60px;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
}
.parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-slide .title {
font-size: 41px;
font-weight: 300;
}
.swiper-slide .subtitle {
font-size: 21px;
}
.swiper-slide .text {
font-size: 14px;
max-width: 400px;
line-height: 1.3;
}
</style>
<body>
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper">
<div class="parallax-bg" style="
background-image: url(./img/img1.webp);
" data-swiper-parallax="-23%"></div>
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 1</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 2</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
<div class="swiper-slide">
<div class="title" data-swiper-parallax="-300">Slide 3</div>
<div class="subtitle" data-swiper-parallax="-200">Subtitle</div>
<div class="text" data-swiper-parallax="-100">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam
dictum mattis velit, sit amet faucibus felis iaculis nec. Nulla
laoreet justo vitae porttitor porttitor. Suspendisse in sem justo.
Integer laoreet magna nec elit suscipit, ac laoreet nibh euismod.
Aliquam hendrerit lorem at elit facilisis rutrum. Ut at
ullamcorper velit. Nulla ligula nisi, imperdiet ut lacinia nec,
tincidunt ut libero. Aenean feugiat non eros quis feugiat.
</p>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
speed: 600,
parallax: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
\ No newline at end of file
test)/z-index.html 0 → 100644
+ 45
− 0
View file @ 45a9bef7
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.first{
width: 100px;
height:100px;
background-color: aqua;
opacity: 0.8;
position: relative;
left: 100px;
top: 100px;
}
.second{
width: 100px;
height:100px;
background-color: bisque;
opacity: 0.8;
position: absolute;
left: 150px;
top: 150px;
}
.third{
width: 100px;
height:100px;
background-color: blue;
opacity: 1;
position: absolute;
left: 200px;
top: 200px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
test)/~.html 0 → 100644
+ 13
− 0
View file @ 45a9bef7
<style>
.parent{
width: 150px;
height: 100px;
}
</style>
<body>
<div class="parent">
<h1>heloo</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quod quos aliquid, nihil iste doloremque voluptas, molestiae aut blanditiis illum repellendus cumque. Magnam perferendis exercitationem ex eius veritatis fugiat excepturi, fuga accusamus suscipit reprehenderit esse, dolore consectetur voluptatem culpa maiores soluta ab atque unde. Magni obcaecati ipsum, praesentium, autem repellendus a sint aliquid doloribus quo aspernatur consequuntur rerum pariatur dicta. Officia quam veritatis sint iure, cumque eum consequuntur rem, ipsa nostrum sed numquam tenetur atque in officiis pariatur vitae minima culpa dolore facilis recusandae voluptates ipsam et est. Placeat nemo veritatis unde alias laborum cum repellat, sed vitae nobis iste culpa!</p>
</div>
</body>
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment