You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
2.3 KiB
CSS
137 lines
2.3 KiB
CSS
12 months ago
|
|
||
|
|
*{
|
||
|
|
margin:0;
|
||
|
|
padding: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: 'Open Sans', sans-serif;
|
||
|
|
font-family: 'Roboto', sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
nav {
|
||
|
|
background-color: whitesmoke;
|
||
|
|
padding: 0.8rem;
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
/*border-bottom: 1px solid gray;*/
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*magin is best used when creating space between elements while padding is better used when creating space between an element's border and its content*/
|
||
|
|
nav .nav, nav .nav-logo {
|
||
|
|
/*the first nav is the parent nav and .nav is the class element and nav is the parent also of .nav-logo ,*/
|
||
|
|
/*the nav red is just a slector that we target the class that has nav, so that the style we have here will be executed in the bwoser*/
|
||
|
|
margin: 0.5rem;
|
||
|
|
display: inline;
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
a:link {
|
||
|
|
color: darkred;
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
a:visited{
|
||
|
|
color:darkblue ;
|
||
|
|
}
|
||
|
|
a:hover{
|
||
|
|
color: skyblue;
|
||
|
|
}
|
||
|
|
a:active{
|
||
|
|
color: maroon;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav a {
|
||
|
|
list-style-type: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
#intro{
|
||
|
|
/* creates space between the content of the intro section and its border */
|
||
|
|
/*
|
||
|
|
padding-left: 10%;
|
||
|
|
padding-right: 10%;
|
||
|
|
padding-top: 2rem;
|
||
|
|
padding-bottom: 3rem;
|
||
|
|
*/
|
||
|
|
padding: 2rem 10% 10% 3rem;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.header {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
#intro h2, #intro p {
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#intro button {
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
background-color:#c2195b;
|
||
|
|
border-radius: 50px;
|
||
|
|
font-size: 1rem;
|
||
|
|
padding: 1rem;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#succeed-info{
|
||
|
|
padding-left: 10%;
|
||
|
|
padding-right: 10%;
|
||
|
|
padding-top: 2rem;
|
||
|
|
padding-bottom: 3rem;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
#succeed-info h2{
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#succeed-info h3{
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#succeed-info .card {
|
||
|
|
/* allow the cards to appear besides each other*/
|
||
|
|
display: inline-block;
|
||
|
|
/* it aligns elements with the tallest element inline*/
|
||
|
|
vertical-align: text-top;
|
||
|
|
/* allows for cards to have equal height that adjust with the content */
|
||
|
|
min-height: 175px;
|
||
|
|
/* measurements is absed on equally dividing the parent container's width*/
|
||
|
|
width: 30%;
|
||
|
|
/* creates horizontal spcae between cards*/
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pre-footer {
|
||
|
|
padding: 1rem;
|
||
|
|
color: white;
|
||
|
|
background-color: #002540;
|
||
|
|
}
|
||
|
|
|
||
|
|
#pre-footer div, #pre-footer h3 #pre-footer p {
|
||
|
|
display: inline-block;
|
||
|
|
width: 20%;
|
||
|
|
height: 20%;
|
||
|
|
margin-top: 0.3rem;
|
||
|
|
margin-bottom: 0.3rem;
|
||
|
|
}
|
||
|
|
footer, span {
|
||
|
|
padding: 0.7rem;
|
||
|
|
margin-left: 0.5rem;
|
||
|
|
margin-right: 0.5rem;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|