Add files via upload

week-three-assignment/css/main.css

@@ -0,0 +1,305 @@
+html {
+	color: #222;
+	font-size: 1em;
+	line-height: 1.4;
+}
+
+textarea{
+	resize: vertical;
+}
+
+*{
+	box-sizing: border-box;
+}
+
+#bg-image {
+	display: flex;
+
+	justify-content: center;
+	align-items: center;
+}
+
+header img {
+	width: 90px;
+	margin: 0;
+	display: flex;
+	align-items: center;
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.browserupgrade {
+	margin: 0.2em 0;
+	background: #ccc;
+	color: #000;
+	padding: 0.2em 0;
+
+}
+
+body{
+	font-family: "Open Sans", sans-serif;
+}
+
+header {
+	background-color: black;
+	font-family: 'Open Sans', sans-serif;
+
+}
+
+header nav a{
+	color: #ccc;
+	text-decoration: none;
+	font-weight: 600;
+
+}
+
+header nav a:hover {
+	color: gray;
+	background-color: pink;
+	text-decoration: none;
+}
+
+hr{
+	display: block;
+	height: 1px;
+	padding: 0;
+
+}
+
+div{
+	display: block;
+}
+
+form{
+	display: block;
+	margin-top: 0em;
+	align-items: center;
+}
+
+button {
+	display: flex;
+	flex: -webkit-box
+	justify-content: center;
+	align-items: center;
+	margin: auto;
+}
+
+p {
+	font-weight: lighter;
+}
+
+@media (min-width: 768px){
+	div.centered {
+		width: 80%;
+		margin: 0 auto;
+		display: -webkit-box;
+		display: flex;
+		-webkit-box-pack: justify;
+			justify-content: space-between;
+		align-items: center;
+	}
+
+	nav > ul {
+		display: -webkit-box;
+		display: flex;
+		list-style-type: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	nav a {
+		display: block;
+		padding: 5px 10px;
+	}
+
+	section {
+		display: flex;
+		flex: -webkit-box;
+		justify-content: space-around;
+	}
+
+	footer {
+		background-color: black;
+	}
+
+	footer img{
+		filter: invert(100%);
+		width: 10px;
+	}
+}
+
+h1, .mid, a, form {
+	margin-bottom: 50px;
+}
+
+form{
+	margin-top: 50px;
+}
+
+section:not(#bg-image){
+	margin-left: 30px;
+}
+
+#bg-image{
+	background-image: url("../img/background-scene.png");
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	padding: 100px 0;
+	margin: 0;
+}
+
+
+#bg-image h1{
+	color: white;
+	text-shadow: 1px 1px 3px black;
+}
+
+#bg-image hr{
+	width: 20%;
+	border: 3px solid white;
+}
+
+#bg-image p{
+	color: white;
+}
+
+#bg-image a{
+	color: white;
+	border: 2px solid white;
+	padding: 8px 10px;
+	text-decoration: none;
+
+}
+
+#bg-image form {
+	width: 75%;
+	background-color: white;
+}
+
+#form-container{
+	display: -webkit-box;
+	display: flex;
+	-webkit-box-pack: end;
+		-justify-content: flex-end
+}
+
+#form-container h3 {
+	background-color: #f5f5f5;
+	text-align: center;
+	margin: 0;
+	padding: 10px 0;
+}
+
+#form-container form div{
+	padding: 25px;
+}
+
+#form-container input{
+	width: 100%
+	border-top: none;
+	border-left: none;
+	border-right: none;
+	border-bottom: 1px solid #f5f5f5;
+	margin-bottom: 25px;
+	padding: 10px;
+}
+
+#form-container button{
+	width: 100%;
+	background-color: orange;
+	color: white;
+	border: none;
+	padding: 15px 0;
+}
+
+
+
+#form-container form{
+	display: flex;
+	flex-direction: column;
+	display-content: space-between;
+}
+
+button, input{
+	overflow: visible;
+}
+
+input {
+	display: block;
+}
+
+ul {
+	list-style-type: none;
+	padding-bottom: 10px;
+	margin: 0;
+}
+
+nav img{
+	width: 40px;
+}
+
+	footer {
+		background-color: black;
+	}
+
+	footer img{
+		filter: invert(100%);
+		width: 20px;
+
+	}
+
+
+#bottom{
+		display: flex;
+		flex: -webkit-box;
+		justify-content: space-between;
+	}
+
+	#bottom img{
+		opacity: 20%;
+	}
+
+	#bottom h3{
+		margin-bottom: 0;
+	}
+	#bottom p {
+		font-size: 10px;
+		color: gray;
+	}
+
+	#bottom nav ul li a img{
+		display: inline;
+	}
+
+@media (min-width: 768px){
+
+	#bottom{
+		display: flex;
+		flex: -webkit-box;
+		justify-content: space-between;
+	}
+
+	#bottom img{
+		opacity: 20%;
+	}
+
+	#bottom h3{
+		margin-bottom: 0;
+	}
+	#bottom p {
+		font-size: 10px;
+		color: gray;
+	}
+
+	#bg-image .centered > div{
+	width: 50%;
+	}
+
+
+
+}
+
+.hidden{
+	display: none !important;
+}