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

Compare commits

base: T4lianah:76755f20aaebcc4c0067d5eaeba29d846b5c8135
Branches Tags
T4lianah:main
..
compare: T4lianah:99894ad0b076cd68743820857f408769400b8d02
Branches Tags
T4lianah:main

No commits in common. "76755f20aaebcc4c0067d5eaeba29d846b5c8135" and "99894ad0b076cd68743820857f408769400b8d02" have entirely different histories.
76755f20aa ... 99894ad0b0

4 changed files with 78 additions and 90 deletions
Show stats Expand all files Collapse all files

1
.gitignore vendored
View file

@ -1 +0,0 @@
style.css.*

52
index.html
View file

@ -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
View file

@ -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
View file

@ -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;
}
}
}
}
}