pagesassos/server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Activity

feat: add header nav menu

Browse source
This commit is contained in:
Matthieu Bessat 2020-07-07 13:28:55 +02:00
parent bc2d9a7247
commit f9c776b7a3
3 changed files with 117 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
static/about.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8" />
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Roboto+Slab&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
<link rel="stylesheet" href="./assets/main.css" />
<link rel="stylesheet" href="./assets/home.css" />
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="header">
<div class="container header-container">
<div class="header-image">
<img src="assets/img/espace_condorcet_logo.jpg" />
</div>
<div class="header-content">
<a
href="https://www.espacecondorcet.org/"
class="header-sub-title">
Espace Condorcet Centre Social
</a>
<h1 class="header-title">Forum des associations</h1>
<div class="header-description">
Cette année nous vous invitons à découvrir le forum virtuel des associations.
</div>
</div>
</div>
</div>
<div class="container">
<div class="content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem alias sapiente neque? Dignissimos harum blanditiis fugiat eius alias nam repudiandae, et explicabo nihil eos, quos reprehenderit nobis aperiam quibusdam ad?</p>
</div>
</div>
<script></script>
</body>
</html>

48
static/assets/home.css
View file

@ -1,11 +1,32 @@
.header {
border-bottom: 2px solid #C28100;
/* border-bottom: 2px solid #C28100; */
padding-bottom: 1.5em;
padding-top: 1.5em;
background-color: #d35400;
}
.header-container {
display: flex;
justify-content: space-between;
}
.header-left {
display: flex;
}
.header-menu {
display: flex;
align-items: flex-end;
}
.header-menu a {
color: white;
margin-right: 1em;
}
.header-menu a:last-of-type {
margin-right: 0;
}
.header-image {
@ -27,6 +48,7 @@
.header-title {
font-family: 'Roboto Slab', serif;
margin: 0;
color: white;
font-weight: 500;
font-size: 2.5em;
}
@ -35,16 +57,17 @@
margin: 0;
text-decoration: underline;
font-weight: 100;
color: #34495e;
transition: 0.2s;
color: #ecf0f1;
transition: opacity 0.2s;
}
.header-sub-title:hover {
color: #0029FF;
opacity: 0.9;
color: #ecf0f1;
}
.header-description {
color: #34495e;
color: #ecf0f1;
}
.content {
@ -143,11 +166,17 @@
}
.card {
cursor: pointer;
display: flex;
border: 1px solid #bdc3c7;
border-radius: 4px;
margin-bottom: 1em;
box-shadow: 0 0 8px 0px rgba(0,0,0,0.1);
transition: all 0.2s;
}
.card:hover {
transform: scale(1.02);
}
.card-image {
@ -209,7 +238,7 @@
}
}
@media (max-width: 900px) {
@media (max-width: 1000px) {
.header {
padding-top: 1em;
padding-bottom: 1em;
@ -217,6 +246,13 @@
.header-container {
display: block;
}
.header-left {
display: block;
}
.header-menu {
justify-content: center;
margin-top: 1em;
}
.header-content {
padding: 0;
}

65
static/home.html
View file

@ -13,19 +13,25 @@
<body>
<div class="header">
<div class="container header-container">
<div class="header-image">
<img src="assets/img/espace_condorcet_logo.jpg" />
</div>
<div class="header-content">
<a
href="https://www.espacecondorcet.org/"
class="header-sub-title">
Espace Condorcet Centre Social
</a>
<h1 class="header-title">Forum des associations</h1>
<div class="header-description">
Cette année nous vous invitons à découvrir le forum virtuel des associations.
<div class="header-left">
<div class="header-image">
<img src="assets/img/espace_condorcet_logo.jpg" />
</div>
<div class="header-content">
<a
href="https://www.espacecondorcet.org/"
class="header-sub-title">
Espace Condorcet Centre Social
</a>
<h1 class="header-title">Forum des associations</h1>
<div class="header-description">
Cette année nous vous invitons à découvrir le forum virtuel des associations.
</div>
</div>
</div>
<div class="header-menu">
<a href="#">Mentions Légales</a>
<a href="#">A propos</a>
</div>
</div>
</div>
@ -53,6 +59,7 @@
<div id="nav-content">
<div class="nav-item" id="nav-all">
<div class="nav-icon">
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="nav-item-content">
<div class="nav-title">
@ -214,26 +221,26 @@
"tag": tags[0]
},
{
"name": "Jean michel",
"slug": "jean-michel",
"thumbnail": "https://randomuser.me/api/portraits/men/34.jpg",
"name": "Hello world",
"slug": "autre-assos",
"thumbnail": "./assets/img/cross.png",
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
"tag": tags[2]
},
{
"name": "Jean paul lel",
"slug": "jean-paul-lel",
"thumbnail": "https://randomuser.me/api/portraits/men/93.jpg",
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
"tag": tags[2]
},
{
"name": "WOWO",
"slug": "wowo",
"thumbnail": "https://randomuser.me/api/portraits/men/84.jpg",
"descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
"tag": tags[0]
}
// {
// "name": "Jean paul lel",
// "slug": "jean-paul-lel",
// "thumbnail": "https://randomuser.me/api/portraits/men/93.jpg",
// "descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
// "tag": tags[2]
// },
// {
// "name": "WOWO",
// "slug": "wowo",
// "thumbnail": "https://randomuser.me/api/portraits/men/84.jpg",
// "descriptionShort": "Qui totam quibusdam ut. Provident sint est inventore quod deleniti labore. Nemo voluptate deserunt in dolorem doloremque corrupti asperiores. Aut consequatur ea eum. Aut sint dolore numquam saepe qui earum officia eius",
// "tag": tags[0]
// }
]
</script>
<script src="assets/js/home.js"></script>