card layout

style.css

@@ -12,7 +12,8 @@ html, body {
 
 body {
 	box-sizing: border-box;
-	color: #c9cacc;
+	color: #fff;
+	/* color: #c9cacc; */
 	background-color: #110f16;
 	/* background-color: #272727;  */
 	font-size: 16px;
@@ -72,61 +73,73 @@ nav a:hover {
 } */
 
 .card {
+	position: relative;
 	background-color: #151515;
-	margin: 2rem;
+	margin: 2rem auto;
+	/* height: 400px; */
+	width: 320px;
 	text-align: center;
 	border-radius: 10px;
 	box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
+	overflow: hidden;
 }
 
 .card-top {
+	position: relative;
 	margin: auto;
 	height: 80px;
 	background: #29f3c3;
-	border-start-end-radius: 10px;
-	border-start-start-radius: 10px;
 }
 
-.card img {
+#headshot {
 	margin: 40px auto 10px;
 	width: 100px;
+	height: 100px;
+	border: 3px solid #151515;
 	border-radius: 50%;
 }
 
-h1 {
-	/* font-family: 'Source Sans Pro', sans-serif; */
-	/* font-weight: 700; */
-	/* line-height: 2rem; */
-	/* letter-spacing: 0.05rem; */
+.name {
+	height: 40px;
+	margin-top: 70px;
 }
 
-h1 a {
-	font-size: .8em;
+.name a {
 	color: #c9cacc;
-	text-decoration: none;
-	letter-spacing: -.05em;
-	word-spacing: -.05em;
-
+	font-weight: 700;
+	font-size: 1.6em;
 }
 
-h1 a:hover {
+.name a:hover {
+	text-decoration: underline;
 	color: #29f3c3;
 }
 
-header h2 {
-	/* font-weight: 200; */
-	font-size: 1.2rem;
-	letter-spacing: 0.01rem;
+.short-bio {
+	height: 175px;
+	margin: 20px;
 }
 
-h2,
-h3,
-h4 {
-	/* letter-spacing: 0.01rem; */
+.contact-links {
+	position: absolute;
+	font-size: 80%;
+	left: 0;
+	right: 0;
+	bottom: 30px;
+	margin-top: 40px;
 }
 
-#aboutMe {
-	letter-spacing: 0.01rem;
+.contact-links a {
+	margin: 0 10px;
+	padding: 0;
+	color: #c9cacc;
+}
+
+.card h2 {
+	font-size: 2.2rem;
+	text-align: start;
+	/* padding: 1.5rem; */
+	margin: 16px auto 8px;
 }
 
 #bio,
@@ -135,76 +148,33 @@ h4 {
 	text-align: start;
 }
 
-#bio h2 {
-	font-size: 2.2rem;
+#projects h2 {
+	text-align: start;
+	padding: 1.5rem;
+	
 }
 
-#skills h4 {
-	padding: 1.5rem;
-	color: #666;
-	font-size: 1.5rem;
-	margin: 0 auto 20px;
-}
 #skills ul {
-	line-height: 1.35rem;
-	font-weight: 200;
-	text-align: center;
-	align-items: center;
-	margin: 0;
-	padding: 0;
+	display: flex;
+	flex-flow: row wrap;
 	list-style-type: none;
+	overflow-x:visible;
 }
 
-.skills {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
-	gap: 10px 75px;
-	grid-auto-flow: row;
-	grid-template-areas:
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .'
-		'. .';
+#skills li {
+	margin: 5px auto;
+	padding: 5px 10px;
+	border: 1px solid #fff;
 }
 
-#contact {
-	margin-top: 1rem;
-	padding: 1.5rem;
+.project-img img {
+	width: 100%;
+	height: ;
+
 }
 
-#contact h3 {
-	font-size: 1.5rem;
-}
+/* end new  */
 
-#contact ul {
-	display: flex;
-	list-style-type: none;
-	margin: 0;
-	padding: 0;
-	text-align: center;
-}
-
-.contactLinks li {
-	display: flex;
-	flex-direction: column;
-	flex: 1;
-}
-
-.contactLinks a {
-	display: flex;
-	flex-direction: column;
-	color: #c9cacc;
-	text-decoration: none;
-}
-
-.contactLinks a:hover {
-	font-weight: 600;
-}
 
 #project-wrapper {
 	margin-top: 2.5rem;
@@ -311,7 +281,7 @@ footer {
 	transition: 160ms ease-in;
 }
 
-code pen begin
+
 
 @import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');
 /* This pen */
@@ -650,7 +620,7 @@ a:hover {
 
 /* color: #1b1b1b; */
 /* color: #2a9d8f */
-/* @media (min-width: 768px) {
+@media (min-width: 768px) {
 	#wrapper {
 		max-width: 992px;
 	}
@@ -746,6 +716,6 @@ a:hover {
 		flex-direction: row;
 		justify-content: space-between;
 	}
-} */
+}