pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

position des menus

Browse Source
This commit is contained in:
hugogogo
2020-12-02 11:56:05 +01:00
parent 8d56295b20
commit e128b59431
5 changed files with 150 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
index.html
View File

@@ -7,21 +7,24 @@
<meta name="description" content="description du site web"> <meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette"> <meta name="keywords" content="truc, bidule, chouette">
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/index.css" type="text/css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="main"> <div id="main">
<img class="contain" src="./docs/fond.png"> <img class="contain" src="./docs/fond.png">
<div class="link-index container-link-asso"> <div class="container-link">
<div class="dot-link dot-link-asso"></div> <div class="link-index container-link-asso">
<a class="menu-link link-asso"><h1>KOSMOPOLIT l'association</h1></a> <div class="dot-link dot-link-asso"></div>
</div> <a class="menu-link link-asso"><h1>KOSMOPOLIT l'association</h1></a>
<div class="link-index container-link-litterall"> </div>
<div class="dot-link dot-link-litterall"></div> <div class="link-index container-link-litterall">
<a class="menu-link link-litterall"><h1>LITTERall</h1></a> <div class="dot-link dot-link-litterall"></div>
</div> <a class="menu-link link-litterall"><h1>LITTERall</h1></a>
<div class="link-index container-link-lettredeeda"> </div>
<div class="dot-link dot-link-lettredeeda"></div> <div class="link-index container-link-lettredeeda">
<a class="menu-link link-lettredeed"><h1>lettres d'europe et d'ailleurs</h1></a> <div class="dot-link dot-link-lettredeeda"></div>
<a class="menu-link link-lettredeeda"><h1>lettres d'europe et d'ailleurs</h1></a>
</div>
</div> </div>
</div> </div>
</body> </body>

7
menu.html
View File

@@ -7,10 +7,10 @@
<meta name="description" content="description du site web"> <meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette"> <meta name="keywords" content="truc, bidule, chouette">
<link href="./styles/style.css" type="text/css" rel="stylesheet"> <link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/menu.css" type="text/css" rel="stylesheet">
</head> </head>
<body> <body>
<div id="main"> <div class="menu">
<img class="contain" src="./docs/fond.png">
<div class="link-index container-link-asso"> <div class="link-index container-link-asso">
<div class="dot-link dot-link-asso"></div> <div class="dot-link dot-link-asso"></div>
<a class="menu-link link-asso"><h1>KOSMOPOLIT l'association</h1></a> <a class="menu-link link-asso"><h1>KOSMOPOLIT l'association</h1></a>
@@ -24,5 +24,8 @@
<a class="menu-link link-lettredeed"><h1>lettres d'europe et d'ailleurs</h1></a> <a class="menu-link link-lettredeed"><h1>lettres d'europe et d'ailleurs</h1></a>
</div> </div>
</div> </div>
<div id="main">
<img class="contain" src="./docs/fond.png">
</div>
</body> </body>
</html> </html>

76
styles/index.css Normal file
View File

@@ -0,0 +1,76 @@
/*//////////////////////*/
/*IMAGE*/
#main {
position: relative;
height: 100vh;
width: 100vw;
}
img {
width: 100%;
height: 100%;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
/*//////////////////////////*/
/*MENU*/
/*wrapper rectangle qui imite la taille de l'image*/
.container-link {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 880px;
max-width: 100vw;
height: 600px;
/* border: 1px solid red; */
}
/*contain le text et le point (general)*/
.link-index {
position: absolute;
display: flex;
}
.dot-link {
width: 30px;
min-width: 30px;
height: 30px;
margin: auto 10px;
border-radius: 50%;
}
.menu-link {
margin: auto;
}
/*contain le text et le point (specifique)*/
.container-link-asso {
top: 1%;
left: 1%;
}
.dot-link-asso {
background-color: var(--color-purple);
}
/*contain le text et le point (specifique)*/
.container-link-litterall {
bottom: 1%;
left: 70%;
}
.dot-link-litterall {
background-color: var(--color-green);
}
/*contain le text et le point (specifique)*/
.container-link-lettredeeda {
top: 53%;
right: 6%;
}
.dot-link-lettredeeda {
background-color: var(--color-water);
}
.link-lettredeeda {
width: 50px;
}

55
styles/menu.css Normal file
View File

@@ -0,0 +1,55 @@
body {
display: flex;
flex-direction: column;
}
/*/////////////////////////*/
/*MENU*/
.menu {
display: flex;
height: 40px;
}
.menu > * {
margin: auto;
}
.link-index {
display: flex;
}
.menu-link {
margin: auto;
}
.dot-link {
width: 30px;
height: 30px;
margin: auto;
margin-right: 10px;
border-radius: 50%;
}
.dot-link-asso {
background-color: var(--color-purple);
}
.dot-link-litterall {
background-color: var(--color-green);
}
.dot-link-lettredeeda {
background-color: var(--color-water);
}
/*//////////////////////////////*/
/*IMAGE*/
#main {
position: relative;
height: calc(100vh - 40px);
width: 100vw;
}
img {
width: 100%;
height: 100%;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}

51
styles/style.css
View File

@@ -198,55 +198,4 @@ em {
#main {
position: relative;
height: 100vh;
width: 100vw;
}
img {
width: 100%;
height: 100%;
}
.contain {
object-fit: contain;
}
.cover {
object-fit: cover;
}
.link-index {
position: absolute;
display: flex;
}
.dot-link {
width: 30px;
height: 30px;
margin: auto;
margin-right: 10px;
border-radius: 50%;
}
.menu-link {
margin: auto;
}
.container-link-asso {
top: 100px;
left: 200px;
}
.dot-link-asso {
background-color: var(--color-purple);
}
.container-link-litterall {
top: 300px;
left: 600px;
}
.dot-link-litterall {
background-color: var(--color-green);
}
.container-link-lettredeeda {
top: 600px;
left: 900px;
}
.dot-link-lettredeeda {
background-color: var(--color-blue);
}