Solved by Expert Tutors
Quod autem satis est, eo quicquid accessit, nimium est; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid Zeno? Duo Reges: constructio
Solved by Expert Tutors
Question

Need some help with this assignment 3-1 Web Activity: Intermediate CSS Concepts

I will provide all files and complete instructions.logo.gifpenmen.pngsnhulogo.jpg

index.html
Quod autem satis est, eo quicquid accessit,
nimium est;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quid Zeno? Duo Reges: constructio
interrete. Ita ne hoc quidem modo paria peccata sunt. Ait enim se, si uratur, Quam hoc
suave! dicturum. Itaque hic ipse iam pridem est reiectus; Nam ante Aristippus, et ille melius.
Satisne vobis videor pro meo iure in vestris auribus commentatus? Minime vero istorum quidem, inquit.
Hanc quoque iucunditatem, si vis, transfer in animum; Faceres tu quidem, Torquate, haec omnia;
Numquam facies.
Quorum altera prosunt, nocent altera. Negabat igitur ullam esse artem, quae ipsa a se proficisceretur;
At hoc in eo M. An tu me de L. Profectus in exilium Tubulus statim nec respondere ausus; In his igitur
partibus duabus nihil erat, quod Zeno commutare gestiret. Hanc quoque iucunditatem, si vis, transfer in animum;
Sed virtutem ipsam inchoavit, nihil amplius. Ut aliquid scire se gaudeant? Tum Quintus: Est plane, Piso,
ut dicis, inquit. Sed quoniam et advesperascit et mihi ad villam revertendum est, nunc quidem hactenus;
© 2016 Southern New Hampshire University
logo.gif
Mod_3_Instruction.docx
Rubric IT 270 Module Three Practicing Intermediate CSS Concepts
In the first seven videos of the “Styling Your HTML” section of the “Front-End Web Development Quick Start with HTML5, CSS and
JavaScript” module on Pluralsight.com, you watched—and hopefully followed along. These tutorials demonstrated how changes made
to the index.html file and CSS file affect the website content that is rendered in the browser window.
In this exercise, you will begin with the index.html file in the Mod3-Act1 folder and add several additional pieces of content and styles,
based on your watching and understanding of the first seven videos of the “Styling Your HTML” section and the “Front-End Web
Development Quick Start with HTML5, CSS and JavaScript” section. Step 1. Download the IT-270 Supplement Exercise Files zip file if you have not already done so.
Step 2. Navigate to the Mod3-Act1 folder in the exercise files.
Step 3. Drag the index.html file to a blank web browser tab or window—your starting page should look like the figure below and to the
right. Step 4. Return to editing the index.html file in Sublime Text by either using the File menu > Open File command in the program or by
dragging the file from the folder window into the blank Sublime Text window.
Step 5. Complete the following edits and additions in the index.html file: A. Place opening and closing <div> tags around the entire <img> reference, just after the <h1> headline. Add the class attribute of
“fixed” to the opening <div> tag.
B. Directly below the first <img> reference, add another:
<img src=”img/penmen.png” alt=”Penmen logo”>
C. Place opening and closing <div> tags around the <img> reference you just created, and add the class attribute of “floated-image” to
the opening <div> tag.
D. At the start of the last full paragraph (starting with the words “Sed virtutem”), add the following code:
<div class="inline-box"><b>Go Penmen!</b></div>
Step 6. Switching over to your style.css file, create a new class selector called .fixed with the following attributes (which will utilize the
CSS positioning attribute to “fix” the SNHU.edu logo at the lower right corner of the screen):
position: fixed;
bottom 0;
right: 0;
Step 7. Create another new class selector called .floated-image with the following attributes (which utilizes the CSS float attribute to
place the Penmen logo in a similar fashion to the SNHU logo when you first started):
float: left
Step 8. Create another new class selector called .inline-box with the following attributes (which will utilize the CSS display attribute to
place an inline blocked tagline):
display: inline-block;
border: 3px solid red;
width: 100px;
height: 15px
Step 9. Proof your finished work in a blank browser tab or window before submitting your assignment. Your finished work should look
like the figure at right.
Step 10. When you have completed the assignment according to the requirements outlined above, save
your work and zip up the complete “Mod3” subfolder in which you have been working this exercise, and submit it using the assignment
link in Blackboard.
penmen.png
snhulogo.jpg
style.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
} /*=========================================
Main Styles
=========================================*/
body {
font-family: arial;
}
.container {
width: 989px;
margin: 0 auto;
}
.footer {
text-align: center;
}
Thumbs.db
��#ࡱ#�################>###��
#####################################����########�������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
����������������################
###
####### ###
###############�����������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
���������������������������������������������������������������R#o#o#t#
#E#n#t#r#y#################################################��������#############
###################�{�#���#����########2#5#6#_#8#1#5#b#d#6#8#1#7#6#9#e#d#a#3#8##
#######################*###������������########################################ࡱ
###########################################################################�����
�������#########################################################################
###########################################������������#########################
#######################���������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
��������������������������������������������������������������������������������
�������������������������������������������������������########g#######r'7�P#]##
################################################################################
################################################################################
################################################################################
################################################################################
################################################################################
################################################################################
###############g#######r'7�P#]#�PNG
#
###IHDR###�###2#####�$��####sRGB#��#�####gAMA##��#�a#####IDATx^�]
p\ř�G�
%��i����##
�mB�P`#��]��&ࡱ-B��1��#�,b#R
!
f��# ##p8##0#ࡱ
����K�eY�iɺ�f$��u�ysH3#�dK�W�ࡱ~�^w����ࡱࡱࡱࡱࡱ0
���� �&1���(�w#��#�$�$&#&
=�
��6���J���
ࡱ)�#EH��|#�%�ӗ#/u�dA���8�#%NM�[��#��#��#�/�FX�L�o#C#z�l�X�A������~
#�C���chj�4���i���o?a����NW]z#�p�?�D�S�'���{ ?�����
�;#43u#M��"e#0#���MU�#ti�2��[ϝ(=l���MZ<w�t,tP����Z;����8=��#C*W�xs ?�
�:�3c>�OI�������ZO�m��w?#�|Ǔl�4�#\^�H�an���=]Ty���z�JZ�?�#��ࡱࡱc��,�k:My
%�hࡱOi�ࡱࡱࡱv�-�Jj
����6�y#�C��#���oQQU##�8m=�ࡱ�Np�:ࡱ1 ࡱࡱࡱࡱ#EU'�p�#���s���#8���<:�e<�R�R��tv#:ࡱ�#T�
Ϛ�#��C^�A��W��<����`�~!�.���(���U�"��$#W_��Wr��-�#Љ��,�ࡱ��
�^ࡱ ��#��#�M{ࡱF�&�#h�ࡱ&��%=wzB���9��iV�\���g��2�cս#{#4�]��L#�.b�Fq�
���=.����gh��t�?��/�#��d#)�Os�[H
q
*�;Pg+��R���_ࡱ�δ��}8 ࡱࡱ7��Y#)5q#EE)-��G�����T�5#�&##���X��UZ0�|
��0]�\n#�bU���#�<��x�MEm�q�%4g�<��t#���#���"e}�#�o� )o?���?�Q^V\S
#���#M��rRs{#��.�#Ľ�5#�Ӭ�?!~.���8]J�#�?�����Zԝ����?Qgw#�t4�#o �ࡱi�ࡱ|�":�ࡱࡱࡱࡱ ࡱO%T�Q��-k+�x�a+=w#�o��{�#��l��SV�#�Ǩ��uT�#O�#�y�UW##�λ����l>e#
~��k�K2�4�f�����Bn��vM#���C�l���#�!�$���Ӵnӳ~�6��#�#�������,�``��#��#v�$&#
�#O�#�#�@�#�w��Y#q0I�#�>^r�**ʅ��X4;Czx_'#�qI�R՝��ࡱࡱࡱࡱC�#�Ш�t����"tvN##�-��rv� �#��#�##���#��ࡱࡱY�J���/��{.�4��D�,X��##l��3b�`�;f#�~3Ȼ##�0M�s#gC�@6��p��E ?�#�#"!
�M# �;l#�#�.YAK/^�W�T�5�n`2s#`������X��w�^��#�`Rr����!�P���##,�#!^]O�#h��)D1SBg�Մ�(�
ࡱࡱ'#�q0�l�'#����}�_;k<��Z�1+�n����#W#JŬ��Aj.�9#MO�I�x�##�&t��7#�#������Il�V��.�[email protected]��%�����
Y*68X?��ud+�F�c�#!#�L��Lh�#�^y��#ё�#�ŋ.�"����/�pT|�$�0q����'"h��l;# ��#�ό���H�#z�L���cΌyt�m?##�����W3����)ez�������
ࡱࡱ
#��w4�7#Ͽ�2G�/#��X�Xvࡱ�ࡱࡱo
��
P��8qS-���]�/?"�#�#q�,�ࡱࡱY��#X��ZĂ��(!
n��r�"Q{w;=t��$��;�bT�)�ZL�#5�����aк9�{x�y�D�y�#�ª####�yN���##\г4���\�� 2
#�v#s## 7Q2O�V~e��A]S���#8ɭ#a�e��w�m#6�#ol�l#u�vI�;X0h\xY�#�##.
$8��#p��u��#��U�#�n##:��l##��#xh����c�������.��#y����#t|B�Q��#�=P?�#�5�c.#�##
��b##�5���(����#�K##�j��E>���ࡱࡱ�ࡱE�]�������#!A###��##i#�j444�_�_6���#�#V�
ࡱ[U*#���+��#�#���)�C���*##_�PÚo�`##V�>=�#m��D
ࡱࡱX+m�##�#ࡱ�#�/�{r#�<�ࡱY#6��c�PK��ࡱ#����#q��ࡱRN�^ ࡱࡱCVbKk
�$�oyA�>ࡱ�#�G�PO�#����C#�*N�T�U[�$#�
r-(=�R
#�Z�8]������#��#a�T���b*�##Bh##���##0#HeA����t�!�##�=� hg���###so�'BB�P�d4�1&94�/�������.&2*#;^�����z��4�;�(5b�%#G?##PV��_#%�5��##�ŋ
z#.Q�B#<����s
�ࡱࡱ
�9ࡱ`'9#ࡱ'ࡱ;#ࡱ4/ࡱ�~����^$#�Q�##.��b#�#��#Y��r�b�h#�###���e#9��7�����[��0!�>V|
HZ#6*#;P�q -H�b��Y�#����#����b?�L#�ʚr!5z$�]��������#l�v�h�###:��*#�
###�evv
#x#��q��#&�^�B#fs��u��
%q4&�^��#���0^d#��o�����Ȇy#��$Cgo�h��ࡱ#3V=f#����_`�#ZR���ǹ�
ࡱ�Bp
�# ��#���C��7į|
���5'#i0����[��~°ZYWJ.'F#�F#�#��!#�2d#K#`�2eJ#%&M##�#��
��<�����v=�0��#D;qC�����ࡱࡱࡱ"
��
0ࡱࡱ>5ࡱࡱ�d##�#L=�##|Y��5�"4�#?9�##�����!
��Ӡ�W��ࡱf#��ࡱ_��s33�����
#
3��iow�c������w���!#�v#0;NL�+�#�8eGࡱ#Z���#�\#�#�#s
&6\��?{O�#>&�l#�l=�Xt�#��#�mi�Н��4�Z&|##�ˠ7
ࡱC�)�#���5�}�r�k+W�=}��{O#��>����#�5���*�l`#�w*�h#�;w.t�`����i
�b����#&�p#�Ĕ��&���\�h"�
�zD#}z�cugd�#�#ࡱ\�i��#���6�#j����ov�#dR���Y�gR�ࡱࡱos<
� �?���#2ࡱࡱ
�������
{ #on|
���j��t��##? Y�<n�o=6ࡱࡱJj�9��a�j#*���kࡱࡱࡱ#��4#� �s#�<�A�ࡱࡱ#�:@�C�D�

##2�##3Ͻ�#�H�#��'$�#H(`�A�"\ࡱ��+�?{p��#xVࡱࡱ��#9ࡱࡱ��ࡱ6��'�
��#�\�E�m��#`�c�\C+r;�#H#O�NV���'v�;iࡱO��R�X9�I�X#uA��BWࡱ?�:��� ##I6#�@htz�#[email protected]#5 ࡱ�#A��<?��#.Ĭ#�h�C#z�5ࡱࡱࡱ��^h8`Z��/�#��z&�#��#��#�#)�#u�d�]��� ���BX�ࡱࡱ̚� .#sL�#�(#~#N�q#e�#�m��7�x�##0/�I���_\�|p����
ࡱ�m �a��� H�:�l�ࡱࡱࡱ<?
HI�#���'6#�5?��##�z�#����QX�#�4�fLt�ࡱ'�u#�tQqCrx�#��?#;#�#E.D�ru��#o�� #&/��.��l6�m#���È�#
RC��ue��### H��Ē�C�P#�6#�}�0�=�<�!�[email protected]!4��#��n+� ��#�9&�n�#�6��� 7���,���Bu1�!ʕe�
ࡱࡱP�#�_�b�#�#x�;|]�Ih����#�#���n#�,�K² ࡱࡱ%#'X���ࡱ#D�
�=��#_� �:�D��ybl*�ࡱKy;J(91U��g���#UAd;� �g9�}��p�ࡱO�iz�ē##�|���$ko3
��b�@%#�)$*�!
##��T��y�Kࡱࡱࡱࡱh ? Jj{�X#B#�Ti?,� ��Oࡱࡱ#�#�>+��_�±xa��;�xul##�"�Y^3r�c��#�#
����#!?�?Ӳ#���#8Tk�N�\#��ĩɔ��&#�4�4��#Dࡱ
��#��I:# #?p�uU#�I�ࡱࡱ,���lA�@��#�#�#�{\oh �#A���y#�F:;�#|��3�0��`I��i*##�#�p#B/��ࡱࡱU#ˤ��:
{�<9#�1ࡱ�BJHH#��Q�w�*##��~����c�#�>h 4�����
ࡱ V#Md�k�#�#�@�#B�2 ���k���
6R�9��aDT<��E#P�
�$#�|2�EVb�#�#m#��#�&�E9�5'w#ϹP6���h��L111����#���~��h�?
�V��u��d�g�#4�a��&�#�##M#��1�##���{x#d#�c�0�D#>�#�@C��:_�Y�[#�hN�#K��n�n�#N8�#��
��#Fl�#��GI;ࡱࡱ#���M����Sy6�x�###P��[email protected]���#q#��###����##S��)X�:l�}��#1��2���rg��Q
##h����O�#����#�D�,�Q&�#-#�|ࡱ 55����x#��E{#*d��
�/�ࡱF�MK��#Bc/2L���c�oo`K#\sZ�G#*k#�#>
��*��BmS��#�#�#Ap�h�K#��
�#-�|!$�##��d�N�,i2�x#�s
!_#@#�Q#�&��*�M#W����~#l&#tc���!#)�#>�#%###EN�?�
�5;Jt4g#�K=�S#;�RRR(-)]�pD#���#�0#S�RMB�Im�#�I�#�#v|�v��c�W�dy#UࡱQ{w[���%_#L
�E,i�e�g��%=���=�`@�HØ|�@�K�#���H�-r0/A.#1xN�Q
�#�f.��Ӓ��C-~J�|R�H#�s�G)=e�tf#�,#IG�a�&#�l##,%1M�#�!nZ�t��6�<w�>-#*
ol�:ࡱ�#�^`{N#�{�tv##��Y�3;�$4�O#�#j���
ࡱ q5�q#,�by##<�p �#���=��'ɪ������#�#�X#�`)��
�lY2���(�<Nsә�,��N������ğ�#+��=#��+R�����? У
��s�#�W �Ѝmg#��###11��)# #?�*���{$ࡱ:(D�F0lࡱ#�O##�M9�90�J�T�z����#�[email protected]##�!
m4�<���
ࡱ X�0�[email protected]}K#�� G(;7�"�p:8�6���?#�ࡱ#�~�p�#��G+�#�pg�ࡱࡱ#��#&��q�;�#��jƇqNՂ!s7|
�##C�#T�X�2k#RK 09ࡱࡱ�t� <K/^ࡱ���##�p�<m��1*tt��+h�7�#��#�E��d #�Xq�#��"�-����#9�(�N��###��I��=
����Њ�#pDdc��#9�c4Ŝ#���ࡱࡱ
ࡱ=q#����@��x�!9�X�X-s8�G��U�###`##g#!8!H#^�## z��Y�-_|�Aʢ:�7#KdN#R��#ιg��F��#�#&�#zǛh|4#�B��]{���x�#"#��t[�.0�@8�#�-tTtN�C#!#?
�2C���&�#��j�>��!ࡱ���G�,Bc��J##H�ɡ]S�#.��3B ࡱࡱG##ge���O���?���D�m-�t:��##7�D#
�V2�]���Ř�V?ࡱࡱm� #�a;2N�wtv����#ࡱ$�"#�j?�###`##��MࡱࡱB�cI�k�l��z�#ࡱ5�Jd�L[�ࡱ#
�)�GWiЈ�#�@#�~4 ࡱ_#�{�cq���V"#���Y#�"-#�Ef��#��"�m7����T ࡱh#v��O�%ƥJ#�}#!
�5lB���"#�_m�&##�#2�#� 9Y#��J�iRp���C>g#�S#�U� ��ug�h2� ��T��#�D��h#�#\�|�#=zy##�#|�a# 6�@#�
%�Q0#Џ�##��#�(#�#�U#4�#$�����\e�HB�#�#��a��##�f���#�lPntv&3��[�/��Ȍ�K�J�A#���Ch�
;���##$#���v5�@�pfP6�s�#�#ࡱqYP" �Q,#:�5�V���:7�~�#�x#w�w��s#Z#)�l##'W���ࡱࡱ#� S
%8wp�#D�I��h#�Hx�#�[�##.������#w�!���ࡱࡱh���EI��`#^�� 64��Dh#5����x�Aࡱ�\#���
##���ʷ>�#
8�@�<��
ࡱࡱࡱࡱࡱ1��[email protected]��#�E�0#tY�#���#Q�#�}��Y#�\#�ʁ�i���uW����R#}LȞ?� � #
ࡱm#��:s>�###c#�p��n�ђ�##Ȯ=�
�#��!+W+kM���#�K�]?�/#�G�##�t>�|��#>t�|�e��3#|
�#�x�jࡱO2�9c�is�,>�#aC�V&h##������####�*�,�Pb�EaP���#f:�Q##���|
#ࡱࡱ.]��~�S��#�#���5?9#�B<�`�#�\h�#�%Sʂ�#Il�C>#F#� ��#? q~e��We#�#��L��zEX#m�#�A"+#�#�A��#\�I�_Ý�
��##�ll�#ࡱ4`_��/o[#ࡱ
z�#?����
#$4���lyࡱ#��Il���Xe�Ql��ʠ��!##E�h#���]�<C#����O�RZ�G#�z_v��^#1O#�k��5##��qt�
���ck�,#�Φw�#N��ZF
��
��#�P�##ࡱࡱࡱ �G�fL�##�@#���#�#���#����}�#q ? [email protected]#� �q2�āS>�#�����ࡱ��
�( �,�� yJ�x���
ࡱm�ࡱࡱࡱࡱX#$BOb#�#��#����#�#�rL#���=####IEND�B`�##################################
################################################################################
###############
Sign up to view the entire interaction

Step-by-step answer

at, ultrices ac magna. Fusce dui lectus, congue vel laoreet ac, dictum vitaeacinia pulvi

e vel laoreet ac, dictum vitae odio. Donec aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia pulvinar tortor nec facilisis. Pellente

m ipsum dolor sit amet, consectetur adipiscing elit

css.docx
pulvinar tortor nec facilisis. Pellentesque ipiscing elit. molestie consequat, ultrices m ipsum dolor sit amet, consectetur adipiscing elit. llentesque dapibus effici molestie c llentesqu ng e

Subscribe to view the full answer

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question
Let our 24/7 Web Design tutors help you get unstuck! Ask your first question.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes