/*
color palette
dark blue-gray: #607d8b
salmon: #ff799c
lavender: #aabee0
*/
body { /* this is a selector for <body> element (within the HTML file). Curly brackets for opening and closing. */
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
#wrapper { /* when we select elements with ID attribute, we use # symbol at the beginning. */
width: 1600px;
height: auto; /* this is temporary */
background-color: rgba(255,255,255,0.95); /* Red, Green, Blue and Opacity values. */
margin: 30px auto; /* centering the wrapper. 1st value is margin-top and it follows clockwise as top-right-bottom-left. */
border-radius: 6px; /* Rounding the corners */
box-shadow: 0 16px 32px rgba(0,0,0,0.3); /* drop-shadow */
}
header {
width: 100%;
height: 678px;
background-image: url('heroimg2.png');
background-size: cover;
}
#herotext {
float: left;
margin-left: 10%;
margin-top: 10%;
}
h1 {
font-family: 'Montserrat-Extralight';
font-weight: 300;
color: #a92654;
font-size: 34px;
line-height: 46px;
}
.salmon {
font-family: 'Montserrat-Bold';
color: #a92654;
}
.lavender {
font-family: 'Montserrat-Medium';
color: #998a8f;
}
main {
float: left; /* in a float layout, main sections should float */
}
.card {
width: 22.5%;
height: auto;
float: left;
margin-left: 2%;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* initial state */
transition: box-shadow .3s;
}
.card:hover {
box-shadow: 0 25px 50px rgba(0,0,0,0.3); /* pointer is on the card */
}
.card img { /* it is only targeting the images within the cards */
width:100%;
border-radius: 4px 4px 0 0;
}
.static {
position:static;
background: white;
}
.static:hover {
opacity:0;
}
<style>
.speaker1_1 {
height:300px;
width:345px;
margin:auto;
}
h2 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
color: rgba(0,0,0,0.54);
text-align: center;
margin-top: 24px;
}
h3 {
font-family: 'Roboto';
font-weight: 300;
font-size: 28px;
color: #ff799c; /* salmon */
margin: 12px 0 12px 16px;
}
h4 {
font-family: 'Roboto';
font-weight: 400;
font-size: 14px;
color: #aabee0; /*lavender */
line-height: 20px;
margin: 12px 0 12px 16px;
}
p {
font-family: 'Roboto';
font-weight: 300;
font-size: 14px;
color: rgba(0,0,0,0.87); /*lavender */
line-height: 20px;
margin: 12px 12px 16px 16px;
}
<!DOCTYPE html>
<head> <!-- Head contains items that are read by the Browser, and also by Search Engines, but they are hidden from the viewer; they are not directly rendered. -->
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
</head> <!-- closing tag -->
<body> <!-- Body contains all the visible elements, possible to use as a background -->
<div id="wrapper"> <!-- div defines an area -->
<header>
<div id="herotext">
<h1>
<!-- span is for exceptions in text --> <span class="salmon">DIGITAL
ART</span><br />
<span class="lavender">Fine Art<br />
Conference</span><br />
APRIL 26-28, 2019<br />
BILKENT, ANKARA
</h1>
</div>
</header>
<main>
<h2>SPEAKERS</h2>
<div class="card">
<img class="static"
src="images/speaker1_1.png">
<img class="active"
src="images/speaker1.gif" />
<h3>Yağmur<br /> Başgül</h3>
<h4>Dexter Sinister<br />
<br />
Serving Library</h4>
<p>David is an independent graphic designer, writer and teacher in New York City. His talk and the accompanying workshop revolves around the relationship between interfaces and the concept of time.</p>
</div>
<div class="card">
<img src="images/pinkguy.jpg" />
<h3>Alice<br /> Rawsthorn</h3>
<h4>alicerawsthorn.com<br />
New York Times<br />
Frieze Magazine</h4>
<p>Alice is a design critic and author of several books on design. She will give a talk on our constantly changing perceptions of what constitutes good and bad design, and how they are likely to evolve in the future.</p>
</div>
<div class="card">
<img src="images/taner.jpg" />
<h3>Kimon<br /> Keramidas</h3>
<h4>kimonkeramidas.com<br />
Draper Interdisciplinary<br /> Master's Program at NYU</h4>
<p>Kimon is a digital media theorist and historian. He will talk about the history of interfaces through tactile and interactive displays that will stimulate new questions about how we interact with and use computers.</p>
</div>
<div class="card">
<img src="images/jordi.jpg" />
<h3>Rob<br /> Giampietro</h3>
<h4>linedandunlined.com<br />
Material Design<br />
RISD MFA Graphic Design</h4>
<p>From 2015 - 2017 Rob was the Creative Lead for Google's Material Design studio in New York. He will take us through the different uses of metaphors in design, particularly within the process of designing interfaces.</p>
</div>
</main>
</div>
</body>
</html>