CSS
body {
font-family: "Courier";
margin: 0;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.column {
float: left;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
}
.card2 {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
margin: 8px;
}
.about-section {
padding: 50px;
text-align: center;
background-color: #667c3e;
color: white;
}
.about-section2 {
padding: 50px;
text-align: center;
background-color: #667c3e;
color: white;
}
.container {
padding: 0 16px;
}
.container::after,
.row::after {
content: "";
clear: both;
display: table;
}
.title {
color: grey;
}
.button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #000;
text-align: center;
cursor: pointer;
width: 100%;
}
.button:hover {
background-color: #555;
}
.hvr-grow {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover,
.hvr-grow:focus,
.hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
@media screen and (max-width: 650px) {
.column {
width: 100%;
display: block;
}
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="about-section">
<h1>About Me Page</h1>
<p>J215 Final Project </p>
<p>My Name is David Nelson. I am a junior here at the William Allen White School of Journalism and Mass Communications. I am a media arts and production major and a military journalist. I currently work as a Public Affairs Specialist for the Kansas Army National Guard, Social Media and Operations for The Agency at the University of Kansas and as a freelance music artist. Here is my work!</p>
</div>
<h2 style="text-align:center">David Nelson: Writer and Photographer</h2>
<div class="row">
<div class="column">
<div class="card">
<div class="hvr-grow">
<img src="https://scontent-ord5-1.xx.fbcdn.net/v/t39.30808-6/301675120_378177741158150_2595782438208542342_n.jpg?_nc_cat=101&ccb=1-7&_nc_sid=5f2048&_nc_ohc=n_1yrYlVfQsAX8YAehn&_nc_ht=scontent-ord5-1.xx&oh=00_AfCdPJ0qgIPvAUvddoBA1jJ73sjcohIh36AAO4DnbXKQGw&oe=654F02C7" alt="LFC" style="width:100%">
</div>
<div class="container">
<h2>Photos and Videos</h2>
<p class="title">From my lens</p>
<p>Here is a link to my work covering Jordan, Kuwait and Kansas!</p>
<p>
<a href="https://www.dvidshub.net/search/?q=Spc.+Claude+Nelson&filter%5Bjournalist%5D=Claude+Nelson&filter%5Btype%5D=image&view=list&page=1"><button class="button">Link</button></p></a>
</div>
</div>
</div>
<div class="column">
<div class="card">
<div class="hvr-grow">
<img src="https://scontent-ord5-2.xx.fbcdn.net/v/t39.30808-6/309908827_473800688108610_716835424204249027_n.jpg?_nc_cat=102&ccb=1-7&_nc_sid=5f2048&_nc_ohc=6ESrUsWnZ4IAX_WWXdC&_nc_ht=scontent-ord5-2.xx&oh=00_AfDZqHRZ1cmUkM9dgnktEr1zbIdxXaoWpS04t5ElcMcFUA&oe=654E545A" alt="LFC" style="width:100%">>
</div>
<div class="container">
<h2>U.S. Army Facebook Feature</h2>
<p class="title">Most featured photo</p>
<p>Here is a where the U.S. Army featured my photo!</p>
<p>
<a href="https://www.facebook.com/photo?fbid=473800694775276&set=a.225181842970497"><button class="button">Link</button></p></a>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img src="https://scontent-ord5-2.xx.fbcdn.net/v/t39.30808-6/278579871_788064162162874_1724713747156100805_n.jpg?_nc_cat=104&ccb=1-7&_nc_sid=5f2048&_nc_ohc=IBzgsXoqvukAX9SvBJo&_nc_ht=scontent-ord5-2.xx&oh=00_AfAHXnbCFaKhFlnqk4TxW0nI3foer0OU3_Wd9JV3MwNJJA&oe=654EABCE" alt="David Nelson" style="width:100%">
<div class="container">
<h2>Goals</h2>
<p class="title">Present and Future</p>
<p>My goals for now and the future include creating music and continuing my work as a media artist and journalist!.</p>
</div>
</div>
</div>
</div>
<div class="about-section2">
<h1>Get to know me!</h1>
<p>Scroll down to learn more about my love for journalism and my journey into communications!</p>
</div>
<div class="row">
<div class="card2">
<img src="https://scontent-ord5-1.xx.fbcdn.net/v/t39.30808-6/278055083_775925596710064_1765665250444694949_n.jpg?_nc_cat=101&ccb=1-7&_nc_sid=5f2048&_nc_ohc=fyKAj58u_ToAX8zrIRE&_nc_ht=scontent-ord5-1.xx&oh=00_AfA2_SgbY7OsGUTpXwkR9nQY0-8KngvagR7TZR9qjJTrTg&oe=654D7B4F" alt="Jane" style="width:100%">
<div class="container">
<h2>My Experiences as a Military Journalist and Media Arts Student</h2>
<p class="title">"Who I Am and Where I Come From"</p>
<p>
I currently works as a freelance writer and songwriter in Lawrence and the Kansas City Metro Area.
My interests and aspirations include that of music songwriting and production. I sing and play guitar, piano and ukulele in my spare time.
Prior to attending the University of Kansas, I served as a U.S. Army Public Affairs Specialist for Task Force Spartan, having covered stories and events across the Middle East countries of Kuwait and Jordan.
Originally from Olathe, Kansas, I have recieved education at Johnson County Community College (Aug. 2019-Jan. 2021, Aug. 2022-Dec. 2022), U.S. Army Basic Combat Training (April 2021-July 2021), and at the Defense Information School in Fort Meade, Maryland (July 2021-Dec. 2021).</p>
</div>
</div>
</body>
</html>
Recent Comments