Flexbox

great-idea/css/index.css

@@ -62,3 +62,114 @@ h1, h2, h3, h4, h5 {
     letter-spacing: 1px;
     margin-bottom: 15px;
 }
+
+/* Student Inputted CSS Below This Comment */
+
+/* Header Styling */ 
+header {
+	margin: 1rem 2rem;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+header nav {
+	display: flex;
+	justify-content: space-evenly;
+	width: 70%;
+}
+
+
+	/* Link Styling in Header */
+
+	header nav a {
+		text-decoration: none;
+		color: #BBB;
+	}
+
+	header nav a:hover {
+		color: black;
+	}
+
+	/* End Link Styling */
+
+/* Call-to-Action Styling */
+
+.cta {
+	margin-top: 3rem;
+	display: flex;
+	justify-content: space-around;
+}
+
+.cta .cta-text {
+	/* Positioning */
+	display: flex;
+	flex-flow: column nowrap;
+	justify-content: center;
+	align-items: center;
+	/* Font Styling */
+	font-size: 4.5vw;
+	text-align: center;
+}
+
+	/* CTA Button Styling */
+	.cta button {
+		/* Button Styling */
+		background: transparent;
+		border-radius: 0.5rem;
+		padding: 0rem 1.5rem;
+		/* Button Text Styling */
+		font-size: 1vw;
+	}
+
+
+	.cta button:hover {
+		background: gray;
+		color: white;
+	}
+  /* End Button Styling */
+
+/* Main Body */
+.main-content {
+	margin: 3rem 1rem;
+	border-top: 2px solid black;
+	border-bottom: 2px solid black;
+}
+
+.main-content .text-content {
+	padding: 0rem 1rem; /*Horizontal padding around each .text-content*/
+}
+
+.top-content {
+	margin-top: 2rem;
+	display: flex;
+	text-align: justify;
+}
+
+.middle-img {
+	margin-top: 2rem;
+	width: 100%;
+}
+
+.bottom-content {
+	margin: 2rem 0rem;
+	display: flex;
+	text-align: justify;
+}
+/* End Main Body */
+
+/* Closing Section */
+.contact {
+	margin-top: 2rem;
+	margin-left: 1rem;
+}
+
+.contact p {
+	margin: 1rem 0rem;
+}
+
+footer {
+	text-align: center;
+	font-style: italic;
+}
+/* End Closing Section */