Setting Up Website
Below is the code for this website's index.html, using internal css and including Google Analytics tracking code.
|
Head Section
|
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX">
</script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
</script>
<meta charset="UTF-8">
<title>Mike Guzman – CNIT 132A</title>
<meta name="description" content="This is Mike Guzman's website for CNIT 132A">
<link rel="stylesheet" href="css/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Roboto+Serif:ital,opsz,wght@1,8..144,300;1,8..144,400;1,8..144,700&
family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
</head>
|
|
Style Sheet
|
body {
background-color: #FFFCF5;
margin: 0 0 120px 0;
padding: 0;
width: 100%;
}
nav {
background-color: #FFFFFF;
border-bottom: 1px solid #EB0000;
margin: 0;
padding: 0;
position: fixed;
top: 0;
width: 100%;
}
.menu {
margin: 0 auto;
padding: 10px 0;
}
nav a {
color: #EB0000;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 0.9em;
font-style: normal;
font-weight: 300;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
.logo {
padding-left: 0!important;
font-weight: 700;
}
div {
margin: 20px auto;
max-width: 720px;
padding: 0 40px;
}
footer {
background-color: #FFFCF5;
margin: 40px 0 0px 0;
font-family: 'Roboto', sans-serif;
font-size: 0.6em;
padding: 0;
width: 100%;
position: fixed;
bottom: 0;
border-top: 1px solid #EB0000;
}
h1, h2, h3, h4, h5, h6 {
color: #EB0000;
font-family: 'Roboto Serif', serif;
font-style: italic;
font-weight: 400;
text-align: left;
margin-block-start: 0;
margin: 1rem auto;
}
h1 {
font-size: 3em;
}
h2 {
color: #4D4D4D;
font-size: 1.6em;
}
p, ol, ul {
color: #4D4D4D;
font-family: 'Roboto', sans-serif;
font-weight: 300;
line-height: 150%;
margin-block-start: 0;
}
a {
color: #EB0000;
font-family: 'Roboto Serif', serif;
font-style: italic;
font-weight: 300;
text-decoration: underline;
}
.preheader {
color: #EB0000;
font-weight: 300;
}
hr {
border-color: #EB0000;
border-style: solid;
border-top: 1px;
margin: 30px 0;
padding: 0;
}
.row-cards {
margin: 60px auto;
}
div.card {
background-color: #d1c1c1;
border-radius: 8px;
border: 1px solid #EB0000;
margin-block-start: 0;
margin: 4px;
padding: 24px;
width: 24%;
display: inline-block;
vertical-align: top;
height: 100%;
}
.content {
padding-top: 100px;
}
table {
background-color: #FFFFFF;
border-collapse: collapse;
padding: 12px;
width: 100%;
max-width: 720px;
}
th {
border: 1px solid #EB0000;
background-color: #EB0000;
color: #FFFFFF;
font-family: 'Roboto Serif', serif;
font-size: 0.8rem;
font-style: italic;
font-weight: 300;
text-align: left;
padding: 16px;
width: 25%;
}
td {
border: 1px solid #EB0000;
color: #EB0000;
font-family: 'Roboto', sans-serif;
font-size: 0.8rem;
padding: 20px;
}
|
|
Body Section
|
<body>
<nav>
<div class="menu">
<a class="logo" href="index.html">Mike Guzman</a>
<span style="float: right;">
<a href="index.html">Home</a>
<a href="portfolio.html">Assignments</a>
<a href="contact.html">Contact</a>
</span>
</div>
</nav>
<div class="content">
<p class="preheader">CNIT 132A – Advanced HTML & CSS</p>
<h1>Mike Guzman</h1>
<hr>
<h2>Hello everyone!</h2>
<p>I'm thrilled to be part of this web design class and to embark on
this creative journey with you all. My name is Mike, and while I'm
relatively new to the world of web design, I bring with me a passion for
aesthetics and a keen interest in transforming ideas into visually captivating
digital experiences.</p>
</div>
<footer>
<div>
<p style="float: left;">Copyright © Mike Guzman</p>
<p style="float: right;">San Francisco, CA</p>
</div>
</footer>
</body>
|