Style1.css

body {

  font-family: sans-serif;

  background: #e3e3e3;

}

header {

  position: fixed;

  background: purple;

  width:1800px;

  height: 100px;

}

header figure img{

  float:left;

  margin-left:0;

  position: absolute;

  top: 2px;

  bottom: 2px;

  width: 100px;

  height: 100px;

}

body, html {

  height: 100%;

}



.hero {

/* Sizing */

width: 100vw;

height: 100vh;

}

/* The hero image */

.hero-image {

/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */

background-image: url("Images/sis.jpg");



/* Set a specific height */

height: 80%;



/* Position and center the image to scale nicely on all screens */

background-position: center;

background-repeat: no-repeat;

background-size: cover;

position: relative;

}



/* Place text in the middle of the image */

.hero-text {

text-align: center;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

color: white;

}

h1 {



  text-align: center;



  color: white;



  line-height: 100px;



  margin: 0;



}

ul li{

  list-style: none;

  display: inline;

  padding-right: 50px;

}

article1{

  margin-left: 0;

  width: 600px;

  height: 800px;

  background:violet;



}

article2{

  margin-left: 0;

  width: 600px;

  height: 800px;

  background: GreenYellow ;



}

article3{

  margin-left: 0;

  width: 600px;

  height: 800px;

  background:skyblue;



}

section{

  display: flex;



}

footer {



  background: gray;



  height: 50px;



}

h2 {



  text-align: center;



  color: white;



  line-height: 100px;



  margin: 0;



}

img{

 float: right;

}