Thank you for purchasing Scientis - HTML Web Template.
If you have any problem with this product, be free to check for support on Oxygen Themes author profile.
Also, if you have a problem to change this template, contact me, and I will do that for you. I worked hard to provide the best and newest features in this template.
01
Instructions
How to use this documentation?
There are thirteen sections in this documentation. Half of them contain information, which relates to instructions about how to use this documentation, installation instructions, licensing information, information about images and typography, info about available versions and info about files structure. In Code Structure you can find out more about structure of the code. One section contain information about support if there emerge any problem with this product, two sections give instructions how to change this template, one section give information about credits for this template, and one section give information about required tools to work with this template. The longest section relate to HTML files, where you can find about how to change text and images in the template. In SCSS section you can find more about how to install SCSS extension in Visual Studio Code, to apply different colors on this template, to apply different fonts. Finally, you can find how to work with variables. For more serious change of styling you are free to look for help and support.
HTML Section
To go to HTML section, please click on HTML option on navbar. In this section, there are bold headings for each HTML file (index.html, ice.html, marsRover.html, orbit.html, rover.html, spacecrafts.html, uae.html). Also, there are smaller headings about code function (description, keywords, browser bar image, etc.). On the bottom image you can see how it looks in HTML section.
On the top of the image you can see "Section Header" heading, and it shows which part of the template you can change.
Blue rectangles mark areas where you can make changes of the template. On the bottom you can find "Show Code" button where you can see code which you have to change to modify Section Header (in this example).
SCSS Section
To go to SCSS section, please click on SCSS option on navbar. In this section you can find more about how to style your template in SCSS.
HTML Editor
To change HTML files you need to install HTML editor (for example - Atom, Komodo Edit, Visual Studio Code, Brackets).
Visual Studio Code download link: https://code.visualstudio.com/
Brackets download link: http://brackets.io/
Find out more info about installation of the Atom Editor on the following link:
https://www.youtube.com/watch?v=2qyH3hQ47zE
Compile SCSS
If you want to use SCSS files, you need to convert SCSS to CSS code.
If you need quality and stable HTML/SCSS editor, with appropriate conversion tool, use Visual Studio Code with "Live Sass Compiler" extension.
Easy installation instructions for this compiler, you can find on the following link:
https://www.youtube.com/watch?v=cpbN0YAW44g
02
Installation
Zip File
After download Scientis - HTML Web Template, and unpacking zip file you will get the following folders:
Install - Server and FTP Upload
To install Scientis - HTML Web Template you can use two methods:
1. Upload files to the server using cPanel (cPanel provide to you your hosting provider)
C - Panel example
To upload files to the server:
- Log in to your account (hosting), - Upload your choosen template version to the server - ZIP file (all versions can be found in "Versions" folder). - Unzip files in following folder on server: public_html - You are ready to go.
2. Upload files to the server using some ftp client (for example - FileZilla). FileZilla website: https://filezilla-project.org/
FileZilla website
Please, download the newest FileZilla version.
For more info how to upload your website/template on the server, check these links:
To find out more about EpicPxls licensing options, please follow this link:
https://www.epicpxls.com/licensing
04
Images
Template images aren't included in this package. These are only there for preview purposes. Instead, there are appropriate image placeholders with sizes in pixels.
To change image you need to take a care about image names. Image name need to be same in the folder (Images), but also and inside code. For example: Graphic.png (Images folder), src = "Images/Graphic.png" (code).
05
Typography
In this product you can find thirteen fonts. All of these are carefully balanced to provide modern visual effect. These fonts you can find in "Fonts" folder.
06
Versions
There are fiftheen versions of this template: Animati, Bubble, Draw, Glass, Light, Navigo, Neon, Press, Shader, Shaper, Styler, Tight, Twilight, Typo, Vanilla.
Each of these versions, has its unique style elements.
07
Files Structure
08
Code Structure
Folders and code (Glass Version).
09
HTML
In each version you can find HTML folder where are located HTML files (except index.html). These files are very important because there you can make changes, which relates to this web template. Each HTML file has the Table of Contents for your easier orientation.
Version - Glass
index.html
Description
Code Line: 12
<meta name = "description" content = "Scientis is a top class scientific facility dedicated to the exploration of planet Mars.">
<link rel = "icon" type = "image/png" href = "Images/titleBar/Mars.png">
Browser Title Text
Code Lines: 33-35
<title>
Scientis - New Generation of Scientific Exploration
</title>
Loader
Code Lines: 787-802
<!-- HTML Loader -->
<div class = "align-items-center d-flex htmlLoader justify-content-center">
<div class = "align-items-center container d-flex justify-content-center">
<!-- Shapes, Rings -->
<div class = "ring">
</div>
<div class = "ring">
</div>
<div class = "ring">
</div>
<!-- Text, Scientis -->
<span class = "scientisText">
Scientis
</span>
</div>
</div>
Section - Header
Code Lines: 809-1055
<!-- HEADER -->
<section>
<div class = "align-items-center d-flex header justify-content-center" id = "headerSection">
<div class = "content m-0 p-0 row">
<div class = "align-items-start d-flex justify-content-center topContainer" id = "stickyMenu">
<!-- Top area -->
<div class = "m-0 p-0 row top">
<!-- Logo Text -->
<div class = "col-12 col-xxl-6 logo m-0 p-0">
<a href = "#">
<h2>
<span class = "sci">
SCI
</span>
<span>
ENTIS
</span>
</h2>
</a>
</div>
<!-- Navbar -->
<div class = "col-6 d-flex justify-content-end m-0 navbar p-0">
<ul>
<li>
<a href = "#aboutAnchor">
ABOUT
</a>
</li>
<li>
<a href = "#researchAnchor">
RESEARCH
</a>
</li>
<li>
<a href = "#scienceAnchor">
SCIENCE
</a>
</li>
<li>
<a href = "#projectsAnchor">
PROJECTS
</a>
</li>
<li>
<a href = "#newsAnchor">
NEWS
</a>
</li>
<li class = "navbarContact">
<a href = "#contactAnchor">
CONTACT
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- Middle of the header section - text -->
<div class = "align-items-center d-flex justify-content-center middleContainer">
<div class = "middle">
<h2>
OUR NEXT ACHIEVEMENT
</h2>
<h1>
MARS
</h1>
</div>
</div>
<!-- Info area about the planet Mars (on the bottom of the header section) -->
<div class = "align-items-end bottom m-0 p-0 row">
<div class = "colOne col-xxl infoZone m-0 p-0">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "info">
<h5 class = "infoLarge">
Avg. Distance from Sun
</h5>
<h5 class = "infoSmall">
Avg. Dist. from Sun
</h5>
<h4 class = "infoLarge">
142.000.000 Miles
</h4>
<h4 class = "infoSmall">
142 Millions Mil.
</h4>
</div>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineHeader lineZone">
</div>
</div>
</div>
<div class = "colTwo col-xxl infoZone m-0 p-0">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "info">
<h5>
Diameter
</h5>
<h4>
4.220 Miles
</h4>
</div>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineHeader lineZone">
</div>
</div>
</div>
<div class = "colThree col-xxl infoZone m-0 p-0">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "info">
<h5>
Number of Moons
</h5>
<h4>
2
</h4>
</div>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineHeader lineZone">
</div>
</div>
</div>
<div class = "colFour col-xxl infoZone m-0 p-0">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "info">
<h5>
Gravity
</h5>
<h4 class = "infoLarge">
0.375 that of Earth
</h4>
<h4 class = "infoSmall">
0.375 (of Earth)
</h4>
</div>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineHeader lineZone">
</div>
</div>
</div>
<div class = "colFive col-xxl d-flex infoZone justify-content-end m-0 p-0">
<div class = "socialArea">
<div class = "d-flex justify-content-center">
<!-- Social icons (FB, Instagram, Twitter) -->
<div>
<a class = "social" href = "https://www.facebook.com/">
Fb
</a>
<a class = "social" href = "https://www.linkedin.com/">
In
</a>
<a class = "end" href = "https://twitter.com/i/flow/login">
Tw
</a>
</div>
</div>
<div class = "socialLine">
</div>
</div>
</div>
</div>
</div>
<!-- Hamburger menu -->
<div class = "hamburgerMenuArea">
<div class = "hamburgerMenu">
<!-- Top line -->
<div class = "hamburgerLine hamburgerLineTop">
</div>
<!-- Middle line -->
<div class = "hamburgerLine hamburgerLineMiddle">
</div>
<!-- Bottom line -->
<div class = "hamburgerLine hamburgerLineBottom">
</div>
</div>
</div>
<!-- Navbar for small devices (you get this navbar, when you click on hamburger menu) -->
<div class = "phoneMenu">
<div class = "linksArea">
<ul>
<li>
<a class = "phoneLink" href = "#">
HOME
</a>
</li>
<li>
<a class = "phoneLink" href = "#aboutAnchor">
ABOUT
</a>
</li>
<li>
<a class = "phoneLink" href = "#researchAnchor">
RESEARCH
</a>
</li>
<li>
<a class = "phoneLink" href = "#scienceAnchor">
SCIENCE
</a>
</li>
<li>
<a href = "#projectsAnchor">
PROJECTS
</a>
</li>
<li>
<a class = "phoneLink" href = "#newsAnchor">
NEWS
</a>
</li>
<li>
<a class = "phoneLink" href = "#contactAnchor">
CONTACT
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
Section - About
Code Lines: 1058-1128
<!-- SECTION - ABOUT -->
<section class = "about" data-aos = "fade-up" data-aos-duration = "2000" id = "aboutAnchor">
<div class = "d-flex justify-content-center sectionContent">
<div class = "aboutArea align-items-center d-flex m-0 pb-0 pl-0 pr-0 row">
<div class = "col-xxl-6 left m-0 p-0">
<!-- Heading (About) -->
<div class = "heading">
<h3>
ABOUT
</h3>
</div>
<div class = "headingLineArea">
<div class = "headingLine">
</div>
</div>
<!-- Subheading (We Live Our Dreams) -->
<div class = "subheading">
<h1>
We Live Our Dreams
</h1>
</div>
<!-- Text on the left side of the section -->
<div class = "text">
<h3 class = "infoText">
From 1960s, humanity strive to reach the stars, and for many years we are a part of this exciting travel. Our mission in the future is to support humans next step in space exploration - to establish a base on the Mars.
</h3>
</div>
<!-- Button (See More) -->
<div class = "d-flex justify-content-center justify-content-xxl-start">
<a class = "buttonElement" href = "#">
SEE MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
<div class = "col-xxl-6 mb-0 ml-0 mr-0 p-0 right">
<!-- Large image (Probe) -->
<div class = "imgContainer">
<img class = "img-fluid" src = "Images/About/Rocket.png" alt = "Rocket">
</div>
<!-- Text over image -->
<div class = "opacityLayer">
<div class = "centerText">
<div>
<h2>
ESTABLISH
</h2>
<h2>
BUILD
</h2>
<h2>
EXPLORE
</h2>
</div>
</div>
</div>
<div class = "lineArea">
<div class = "line">
</div>
</div>
</div>
</div>
</div>
</section>
Section - Research
Code Lines: 1131-1225
<!-- SECTION - RESEARCH -->
<section data-aos = "fade-up" data-aos-duration = "2000" id = "researchAnchor">
<div class = "d-flex justify-content-center sectionContent">
<div class = "m-0 pb-0 pl-0 pr-0 research">
<div class = "d-flex justify-content-center m-0 p-0 w-100">
<div class = "headingWidth m-0 p-0 row">
<div class = "col-xxl-6 m-0 p-0">
<!-- Heading (Research) -->
<div class = "heading m-0 p-0">
<h3>
RESEARCH
</h3>
</div>
<div class = "headingLineArea">
<div class = "headingLine">
</div>
</div>
</div>
<div class = "col-xxl-6 m-0 p-0">
</div>
</div>
</div>
<div class = "contentArea d-flex justify-content-center mb-0 ml-0 mr-0 p-0">
<div class = "belowHeading m-0 p-0 row">
<div class = "block col-xxl-4 m-0 p-0">
<!-- Icon (astrophysics area) -->
<div class = "d-flex justify-content-center">
<img class = "img-fluid" src = "Images/Research/solarSystem.png" alt = "Solar System">
</div>
<!-- Subheading (ASTROPHYSICS) -->
<div class = "d-flex justify-content-center">
<h3>
ASTROPHYSICS
</h3>
</div>
<div class = "d-flex justify-content-center">
<div class = "line">
</div>
</div>
<!-- Text (astrophysics area) -->
<div class = "d-flex justify-content-center">
<h4>
We work hard to be in line with the newest astrophysics research. It’s extremely important, because astrophysics is in the core of the Mars exploration.
</h4>
</div>
</div>
<div class = "block col-xxl-4 m-0 p-0">
<!-- Icon (computer science) -->
<div class = "d-flex justify-content-center">
<img class = "computerImg img-fluid" src = "Images/Research/Computer.png" alt = "Computer">
</div>
<!-- Subheading (COMPUTER SCIENCE) -->
<div class = "d-flex justify-content-center">
<h3>
COMPUTER SCIENCE
</h3>
</div>
<div class = "d-flex justify-content-center">
<div class = "line">
</div>
</div>
<!-- Text (computer science area) -->
<div class = "d-flex justify-content-center">
<h4>
Programming, design, different calculations are crucial for our future Mars base. Robotics, mathematics and physics are more easier with help of computer science.
</h4>
</div>
</div>
<div class = "block col-xxl-4 m-0 p-0">
<!-- Icon (theoretical physics) -->
<div class = "d-flex justify-content-center">
<img class = "atomImg img-fluid" src = "Images/Research/Atom.png" alt = "Atom">
</div>
<!-- Subheading (THEORETICAL PHYSICS) -->
<div class = "d-flex justify-content-center">
<h3>
THEORETICAL PHYSICS
</h3>
</div>
<div class = "d-flex justify-content-center">
<div class = "line">
</div>
</div>
<!-- Text (theoretical physics area) -->
<div class = "d-flex justify-content-center">
<h4>
We need quality theories and approaches in physics to achieve our goals. In our team work the best theoretical physicists in the world, who produce quality theories.
</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Section - Science
Code Lines: 1228-1380
<!-- SECTION - SCIENCE -->
<section data-aos = "fade-up" data-aos-duration = "2000" id = "scienceAnchor">
<div class = "d-flex justify-content-center sectionContent">
<div class = "m-0 p-0 science">
<div class = "m-0 p-0 row">
<!-- Large image on the left -->
<div class = "col-12 col-xxl-6 m-0 order-2 order-xxl-1 p-0">
<div>
<img class = "img-fluid marsImg" src = "Images/Science/scienceLab.png" alt = "Science Lab">
</div>
</div>
<div class = "align-items-center col-12 col-xxl-6 d-flex infoCol m-0 order-1 order-xxl-2 p-0">
<div class = "infoSection">
<!-- Heading (OUR SCIENCE LAB) -->
<div class = "scienceHeading">
<h1>
OUR SCIENCE LAB
</h1>
</div>
<!-- Text - (our science lab area) -->
<h4>
Our science lab is high quality scientific facility, where we have the latest standards and cutting edge equipment, with purpose to bring Mars environment in appropriate lab facilities.
</h4>
<!-- Button (Visit Lab) -->
<div class = "d-flex justify-content-center justify-content-xxl-start">
<a class = "buttonElement" href = "#">
VISIT LAB
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class = "mb-0 ml-0 mr-0 p-0 projects row">
<!-- Info section (Robotics) -->
<div class = "block col-12 col-xxl-3 mb-0 ml-0 mr-0 p-0">
<div class = "blockContainer m-0 p-0">
<div class = "info">
<h5>
Robotics
</h5>
<h4>
Rovers
<span>
Development
</span>
</h4>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineScience lineZone">
</div>
</div>
<img class = "firstImg img-fluid" src = "Images/Science/Rover.png" alt = "Rover">
</div>
</div>
<!-- Info section (Planetary Science) -->
<div class = "block blockMargin col-12 col-xxl-3 mb-0 ml-0 mr-0 p-0">
<div class = "blockContainer m-0 p-0">
<div class = "info">
<h5>
Planetary Science
</h5>
<h4>
<span>
Planet
</span>
Exploration
</h4>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineScience lineZone">
</div>
</div>
<img class = "img-fluid" src = "Images/Science/Planet.png" alt = "Planet">
</div>
</div>
<!-- Info section (Environment) -->
<div class = "block blockMargin col-12 col-xxl-3 mb-0 ml-0 mr-0 p-0">
<div class = "blockContainer m-0 p-0">
<div class = "info">
<h5>
Environment
</h5>
<h4>
<span>
Explore
</span>
Mars Environment
</h4>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineScience lineZone">
</div>
</div>
<img class = "img-fluid" src = "Images/Science/Environment.png" alt = "Environment">
</div>
</div>
<!-- Info section (Technology) -->
<div class = "block blockMargin col-12 col-xxl-3 mb-0 ml-0 mr-0 p-0">
<div class = "blockContainer m-0 p-0">
<div class = "info">
<h5>
Technology
</h5>
<h4>
Cutting Edge
<span>
Technologies
</span>
</h4>
</div>
<div class = "plusAndLine">
<div class = "plus">
<div class = "horizontal">
</div>
<div class = "vertical">
</div>
</div>
<div class = "lineScience lineZone">
</div>
</div>
<img class = "img-fluid lastImg" src = "Images/Science/Shuttle.png" alt = "Shuttle">
</div>
</div>
</div>
</div>
</div>
</section>
Section - Projects
Code Lines: 1383-1451
<!-- SECTION - PROJECTS -->
<section data-aos = "fade-up" data-aos-duration = "2000" id = "projectsAnchor">
<div class = "d-flex justify-content-center sectionContent">
<div class = "m-0 p-0 projects">
<div class = "imgInfo">
<!-- Image - top, large -->
<img class = "img-fluid" src = "Images/Projects/Shuttle.png" alt = "Shuttle">
<div class = "align-items-center d-flex infoArea">
<!-- Text and button over the top image -->
<div class = "textButton">
<h4>
LAUNCHES
</h4>
<h2>
Space Launches in the Private Industry
</h2>
<h4 class = "bottom">
To create safe environment for space flights.
</h4>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<a class = "buttonElement" href = "#">
LEARN MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class = "imgInfo">
<!-- Image, large on the bottom of the section -->
<img class = "img-fluid" src = "Images/Projects/Orbit.jpg" alt = "Orbit">
<div class = "align-items-center d-flex infoArea infoAreaBottom">
<!-- Text and button over the bottom image -->
<div class = "textButton">
<h4>
ORBIT
</h4>
<h2>
Research in Low Mars Orbit
</h2>
<h4 class = "bottom">
To better understand Mars atmosphere.
</h4>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<a class = "buttonElement" href = "#">
LEARN MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Section - News
Code Lines: 1454-1740
<!-- SECTION - NEWS -->
<section data-aos = "fade-up" data-aos-duration = "2000" id = "newsAnchor">
<div class = "d-flex justify-content-center sectionContent">
<div class = "m-0 pb-0 pl-0 pr-0 news">
<div class = "d-flex justify-content-center m-0 p-0 w-100">
<div class = "headingNews headingWidth m-0 p-0 row">
<div class = "col-xxl-6 m-0 p-0">
<!-- Heading (NEWS) -->
<div class = "heading m-0 p-0">
<h3>
NEWS
</h3>
</div>
<div class = "headingLineArea">
<div class = "headingLine">
</div>
</div>
</div>
<div class = "col-xxl-6 m-0 p-0">
</div>
</div>
</div>
<div class = "contentArea d-flex justify-content-center mb-0 ml-0 mr-0 p-0">
<div class = "m-0 p-0 row w-100">
<div class = "col-12 col-xxl-6 leftNews m-0 p-0">
<div class = "block">
<div class = "lineProjects">
<div class = "line">
</div>
</div>
<!-- Link (RESEARCH ON MARS GROUND) -->
<div class = "link">
<a class = "groundMars">
RESEARCH ON MARS GROUND
</a>
</div>
<div class = "linePadding lineProjects">
<div class = "line">
</div>
</div>
</div>
<div class = "block">
<!-- Link (RESEARCH IN MARS ORBIT) -->
<div class = "link">
<a class = "orbitMars white">
RESEARCH IN MARS ORBIT
</a>
</div>
<div class = "linePadding lineProjects">
<div class = "line">
</div>
</div>
</div>
<div class = "block">
<!-- Link (LAUNCHING TO SURFACE) -->
<div class = "link">
<a class = "launchingMars white">
LAUNCHING TO SURFACE
</a>
</div>
<div class = "linePadding lineProjects">
<div class = "line">
</div>
</div>
</div>
<div class = "planetArea">
<!-- Image (Planet Mars) -->
<div class = "d-flex justify-content-center planet">
<img class = "img-fluid" src = "Images/News/Planet.png" alt = "Planet">
</div>
<!-- Text (Planet Mars) -->
<div class = "text">
<h1>
Planet Mars.
</h1>
</div>
</div>
<div class = "block lineBottomPlanet">
<div class = "lineBottom linePadding lineProjects">
<div class = "line">
</div>
</div>
</div>
</div>
<div class = "col-12 col-xxl-6 m-0 p-0 rightNews">
<div class = "ground newsContent">
<!-- News (Ice on Mars Surface) -->
<div class = "infoBlock">
<div class = "infoBlockArea m-0 p-0">
<h1 class = "m-0 p-0">
Ice on Mars Surface
</h1>
</div>
<div class = "infoBlockArea">
<h3>
Like Earth, Mars has ice caps at its poles.
</h3>
</div>
<div class = "infoBlockArea">
<h4>
April 2022
</h4>
</div>
<div class = "buttonZone" onclick = "window.location = 'HTML/ice.html';">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<a class = "buttonElement" href = "#">
READ MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
</div>
<!-- News (Rover Perseverance Landed) -->
<div class = "infoBlock infoBlockBottom">
<div class = "infoBlockArea m-0 p-0">
<h1 class = "m-0 p-0">
Rover Perseverance Landed
</h1>
</div>
<div class = "infoBlockArea">
<h3>
Perseverance landed on surface of the Mars.
</h3>
</div>
<div class = "infoBlockArea">
<h4>
April 2022
</h4>
</div>
<div class = "buttonZone" onclick = "window.location = 'HTML/rover.html';">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<a class = "buttonElement" href = "#">
READ MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class = "newsContent orbit">
<!-- News (Seven Years in Orbit) -->
<div class = "infoBlock">
<div class = "infoBlockArea m-0 p-0">
<h1 class = "m-0 p-0">
Seven Years in Orbit
</h1>
</div>
<div class = "infoBlockArea">
<h3>
India's Mars Orbiter - seven years in orbit.
</h3>
</div>
<div class = "infoBlockArea">
<h4>
April 2022
</h4>
</div>
<div class = "buttonZone" onclick = "window.location = 'HTML/orbit.html';">
<a class = "buttonElement" href = "#">
READ MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
<!-- News (UAE and Mars) -->
<div class = "infoBlock infoBlockBottom">
<div class = "infoBlockArea m-0 p-0">
<h1 class = "m-0 p-0">
UAE and Mars
</h1>
</div>
<div class = "infoBlockArea">
<h3>
Mars Mission From the U.A.E.
</h3>
</div>
<div class = "infoBlockArea">
<h4>
April 2022
</h4>
</div>
<div class = "buttonZone" onclick = "window.location = 'HTML/uae.html';">
<a class = "buttonElement" href = "#">
READ MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
</div>
<div class = "launching newsContent">
<!-- News (Spacecrafts - Launching to Mars) -->
<div class = "infoBlock">
<div class = "infoBlockArea m-0 p-0">
<h1 class = "m-0 p-0">
Spacecrafts - Launching to Mars
</h1>
</div>
<div class = "infoBlockArea">
<h3>
When Earth and Mars are in alignment.
</h3>
</div>
<div class = "infoBlockArea">
<h4>
April 2022
</h4>
</div>
<div class = "buttonZone" onclick = "window.location = 'HTML/spacecrafts.html';">
<a class = "buttonElement" href = "#">
READ MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
<!-- News (The Most Ambitious Mars Rover) -->
<div class = "infoBlock infoBlockBottom">
<div class = "infoBlockArea m-0 p-0">
<h1 class = "m-0 p-0">
The Most Ambitious Mars Rover
</h1>
</div>
<div class = "infoBlockArea">
<h3>
Launched successfully on 30 July.
</h3>
</div>
<div class = "infoBlockArea">
<h4>
April 2022
</h4>
</div>
<div class = "buttonZone" onclick = "window.location = 'HTML/marsRover.html';">
<a class = "buttonElement" href = "#">
READ MORE
<span>
</span>
<span>
</span>
<span>
</span>
<span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Section - Contact
Code Lines: 1743-1878
<!-- SECTION - CONTACT -->
<section data-aos = "fade-up" data-aos-duration = "2000" id = "contactAnchor">
<div class = "d-flex justify-content-center sectionContent">
<div class = "contact m-0 p-0">
<!-- Text (Reach Us) -->
<div class = "m-0 p-0 reach">
<h1>
REACH US
</h1>
</div>
<!-- Text (You have a question for us?) -->
<div class = "mb-0 ml-0 mr-0 p-0 question">
<h3>
You have a question for us?
</h3>
</div>
<div class = "contactContainer mb-0 ml-0 mr-0 p-0 row">
<div class = "col-12 col-xxl-6 contactLeft mb-0 ml-0 mr-0 order-last order-xxl-first p-0">
<div class = "contactInfo mb-0 ml-0 mr-0 pl-0 pr-0">
<div class = "infoContent">
<!-- Address area -->
<div class = "infoContainer m-0 p-0">
<div class = "infoHeading m-0 p-0">
<h3>
ADDRESS
</h3>
</div>
<div class = "infoTextArea m-0 p-0">
<div>
<h3>
Broadway and Murray Street
</h3>
</div>
<div>
<h3>
New York, US
</h3>
</div>
</div>
</div>
<!-- Phone area -->
<div class = "infoContainer infoContainerMargin mb-0 ml-0 mr-0 p-0">
<div class = "infoHeading m-0 p-0">
<h3>
PHONE
</h3>
</div>
<div class = "infoTextArea m-0 p-0">
<div>
<h3>
+1 212 123 456
</h3>
</div>
<div>
<h3>
+1 213 123 456
</h3>
</div>
</div>
</div>
<!-- Web area -->
<div class = "infoContainer infoContainerMargin infoContainerMarginBottom ml-0 mr-0 p-0">
<div class = "infoHeading m-0 p-0">
<h3>
WEB
</h3>
</div>
<div class = "infoTextArea m-0 p-0">
<div>
<h3>
<a href = "#">
www.scientis.com
</a>
</h3>
</div>
<div>
<h3>
<a href = "#">
www.scientis-projects.com
</a>
</h3>
</div>
</div>
</div>
<div class = "contactSocial m-0 p-0">
<!-- Social icons -->
<div>
<a class = "socialIcon" href = "https://www.facebook.com/">
<img class = "img-fluid" src = "Images/Contact/Fb.png" alt = "FB Icon">
</a>
<a class = "socialIcon socialIconMiddle" href = "https://www.instagram.com/">
<img class = "img-fluid" src = "Images/Contact/In.png" alt = "Instagram Icon">
</a>
<a class = "socialIcon" href = "https://www.viber.com/en/">
<img class = "img-fluid" src = "Images/Contact/Viber.png" alt = "Viber Icon">
</a>
</div>
</div>
</div>
</div>
</div>
<div class = "col-xxl-6 contactRight mb-0 ml-0 mr-0 p-0">
<form class = "cForm" id = "formArea" method = "post" novalidate>
<!-- Form on the right side -->
<div class = "formContainer m-0 p-0 row">
<div class = "col-6 dataButton m-0 p-0">
<input class = "fieldButton" id = "name" name = "nameArea" placeholder = "Name" type = "text">
</div>
<div class = "col-6 dataButton d-flex formMarginResponsive justify-content-end mb-0 ml-0 mr-0 p-0">
<input class = "fieldButton" id = "mail" name = "mailArea" placeholder = "Email" type = "email">
</div>
<div class = "col-6 dataButton formMargin mb-0 ml-0 mr-0 p-0">
<input class = "fieldButton" id = "address" name = "addressArea" placeholder = "Address" type = "text">
</div>
<div class = "col-6 dataButton d-flex formMargin justify-content-end mb-0 ml-0 mr-0 p-0">
<input class = "fieldButton" id = "phone" name = "phoneArea" placeholder = "Phone" type = "text">
</div>
<div class = "col-12 dataButton formMargin mb-0 ml-0 mr-0 p-0">
<textarea class = "fieldButton fieldMessage" id = "message" name = "messageArea" placeholder = "Your Message"></textarea>
</div>
<div class = "col-12 col-xxl-6 dataButton d-flex formMargin justify-content-center justify-content-xl-start mb-0 ml-0 mr-0 p-0">
<input class = "buttonArea fieldButton" id = "butt" onclick = "sendContact()" type = "submit" value = "Send">
</div>
<div class = "msgs">
<div class = "error" id = "errorMessage">
</div>
<div class = "submitted" id = "submitMessage">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
Section - Footer
Code Lines: 1881-1920
<!-- SECTION - FOOTER -->
<section data-aos = "fade-up" data-aos-duration = "2000">
<div class = "d-flex justify-content-center sectionContent">
<div class = "footer m-0 p-0">
<!-- Logo text -->
<div class = "logo m-0 p-0">
<a href = "#">
<h1 class = "m-0 p-0">
<span class = "m-0 p-0 sciArea">
SCI
</span>
<span class = "entis m-0 p-0">
ENTIS
</span>
</h1>
</a>
</div>
<!-- Text on the bottom -->
<div class = "terraform">
<h4>
Our mission is to terraform the Mars.
</h4>
</div>
<div class = "d-flex footerSocial justify-content-center">
<!-- Social icons -->
<div>
<a href = "https://www.facebook.com/">
<img class = "img-fluid" src = "Images/Contact/Fb.png" alt = "FB Icon">
</a>
<a class = "footerSocialMiddle" href = "https://www.instagram.com/">
<img class = "img-fluid" src = "Images/Contact/In.png" alt = "Instagram Icon">
</a>
<a href = "https://www.viber.com/en/">
<img class = "img-fluid" src = "Images/Contact/Viber.png" alt = "Viber Icon">
</a>
</div>
</div>
</div>
</div>
</section>
ice.html
Code Lines: 81-183
<section class = "m-0 newsSection p-0">
<div class = "m-0 newsArea p-0">
<!-- Image -->
<div class = "d-none d-sm-block m-0 p-0 topArea">
<img class = "img-fluid" src = "../Images/newsArea/Ice.png" alt = "Ice">
</div>
<div class = "d-flex justify-content-center">
<div class = "align-items-center d-flex m-0 newsContent p-0 row">
<!-- Left side -->
<div class = "col-12 col-xxl-6 mb-0 ml-0 mr-0 p-0 textInfo">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<h2>
BY KEVIN GRISSOM
</h2>
</div>
<h1>
Ice on Mars Surface
</h1>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "newsLine">
</div>
</div>
<h1 class = "date">
08
<span>
April 2022
</span>
</h1>
</div>
<!-- Text on the right side -->
<div class = "col-12 col-xxl-6 d-flex justify-content-end mb-0 ml-0 mr-0 p-0 textContainer">
<div class = "textNews">
<h2>
Like Earth, Mars has ice caps at its poles. Water reaches the poles as vapor and is frozen into thin layers that build up thick deposits. Mixed with this water is dust picked up by the wind, so the caps have bright and dark layers of "clean" and "dirty" ice. During winter at each pole, temperatures are so low that carbon dioxide freezes from the atmosphere and forms additional layers of "dry ice." Much water is also trapped as permafrost surrounding the polar regions.
</h2>
<h2 class = "smallerDevices">
Like Earth, Mars spins on an axis tilted about 25 degrees from its orbital plane. Mars has no large satellite like the Moon, just its two small moons Phobos and Deimos. As a result, the tug of gravity from the Sun and the large planets causes a slow wobble in the tilt, or obliquity, of its axis. During periods of higher obliquity, the atmosphere is thicker, dust storms are more intense, and water now trapped at the poles moves to the equatorial region to form mountain glaciers. Many glacial landforms from the last time this occurred can still be seen on Mars. It’s not surprising, that Martian ice and snow tend to be dusty, more so than ice or snow on Earth. Researchers from two universities in the U.S. announced a new study showing just how dusty Mars ice really is.
</h2>
</div>
</div>
</div>
</div>
<div class = "d-flex justify-content-center">
<!-- Comments Area -->
<div class = "commentsArea">
<!-- Top -->
<div class = "commentsTop">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H3 -->
<h3>
COMMENTS
</h3>
</div>
<!-- H4 -->
<h4>
1 Comment
</h4>
</div>
<!-- Comment -->
<div class = "comment d-flex justify-content-center justify-content-xxl-start">
<div>
<!-- H4 -->
<h4>
CLARENCE MALONE
</h4>
<!-- First Comment -->
<h4 class = "firstComment">
I am waiting for the new research!
</h4>
</div>
</div>
<!-- Comment Form -->
<div class = "commentForm">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H2 -->
<h2>
LEAVE A COMMENT
</h2>
</div>
<!-- Form -->
<form>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Name Form -->
<input class = "nameForm" id = "name" placeholder = "NAME" type = "text">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Mail Form -->
<input class = "mailForm" id = "mail" placeholder = "MAIL" type = "email">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Commenting Form -->
<textarea class = "commentingForm" id = "comment" placeholder = "COMMENT"></textarea>
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Comment Submit -->
<input class = "commentSubmit" id = "buttonComment" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
marsRover.html
Code Lines: 81-181
<section class = "m-0 newsSection p-0">
<div class = "m-0 newsArea p-0">
<!-- Image -->
<div class = "d-none d-sm-block m-0 p-0 topArea">
<img class = "img-fluid" src = "../Images/newsArea/Launching.png" alt = "Launching">
</div>
<div class = "d-flex justify-content-center">
<div class = "align-items-center d-flex m-0 newsContent p-0 row">
<!-- Left side -->
<div class = "col-12 col-xxl-6 mb-0 ml-0 mr-0 p-0 textInfo">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<h2>
BY MARIA ROBINSON
</h2>
</div>
<h1>
Ambitious Mars Rover
</h1>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "newsLine">
</div>
</div>
<h1 class = "date">
12
<span>
April 2022
</span>
</h1>
</div>
<!-- Text on the right side -->
<div class = "col-12 col-xxl-6 d-flex justify-content-end mb-0 ml-0 mr-0 p-0 textContainer">
<div class = "textNews">
<h2>
Launched successfully on 30 July. It's about Perseverance Rover, one of the most advanced in last decade. The rover will be the first mission ever to attempt to collect rock samples for return to Earth; it will also search for signs of ancient alien life, launch the first helicopter on the red planet and use microphones to capture Mars’s sounds for the first time. The rover blasted into the skies above Cape Canaveral, Florida, aboard an Atlas V rocket at 7.50 a.m. local time.
</h2>
<h2 class = "smallerDevices">
The machine is a beefed-up version of the Curiosity rover, which gripped the world when it landed on Mars 8 years ago in a nail-biting 7-minute manoeuvre. After a journey of roughly 500 million kilometres, Perseverance will hit the Martian atmosphere travelling at around 19,500 kilometres per hour. It will deploy a parachute and then a ‘sky crane’ system — similar to that used by Curiosity — that will fire retrorockets to slow it down as it approaches the planet’s surface. Unlike Curiosity, the spacecraft has an autopiloting system to detect obstacles such as big rocks, and guide it to a safe location. Jezero means ‘lake’ in several Slavic languages. More than 3.8 billion years ago, a river flowed into the 45-kilometre-wide crater, and lake waters filled it.
</h2>
</div>
</div>
</div>
</div>
<div class = "d-flex justify-content-center">
<!-- Comments Area -->
<div class = "commentsArea">
<!-- Top -->
<div class = "commentsTop">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H3 -->
<h3>
COMMENTS
</h3>
</div>
<!-- H4 -->
<h4>
1 Comment
</h4>
</div>
<!-- Comment -->
<div class = "comment">
<!-- H4 -->
<h4>
CHRISTINA REVO
</h4>
<!-- First Comment -->
<h4 class = "firstComment">
I watched this launching live. It was excellent!
</h4>
</div>
<!-- Comment Form -->
<div class = "commentForm">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H2 -->
<h2>
LEAVE A COMMENT
</h2>
</div>
<!-- Form -->
<form>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Name Form -->
<input class = "nameForm" id = "name" placeholder = "NAME" type = "text">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Mail Form -->
<input class = "mailForm" id = "mail" placeholder = "MAIL" type = "email">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Commenting Form -->
<textarea class = "commentingForm" id = "comment" placeholder = "COMMENT"></textarea>
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Comment Submit -->
<input class = "commentSubmit" id = "buttonComment" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
orbit.html
Code Lines: 81-181
<section class = "m-0 newsSection p-0">
<div class = "m-0 newsArea p-0">
<!-- Image -->
<div class = "d-none d-sm-block m-0 p-0 topArea">
<img class = "img-fluid" src = "../Images/newsArea/Orbit.png" alt = "Orbit">
</div>
<div class = "d-flex justify-content-center">
<div class = "align-items-center d-flex m-0 newsContent p-0 row">
<!-- Left side -->
<div class = "col-12 col-xxl-6 mb-0 ml-0 mr-0 p-0 textInfo">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<h2>
BY TONY FARREL
</h2>
</div>
<h1>
Seven Years in Orbit
</h1>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "newsLine">
</div>
</div>
<h1 class = "date">
12
<span>
April 2022
</span>
</h1>
</div>
<!-- Text on the right side -->
<div class = "col-12 col-xxl-6 d-flex justify-content-end mb-0 ml-0 mr-0 p-0 textContainer">
<div class = "textNews">
<h2>
India's Mars Orbiter - seven years in orbit. For space related missions - it's huge amount of time. Mars Orbiter Mission (MOM), also called Mangalyaan (Hindi: “Mars Craft”), unmanned mission to Mars that is India’s first interplanetary spacecraft. The Indian Space Research Organisation (ISRO) launched the Mars Orbiter Mission on November 5, 2013, using its Polar Satellite Launch Vehicle (PSLV) from the Satish Dhawan Space Centre on Sriharikota Island, Andhra Pradesh state.
</h2>
<h2 class = "smallerDevices">
The Indian government approved the Mars Orbiter Mission (MOM) project in August 2012, a mere 15 months before launch. ISRO was able to keep mission costs down by basing MOM’s design on that of Chandrayaan-1, India’s first Moon probe. Because the PSLV did not have the power to place the 1,350-kg (3,000-pound) probe on a direct trajectory, the spacecraft used low-power thrusters to raise its orbit over a period of four weeks until it broke free of Earth’s gravity on December 1 and headed to Mars. It arrived at Mars on September 24, 2014, and the spacecraft entered a highly elliptical orbit of 423 × 80,000 km (262 × 50,000 miles), which allows it to take pictures of one entire Martian hemisphere at a time. MOM arrived at Mars in time to observe Comet Siding Spring.
</h2>
</div>
</div>
</div>
</div>
<div class = "d-flex justify-content-center">
<!-- Comments Area -->
<div class = "commentsArea">
<!-- Top -->
<div class = "commentsTop">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H3 -->
<h3>
COMMENTS
</h3>
</div>
<!-- H4 -->
<h4>
1 Comment
</h4>
</div>
<!-- Comment -->
<div class = "comment">
<!-- H4 -->
<h4>
ADAM RUSSELL
</h4>
<!-- First Comment -->
<h4 class = "firstComment">
It's excellent that India joined Mars research!
</h4>
</div>
<!-- Comment Form -->
<div class = "commentForm">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H2 -->
<h2>
LEAVE A COMMENT
</h2>
</div>
<!-- Form -->
<form>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Name Form -->
<input class = "nameForm" id = "name" placeholder = "NAME" type = "text">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Mail Form -->
<input class = "mailForm" id = "mail" placeholder = "MAIL" type = "email">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Commenting Form -->
<textarea class = "commentingForm" id = "comment" placeholder = "COMMENT"></textarea>
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Comment Submit -->
<input class = "commentSubmit" id = "buttonComment" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
rover.html
Code Lines: 81-181
<section class = "m-0 newsSection p-0">
<div class = "m-0 newsArea p-0">
<!-- Image -->
<div class = "d-none d-sm-block m-0 p-0 topArea">
<img class = "img-fluid" src = "../Images/newsArea/redPlanet.jpg" alt = "Red Planet">
</div>
<div class = "d-flex justify-content-center">
<div class = "align-items-center d-flex m-0 newsContent p-0 row">
<!-- Left side -->
<div class = "col-12 col-xxl-6 mb-0 ml-0 mr-0 p-0 textInfo">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<h2>
BY ANDREA WILLIAMS
</h2>
</div>
<h1>
Rover Perseverance Landed
</h1>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "newsLine">
</div>
</div>
<h1 class = "date">
12
<span>
April 2022
</span>
</h1>
</div>
<!-- Text on the right side -->
<div class = "col-12 col-xxl-6 d-flex justify-content-end mb-0 ml-0 mr-0 p-0 textContainer">
<div class = "textNews">
<h2>
Perseverance landed on surface of the Mars. The mission provides opportunities to learn and demonstrate technologies that address the challenges of future human expeditions to Mars. That includes testing a method for producing oxygen from the Martian atmosphere, identifying other resources (such as subsurface water), improving landing techniques, and characterizing weather, dust, and other environmental conditions that could affect future astronauts living and working on Mars.
</h2>
<h2 class = "smallerDevices">
Perseverance has landed in the 45km-wide Jezero Crater. Just like Gale crater, the location for NASA's other current rover Curiosity, Jezero is the site of a suspected ancient lake and river delta. As water is an extremely important part of the existence of all known life on Earth, anywhere it could be found on Mars – whether in the modern day or in the ancient past – is a good place to be looking for evidence of life on the planet. Just as geologists here on Earth would take samples of rocks from various places around a region to study them, Perseverance will take and analyse samples using a sophisticated 'chemistry set', the results of which are transmitted back to the scientists here on Earth. All four science objectives relate to searching for signs of life on Mars.
</h2>
</div>
</div>
</div>
</div>
<div class = "d-flex justify-content-center">
<!-- Comments Area -->
<div class = "commentsArea">
<!-- Top -->
<div class = "commentsTop">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H3 -->
<h3>
COMMENTS
</h3>
</div>
<!-- H4 -->
<h4>
1 Comment
</h4>
</div>
<!-- Comment -->
<div class = "comment">
<!-- H4 -->
<h4>
SIMONA LOPEZ
</h4>
<!-- First Comment -->
<h4 class = "firstComment">
I will watch this in live session!
</h4>
</div>
<!-- Comment Form -->
<div class = "commentForm">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H2 -->
<h2>
LEAVE A COMMENT
</h2>
</div>
<!-- Form -->
<form>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Name Form -->
<input class = "nameForm" id = "name" placeholder = "NAME" type = "text">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Mail Form -->
<input class = "mailForm" id = "mail" placeholder = "MAIL" type = "email">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Commenting Form -->
<textarea class = "commentingForm" id = "comment" placeholder = "COMMENT"></textarea>
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Comment Submit -->
<input class = "commentSubmit" id = "buttonComment" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
spacecrafts.html
Code Lines: 81-181
<section class = "m-0 newsSection p-0">
<div class = "m-0 newsArea p-0">
<!-- Image -->
<div class = "d-none d-sm-block m-0 p-0 topArea">
<img class = "img-fluid" src = "../Images/newsArea/Spacecraft.png" alt = "Spacecraft">
</div>
<div class = "d-flex justify-content-center">
<div class = "align-items-center d-flex m-0 newsContent p-0 row">
<!-- Left side -->
<div class = "col-12 col-xxl-6 mb-0 ml-0 mr-0 p-0 textInfo">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<h2>
BY DAVID DUNCAN
</h2>
</div>
<h1>
Spacecrafts - Launching
</h1>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "newsLine">
</div>
</div>
<h1 class = "date">
12
<span>
April 2022
</span>
</h1>
</div>
<!-- Text on the right side -->
<div class = "col-12 col-xxl-6 d-flex justify-content-end mb-0 ml-0 mr-0 p-0 textContainer">
<div class = "textNews">
<h2>
When Earth and Mars are in alignment. Previous sentence is description for the best launching position to the Mars. Earth is the third closest planet to the sun and Mars is the fourth, which influences the orbits of the planets around the sun as well as the number of days that equal a year on each planet. For example, Earth is moving at a pretty fast clip of 67,000 miles per hour as it orbits the sun -- which creates our 365-day orbit. But Mars is farther from the sun, so it's slower and takes longer.
</h2>
<h2 class = "smallerDevices">
The planets aren't moving in perfect circular paths around the sun, either. Instead, they have elliptical, or more oval-shaped, orbits. And Mars' orbit is tugged on by massive gas giant Jupiter, which can change the orbit shape as well. Mars and Earth are also slightly tilted in their orbits. But every 26 months, Mars and Earth end up in a nice alignment on the same side of the sun and are closer together than usual. Launches to Mars are targeted at this time because any spacecraft leaving Earth will experience a shorter trip to Mars -- which means less resources such as fuel are needed as well. Other factors, like the lift capability of the launch vehicle, the mass of the spacecraft and landing time, also help determine the launch window.
</h2>
</div>
</div>
</div>
</div>
<div class = "d-flex justify-content-center">
<!-- Comments Area -->
<div class = "commentsArea">
<!-- Top -->
<div class = "commentsTop">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H3 -->
<h3>
COMMENTS
</h3>
</div>
<!-- H4 -->
<h4>
1 Comment
</h4>
</div>
<!-- Comment -->
<div class = "comment">
<!-- H4 -->
<h4>
DONALD BECK
</h4>
<!-- First Comment -->
<h4 class = "firstComment">
It seems that this is a whole science!
</h4>
</div>
<!-- Comment Form -->
<div class = "commentForm">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H2 -->
<h2>
LEAVE A COMMENT
</h2>
</div>
<!-- Form -->
<form>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Name Form -->
<input class = "nameForm" id = "name" placeholder = "NAME" type = "text">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Mail Form -->
<input class = "mailForm" id = "mail" placeholder = "MAIL" type = "email">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Commenting Form -->
<textarea class = "commentingForm" id = "comment" placeholder = "COMMENT"></textarea>
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Comment Submit -->
<input class = "commentSubmit" id = "buttonComment" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
uae.html
Code Lines: 81-181
<section class = "m-0 newsSection p-0">
<div class = "m-0 newsArea p-0">
<!-- Image -->
<div class = "d-none d-sm-block m-0 p-0 topArea">
<img class = "img-fluid" src = "../Images/newsArea/uaeMars.png" alt = "Uae and Mars">
</div>
<div class = "d-flex justify-content-center">
<div class = "align-items-center d-flex m-0 newsContent p-0 row">
<!-- Left side -->
<div class = "col-12 col-xxl-6 mb-0 ml-0 mr-0 p-0 textInfo">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<h2>
BY KATLEEN WELLS
</h2>
</div>
<h1>
UAE and Mars
</h1>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<div class = "newsLine">
</div>
</div>
<h1 class = "date">
12
<span>
April 2022
</span>
</h1>
</div>
<!-- Text on the right side -->
<div class = "col-12 col-xxl-6 d-flex justify-content-end mb-0 ml-0 mr-0 p-0 textContainer">
<div class = "textNews">
<h2>
Mars Mission From the U.A.E. One of the richest country in the Middle East, has a strong space exploration ambitions. It's been a full year since the United Arab Emirates made history when its first-ever interplanetary mission slipped into orbit around Mars. The Emirates Mars Mission, also called Hope, launched in July 2020, arrived at the Red Planet seven months later and successfully entered orbit around Mars on Feb. 9, 2021. After a few months in orbit, the mission began its science observations.
</h2>
<h2 class = "smallerDevices">
In fact, one of the mission's first findings came from data gathered even before the spacecraft entered its formal science observation program. Hope observations confirmed that an elusive phenomenon called the discrete aurora is taking place on the planet's night side. Hope's primary mission is planned to last one Martian year (687 Earth days). That timeline is important because mission scientists want to understand how weather and climate work across the entire planet both throughout a day and throughout a year. For example, Al Matroushi said that the team has been studying water cloud features that appear to grow at the beginning and end of the day. The spacecraft is also designed to help scientists understand how the layers of Mars' atmosphere interact.
</h2>
</div>
</div>
</div>
</div>
<div class = "d-flex justify-content-center">
<!-- Comments Area -->
<div class = "commentsArea">
<!-- Top -->
<div class = "commentsTop">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H3 -->
<h3>
COMMENTS
</h3>
</div>
<!-- H4 -->
<h4>
1 Comment
</h4>
</div>
<!-- Comment -->
<div class = "comment">
<!-- H4 -->
<h4>
TANYA LASLO
</h4>
<!-- First Comment -->
<h4 class = "firstComment">
This is a huge program for UAE!
</h4>
</div>
<!-- Comment Form -->
<div class = "commentForm">
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- H2 -->
<h2>
LEAVE A COMMENT
</h2>
</div>
<!-- Form -->
<form>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Name Form -->
<input class = "nameForm" id = "name" placeholder = "NAME" type = "text">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Mail Form -->
<input class = "mailForm" id = "mail" placeholder = "MAIL" type = "email">
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Commenting Form -->
<textarea class = "commentingForm" id = "comment" placeholder = "COMMENT"></textarea>
</div>
<div class = "d-flex justify-content-center justify-content-xxl-start">
<!-- Comment Submit -->
<input class = "commentSubmit" id = "buttonComment" type = "submit" value = "POST">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
10
SCSS
If you need to change styling of this web template, you use SCSS files. In this documentation you can find more about colors, fonts, mixins, variables, imports, and containers on Header, About, Research, Science, Projects, News, Contact and Footer section, but if you need to make more serious changes, you are free to ask for help and support. Also, there are comments within the SCSS code for easier orientation. Notice: "Show Code" section is without media queries. For changes within media queries part, be free to ask for support.
