Nick
Coder
Here is the updated version of the code 🙂
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Self Project 1 - business</title>
<link rel="stylesheet" href="CSS\styles.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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<section class="phonenumber">
<a href="tel:123456789" title = "call business">+123 456 789</a>
</section>
<span class="socialmedia">
<ul>
<li><a target="_blank" href="http://www.google.com"><img src="images\Social Icons\White\Instagram.png" alt="Instagram Icon"></a></li>
<li><a target="_blank" href="http://www.google.com"><img src="images\Social Icons\White\Dribbble.png" alt="Web icon"></a></li>
<li><a target="_blank" href="http://www.google.com"><img src="images\Social Icons\White\Twitter.svg" alt="twitter logo"></a></li>
<li><a target="_blank" href="http://www.google.com"><img src="images\Social Icons\White\Youtube.svg" alt="Youtube Icon"></a></li>
</ul>
</span>
</header>
<div class="line2">
<section class="logo">
<a>
<img src="C:\Users\kurth\OneDrive\Desktop\coursera\Frontend\project 3\images\Frame.svg" alt="globe earth">
<div class="Webtech"><a target="_blank"href="http://www.google.com">WEB TECH</a></div>
</a>
</section>
<nav class="navigationhome">
<ul>
<li><a target="_blank" href="http://www.google.com">Home</a></li>
<li><a target="_blank" href="http://www.google.com">Pages</a></li>
<li><a target="_blank" href="http://www.google.com">Services</a></li>
<li><a target="_blank" href="http://www.google.com">Portfolio</a></li>
<li><a target="_blank" href="http://www.google.com">Blog</a></li>
<li><a target="_blank" href="http://www.google.com">Contact us</a></li>
</ul>
</nav>
</div>
<section class="hero">
<div class="herocontainer">
<picture class="globe">
<img src="globus richtig.jpg" alt="dj pipcture">
</picture>
<picture class="businessman">
<img src="images/businessman.png" alt="man in suit">
</picture>
<picture class="whitetriangle">
<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="75" viewBox="0 0 1440 75" fill="none">
<path d="M1440 75V0L0 75H1440Z" fill="white"/>
</svg>
</picture>
<span class="unique">The Uniqe Creative </span>
<span class="design">Design Agency</span>
<span class="number01">01</span>
<hr class="strich">
<span class="always">Always on the lookout for the hi-tech advancements. Build not only a <br>
product that can sell well, but a platform through which to deliver it.</span>
</div>
<a target="_blank" href="http://www.google.com"> <button class="startnow">Start now</button></a>
<a target="_blank" href="http://www.google.com"> <button class="learnmore">Learn More</button></a>
</section>
</body>
</html>
CSS:
/*imporved:
- hr instaed of span for vertical line ("strich")
- variables for repeating CSS properties
- correct stylessheet link so when the project is sent, the css sheet is inboud
- unnecessary div deleted (div.head)
- phone number to hyperlink
- changed "navigationhome" for "socialmedia" and rmeoved nav
- added wokring links that open in a seperate tab for all relevant elements
- chnaged all picture path to relative paths
- removed .pages in css because it would be overwritten
- added backup font fmailies
- changed line2 div --> line2 .Webtech to be more specific
- changed .line2 .logo img from50.349 px to 50px
*/
:root {
--color377dff:#377dff;
--weißeFont:#FFF;
}
html {
width: 100%;
}
body {
margin: 0;
}
header {
background-color:#141D28;
width: 100%;
height: 60px;
flex-shrink: 0;
color: var(--weißeFont);
font-family: Poppins, Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 200% */
}
header {
background: #141D28;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
}
header .phonenumber a {
display: inline-block;
padding: 156px;
text-transform: uppercase;
color: var(--weißeFont);
font-family: Poppins, Arial, sans-serif;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 200% */
text-decoration: none;
}
header .socialmedia {
display: inline-block;
padding-right: 250px;
}
header ul {
display: flex;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
header ul li img {
display: block;
padding-left: 16px;
}
/**************************************End of top nav*********************************/
.line2 {
width: 100%;
height: 75px;
flex-shrink: 0;
background: #0C1117;
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
color: var(--weißeFont);
display: flex;
justify-content: space-between;
align-items: center;
}
.line2 .Webtech a {
position: absolute;
left: 200px;
top: 83px;
text-decoration:none;
}
.line2 .navigationhome ul {
display: flex;
align-items: center;
list-style: none;
}
.line2 .navigationhome ul li {
padding-right: 63px;
}
.line2 .navigationhome ul li:last-of-type {
padding-right: 250px;
}
.line2 .navigationhome a {
color: var(--weißeFont);
font-family: Poppins, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 14px; /* 93.333% */
letter-spacing: 0.8px;
text-decoration: none;
}
.line2 .logo {
height: 55px;
padding: auto 64px 12px 0px;
align-items: flex-start;
gap: 14.706px;
flex-shrink: 0;
display: contents;
}
.line2 .logo a {
color: var(--color377dff);
font-family: Poppins, Arial, sans-serif;
font-size: 30px;
font-style: normal;
font-weight: 400;
line-height: 30px; /* 100% */
}
.line2 .logo img {
padding-left: 135px;
width: 50.294px;
height: 30px;
}
/***************************************Hero section*************************/
.hero img {
max-width: 100%;
}
.globe {
position: absolute;
z-index: 0;
}
.businessman {
position: absolute;
top: 137px;
right: 0;
height: 810px;
width: 820px;
z-index: 2;
}
.whitetriangle {
position: absolute;
z-index: 3;
width: 1440px;
height: 75px;
right: 0;
top: 910px;
max-width: 100%;
}
.herocontainer {
position: relative;
}
.herocontent {
position: absolute;
padding-top: 291px;
}
.number01 {
left: 142px;color: rgba(255, 255, 255, 0.13);
font-family: Poppins, Arial, sans-serif;
font-size: 140px;
font-style: normal;
font-weight: 400;
line-height: 180px; /* 128.571% */
position: absolute;
top: 291px;
}
.unique {
color: var(--weißeFont);
font-family: Montserrat;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 110px; /* 220% */
left: 333px;
position: absolute;
top: 291px;
left: 333px;
}
.design {
color: var(--color377dff);
font-family: Montserrat;
font-size: 50px;
font-style: normal;
font-weight: 400;
line-height: 90px; /* 180% */
position: absolute;
top: 381px;
left: 333px;
}
.always {
position: absolute;
top: 531px;
left: 132px;
color: var(--weißeFont);
font-family: Poppins, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 25px; /* 156.25% */
}
.strich {
position: absolute;
top: 316px;
left: 300px;
background-color: #3E50E5;
display: inline-block;
width: 3px;
height: 130px;
border: none;
}
.startnow {
position: absolute;
left: 132px;
top: 775px;
width: 156px;
height: 50px;
flex-shrink: 0;
border-radius: 35px;
background: var(--color377dff);
color: var(--weißeFont);
border: none;
font-family: Poppins, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
}
.learnmore{
top: 775px;
left: 302px;
position: absolute;
width: 166px;
height: 50px;
border-radius: 35px;
border: 2px solid var(--color377dff);
background-color: transparent;
color: var(--weißeFont);
font-family: Poppins, Arial, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16px; /* 100% */
}
body > header > div > nav > ul > li:nth-child(4) > img
{ padding-right: 0px;}
