NASA Concept

Developer
Chris Wachtman
Size
6,304 Kb
Views
16,192
  1. NASA Concept Previews
  2. NASA Concept HTML Codes
  3. NASA Concept CSS Codes

How do I make an nasa concept?

This is a concept for a responsive NASA Webpage.Work in progress.. What is a nasa concept? How do you make a nasa concept? This script and codes were developed by Chris Wachtman on 17 October 2022, Monday.

NASA Concept Previews
IQ Test

NASA Concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>NASA Concept</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='grid' id='header'> <div class='col-1-4' id='logo'>NASA Inside</div> <div class='rest col-3-4'> <ul> <li>NASA TV</li> <li>NASA Employment</li> <li>Customer Help</li> <li>Site Help</li> <li>Contact</li> <li>Sitemap</li> <li>Login</li> </ul> <div class='tag'></div> <div class='search'></div> <div class='affiliates'></div> </div> <ul id='menu'> <li> <a href='#'>Home</a> </li> <li> <a href='#'>Administation HQ</a> </li> <li> <a href='#'>Centers</a> </li> <li> <a href='#'>Communication & Teams</a> </li> <li> <a href='#'>Education</a> </li> <li> <a href='#'>Employee Resources</a> </li> <li> <a href='#'>Financial Resources</a> </li> <li> <a href='#'>Information Resources</a> </li> <li> <a href='#'>Missions & Projects</a> </li> <li> <a href='#'>NASA Engineering Network</a> </li> <li> <a href='#'>NASA Lessons Learned</a> </li> <li> <a href='#'>Science</a> </li> </ul>
</div>
<div class='grid featured'> <div class='col-3-4 tab-1-1'> <div class='grid whats-new'> <div class='col-1-3 tab-1-2 module info'> <span class='section'>What's New</span> <h2> NASA Deputy Administrator Lori Garver <b>At Future Space</b> </h2> <span class='desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> <div class='col-2-3 tab-1-2 photo'> <img alt='' src='https://24.media.tumblr.com/67e598ff7ce74330f6b3d7a0fe0b6fc7/tumblr_mrgkibBQPO1qbw2q1o5_1280.jpg'> </div> </div> <div class='grid anouncements'> <div class='col-1-3 tab-1-2 module info'> <span class='section'>Anouncements</span> <h2> Staff Official <b>Reception</b> </h2> <span class='desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> <div class='col-2-3 tab-1-2 photo'> <img alt='' src='https://24.media.tumblr.com/9f59802390986ff8711130a4200f81cb/tumblr_mpr01lC2WI1qfoasdo4_r1_1280.jpg'> </div> </div> </div> <div class='col-1-4 tab-1-1 anouncements2'> <div class='photo tab-1-2'> <img alt='' src='https://24.media.tumblr.com/c9447ccbb6613d586d629b3523908f26/tumblr_mrbwzquFEX1qfoasdo1_500.jpg'> </div> <div class='module info tab-1-2'> <span class='section'>Anouncements</span> <h2> Staff Official <b>Reception</b> </h2> <span class='desc'>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span> </div> </div>
</div>
<div class='grid offices'> <div class='col-1-4 tab-1-2 module'> <h3>Administraion HQ</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> <li> <a href='#'>Item 4</a> </li> <li> <a href='#'>Item 5</a> </li> <li> <a href='#'>Item 6</a> </li> </ul> <a class='more' href='#'>+</a> </div> <div class='col-1-4 tab-1-2 module'> <h3>Mission Support Offices</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> <li> <a href='#'>Item 4</a> </li> <li> <a href='#'>Item 5</a> </li> <li> <a href='#'>Item 6</a> </li> </ul> <a class='more' href='#'>+</a> </div> <div class='col-1-4 tab-1-2 module'> <h3>Communities & Teams</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> <li> <a href='#'>Item 4</a> </li> <li> <a href='#'>Item 5</a> </li> <li> <a href='#'>Item 6</a> </li> </ul> <a class='more' href='#'>+</a> </div> <div class='col-1-4 tab-1-2 module'> <h3>Mission Support Offices</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> <li> <a href='#'>Item 4</a> </li> <li> <a href='#'>Item 5</a> </li> <li> <a href='#'>Item 6</a> </li> </ul> <a class='more' href='#'>+</a> </div> <div class='col-1-4 tab-1-2 module'> <h3>Mission Directories</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> </ul> <a class='more' href='#'>+</a> </div> <div class='col-1-4 tab-1-2 module'> <h3>Centers</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> </ul> <a class='more' href='#'>+</a> </div> <div class='col-1-4 tab-1-2 module'> <h3>Education</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> </ul> <a class='more' href='#'>+</a> </div> <div class='col-1-4 tab-1-2 module'> <h3>Information Resources</h3> <ul> <li> <a href='#'>Item 1</a> </li> <li> <a href='#'>Item 2</a> </li> <li> <a href='#'>Item 3</a> </li> </ul> <a class='more' href='#'>+</a> </div>
</div>
<div class='grid extras'> <div class='col-1-4 module'>Homeland Security Advisory System</div> <div class='col-1-4 module'>If it's not safe, say so</div> <div class='col-1-4 module'>NASA Emergency Operations</div> <div class='col-1-4 module'>Nasa Communication Policy</div>
</div>
</body>
</html>

