forked from T4lianah/site-vulgarisation-socio
Compare commits
No commits in common. "11b332ce99e22833c5a1dbe4d43fbe0d57c4bcb8" and "99894ad0b076cd68743820857f408769400b8d02" have entirely different histories.
11b332ce99
...
99894ad0b0
4 changed files with 78 additions and 90 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1 +0,0 @@
|
||||||
style.css.*
|
|
52
index.html
52
index.html
|
@ -7,27 +7,39 @@
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>Sociologie Sans Soucis</h1>
|
<header>
|
||||||
<div class="site_content">
|
<img src="img/banière site.png" alt="bandeau avec le logo de Sociologie Sans Soucis">
|
||||||
<div class="main_content">
|
</header>
|
||||||
<h2>Ce site a pour objectif la vulgarisation de concepts sociologiques et politiques.</h3>
|
<div class="wrapper">
|
||||||
<h3>Comme toutes les sciences, la sociologie doit être accessible à tous et toutes afin de permettre à chacun et chacune de comprendre comment fonctionne la société actuelle.</h4>
|
<main>
|
||||||
<p>Les thèmes abordés dépendront de mes envies, de l'actualité, et de ce que je considère comme important. <br>
|
<h3>Ce site a pour objectif la vulgarisation de concepts sociologiques et politiques.</h3>
|
||||||
En effet, les articles qui seront postés ici, ou les lives sur Twitch, <br>auront pour but de permettre à des personnes peu politisées d'accéder à du contenu clair. <br>
|
<h4>Comme toutes les sciences, la sociologie doit être accessible à tous et toutes afin de permettre à chacun et chacune de comprendre comment fonctionne la société actuelle.</h4>
|
||||||
Par ce biais, j'espère, à mon échelle, amener une politisation et un reotur de la conscience de classe.
|
<p>Les thèmes abordés dépendront de mes envies, de l'actualité, et de ce que je considère comme important. <br>
|
||||||
|
En effet, les articles qui seront postés ici, ou les lives sur Twitch, <br>auront pour but de permettre à des personnes peu politisées d'accéder à du contenu clair. <br>
|
||||||
|
Par ce biais, j'espère, à mon échelle, amener une politisation et un reotur de la conscience de classe.
|
||||||
|
<br>
|
||||||
|
Je suis ouvertement politisée. Anarchiste, queer et féministe, mon contenu en est donc impacté. <br>
|
||||||
|
J'essaierai d'être objective, mais aucune science ne peut l'être, et ici je ne chercherai pas à l'être plus que nécessaire.
|
||||||
|
</p>
|
||||||
|
</main>
|
||||||
|
<aside class="vertical-banner">
|
||||||
|
<ul>
|
||||||
|
<li>Capitalisme</li>
|
||||||
<br>
|
<br>
|
||||||
Je suis ouvertement politisée. Anarchiste, queer et féministe, mon contenu en est donc impacté. <br>
|
<li>Violence</li>
|
||||||
J'essaierai d'être objective, mais aucune science ne peut l'être, et ici je ne chercherai pas à l'être plus que nécessaire.
|
<br>
|
||||||
</p>
|
<li>Fascisme</li>
|
||||||
</div>
|
<br>
|
||||||
<div class="vertical_banner">
|
<li>Communisme/Anarchisme</li>
|
||||||
<div class="category">
|
<br>
|
||||||
<a href="https://fr.wikipedia.org/wiki/Capitalisme">Capitalisme</a>
|
<li>Féminisme</li>
|
||||||
<a href="https://fr.wikipedia.org/wiki/Violence">Violence</a>
|
<br>
|
||||||
<a href="https://fr.wikipedia.org/wiki/Fascisme">Fascisme</a>
|
<li>Handicap</li>
|
||||||
<a href="https://fr.wikipedia.org/wiki/Anarchisme">Communisme/Anarchisme</a>
|
</ul>
|
||||||
</div>
|
|
||||||
</div>
|
</aside>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
73
style.css
73
style.css
|
@ -1,35 +1,52 @@
|
||||||
body {
|
body {
|
||||||
text-align: center;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
body h1 {
|
.wrapper {
|
||||||
color: white;
|
flex:1;
|
||||||
margin-top: 0%;
|
display: flex;
|
||||||
margin-bottom: 0%;
|
|
||||||
font-size: 4rem;
|
|
||||||
-webkit-text-stroke: 2px black;
|
|
||||||
background-image: url(https://www.publicdomainpictures.net/pictures/230000/velka/red-fox-1500907744R2q.jpg);
|
|
||||||
background-size: contain;
|
|
||||||
height: 20vh;
|
|
||||||
}
|
}
|
||||||
body .site_content {
|
header {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: row;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
body .site_content .main_content h2 {
|
img {
|
||||||
color: red;
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
body .site_content .vertical_banner {
|
.vertical-banner {
|
||||||
color: white;
|
width: 200px;
|
||||||
background-color: #9F0A0A;
|
background-color:#9F0A0A;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: content-box;
|
||||||
}
|
}
|
||||||
body .site_content .vertical_banner .category {
|
main {
|
||||||
display: flex;
|
flex: 1;
|
||||||
flex-direction: column;
|
padding: 20px;
|
||||||
gap: 1vh;
|
box-sizing:border-box;
|
||||||
margin: 5px;
|
}
|
||||||
margin-top: 2%;
|
h3 {
|
||||||
|
color: red;
|
||||||
|
font-size: large;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
h4 {
|
||||||
|
color: black;
|
||||||
|
font-size: large;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
color: black;
|
||||||
|
font-size: large;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
color: white;
|
||||||
|
font-size: large;
|
||||||
|
text-align: center;
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
body .site_content .vertical_banner .category a:visited {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}/*# sourceMappingURL=style.css.map */
|
|
||||||
|
|
40
style.scss
40
style.scss
|
@ -1,40 +0,0 @@
|
||||||
body {
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: white;
|
|
||||||
margin-top: 0%;
|
|
||||||
margin-bottom: 0%;
|
|
||||||
font-size: 4rem;
|
|
||||||
-webkit-text-stroke: 2px black;
|
|
||||||
background-image: url(https://www.publicdomainpictures.net/pictures/230000/velka/red-fox-1500907744R2q.jpg);
|
|
||||||
background-size: contain;
|
|
||||||
height: 20vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.site_content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
.main_content {
|
|
||||||
h2 {
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.vertical_banner {
|
|
||||||
color: white;
|
|
||||||
background-color: #9F0A0A;
|
|
||||||
.category {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1vh;
|
|
||||||
margin: 5px;
|
|
||||||
margin-top: 2%;
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
Loading…
Reference in a new issue