Answered: nd the picture position is wrong. i…

Principles of Information Systems (MindTap Course List)

13th Edition

ISBN:9781305971776

Author:Ralph Stair, George Reynolds

Publisher:Ralph Stair, George Reynolds

Chapter1: An Introduction To Information Systems

Section: Chapter Questions

Problem 1WE

See similar textbooks

Related questions

Question

hi i need help in html css. i need to copy the one picture on the left with black background as well as the justified center postition of the picture. my work is the one with wednesday. as you can see it has white background and the picture position is wrong. i have 1 index.html file and 2 css: style.css and utilities.css

here is the source code

// this is index.html

<!DOCTYPE html>

<head>

rel="stylesheet">

<title>Wednesday Tech Solutions</title>

</head>

<body>

</div>

<div>

<a href="#">About</a>

<a href="#">Services</a>

</div>

<button class="btn btn-primary">Contact</button>

</div>

</nav>

</div>

</header>

</div>

<h6>Wednesday Tech Solutions</h6>

<h1>We are Web<br> <span>Developers</span></h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque illum nam nobis, minima

laudantium fugit sequi nostrum quod impedit, beatae necessitatibus praesentium optio labore

nemo!

</p>

<div>

<button class="btn btn-secondary">DOWNLOAD CV</button>

</div>

</body>

</html>

//this is style.css

@import 'utilities.css';

:root{

--primary: rgb(29, 221, 189);

--bgDark: rgb(12, 12, 12);

--white: rgb(250, 250, 250);

--secondary: rgb(0, 59, 50);

--bgLight: rgb(190, 181, 181);

}

padding: 0;

margin: 0;

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

}

header{

background-color: var(--bgDark);

clip-path: polygon(0 0, 100% 0, 100% 100%, 73% 94%, 0 100%);

}

header nav .left a{

color: var(--white);

text-decoration: none;

margin-right: 2rem;

text-transform: uppercase;

transition: all .2s ease;

}

header nav .left a:hover{

color: var(--primary);

}

header nav {

padding: 2rem 0;

}

header nav .logo{

margin-right: 3rem;

}

body{

font-family: 'Poppins', sans-serif;

}

.container{

max-width: 1152px;

padding: 0 15px;

margin: 0 auto;

}

.hero{

padding-top: 2rem;

padding-bottom: 3rem;

}

.hero .left img{

width: 400px;

}

.hero .right {

color: var(--white);

margin-top: -7rem;

}

.hero .right h6{

font-size: 1.6rem;

color: var(--primary);

margin-bottom: 0.5rem;

}

.hero .right h1{

font-size: 4rem;

font-weight: 100;

line-height: 1.2;

margin-bottom: 2rem;

}

.hero .right h1 span{

color: var(--primary);

}

.hero .right p{

line-height: 1.9;

margin-bottom: 2rem;

}

//this is utilities.css

.flex{

display: flex;

}

.items-centre{

align-items: center;

}

.justify-between{

justify-content: space-between;

}

.justify-center{

justify-content: center;

}

.justify-right{

justify-content: right;

}

.btn{

padding: 0.6rem 2rem;

font-size: 1rem;

font-weight: 600;

border: 2px solid transparent;

outline: none;

HOME
ABOUT
SERVICES BLOG MORE
Akshat Sharma
I'm a Web
Developer
CONTACT
Lorem ipsum dolor sit amet consectetur adipisicing elit Doloremque
um nom nobis, minima laudantium fugit sequi nostrum quod impedit,
beatae necessitatibus praesentium optio labore nemol
DOWNLOAD CV

9
11/
VI
HOME
ABOUT
SERVICES
BLOG
MORE
Wednesday Tech Solutions
We are Web
Developers
DOWNLOAD CV
CONTACT

Expert Solution

Step by step

Solved in 3 steps

SEE SOLUTION Check out a sample Q&A here

Knowledge Booster

Learn more about

Need a deep-dive on the concept behind this application? Look no further. Learn more about this topic, computer-science and related others by exploring similar questions and additional content below.