Update html/css

main
v 5 months ago
parent c0e7473732
commit 4e37a8105b

@ -32,11 +32,17 @@
h2, h2,
h3 { h3 {
margin: 0 0; margin: 0 0;
text-align: center;
}
h1{
font-weight: 200;
font-size: 1.8em;
} }
h2{ h2{
font-weight: 400; font-weight: 600;
font-size: 1em;
} }
@ -110,6 +116,21 @@
animation: .5s linear infinite spinning; animation: .5s linear infinite spinning;
} }
.border{
background-color: red;
width: fit-content;
padding: 5px;
rotate: 90deg;
position: fixed;
display: flex;
left: -930px;
overflow: clip;
}
.container{
margin-left: 50px;
}
.error { .error {
color: red; color: red;
} }
@ -119,19 +140,23 @@
margin: auto; margin: auto;
position: relative; position: relative;
margin-bottom: 20%; margin-bottom: 20%;
font-size: .9rem;
} }
.logo{ .logo{
position: absolute; position: absolute;
right: -10%;
top: -20%; top: -105%;
z-index: -10; z-index: -10;
opacity: 0.5; opacity: 0.5;
max-width: 300px; max-width: 200px;
} }
@media only screen and (min-width: 801px){ @media only screen and (min-width: 801px){
.container{
margin-left: auto;
}
.logo{ .logo{
right: 0; right: 0;
opacity: 1; opacity: 1;
@ -146,14 +171,35 @@
</head> </head>
<body> <body>
<div class="border">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
<img src="iologo.svg" alt="" width="100px">
</div>
<main class="container"> <main class="container">
<div class="title"> <div class="title">
<h1>Ministry of the <br>Infra-Ordinary</h1> <h1>Ministry of the <br>Infraordinary</h1>
<img src="iologo.svg" class="logo"> <img src="iologo.svg" class="logo">
</div> </div>
<h2>Upload your Infraordinary Observations:</h2> <h2>Upload your Infraordinary Observations:</h2>
<p>Help us broaden our perspectives on the infra-ordinary, and upload your media here!</p> <p>Inform our mapping by sharing your experiences with the infraordinary. It can be an image, video or audio file, upload your media here!</p>
{% if error %} {% if error %}
<h1 class="error">Oops.. Something went wrong: {{ error }}!</h1> <h1 class="error">Oops.. Something went wrong: {{ error }}!</h1>

Loading…
Cancel
Save