NASA Concept - Script Codes CSS Codes

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Economica:400,700|Cabin+Condensed:400,700|Raleway:300,400,900);
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body { margin: 0; max-width: 960px; margin: auto; -webkit-font-smoothing: antialiased;
}
b { font-weight: 900;
}
.grid { background: white;
}
.grid:after { content: ""; display: table; clear: both;
}
[class*='col-'] { float: left;
}
.col-3-4 { width: 75%;
}
.col-2-3 { width: 66.66%;
}
.col-1-3 { width: 33.33%;
}
.col-1-2 { width: 50%;
}
.col-1-4 { width: 25%;
}
.col-1-8 { width: 12.5%;
}
.module { padding: 10px;
}
#logo { height: 100px;
}
#header { padding-bottom: 15px; font-family: "Cabin Condensed", sans-serif; text-transform: uppercase; font-size: 14px;
}
#header .rest ul { margin: 0; padding: 0;
}
#header .rest li { list-style: none; display: inline-block; float: left; background: #002e57; color: white; padding: 5px 15px; border-left: 1px solid #00538f;
}
#menu { width: 100%; display: block; clear: both; margin: 0; padding: 0; list-style: none; text-align: center;
}
#menu li { list-style: none; display: inline-block; padding: 5px 0;
}
#menu li:first-child a { border-left: none;
}
#menu a { color: #002e57; text-decoration: none; padding: 0 15px; border-left: 1px solid grey;
}
.featured { overflow: hidden; color: white; margin-bottom: 40px;
}
.featured h2, .featured .section { text-transform: uppercase; font-family: "Cabin Condensed", sans-serif; font-weight: 100;
}
.featured h2 { font-family: "Raleway", sans-serif;
}
.featured .info, .featured .photo { height: 100%; position: relative;
}
.featured .info:after { content: ""; position: absolute; right: -20px; top: 50%; margin-top: -20px; z-index: 100; width: 0px; height: 0px; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent transparent transparent #007bff;
}
.featured img { width: 100%; height: 100%;
}
.featured .whats-new { height: 300px; background: #448bc9;
}
.featured .whats-new .info:after { border-color: transparent transparent transparent #448bc9;
}
.featured .anouncements { height: 200px; background: #00538f;
}
.featured .anouncements .info:after { border-color: transparent transparent transparent #00538f;
}
.featured .anouncements2 { height: 500px; background: #002e57;
}
.featured .anouncements2 .photo { height: 300px;
}
.featured .anouncements2 .info { height: 200px;
}
.featured .anouncements2 .info:after { right: 50%; top: 0px; margin-right: -20px; border-width: 0 20px 20px 20px; border-color: transparent transparent #002e57 transparent;
}
.offices { padding-bottom: 40px;
}
.offices h3 { font-family: "Cabin Condensed", sans-serif; text-transform: uppercase; font-weight: normal; font-size: 14px; margin: 0 0 10px; color: #002e57;
}
.offices .module { position: relative; background: #dadfe0; height: 230px;
}
.offices .module:nth-child(n+5) { height: 170px;
}
.offices .module:nth-child(even) { background: #ebebeb;
}
.offices .module:nth-child(2n+5) { background: #ebebeb;
}
.offices .module:nth-child(2n+6) { background: #dadfe0;
}
.offices ul { margin: 0; padding: 0;
}
.offices li { list-style-type: none; padding: 0; color: #448bc9;
}
.offices li:before { content: ""; font-family: FontAwesome; font-weight: bold; font-size: 80%;
}
.offices a { color: #448bc9; text-decoration: none;
}
.offices .more { display: block; position: absolute; bottom: 10px; right: 10px; width: 24px; height: 24px; font-size: 24px; line-height: 24px; background: #002e57; text-align: center; color: white;
}
.extras [class*='col-'] { color: white; text-transform: uppercase; font-family: "Cabin Condensed", sans-serif; height: 80px;
}
.extras [class*='col-']:nth-child(1) { background: black;
}
.extras [class*='col-']:nth-child(2) { background: red;
}
.extras [class*='col-']:nth-child(3) { background: #00538f;
}
.extras [class*='col-']:nth-child(4) { background: #545454;
}
@media (max-width: 800px) { .tab-1-1 { width: 100%; } .tab-3-4 { width: 75%; } .tab-2-3 { width: 66.66%; } .tab-1-3 { width: 33.33%; } .tab-1-2 { width: 50%; } .tab-1-4 { width: 25%; } .tab-1-8 { width: 12.5%; } .featured .whats-new, .featured .anouncements, .featured img { height: auto; } .featured .anouncements2 { max-height: 300px; } .featured .anouncements2 .photo { height: 100%; float: left; } .featured .anouncements2 .info { float: left; } .featured .anouncements2 .info:after { right: 100%; top: 50%; margin-top: 20px; margin-right: 0px; border-width: 20px 20px 20px 0; border-color: transparent #002e57 transparent transparent; }
}
@media (max-width: 400px) { [class*='col-'] { width: 100%; }
}
NASA Concept - Script Codes
NASA Concept - Script Codes
Home Page Home
Developer Chris Wachtman
Username cwacht
Uploaded October 17, 2022
Rating 3
Size 6,304 Kb
Views 16,192
Do you need developer help for NASA Concept?

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!

Chris Wachtman (cwacht) Script Codes
Name
What Does the Fox Say Soundboard
NASA Responsive Mockup
Font Awesome Forever
Responsive Grid for Dynamic Layouts
Minimal Menu
Music Bookmarklet
A Pen by Chris Wachtman
Icon Orb
Angular-HAML
CSS Pie Chart
Create amazing blog posts with AI!

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!