T4lianah/site-vulgarisation-socio
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compile le scss en css + redraw le html

Browse source
This commit is contained in:
Lana Heyrendt 2024-01-15 10:59:59 +01:00
parent 67b4505240
commit 534bfb0a33
2 changed files with 50 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
index.html
View file

@ -7,32 +7,27 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<header> <h1>Sociologie Sans Soucis</h1>
<img src="img/banière site.png" alt="bandeau avec le logo de Sociologie Sans Soucis"> <div class="site_content">
</header> <div class="main_content">
<div class="wrapper"> <h2>Ce site a pour objectif la vulgarisation de concepts sociologiques et politiques.</h3>
<main> <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>
<h3>Ce site a pour objectif la vulgarisation de concepts sociologiques et politiques.</h3> <p>Les thèmes abordés dépendront de mes envies, de l'actualité, et de ce que je considère comme important. <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> 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>
<p>Les thèmes abordés dépendront de mes envies, de l'actualité, et de ce que je considère comme important. <br> Par ce biais, j'espère, à mon échelle, amener une politisation et un reotur de la conscience de classe.
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> <br>
Par ce biais, j'espère, à mon échelle, amener une politisation et un reotur de la conscience de classe. Je suis ouvertement politisée. Anarchiste, queer et féministe, mon contenu en est donc impacté. <br>
<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.
Je suis ouvertement politisée. Anarchiste, queer et féministe, mon contenu en est donc impacté. <br> </p>
J'essaierai d'être objective, mais aucune science ne peut l'être, et ici je ne chercherai pas à l'être plus que nécessaire. </div>
</p> <div class="vertical_banner">
</main> <div class="category">
<aside class="vertical-banner"> <a href="https://fr.wikipedia.org/wiki/Capitalisme">Capitalisme</a>
<ul> <a href="https://fr.wikipedia.org/wiki/Violence">Violence</a>
<li>Capitalisme</li> <a href="https://fr.wikipedia.org/wiki/Fascisme">Fascisme</a>
<li>Violence</li> <a href="https://fr.wikipedia.org/wiki/Anarchisme">Communisme/Anarchisme</a>
<li>Fascisme</li> </div>
<li>Communisme/Anarchisme</li> </div>
</ul> </div>
</aside>
</div>
</body> </body>
</html> </html>

73
style.css
View file

@ -1,52 +1,35 @@
body { body {
margin: 0; text-align: center;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
} }
.wrapper { body h1 {
flex:1; color: white;
display: flex; 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;
} }
header { body .site_content {
width: 100%; display: flex;
overflow: hidden; flex-direction: row;
} }
img { body .site_content .main_content h2 {
width: 100%; color: red;
height: auto;
display: block;
} }
.vertical-banner { body .site_content .vertical_banner {
width: 200px; color: white;
background-color:#9F0A0A; background-color: #9F0A0A;
padding: 20px;
box-sizing: content-box;
} }
main { body .site_content .vertical_banner .category {
flex: 1; display: flex;
padding: 20px; flex-direction: column;
box-sizing:border-box; gap: 1vh;
margin: 5px;
margin-top: 2%;
} }
h3 { body .site_content .vertical_banner .category a:visited {
color: red; text-decoration: none;
font-size: large; color: white;
text-align: center; }/*# sourceMappingURL=style.css.map */
}
h4 {
color: black;
font-size: large;
text-align: center;
}
p {
color: black;
font-size: large;
text-align: center;
}
ul {
color: black;
font-size: large;
text-align: center;
float: right;
}