@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
:root {
font-family: 'Poppins', sans-serif;
background-image:linear-gradient(to bottom, #3b3742, #fff);
background-repeat: no-repeat;
height: auto;
width: auto;
color: #ffffff;
text-size-adjust: none;
}
p {
font-family: sans-serif;
font-size: medium;
margin: 10px;
padding: 10px;
}
.headerarea {
background-color: #ffffff;
box-sizing: border-box;
box-shadow: 10px 4px orange;
width: 800px;
margin: auto;
padding: auto;
}
.header {
background-color:#763218ff;
height: fit-content;
text-align: center;
padding: 50px;
border: solid;
}
.header h1 {
font-size: 50px;
margin-top: 10px;
color: white;
text-shadow: 4px 4px orange;
}
#text2 {
color: #ac520e;
position: relative;
top: 110px;
left: 150px;
font-size: 21px;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
#p1 {
color: #ac520e;
font-size: 25px;
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
#navbar {
text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}
#navbar ul {
background-color: #3b3742;
box-sizing: border-box;
margin-top: 1px;
display: flex;
border: solid;
list-style-type: none;
justify-content: space-evenly;
}
#navbar li {
padding: 15px;
}
#navbar li a {
color: #4f566f;
font-weight: 800;
text-decoration: none;
}
#navbar li a:hover {
color: #ec401f;
text-decoration: none;
}
/*main section*/
.maincontent{
box-sizing: border-box;
display: block;
justify-content: center;
align-items: center;
text-align: center;
margin: auto;
padding: auto;
border: solid;
background-color: #3b3742;
width: 800px;
box-shadow: 10px 4px orange;
-webkit-animation: fadein 2s; /* for google, safari, atbp. */
-moz-animation: fadein 2s; /* for firefox eme */
-o-animation: fadein 2s; /* for opera browsr */
animation: fadein 2s; /* normal */
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* abt section */
.aboutsec {
background-color: #55525f;
border: solid;
margin: 10px;
}
.aboutsec h2 {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.aboutsec p {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* feat section */
.featuresec {
background-image:linear-gradient(to bottom, #252a36, #4b4750);
border: solid;
margin: 10px;
}
.featuresec h2 {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.featurelist {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
border-top: solid;
}
.featurelist p {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* concept section */
.conceptsec {
background-color: #1c1c2e;
border: solid;
margin: 10px;
}
.conceptsec h2 {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
/* credits */
.contributors {
background-image: linear-gradient(to bottom, rgb(112, 144, 64), #8bdb61);
border: solid;
margin: 10px;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.contributors h2 {
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.contributors strong {
color: #75ff00;
text-shadow: -1px -1px 0 #007436, 1px -1px 0 #007436, -1px 1px 0 #007436, 1px 1px 0 #007436;
}
emergency alarm
What is our product about?
Our product aims to help civilians in need, especially in an unpredictable world like ours.
That why we came up with the Emergency Alarm! Our device's concept is that it'll alarm nearby
police stations or fire departments of any reported and detected dangers, such as house fires
in the area.
Credits
web dev: placeholder