Question and Answer
How do I make an question and answer?
What is a question and answer? How do you make a question and answer? This script and codes were developed by Juan Vargas on 14 October 2022, Friday.
Question and Answer - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Question and Answer</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,300,700,800,400,600' rel='stylesheet' type='text/css'>
<body> <div class="message_holder"> <div class="message">Question and Chat Tumblr Post Styles</div> </div> <div class="container" > <div id="posts" > <div class='post'> <h2>Questions and Answer</h2> <div class="item ask"> <img src="https://31.media.tumblr.com/avatar_fe7fae08b362_40.png"> <p><a class="name" href="">Jane Smith</a>A small river named Duden flows by their?</p> </div> <div class="item answer"> <img src="https://38.media.tumblr.com/avatar_1f3e83fb3f7b_40.png"> <p><a class="name" href="">Jonathan Doe</a>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. </p> </div> </div> <div class='post question'> <h2>Questions and Answer</h2> <div class="item ask"> <img src="https://38.media.tumblr.com/avatar_6248be25ab70_40.png"> <p><a class="name" href="">Bobby</a>Why is the ocean blue?</p> </div> <div class="item answer"> <img src="https://38.media.tumblr.com/avatar_1f3e83fb3f7b_40.png"> <p><a class="name" href="">Jonathan Doe</a>The ocean is blue because water absorbs colors in the red part of the light spectrum. Like a filter, this leaves behind colors in the blue part of the light spectrum for us to see. The ocean may also take on green, red, or other hues as light bounces off of floating sediments and particles in the water.</p> </div> </div> <div class='post chat'> <h2>Chat</h2> <div class="item chat"> <p><a class="name" href="">Bobby</a>Hey, you know what sucks?</p> </div> <div class="item chat"> <p><a class="name" href="">Jonathan Doe</a>vaccuums</p> </div> <div class="item chat"> <p><a class="name" href="">Boby</a>Hey, you know what sucks in a metaphorical sense?</p> </div> <div class="item chat"> <p><a class="name" href="">Jonathan Doe</a>Hey, you know what just isn't cool?</p> </div> <div class="item chat"> <p><a class="name" href="">Jonathan Doe</a>lava</p> </div> </div> </div> </div>
</body>
</body>
</html>
Question and Answer - Script Codes CSS Codes
body { background:#f0f0f0; padding:0px; margin:0px; font-family:Open Sans; font-size:12px; color:#999;
}
h1,h2,h3,h4,h5 { margin:0px; padding:0px;
}
a { color:#444; text-decoration:none
}
pre { white-space: pre-line;
}
p { line-height:25px; margin:0px;
}
a { cursor:pointer; text-decoration:none;
}
.menu { background:#2c3e50; height:60px;
}
.menu ul { width:980px; margin:0px auto; padding:0px;
}
.menu ul li{ float:left; list-style:none; display:inline;
}
.menu ul li.right{ float:right; font-size:21px;
}
.menu ul li.right i{ color:#ccc;
}
.menu ul li.active a{ color:#FFF;
}
.menu ul li a{ height:60px; line-height:60px; padding:0 10px; display:block; color:#ccc; text-transform:capitalize;
}
.menu ul li a:hover{ color:#fff;
}
.top{ background: #34495e;}
.top ul{ margin: 0px auto; height: 80px; width: 980px; padding: 0px;
}
.top ul li{ height: 80px; line-height: 80px; list-style: none; float: left; color: white; margin-right: 10px;
}
.top ul li.logo a { color:white; text-decoration:none; font-size:25px;
}
.top ul li.right{ float:right;
}
.top ul li i{ color: white; font-size: 22px; line-height:40px;
}
.message_holder { background:#fdfdfd; border-bottom:solid 1px #ddd;
}
.message_holder .message { width:980px; height:45px; line-height:45px; margin:0 auto;
}
.container { width:980px; margin: 0 auto; margin-top:20px; position:relative; height;100%;
}
.container #posts { width:1000px;
}
.container #posts .post { width:280px; margin: 0 25px 25px 0; float:left; padding:0px; background: #fff; border: solid 1px #eee; border-bottom: solid 1px #e1e1e1; border-radius:3px; float: left;
}
.container #posts .post p{ line-height: 24px; color: #888; font-weight: 400;
}
.post h2 { padding:12px; color:#777; font-size:13px;
}
.post.chat h2 { padding:12px 0px 12px 20px;
}
.item:first-child{ border-top:none; margin:0px;
}
.item { padding:12px; border-top:solid 1px #eee;
}
.item.chat { padding:12px 0px 12px 20px;
}
.item img { float:left; border-radius:3px;
}
.item:nth-child(2n) { background:#fafafa;
}
.item.ask p,.item.answer p { margin-left: 60px;
}
.item .name { display:block; font-weight:bold;
}
Developer | Juan Vargas |
Username | juanv911 |
Uploaded | October 14, 2022 |
Rating | 3 |
Size | 2,865 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
SocialCounters - 17 Social Media APIs | 3,034 Kb |
Flickr API | 2,456 Kb |
Reddit API | 4,397 Kb |
Envato API | 3,337 Kb |
Reddit API | 3,721 Kb |
Envato API - New API Version | 4,159 Kb |
Navigation Menu | 2,839 Kb |
Foursquare API - Search Places | 1,913 Kb |
Unsplash API | 2,166 Kb |
A Pen by Juan Vargas | 2,315 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Rain Landing in a Pond | Edball | 3,009 Kb |
Acorrdian 2016 | Milanodituti | 3,720 Kb |
Nice textured background | Hans | 2,659 Kb |
Segments mouse following | Nosir | 2,909 Kb |
Jstam.com Home Page | Jstam | 10,558 Kb |
Midterm dry run | Jds317 | 1,649 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Flip test | Madhes | 1,635 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Headroom.js demo | WickyNilliams | 3,982 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!