Skip to content

Instantly share code, notes, and snippets.

@simonespa

simonespa/index.html

Last active December 23, 2018 17:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save simonespa/221b654014e1badd0e0413ea17793ca0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save simonespa/221b654014e1badd0e0413ea17793ca0 to your computer and use it in GitHub Desktop.
Download ZIP
Roma Homepage Example
Raw
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AS Roma | Official Website | Rome | Football | Soccer | Calcio</title>
<link rel="stylesheet" href="css/main.css">
<meta name="description" content="Thee AS Roma official website">
</head>
<body>
<header>
<nav class="topnav">
<a href="#Home">Home</a>
<a href="#Schedule">Schedule</a>
<a href="#Tickets">Tickets</a>
<a href="#romatv">Roma TV+</a>
<a href="#teams">Teams</a>
<a href="#shop">Shop</a>
<a href="#media">Media</a>
<a href="#club">Club</a>
</nav>
</header>
<section class="content">
<section class="grid grid--3x3">
<div class="item-a">
<div class="card">
<div class="card__container">
<h4><b>Item A</b></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="item-b">
<div class="card">
<div class="card__container">
<h4><b>Item B</b></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="item-c">
<div class="card">
<div class="card__container">
<h4><b>Item C</b></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="item-d">
<div class="card">
<div class="card__container">
<h4><b>Item D</b></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="item-e">
<div class="card">
<div class="card__container">
<h4><b>Item E</b></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
<div class="item-f">
<div class="card">
<div class="card__container">
<h4><b>Item F</b></h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</section>
</section>
<footer></footer>
</body>
</html>
Raw
main.css
/* Navigation Bar
========================================================================== */
/**
* Add a black background color to the top navigation
*/
.topnav {
background-color: #970E2F;
overflow: hidden;
border: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
/**
* Style the links inside the navigation bar
*/
.topnav a {
display: inline-block;
padding: 10px;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/**
* Change the color of links on hover
*/
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Content
========================================================================== */
body {
background-color: #E4E4E4;
}
.content {
margin: 2% 10% 5% 10%;
background-color: #E4E4E4;
}
/* Card
========================================================================== */
.card {
/* Add shadows to create the "card" effect */
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
height: 100%;
}
/* On mouse-over, add a deeper shadow */
.card:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
/* Add some padding inside the card container */
.card__container {
padding: 2px 16px;
}
/* Grid Layout
========================================================================== */
.grid {
display: grid;
}
.grid--3x3 {
grid-template-columns: repeat(3, 33%);
grid-template-rows: 100px, 770px, 770px;
grid-column-gap: 8px;
grid-row-gap: 8px;
}
.item-a {
grid-area: 1 / 1 / 3 / 3;
}
.item-b {
grid-area: 1 / 3 / 2 / 4;
}
.item-c {
grid-area: 2 / 3 / 3 / 4;
}
.item-d {
grid-area: 3 / 3 / 4 / 4;
}
.item-e {
grid-area: 3 / 1 / 4 / 2;
}
.item-f {
grid-area: 3 / 2 / 4 / 3;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment