• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

I'm not sure where to insert html code within the original html code?

New Here ,
Oct 06, 2019 Oct 06, 2019

Copy link to clipboard

Copied

I have the orginal HTML code in dreamweaver with a CSS style sheet attached to it,but the problem is i dont know much about HTML so i dont where within this code below i put the html code in this link https://codepen.io/kevinpowell/pen/jxppmr so it looks like the page below in dreamweaver;any help would be grealty appreciated.

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>b</title>
<link href="file:///C|/Users/osman/OneDrive/Desktop/css.file.css" rel="stylesheet" type="text/css">
</head>

<body>
</body>
</html>

Views

244

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 06, 2019 Oct 06, 2019

Dreamweaver doesn't support Grids and fractional units yet.  But it looks fine in latest Chrome and Firefox browsers.  See screenshot.

 

clipboard_image_0.png

 

Your external stylesheet will not work correctly online because iit's pointing to a file:/// in OneDrive.   You should keep site files in a defined local site folder on your primary hard drive.  Don't use cloud or networked drives.  For this reason, I'm not including your stylesheet here.

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<ti
...

Votes

Translate

Translate
Community Expert ,
Oct 06, 2019 Oct 06, 2019

Copy link to clipboard

Copied

LATEST

Dreamweaver doesn't support Grids and fractional units yet.  But it looks fine in latest Chrome and Firefox browsers.  See screenshot.

 

clipboard_image_0.png

 

Your external stylesheet will not work correctly online because iit's pointing to a file:/// in OneDrive.   You should keep site files in a defined local site folder on your primary hard drive.  Don't use cloud or networked drives.  For this reason, I'm not including your stylesheet here.

 

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Your Unique Page Title here</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Work+Sans:300,600");
:root { --background: rgba(0, 214, 170, .85);
}
*, *::before, *::after { box-sizing: border-box; }
body {
background: #222;
margin: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.content {
height: 200vh;
background: rgba(0,0,0,0.65) url(https://unsplash.it/1000/1000);
background-blend-mode: multiply;
background-size: cover;
display: grid;
place-items: center;
color: #eaeaea;
}
/* navigation styles start here */
header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
/* changed this from the tutorial video to allow it to gain focus, making it tabbable */
.nav-toggle {
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.nav-toggle:focus ~ .nav-toggle-label { outline: 3px solid rgba(173, 216, 230, 0.75); }
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
display: block;
background: white;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before, .nav-toggle-label span::after {
content: '';
position: absolute;
}
.nav-toggle-label span::before { bottom: 7px; }
.nav-toggle-label span::after { top: 7px; }
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: top;
transform-origin: top;
transition: -webkit-transform 400ms ease-in-out;
transition: transform 400ms ease-in-out;
transition: transform 400ms ease-in-out, -webkit-transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: white;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover { color: #000; }
.nav-toggle:checked ~ nav {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}

@media screen and (min-width: 800px) {
.nav-toggle-label { display: none; }
header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo { grid-column: 2 / 3; }
nav {
/* the following lines are not from my video, but add Edge support */
position: relative;
text-align: left;
transition: none;
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
background: none;
top: initial;
left: initial;
/* end Edge support stuff */
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul { display: flex; }
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: '';
display: block;
height: 5px;
background: black;
position: absolute;
top: -.75em;
left: 0;
right: 0;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
transition: -webkit-transform ease-in-out 250ms;
transition: transform ease-in-out 250ms;
transition: transform ease-in-out 250ms, -webkit-transform ease-in-out 250ms;
}
nav a:hover::before {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
</style>
</head>

<body>
<header>
<h1 class="logo">Logo</h1>
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label"> <span></span> </label>
</header>
<div class="content">
<h2>Your content would go here</h2>
</div>
</body>
</html>

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines